Move scripts from <head> to the end of <body> #24

ghost · 2020-12-09T01:46:42Z

Page loading enhancement.

ctrager · 2020-12-09T03:38:53Z

I had a javascript issue - I don't remember what it was - and moving the scripts away from body to head helped solve the problem, maybe. I don't remember well. Maybe it was just something I tried that didn't actually help. And it wasn't so much maybe where they were but that the the layout renders the scripts async, so maybe there was a race condition. So, this optimization might be nice, but I doubt whether it actually would make a difference perceptible to a human.

Playing with the app on budoco.net, it's very fast. My experience tells me that the most important speed optimization is to reduce the number of trips between web server and postgres, even if they are on the same machine. Right now, it's very chatty between them. So, for example, just bringing up the create issue form, empty:

SQL 1:/check_user_permissions/ select * from sessions
inner join users on se_user = us_id
where se_id = '46db6f69-dad5-49de-b9d3-c4e15d4724f4'; /*check_user_permissions */
SQL 2:select og_id, og_name from organizations where og_is_active = true union select 0, '[None]' order by og_name
SQL 3:select us_id, us_username from users where us_is_active = true order by us_username
SQL 4:select c1_id, c1_name from custom_1 where c1_is_active = true order by c1_name
SQL 5:select c2_id, c2_name from custom_2 where c2_is_active = true order by c2_name
SQL 6:select c4_id, c4_name from custom_4 where c4_is_active = true order by c4_name
SQL 7:select og_id, og_name from organizations where og_is_default is true order by og_name limit 1
SQL 8:select c1_id from custom_1 where c1_is_default is true order by c1_name limit 1
SQL 9:select c2_id from custom_2 where c2_is_default is true order by c2_name limit 1
SQL 10:select c4_id from custom_4 where c4_is_default is true order by c4_name limit 1
layout_si

The contents of the dropdowns only change if an admin changes them, so they could all be cached at Startup and then we'd make the cache dirty whenever admin updates them, which is almost never.

ctrager · 2020-12-09T03:42:55Z

SQL 1:select i_organization from issues where i_id = 4030
SQL 2:select posts.*, us_username
from posts
inner join users on us_id = p_created_by_user
where p_issue = 4030 order by p_id asc
SQL 3:select pa_id, pa_file_name, pa_file_length, pa_file_content_type
from post_attachments
where pa_post = 48 order by pa_id asc
SQL 4:select pa_id, pa_file_name, pa_file_length, pa_file_content_type
from post_attachments
where pa_post = 49 order by pa_id asc
SQL 5:select pa_id, pa_file_name, pa_file_length, pa_file_content_type
from post_attachments
where pa_post = 50 order by pa_id asc

Here's getting the posts of an issue that has three posts. N+1 problem here. Instead of fetching attachments three times should do it once.

ghost · 2020-12-09T03:52:17Z

For js. Using the method after loading the page.
Otherwise, it is possible that the script has not yet loaded.

$(function() {
   // method call
});

ghost · 2020-12-09T04:08:16Z

SQL 1:select i_organization from issues where i_id = 4030
SQL 2:select posts.*, us_username
from posts
inner join users on us_id = p_created_by_user
where p_issue = 4030 order by p_id asc
SQL 3:select pa_id, pa_file_name, pa_file_length, pa_file_content_type
from post_attachments
where pa_post = 48 order by pa_id asc
SQL 4:select pa_id, pa_file_name, pa_file_length, pa_file_content_type
from post_attachments
where pa_post = 49 order by pa_id asc
SQL 5:select pa_id, pa_file_name, pa_file_length, pa_file_content_type
from post_attachments
where pa_post = 50 order by pa_id asc

select
    posts.*,
    users.us_username,
    post_attachments.pa_id,
    post_attachments.pa_file_name,
    post_attachments.pa_file_length,
    post_attachments.pa_file_content_type
from
    posts
    
    inner join users
    on users.us_id = posts.p_created_by_user
    
    left join post_attachments
    on post_attachments.pa_post = posts.p_id
where
    p_issue = 4030
order by
    p_id asc

ghost · 2020-12-09T04:11:59Z

Something like that?

ghost · 2020-12-09T04:18:08Z

A DataSet can also contain multiple tables.

ctrager · 2020-12-09T04:30:56Z

If you were working with BugTracker.NET source code, then you must know that I know all this stuff.

ghost · 2020-12-09T04:32:19Z

Most likely I don't quite understand the question.

ctrager · 2020-12-09T04:35:07Z

I don't remember asking a question. I don't have a question.

ghost · 2020-12-09T04:38:37Z

