|
falsereality


Registered: 04/01/13
Posts: 4,112
|
AJAX Smiley Panel Speed Demo
#23566218 - 08/22/16 02:47 PM (7 years, 5 months ago) |
|
|
The smiley panel has been a gripe of mine for a while, it's pretty slow and could be sped up if AJAX was used while eliminating php scripts. This would not only dramatically speed up the load time, it would decrease server side resource use substantially.
The below demo is using javascript to load two xml files (emotions.xml, characters.xml) and populate the "emotions" and "characters" divs with html content. All gif files are being accessed from the shroomery making the delay the same any user (with comparable internet download speeds) would experience.

This is more of a speed demo than anything, styling is arbitrary. A search box would be easy to add and it would function very quickly, as everything is handled by the client in javascript.
|
Byrain

Registered: 01/07/10
Posts: 9,664
|
Re: AJAX Smiley Panel Speed Demo [Re: falsereality]
#23570504 - 08/23/16 08:30 PM (7 years, 5 months ago) |
|
|
Some of us have this in our hosts file...
Code:
127.0.0.1 ajax.googleapis.com
|
falsereality


Registered: 04/01/13
Posts: 4,112
|
Re: AJAX Smiley Panel Speed Demo [Re: Byrain]
#23571904 - 08/24/16 05:35 AM (7 years, 5 months ago) |
|
|
Quote:
Byrain said: Some of us have this in our hosts file...
Code:
127.0.0.1 ajax.googleapis.com
I'm not using jquery, just javascript. I'm also not using an external library.
|
Ythan
ᕕ( ᐛ )ᕗ


Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands
Last seen: 46 minutes, 3 seconds
|
Re: AJAX Smiley Panel Speed Demo [Re: falsereality]
#23572198 - 08/24/16 08:41 AM (7 years, 5 months ago) |
|
|
First of all, thanks! I wish all feedback came with actionable suggestions and a video example. It's obvious you put a lot of thought into this. Keep that shit up and I may start bugging you to come code for us. 
But, without examining the actual demo code, it's hard for me to tell what speed increase you're referring to. I live in the middle of nowhere and have shitty DSL so I'm used to things loading slowly. Yours is obviously faster than my experience, but I don't get where Ajax comes into play. Are you referring to the fact that all images are shown at once and can be scrolled through, instead of having to make a request to our server to expand a category? It looks good in your demo, but if you actually try to add all our smileys I think you'll see it quickly slows to a crawl even with modern hardware and browsers. (It's a total of 188MB of images across 2,479 files.) Shit, it would literally freeze and glitch out the rendering in versions of IE before 8 unless we kept things split up. The reaction category is the worst offender but all the animations have a pretty large footprint.
I can see how we could possibly speed up the filtering of smileys when you start to type in a name, by doing it client-side instead of server-side. Our implementation is from when web browsers and consumer hardware in general was a lot slower, and it might now make sense to offload some of the work to the user's computer (although with mobile devices, that's not necessarily a given). However, that doesn't look like what you're demonstrating in the video and I feel like I'm missing what you're going for here. Would you be willing to take a little more time and explain? Either way, it's always a pleasure to get this kind of detailed feedback, so thanks again for going to the trouble and I look forward to getting some clarification.
|
luvdemshrooms
Two inch dick..but it spins!?


Registered: 11/29/01
Posts: 34,247
Loc: Lost In Space
|
Re: AJAX Smiley Panel Speed Demo [Re: Ythan]
#23572424 - 08/24/16 10:27 AM (7 years, 5 months ago) |
|
|
Perhaps simply getting rid of any infrequently used graemlins. Say any not used 6 times a month?
-------------------- You cannot legislate the poor into prosperity by legislating the wealthy out of prosperity. What one person receives without working for another person must work for without receiving. The government cannot give to anybody anything that the government does not first take from somebody else. When half of the people get the idea that they do not have to work because the other half is going to take care of them and when the other half gets the idea that it does no good to work because somebody else is going to get what they work for that my dear friend is the beginning of the end of any nation. You cannot multiply wealth by dividing it. ~ Adrian Rogers
|
Ythan
ᕕ( ᐛ )ᕗ


Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands
Last seen: 46 minutes, 3 seconds
|
|
That could actually work pretty well, and it might be a good idea even disregarding performance considerations. But it kind of feels like a technical failure though. I'm sure there's some way to get an interface like in the OP, even with a large number of images... probably using lazy loading and freeing images which aren't currently being displayed. It would just take a full rewrite. I'll probably try and combine this with the ongoing project to improve mobile compatibility since the smiley panel will need to be re-imagined anyway.
|
falsereality


