Analysis on slow loading of JS pages-go

Cleverly solve the problem of slow page Loading Caused by JS content calling 0:17:00

3. Recommendation

Many content management systems and Forum systems provide JS content calling functions. In fact, using js to call content is the least scientific method, which not only affects Seo, but also causes a "card" Phenomenon During page loading. However, this method is often used. So I had to find a solution to the "card" problem.
I. Symptom Analysis

Here is an example of a phenomenon. For example, railway portal Network
In order to display the Forum content, the homepage adopts the JS call method. Because the Forum uses the dvbbs program, this program provides the JS homepage calling function in the background. After setting the call in the background of the forum, you can insert the generated JS call code to the corresponding location on the homepage of the website. Currently, the homepage of the railway portal network calls the content of the Forum through Js. They are: recruitment information, railway papers, and railway materials. Since the homepage is generated statically, loading is relatively fast. However, during browsing, we still find that every time the page is loaded into the above three regions, the page will be "stuck". Sometimes, when the website system is busy, it may even get stuck, as a result, the following static content cannot be displayed, which affects the user experience.
Ii. Solutions

So how can we solve this problem? Of course, the most direct method is to use other methods instead of JS calls, but in this way, a large number of programs need to be modified. Second, can I load the static content of the page before processing these JS calls? In this way, at least loading of the entire page will not be affected because of the slow loading of some JS calls. Yes. So let's clarify the idea: Let the JS call finally load. The procedure is as follows:
1. Add <span> at the end of the homepage template and set the style to display: none. Set a different ID for each <span>. Example: <Span
Style = "display: none ;"
Id = "tmpjsnews"> </span>
2. Move all the call statements in the JS content calling area of the homepage template to the <span> added just now at the end of the page. Set a different ID for each element of the JS content calling region. Assume that the ID is set to "jsnews", and enter "content loading..." in the region.
3. Add the following JS statement after the newly added <span> at the end of the page:
<Script
Type = "text/JavaScript">
Document. getelementbyid ("jsnews"). innerhtml = Document. getelementbyid ("tmpjsnews"). innerhtml;
</SCRIPT>
The preceding statement adds multiple lines based on the number of JS calls. The ID of getelementbyid corresponds to the ID set above. Finished.
Iii. Principles

After the preceding modification, the first part of the page is changed to static content. In the past, all the regions called by JS became simple Chinese characters "the content is loading. Therefore, it can be loaded smoothly without being stuck. The page may be stuck only when several hidden <span> elements are added to the end of the page. However, all other content on the page is loaded, therefore, even getting stuck has little impact. After the JS call in <span> is loaded, the newly added JS statement automatically copies the content in <span> to the region where the call content needs to be displayed, and Replace "the content is being loaded.... The page is loaded.