页面加载完成后加载脚本文件_使用这些不同的脚本加载技术来提高页面加载性能...

最新推荐文章于 2022-01-08 10:56:48 发布

weixin_26705651

最新推荐文章于 2022-01-08 10:56:48 发布

阅读量405

点赞数 1

文章标签： java python linux vue javascript ViewUI

原文链接：https://medium.com/better-programming/improve-page-load-performance-with-these-different-script-loading-techniques-b0d912eae7b1

版权

页面加载完成后加载脚本文件

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的方式进行一些小的调整。

正常加载JavaScript的方式存在问题 (Problem With the Normal Way of Loading 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页面的呈现将恢复。通过查看下面的代码和可视化效果，您可以更好地理解此过程。

页面顶部的脚本标签示例 (Example of script tag in the head section of a page)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Script in the head tag</title>
    <script src="index.js"></script>
  </head>
  <body>


    <!-- All the HTML content here -->


  </body>
</html>

脚本标记位于页面顶部时的渲染流程 (Render flow when the script tag is in the head section of the page)

If the script is at the start of the page ( Image by author ) — When the script is at the start of the page (Photo by the author)

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加载到网页上来提高页面的加载性能的三种方法。

1.将脚本标签放置在页面底部 (1. Place the script Tag at the Bottom of the Page)

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的阻塞行为。仅在页面内容的所有呈现完成后，才进行下载和执行。

页面底部的脚本标签示例 (Example of script tag at the bottom of a page)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Script at the end of page</title>
  </head>
  <body>


    <!-- All the HTML content here -->


    <script src="index.js"></script>
  </body>
</html>

脚本标记位于页面底部时的渲染流程 (Render flow when the script tag is at the bottom of the page)

If the script is at the end of the page — When script is at the end of the page (Photo by the author)

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.

我们仍然可以根据用户需求通过使用其他两种技术来提高页面的性能。

2.在脚本标签内添加异步属性 (2. Add async Attribute Within the script Tag)

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解析。脚本执行完成后，将继续分析。

具有async属性的脚本标签示例 (Example of a script tag with an async attribute)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Script with async attribute</title>
    <script async src="index.js"></script>
  </head>
  <body>


    <!-- All the HTML content here -->


  </body>
</html>

具有async属性的脚本标签的渲染流程 (Render flow for a script tag with an async attribute)

Loading script with async attribute (Photo by the author)

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事件。

3 。在脚本标签内添加延迟属性 (3. Add defer Attribute Within the script Tag)

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解析完成后，脚本才会执行。

具有defer属性的脚本标签的示例 (Example of a script tag with a defer attribute)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Script with defer attribute</title>
    <script defer src="index.js"></script>
  </head>
  <body>


    <!-- All the HTML content here -->


  </body>
</html>

具有defer属性的脚本标签的渲染流程 (Render flow for a script tag with a defer attribute)

Loading script with defer attribute (Photo by the author)

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事件之前，此属性将执行脚本。

结论 (Conclusion)

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页面呈现完成后才执行脚本。