soscripted / sox

Stack Overflow Extras: a userscript for the Stack Exchange websites to add a bunch of optional toggle-able features
http://stackapps.com/q/6091/
MIT License
72 stars 15 forks source link

Why is there always a delay of around 3-4 seconds in loading SOX even after the webpage has fully loaded #325

Closed GaurangTandon closed 6 years ago

GaurangTandon commented 6 years ago

Installed Version: 2.1.13DEV Environment: Tampermonkey

I am on a slow internet, if that matters, but I've been using more than a dozen SE userscripts since past several months, and SOX is the first to be delayed for so long even after the page has fully loaded.

Why's it like so? What can be done to reduce the lag time?

shu8 commented 6 years ago

Honestly, quite a few of the features haven't been optimised and are quite dirty.

I tried a while ago to do stuff like common event listeners for the features so each feature didn't create its own listener to do stuff etc. but it didn't do that much.

Hopefully, one day, I'll go through and try to clean some features up, but I just don't have enough time atm :/

GaurangTandon commented 6 years ago

Hmm, no, I wasn't talking about some of the individual features, I was talking about the overall SOX script. The gear icon in the topbar appears at least 3-4 seconds after the page load. I was just worried because, for example, if I've hidden the community bulletin, then I get to see it for the first time the page loads, and then it suddenly disappears (after SOX loads), which is a kinda jarring experience.

It's okay though, the rest of the SOX features are excellent, so it's not really a big deal, but do look at it once you've some free time :)

Update: I just noticed that the loading of Tampermonkey itself is delayed by 3-4 seconds after the page load. Hence, not just SOX, but all userscripts are affected. (but I noticed only SOX first because it has the most visible effect) I'll debug this problem and get back with more updates shortly.

Final update: disabling SOX makes Roomba Forecaster load even before the page loads (example page you can test on). But, with SOX enabled, both SOX and Roomba Forecaster are delayed to well after the page loads. Apparently, SOX is hooking onto some handlers, and delaying loading for both itself and other userscripts :(

GaurangTandon commented 6 years ago

I just also saw this error in my console:

Tampermonkey: couldn't load @require from URL sox.enhanced_editor.js 
tms_074b7a5c_3e4d_4844_995b_51e03ce12a9c @ userscript.html?id=074b7a5c-3e4d-4844-995b-51e03ce12a9c:4090
shu8 commented 6 years ago

@GaurangTandon I'll have a look at it soon, making some more global listeners for all features might help.

also the error in console is from a deprecated feature, I must have left the require in so I'll get rid of that too

GaurangTandon commented 6 years ago

I must have left the require in so I'll get rid of that too

Seems like that's the issue. Among all the userscripts I currently had, SOX is the only one that has tons of require statements in it. I just noticed that because Tampermonkey gives SOX a unique cloud icon on the dashboard. Digging in, SOX seems to require:

https://code.jquery.com/jquery-2.1.4.min.js
https://code.jquery.com/ui/1.11.4/jquery-ui.min.js
https://cdn.rawgit.com/timdown/rangyinputs/master/rangyinputs-jquery-src.js
https://cdn.rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.5.3/jquery.timeago.min.js
sox.github.js
sox.dialog.js
sox.features.js
sox.enhanced_editor.js

sox.css
sox.dialog.html
sox.features.info.json
sox.common.info.json

So many files! Probably that's why SOX delays in loading on my slow internet :(

Also, I don't understand why:

PS: I am not sure about those ui.js, timeago, hotkeys, and rangyinput files. I doubt they are even necessary (SOX is the first text manipulation userscript out of all those out there that uses rangyInput o.O), but I will check out while refactoring the code later.

shu8 commented 6 years ago

@GaurangTandon If I remember correctly, the jquery import it to work on FF because it didn't used to like to use the jQuery from the website itself

there are so many files because it makes it so much more easy to maintain and develop. It's probably not the reason it delays the script because (at least TM does) they are cached once they are first downloaded, so they shouldn't really need to be fetched again.

about the other ones, I don't remember if they're being used anymore; I'll have a look.

shu8 commented 6 years ago

I had a look, and those files are being used albeit only in a few features; they could probably be rewritten to not need them at some point, but I won't be able to do it anytime soon.

GaurangTandon commented 6 years ago

Could you please list those features out? I might be able to help rewrite them to not require those dependencies.

shu8 commented 6 years ago

@GaurangTandon sure! It'd be great if you had time to!

starting with the easiest probably is kbdAndBullets which uses hotkeys:

$('[id^="wmd-input"]').bind('keydown', 'alt+l', function() {

and

$('[id^="wmd-input"]').bind('keydown', 'alt+k', function() {

just replacing them with a keydown handler on document and checking the keycodes should do it!


timeago is used in quickAuthorInfo

there is a class timeago and it's triggered with $("time.timeago").timeago();.

Not sure how to do this other than polling every few seconds/minutes?


rangyinputs is also used in kbdAndBullets, which uses surroundSelectedText, insertText, and replaceText. I remember looking into this a while back and thought it's a pain to implement to work with Chrome and FF, which is why I used rangyinputs to make it quicker 😆

GaurangTandon commented 6 years ago

I looked into timeago, and I am pretty sure I can't rewrite it into something much more minimal.

I could probably eliminate rangyInputs though. Could you please confirm it's only used in kbdAndBullets and nowhere else?

shu8 commented 6 years ago

@GaurangTandon yes, it's only in kbdAndBullets! :)

GaurangTandon commented 6 years ago

Great, now we're only with jQuery, jQuery UI, and timeago - each of which I find difficult to reduce atm. Might revisit this later, but closing for now. I'll see if the delay arises again.