javascript - About jquery's load() synchronization blocking

Question

Now we need to load the header and footer of the page separately in a main page. The performance of using iframe is not good, and the pure html page cannot be used to directly load the page using the include method of php. I can also import the templates of frameworks such as React and angular. I haven't learned it before, so after much deliberation, I can only load it with jquery's load(). The problem now is that the load method will cause the main thread of synchronization to be blocked, and the page experience will be very bad.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Now my question is:
1.Can’t the load method be set to asynchronous loading like the ajax methods $.get or $.post to avoid blocking the main thread? How do I solve the main thread blocking problem caused by load()?
I have read relevant information and it seems that using h5 Worker can avoid main thread blocking. Is this the only way to solve it? I have never used worker.

2. For my needs, in addition to the methods mentioned in my article, how should I solve it in my current situation? Which method in company development is the best to solve the loading of the header and footer?

Welcome everyone to help solve the problem, thank you!

Answer 1

load() loads asynchronously by default and will not cause the main thread to block. So the synchronization blocking problem in the warning is not caused by a single load() here. I later checked the subpage and found that there was <script src="*"> in the subpage. So the external js introduction in the sub-page was removed, and the warning disappeared. So it is a synchronization blocking warning caused by the introduction of external js in load() and sub-pages.

Answer 2

1. The bottom layer of this method calls the $.ajax() method to make an ajax request to the server. Therefore, it is loaded asynchronously by default and will not cause the main thread to block.
. However, because the default is asynchronous loading, this may happen. The main part of the page is displayed first, and then the server-side header and footer data are returned and inserted into the page. As a result, the main part of the page, the header, and the footer are not displayed. If they appear at the same time, they will flash.
2. The situation I encountered is that the header and footer of the page are relatively fixed, so I can make a template page, with the header and footer written in it, and then embed the iframe in the main part of the page, and set the address of the iframe according to the situation. Point to the corresponding specific page.

Answer 3

1Of course.

var html = $.get('xx.yy');
$('selector').html(html);

2. I usually make the head and tail, plus content, to make base.html. When using PHP, it will extend base.html