-
-
Notifications
You must be signed in to change notification settings - Fork 551
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
home / front screen loading slow/incomplete (Audit please /rewriting our index.html. Etc.) #1803
Comments
Hey, I can do this task |
hi! @Atesfahun awesome , looking forward! thanks for caring! (assignments aren't required or exclusive as it is still unlikely here that two people do the same thing at the same time) |
@ImprovedTube Got it, I've identified the optimizations needed. I'll be working on async/defer loading for scripts, potential stylesheet merging, and exploring preloading critical resources to enhance page loading speed. |
thanks for caring @AbhinavGoel9! yes, we can have a build script for all CSS and JS to be in one script which should usually only save a few ms. not sure if am missing something. |
thanks @AbhinavGoel9! sorry, not sure it helps. (this was undone: https://github.com/code-charity/youtube/pull/1857/files ) this is the only alert i get from the scripts: code-charity/SATUS#10 |
let me know if you see this again |
Cant reproduce. Extension popup loads fine with all scripts in head and all scripts in body. But if there would be a problem here, it would be the other way around. Moving scripts to head would introduce a bug (browser stops parsing while executing the script, can execute before body is created), and moving them to body would fix it. The main thing that happens when you move scripts to head is you make the browser parse and execute them serially one after another before whole html document is loaded and interpreted. This means that Lines 3 to 4 in 7014a79
is being executed before document.body exists at all. This means its possible for Line 25 in 7014a79
thus Line 800 in 7014a79
thus Lines 267 to 268 in 7014a79
to also execute before document.body has been created and crash. This will be non deterministic and depend on system speed and browser used. Line 25 in 7014a79
to execute before all the other .js files loaded with contents of the menu - this could result in partially loaded menus.
keeping scripts in body ensured document.body already existed when executing satus.render()
Can you trigger this error, right click on the resulting non working extension popup, open devtools and copy whats in the console.log? |
This is the best thing that can be done for fast nd reliable loading with no weird timing issues. Combining can be done during the build process, so source code in github looks just like now with everything separated into its own files, but extension ships with only one file called index.html containing <script> tag with concatenated contents of all of those: |
for example this will never have timing problems and will always load reliably: all .css bundled in html, all .js bundled into one file. Optimally .js would be inlined, but that requires signed file in manifest so I didnt bother. Trivial build script:
just requires index.html to be divided into two parts index1.html
index2.html
Also there is no need for "...asking your browser what settings you made here before..." to ever be present because there will never be any delay. |
Hi, our
index.html
includes 30 tiny files (css & js) and sometimes loads blank / white for up to 10 seconds.. ( - thats only if you test on an old machine with busy ram / IO. Still this should not happen at all. The html and css can appear and be rendered instantly. If any JS runs, that can be afterwards) - While this issues might "only" cost less than 100 000 * 0.x seconds in human time per day (still a lot), it still looks bad as a first impressions and might hold back the whole project the most. (even if more importantly the original author paid a lot of attention to optimize code running on YouTube)For reproducing the error you can move <script> tags back to the <body>
( I assume the original author had the script tags in the <body> section not to block half the page from appearing already, however this step wasn't finsihed, because once the <div class="satus-base is inserted already, in the middle of the <body, then the remaining scripts (=buttons) wont appear anymore (hence for now i moved them all to the <head>452b0dc )
youtube/menu/index.html
Lines 14 to 44 in 79de20d
thanks!
The text was updated successfully, but these errors were encountered: