Load array scripts synchronously

fireship-io / flamethrower

A blazingly fast router for static sites

MIT License

2.78k stars 110 forks source link

Load array scripts synchronously #57

Closed nguyenhuylinhdev closed 2 years ago

nguyenhuylinhdev commented 2 years ago

Hi, this PR add function loadScriptSync to replace function replaceAndRunScript

Because when use replaceAndRunScript, script load not synchronous, so sometime it show error because other script not loaded

Use function replaceAndRunScript:

Screenshot_2

Use function loadScriptSync:

Screenshot_3

prowebat commented 2 years ago

I'm experiencing the same issue with the scripts. This pull request works, but the disadvantage is, that each script is loaded sequentially, which makes the page somewhat slower if you have many scripts.

Possible solutions I found:

(not quite elegant): loading all scripts with an xhr and then putting the content directly into a script-tag. this also makes debugging hard.
fire a custom "flamethrower:page:loaded" event after the html is updated. and the scripts should listen to this event and only then execute it's code.

nguyenhuylinhdev commented 2 years ago

Hi @prowebat, I found loadJS and and realize that just add async=false, it work like a charm! So I will close this PR and create new PR tomorrow.

Use function replaceAndRunScript:

Screenshot_2

Screenshot_1

prowebat commented 2 years ago

nice, that worked. and i also found out that you can just set it in the html with async="" (empty value)

hint for the new PR: "newScript.async = false" should be before line 113 (so attributes can overwrite the default false value).

nguyenhuylinhdev commented 2 years ago

Yeah, set async="" in html is worked but I have a problem:

At index.html, if I click to about => it worked (all script in about.html will be load synchronously)
At about.html, if I click refresh on browser => sometime it not worked, because scripts load asynchronously.

link test source code

Screenshot_1

I will continue test it.