Home | Community | Message Board


This site includes paid links. Please support our sponsors.


Welcome to the Shroomery Message Board! You are experiencing a small sample of what the site has to offer. Please login or register to post messages and view our exclusive members-only content. You'll gain access to additional forums, file attachments, board customizations, encrypted private messages, and much more!

Shop: Kraken Kratom Red Vein Kratom   PhytoExtractum Maeng Da Thai Kratom Leaf Powder

Jump to first unread post Pages: 1
Invisiblefalsereality


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.


Extras: Filter Print Post Top
InvisibleByrain

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



Extras: Filter Print Post Top
Invisiblefalsereality


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.


Extras: Filter Print Post Top
OfflineYthanA
ᕕ( ᐛ )ᕗ
Male User Gallery

Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands Flag
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. :wink:

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.


Extras: Filter Print Post Top
Invisibleluvdemshrooms
Two inch dick..but it spins!?
 User Gallery

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


Extras: Filter Print Post Top
OfflineYthanA
ᕕ( ᐛ )ᕗ
Male User Gallery

Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands Flag
Last seen: 46 minutes, 3 seconds
Re: AJAX Smiley Panel Speed Demo [Re: luvdemshrooms]
    #23572470 - 08/24/16 10:44 AM (7 years, 5 months ago)

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.


Extras: Filter Print Post Top
Invisiblefalsereality


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. :wink:

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.


Extras: Filter Print Post Top
Jump to top Pages: 1

Shop: Kraken Kratom Red Vein Kratom   PhytoExtractum Maeng Da Thai Kratom Leaf Powder


Similar ThreadsPosterViewsRepliesLast post
* polls & ajax Krishna 1,101 6 01/13/07 07:54 AM
by HELLA_TIGHT
* searchable græmlin panel Krishna 918 5 10/28/06 06:02 PM
by Infrared
* Have you guys considered AJAX Chat? Mafeki 473 3 01/01/13 06:12 PM
by Mafeki
* YOU NEED THAT COOL VB AJAX FEATURE.... theuser 977 3 05/12/07 06:37 AM
by theuser
* New Related Threads Panel. Hanky 1,518 17 05/02/07 11:31 AM
by Dexter_Morgan
* Problem with the smiley panel
( 1 2 all )
RESTLESS 2,733 28 11/07/05 09:39 PM
by RESTLESS
* user-customized smiley panel? eric_the_redS 2,013 19 09/10/06 02:27 PM
by Shmoppy McGillicuddy
* how about a custom instant smileys panel? stefan 1,381 11 05/27/06 08:59 AM
by Diploid

Extra information
You cannot start new topics / You cannot reply to topics
HTML is disabled / BBCode is enabled
Moderator: Ythan, Thor, Seuss, geokills
528 topic views. 0 members, 3 guests and 4 web crawlers are browsing this forum.
[ Show Images Only | Sort by Score | Print Topic ]
Search this thread:

Copyright 1997-2024 Mind Media. Some rights reserved.

Generated in 0.025 seconds spending 0.007 seconds on 14 queries.