The browser uses a single process when processing HTML page rendering and JavaScript script execution, so when the browser encounters the tag while rendering HTML, it will first execute the code in the tag (if the src attribute is used The loaded external link file will be downloaded first and then executed). During this process, page rendering and interaction will be blocked. </p> <p>...Although there will be blocking, there are still several ways to reduce the impact of JavaScript on performance. </p> <p><strong>1. The location of the script tag</strong></p> <p>When <script> appears in <head>, such as: </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"> <head> <script type="text/javascript" src="js1.js"> ログイン後にコピー When loading multiple js files, the browser will first download and execute the js code, blocking page rendering and resulting in a white screen page (the browser will not render any content on the page until it parses the tag) ), there is no way to preview or interact, which is a very poor user experience. Note: Modern browsers support parallel downloading of resources. When downloading external resources only, will not block other <script> tags, but will block the downloading of other resources. <br /> Downloading JavaScript resources is asynchronous, but executing JavaScript code is still synchronous, which will also cause blocking. <br /> Therefore, placing <script> at the bottom of the <body> tag to ensure that page rendering is completed before executing the script is a relatively common JavaScript optimization method. </p> <p><strong>2. Merge multiple script tags </strong></p> <p>When the browser parses HTML and encounters <script>, there will be a certain delay due to the execution of the script. For external links with src attributes, <script> will be even worse. Multiple HTTP requests will bring more performance overhead. , Minimizing this delay is also an optimization method. Multiple js files can be merged to reduce the number of HTTP requests, reduce the number of three-way handshakes and redundant HTTP header transmission, reduce response time and improve user experience. There are many solutions and tools for merging js on the Internet, which will not be described here. </p> <p><strong>3. Use non-blocking method to download JavaScript </strong></p> <ol> <li>Use the defer and async attributes of the script tag</li> <li>Use dynamically created script tags to download and execute JavaScript code</li> <li>Use XHR object to download JavaScript code and inject it into the page<br /> </li> </ol> <p>3.1. Use the defer and async attributes of the script tag</p> <p>The async and defer attributes are both used to load js files asynchronously, and will not block other browser processes during the process. The difference is that async is automatically executed after loading, while defer needs to wait until the page is loaded before executing. It should be noted that One thing is that these two attributes must be in the <script> tag with the src attribute (external link script) to be effective. Below is the demo:</p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"> <!DOCTYPE html> <html> <head> <title>defer example</title> </head> <body> <script type="text/javascript" src="defer.js" defer> alert("script"); window.onload= function(){ alert("load"); } defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo defer demo
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