Registered: 04/01/13
Posts: 4,112
|
Re: AJAX Smiley Panel Speed Demo [Re: Ythan]
#23572858 - 08/24/16 01:37 PM (7 years, 5 months ago) |
|
|
Quote:
Ythan said: First of all, thanks! I wish all feedback came with actionable suggestions and a video example. It's obvious you put a lot of thought into this. Keep that shit up and I may start bugging you to come code for us. 
But, without examining the actual demo code, it's hard for me to tell what speed increase you're referring to. I live in the middle of nowhere and have shitty DSL so I'm used to things loading slowly. Yours is obviously faster than my experience, but I don't get where Ajax comes into play. Are you referring to the fact that all images are shown at once and can be scrolled through, instead of having to make a request to our server to expand a category? It looks good in your demo, but if you actually try to add all our smileys I think you'll see it quickly slows to a crawl even with modern hardware and browsers. (It's a total of 188MB of images across 2,479 files.) Shit, it would literally freeze and glitch out the rendering in versions of IE before 8 unless we kept things split up. The reaction category is the worst offender but all the animations have a pretty large footprint.
I can see how we could possibly speed up the filtering of smileys when you start to type in a name, by doing it client-side instead of server-side. Our implementation is from when web browsers and consumer hardware in general was a lot slower, and it might now make sense to offload some of the work to the user's computer (although with mobile devices, that's not necessarily a given). However, that doesn't look like what you're demonstrating in the video and I feel like I'm missing what you're going for here. Would you be willing to take a little more time and explain? Either way, it's always a pleasure to get this kind of detailed feedback, so thanks again for going to the trouble and I look forward to getting some clarification.
Anytime! If I find some other areas that could be improved I'll post another thread, but for a site of this size it's working pretty damn well!
Ajax comes into play to circumvent the client from making this request in javascript (shroomery code in "forums/includes/smileypanel-1245863169.js"):
Code:
var orig,txt,last,srch,req,sc;
function send(f){ document.getElementById("loading").style.visibility="visible"; if(window.XMLHttpRequest){ req=new XMLHttpRequest(); }else{ req=new ActiveXObject("Microsoft.XMLHTTP"); } if(req){ req.onreadystatechange=get;req.open("POST","smileypanel.php",true); req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); req.send("f="+f); } }
By using xml to structure smiley categoris, like so:
(actions.xml, parsed from raw text data) Code:
<?xml version="1.0"?> <actions><action>whiteflag</action> <action>takingnotes</action> <action>begger</action> <action>hi</action> <action>leaving</action> <action>facepalm3</action> <action>headbang</action> <action>bow2</action> <action>dancer</action> <action>rockon</action> <action>shakefist</action> <action>headbanger</action> <action>whoo</action> <action>luvdemshrooms</action> <action>raver2</action> <action>dealwithit2</action> <action>lighter</action> <action>munchies</action> <action>discodance</action> <action>dancing</action> <action>runaway</action> <action>willynilly</action> <action>icanthearyou</action> <action>bow</action> <action>bowdown</action> <action>muslimprayer</action> <action>hypnotic</action> <action>waits</action> <action>whip2</action> <action>stirthepot</action> <action>ohwell</action> <action>justdontknow</action> <action>shrug</action> <action>shrug2</action> <action>mypleasure</action> <action>hatsoff</action> <action>strokebeard</action> <action>strokebeard2</action> <action>strokebeard3</action> <action>confused2</action> <action>wave</action> <action>shakingfist</action> <action>salute</action> <action>levitate</action> <action>ignorethetroll</action> <action>chew</action> <action>backflip</action> <action>moon</action> <action>bluemoon</action> <action>oldman2</action> <action>oldman</action> <action>punish</action> <action>punish2</action> <action>fart</action> <action>thebird</action> <action>flipthebird</action> <action>stonedjerk</action> <action>rabble</action> <action>protest</action> <action>crymeariver</action> <action>jamming</action> <action>hairmetal</action> <action>drumming</action> <action>rimshot</action> <action>toast</action> <action>irishtoast</action> <action>skol</action> <action>bartender</action> <action>typing</action> <action>popcorn</action> <action>patriot</action> <action>cheer</action> <action>congrats</action> <action>tickle</action> <action>leafromp</action> <action>plot</action> <action>voodoo</action> <action>boxing</action> <action>sleeping</action> <action>sleep</action> <action>drinkcoffee</action> <action>goodmorning</action> <action>brushteeth</action> <action>5moreminutes</action> <action>cannon</action> <action>assimilate</action> <action>coke</action> <action>sip</action> <action>abduction</action> <action>vanishing</action> <action>takeatissue</action> <action>chaingang</action> <action>vineclimb</action> <action>tokeeporder</action> <action>headbang3</action> <action>fishing</action> <action>bouncey</action> <action>loogie</action> <action>mjdance</action> <action>wetself</action> <action>liar</action> <action>sarcasticclap</action> <action>kthxbye</action> <action>groove</action> <action>admin</action> <action>solved</action></actions>
and loading the actions graem array with javascript with this javascript function:
Code:
function actions(){ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200){ constructA(xhttp); } }; xhttp.open("GET", "http://localhost:8888/sideproject/actions.xml", true); xhttp.send(); } function constructA(xml){ var imgPath = "https://files.shroomery.org/smileys/"; column0a = ""; var i; var xmlDoc = xml.responseXML; var x = xmlDoc.getElementsByTagName("action"); for (i = 0; i <x.length; i++) { var emotion = x[i].childNodes[0].nodeValue; column0a += "<div id='action'><img src='" + imgPath + emotion + ".gif' alt='" + emotion + "'></div>"; } document.getElementById('column0a').innerHTML = column0a; } function onload(){ actions(); }
The "speed throttle" is then defined by server resource read speed, and not server processor/ram resources.
I'll refactor this code to look and behave more like the standing panel, loading all images in all categories at once definitely isn't what I was getting at. Limiting the amount of images loaded is easy to do by using a dynamic variable instead of x.length; ex. | for (i = 0; i <20; i++) |. On the click of a div all images in a category could be loaded by using the original array length.
I'll upload the full code when it's polished, but it offloads 90%+ of the work onto the client's computer.
|
|