Remove JavaScript that blocks rendering and remove javascript

Remove JavaScript that blocks rendering and remove javascript

Personal Original Web site: http://www.phpthinking.com/archives/443

The browser must parse the webpage before presenting it to the user. If the browser encounters an external script that is blocked by the system during parsing, it must stop parsing and download the JavaScript. Each time this happens, the browser adds a network round-trip process, which will lead to a delay in the first time the page is displayed.

Suggestions

We recommend that you use the built-in method to process the JavaScript required for rendering the first screen area, and delay loading of JavaScript required for adding other functions to the webpage until the content of the first screen is sent. Note that you must optimize the CSS sending process to shorten the loading time in this way.

Embedded small JavaScript

If the external scripts are small, you can add them directly to the HTML document. By embedding a small file in this way, the browser can continue to render the webpage. For example, if the HTML document is as follows:

Resourcessmall.jsAs follows:
  /* contents of a small JavaScript file */
Then, you can embed the script as follows:
In this way, you cansmall.jsEmbedded in the HTML document to eliminate external requests to it.
Delayed loading of JavaScript
To prevent JavaScript from blocking webpage loading, we recommend that you use the HTML asynchronous attribute when loading JavaScript. For example:
<script async src="my.js">
If your JavaScript resource uses document. write, It is insecure to use asynchronous loading. We recommend that you rewrite the document. write script to use other technologies.
In addition, when loading JavaScript asynchronously, if your webpage loads scripts that depend on each other, be careful to ensure that your application loads scripts in the appropriate order of dependency.
FAQs

  

 
   

     What should I do if I use a JavaScript Library (such as jQuery? 
   
 
   

     Many JavaScript libraries (such as jQuery) can be used to enhance web pages to add additional interactions, animations, and other effects to web pages. However, most of these actions can be added after the content on the first screen is displayed. Consider whether it is possible to delay the execution and loading of such JavaScript until the webpage is loaded. 
   
 
   

     What should I do if I use a JavaScript framework to construct a webpage? 
   
 
   

     If the webpage content is constructed by the client JavaScript, you should consider whether the relevant JavaScript module can be embedded to avoid additional network round-trip processes. Similarly, rendering on the server can significantly improve the effect of loading the first web page. The method is as follows: Present the JS template on the server and embed the result into HTML, then use the client template after the application is loaded. 
   

  

How to use JavaScript to prevent window closures
Most of the time, when browsing a Web page, we need to consider the situation where users close the window in a few hours, especially when the user has important data that has not been saved, it is necessary for our program to remind users. This can be done by overwriting the window. the onbeforeunload () method is implemented. See the following example: <script language = "javascript" type = "text/javascript" window. onbeforeunload = function (event) {return "Hello" ;}</script when the user presses the close button, the following window is displayed, where "Hello" is the return value, when you click Cancel, the page will not be closed. Only after you click OK. The return value is indispensable, even if it is null, otherwise the page will be closed without any prompts. In fact, as long as the window is called. close () will execute the onbeforeunload () function, so we can know that the window will be executed by pressing the close button. close () function, while window. in close (), window is also called. onbeforeunload () function.

How to remove td in table using javascript
Alert (tds [1]. innerHTML );
Trs. removeChild (tds [1]);
Alert (tds [0]. innerHTML );
Trs. removeChild (tds [0]);

Add the two rows in the middle and check the result.