PaperStrike
commented
3 years ago Execute order is still a problem in the group method. Imagine an external script B, which is supposed to be evaluated later than A, got a fetch error before A is fetched - the other scripts in the group of B get evaluated ealier.
So I keep digging and got a fourth method. It doesn't group the blocking scripts, but combine or chain the evaluate promise according to whether the script is external.
This approach seems to have the same advantage as the group method while providing a more reliable execute order.
package-lock.jsonfrom GitPR Type
(no functional changes, no api changes).What is the current behavior?
Scripts execute in wrong order when external and inline ones mixing together.
Setting
asynctofalsewill only make external scripts be executed in order. Inline scripts, as the standard describes, will be executed immediately when inserted. Pjax hasn't write something for the mix of them.Dependencies not up to date.
Code style not fit NexT one.
What is the new behavior?
Execute them in right order.
There are three methods I considered. Edit: See https://github.com/next-theme/pjax/pull/6#issuecomment-830816632 for newest solution.
The first method is easy but it will slow the fetch. The second may solve some problems, but doesn't contribute to a right order strictly speaking. For the third method, it doesn't affect the parallel fetch and contributes to a right order.
(The fetch flow graph in a test)
I was worried about the execute order between groups. Fortunately, the callback of a external script's load event is called before the next external script can be executed. Appearently I decide to use the group method. In tests, it behaves almost the same as the initial loading of the page.
Update dependencies.
Use @next-theme/eslint-config to lint JS files.
Other information
Browser Compatibility