SQL 1:/check_user_permissions/ select * from sessions
inner join users on se_user = us_id
where se_id = '46db6f69-dad5-49de-b9d3-c4e15d4724f4'; /*check_user_permissions */
SQL 2:select og_id, og_name from organizations where og_is_active = true union select 0, '[None]' order by og_name
SQL 3:select us_id, us_username from users where us_is_active = true order by us_username
SQL 4:select c1_id, c1_name from custom_1 where c1_is_active = true order by c1_name
SQL 5:select c2_id, c2_name from custom_2 where c2_is_active = true order by c2_name
SQL 6:select c4_id, c4_name from custom_4 where c4_is_active = true order by c4_name
SQL 7:select og_id, og_name from organizations where og_is_default is true order by og_name limit 1
SQL 8:select c1_id from custom_1 where c1_is_default is true order by c1_name limit 1
SQL 9:select c2_id from custom_2 where c2_is_default is true order by c2_name limit 1
SQL 10:select c4_id from custom_4 where c4_is_default is true order by c4_name limit 1
layout_si

The contents of the dropdowns only change if an admin changes them, so they could all be cached at Startup and then we'd make the cache dirty whenever admin updates them, which is almost never.

https://docs.microsoft.com/en-us/dotnet/api/microsoft.extensions.caching.memory.imemorycache?view=dotnet-plat-ext-5.0

ghost · 2020-12-09T04:41:21Z

I don't remember asking a question. I don't have a question.

The question is in its broad sense. No question mark after a sentence. The question may be even if it was not asked. ;)

ghost · 2020-12-09T04:42:15Z

Sorry. I am not a native speaker, so I cannot accurately convey the idea.

ctrager · 2020-12-10T16:15:08Z

done

ghost · 2020-12-10T16:18:43Z

👍

ctrager · 2020-12-10T17:50:47Z

Something exciting happened. I now see the error I had that made me move the scripts into .

Try the "Go To Issue" button.

ctrager · 2020-12-10T18:02:24Z

moved the js that was in head to bottom of body and it works. I guess I don't understand $(document).ready...

ghost · 2020-12-10T18:49:19Z

moved the js that was in head to bottom of body and it works. I guess I don't understand $(document).ready...

$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
https://learn.jquery.com/using-jquery-core/document-ready/

ghost · 2020-12-10T18:55:30Z

Using before jquery is loaded.

ctrager · 2020-12-10T18:56:32Z

Actually, my comment was stupid. I do know what document ready does. I shouldn't have said that. Here's what I should have talked about: https://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page

So, in the past, I had always put libraries and my own <script> tags in head, and never had a problem. You convinced me it's better to put them at the bottom of body, but I guess that means I also need to put <script> in body following <script src=>.

The error I had was that jquery itself hadn't been loaded when my head was calling $(). I think I got it now.

ctrager · 2020-12-10T18:57:47Z

Was my change the correct fix?

ghost · 2020-12-10T19:00:32Z

Yes. Libs then general scripts then specific scripts.

ghost · 2020-12-10T19:01:33Z

And then "Scripts" section.

ctrager added the performance label Dec 9, 2020

ctrager added the refactor label Dec 9, 2020

ctrager closed this as completed Dec 10, 2020

ctrager reopened this Dec 10, 2020

ctrager closed this as completed Dec 10, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move scripts from <head> to the end of <body> #24

Move scripts from <head> to the end of <body> #24

ghost commented Dec 9, 2020

ctrager commented Dec 9, 2020

ctrager commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ctrager commented Dec 9, 2020

ghost commented Dec 9, 2020

ctrager commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ctrager commented Dec 10, 2020

ghost commented Dec 10, 2020

ctrager commented Dec 10, 2020

ctrager commented Dec 10, 2020

ghost commented Dec 10, 2020

ghost commented Dec 10, 2020

ctrager commented Dec 10, 2020

ctrager commented Dec 10, 2020

ghost commented Dec 10, 2020

ghost commented Dec 10, 2020 •

edited by ghost

Loading

Move scripts from <head> to the end of <body> #24

Move scripts from <head> to the end of <body> #24

Comments

ghost commented Dec 9, 2020

ctrager commented Dec 9, 2020

ctrager commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ctrager commented Dec 9, 2020

ghost commented Dec 9, 2020

ctrager commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ghost commented Dec 9, 2020

ctrager commented Dec 10, 2020

ghost commented Dec 10, 2020

ctrager commented Dec 10, 2020

ctrager commented Dec 10, 2020

ghost commented Dec 10, 2020

ghost commented Dec 10, 2020

ctrager commented Dec 10, 2020

ctrager commented Dec 10, 2020

ghost commented Dec 10, 2020

ghost commented Dec 10, 2020 • edited by ghost Loading

ghost commented Dec 10, 2020 •

edited by ghost

Loading