页面加载完成后加载脚本文件
When you think of improving page load performance, you try to optimize the back-end code, database connections, and so on. But one of the easiest ways to improve the page load speeds is by making some small adjustments to how you load the JavaScript using the script tag in the HTML page.
当您考虑提高页面加载性能时，您尝试优化后端代码，数据库连接等。 但是，提高页面加载速度的最简单方法之一是对HTML页面中使用script标记加载JavaScript的方式进行一些小的调整。
When you load JavaScript into the HTML page, you add the script tag in the head section of the web page. There is a problem here, but to have a better grasp of it, you need to understand how a web page renders.
当您将JavaScript加载到HTML页面中时，您可以在网页的顶部添加script标记。 这里有一个问题，但是要更好地理解它，您需要了解网页的呈现方式。
When the browser opens a web page, it starts to render the page tag by tag and begins to construct the DOM. And whenever the parser sees the tags to load images and style sheets, those requests are handled in parallel to the render.
当浏览器打开网页时，它开始逐个标签呈现页面并开始构建DOM。 并且只要解析器看到用于加载图像和样式表的标签，这些请求就会与渲染并行处理。
But when the parser comes across a script tag, the HTML render process stops and waits until all the scripts are fetched and executed. Then the render of the rest of the HTML page resumes. You can understand this process in a better way by looking at the code and visualization below.
但是，当解析器遇到script标记时，HTML呈现过程将停止并等待，直到所有脚本都被提取并执行。 然后，其余HTML页面的呈现将恢复。 通过查看下面的代码和可视化效果，您可以更好地理解此过程。
This impacts the page load time since the scripts may be large, which can affect the time taken to execute them. And the actual content of the HTML page itself could be large in most cases. So, all this load and parse time would impact the user’s experience in terms of waiting time.
由于脚本可能很大，因此会影响页面加载时间，这可能会影响执行脚本所需的时间。 在大多数情况下，HTML页面本身的实际内容可能很大。 因此，所有这些加载和解析时间都会在等待时间方面影响用户的体验。
In this article, you will see the three different approaches that you can use to improve the load performance of the page by loading the JavaScript on the web page in more effective ways.
在本文中，您将看到可以通过更有效的方式将JavaScript加载到网页上来提高页面的加载性能的三种方法。
When you place the script tag at the bottom of the page after the main content, there will be some performance improvement. The content of the page will load and get parsed, as there is no blocking behavior for rendering HTML since you have placed the script in the end. The download and execution will take place only once all the rendering of the content of the page is complete.
当您将script标签放置在主要内容之后的页面底部时，将会有一些性能改进。 页面的内容将被加载并被解析，因为您将脚本放在最后，因此没有呈现HTML的阻塞行为。 仅在页面内容的所有呈现完成后，才进行下载和执行。
This technique has some performance improvement over placing the script tag in the head section of the page. Here, you still have some waiting time because the download of the script won’t start until the content of the page is rendered. This method gets rid of the content load problem but still has to wait for the script to be downloaded and executed. The HTML parsing completes, then the script is downloaded and executed, and finally, the document ready event is triggered.
通过将script标签放置在页面的顶部，此技术在性能上有所改进。 在这里，您还有一些等待时间，因为直到呈现页面内容后才开始下载脚本。 此方法摆脱了内容加载问题，但仍必须等待脚本下载并执行。 HTML解析完成，然后下载并执行脚本，最后触发document ready事件。
We can still improve the performance of the page by making use of the other two techniques based on user requirements.
我们仍然可以根据用户需求通过使用其他两种技术来提高页面的性能。
When the parser encounters a script tag with an async attribute, the download of the scripts takes place in parallel to the parsing of the HTML page. The execution of the script takes place immediately when the download is complete, pausing the HTML parsing. Once the execution of the script completes, the parsing resumes.
当解析器遇到带有async属性的script标签时， script的下载与HTML页面的解析并行进行。 下载完成后立即执行脚本，暂停HTML解析。 脚本执行完成后，将继续分析。
Since the scripts may be of different sizes and async executes the scripts as soon as they are fetched, there is no guarantee for them to get executed in the order that they are written in. So if there is any dependency between the scripts, and if one script needs to be executed after the other in order, then you should avoid this attribute. In this case, you will not have a clear idea of when the parsing will complete or when the document ready event will be triggered.
由于脚本的大小可能不同，并且async会在提取脚本后立即执行脚本，因此无法保证以写入顺序执行脚本。因此，脚本之间是否存在依赖关系，以及一个脚本需要依次执行，然后应避免使用此属性。 在这种情况下，您将不清楚解析何时完成或何时触发document ready事件。
When the parser comes across a script tag with a defer attribute, the download of the script happens in parallel to the parsing of the HTML page. The execution of the script takes place only when the parsing of HTML is complete.
当解析器遇到具有defer属性的script标签时， script的下载与HTML页面的解析并行进行。 只有在HTML解析完成后，脚本才会执行。
And when we use a defer attribute, the order of execution is preserved based on the order on the page. This attribute executes the scripts after all the HTML parsing is complete before the document ready event is triggered.
而且，当我们使用defer属性时，将根据页面上的顺序保留执行顺序。 在所有HTML解析完成之后，在触发document ready事件之前，此属性将执行脚本。
Let’s summarize what you have learned in this article:
让我们总结一下您在本文中学到的知识：
Place the script tag at the bottom of the page to stop the blocking behavior of the page rendering, then load the script and execute it once the parsing of HTML content completes.
将script标记放在页面底部以停止页面呈现的阻止行为，然后加载脚本并在HTML内容解析完成后执行该脚本。
Use the async attribute within the script tag to download the script in parallel to the render of the HTML elements and execute the script as soon as it is available.
使用script标记内的async属性可下载与HTML元素呈现并行的脚本，并在可用时立即执行脚本。
Use the defer attribute within the script tag to download the script in parallel to the render of the HTML elements and execute the script only when the whole HTML page rendering is complete.
使用script标记内的defer属性可与HTML元素的呈现并行下载脚本，并仅在整个HTML页面呈现完成后才执行脚本。
Differences between various loading techniques (Photo by the author) 各种加载技术之间的差异(作者照片)Remove Render Blocking JS in Chrome DevTools docs
在Chrome DevTools文档中删除Render Blocking JS
async and defer in MDN webdocs
MDN Webdocs中的异步和延迟
async and defer in JavaScript.info
JavaScript.info中的异步和延迟
Thanks for ️reading and happy learning!
感谢️reading和学习愉快！
翻译自: https://medium.com/better-programming/improve-page-load-performance-with-these-different-script-loading-techniques-b0d912eae7b1
页面加载完成后加载脚本文件
