search

ctrlcctrlv / infinity

A vichan fork permitting users to create their own boards
Other
318 stars 149 forks source link

Use InstantClick to improve the perceived performance #173

Open fourfivesix opened 9 years ago

fourfivesix commented 9 years ago

http://instantclick.io/

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

fourfivesix commented 9 years ago

I'll begin working on this.

czaks commented 9 years ago

i can try to work on it tomorrow or in two days, because i believe it will involve lots of script changes and incompatibilities.

fourfivesix commented 9 years ago

@czaks yeah, I've been looking in this in the past couple of hours. Every ready() event needs to be encapsulated in

InstantClick.on('change', function() { ready() });

Also, the site turns into a one-page app, so pages that use separate CSS like boards.php need to be changed to use one single sitewide CSS. I still don't know if this will break the style chooser, probably not.

duanemoody commented 9 years ago

In general most event handlers should be abstracted to .on() wrapped to a page level container object, mainly because it reduces the number of bindings drastically and automatically handles new content being dynamically inserted without having to rebind events.

czaks commented 9 years ago

otoh, this would degrade performance when actually dispatching the events, am i right?

duanemoody commented 9 years ago

If you're responding to me, no, because delegation leverages the event bubbling that's already baked into how browsers process events. It improves performance because it avoids clogging the DOM with potentially thousands of bindings.

https://news.ycombinator.com/item?id=7201353 Read the comments and the responses from the developer. As someone who's been doing web dev since 1999, my opinion is that AJAX is a great tool for backend form processing and feed retrieval, but as a complete replacement for a navigation stack, you're walking into a minefield.

fourfivesix commented 9 years ago

My idea: 1) Make all the JS and CSS equal for all pages; 2) Make every script bind to onready(handler) from main.js; 3) Load every script only once in the first pageload with the data-no-instant attribute; 4) Every time the page changes, call ready() thus firing every js. Most of them will quickly return false because they're not on the right page;

@czaks would this degrade performance? @duanemoody what could go wrong? We can whitelist just a set of "safe" links, and it also only works on GETs.

I imagine that we would provide an option in the Options menu allowing the user to disable it.

The main reason for even investigating InstatClick is that there is currently a lot of complaints about 8chan's performance and this would cheaply improve it.