防止js脚本阻塞页面的方法

最新推荐文章于 2024-04-30 16:57:21 发布

翔翔要努力！

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量858

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_70858457/article/details/129535958

版权

一、主要方法

使用异步加载JavaScript：将JavaScript脚本放在异步脚本标签中，以确保脚本不会阻塞页面的渲染。例如：
```
<script async src="example.js"></script>
```
推迟加载JavaScript：将JavaScript脚本放在推迟脚本标签中，以确保页面的主要内容先被加载和渲染。例如：
```
<script defer src="example.js"></script>
```
将JavaScript放在页面底部：将JavaScript脚本放在页面底部，以确保页面的主要内容先被加载和渲染。例如：
```
<body>
  
  <script src="example.js"></script>
</body>
```
最小化JavaScript的执行时间：尽可能减少JavaScript代码的执行时间，例如优化代码、减少DOM操作等。
使用Web Worker：将JavaScript代码放入Web Worker中，以便在后台线程中执行，从而不会阻塞页面的渲染。

二、defer和async的区别

defer 属性告诉浏览器要延迟 JavaScript 脚本的执行，直到文档加载完成并且解析完毕。也就是说，脚本会在 DOMContentLoaded 事件之前执行。多个带有 defer 属性的脚本按照它们在文档中的顺序依次执行。这意味着，如果一个页面中有多个 defer 脚本，它们将按照它们在 HTML 中出现的顺序依次执行，而且它们都会在 DOMContentLoaded 事件之前执行。defer 属性适用于那些需要整个文档都解析完成之后再执行的脚本，比如用于操作 DOM 的脚本。

async 属性告诉浏览器要异步地加载 JavaScript 脚本。它允许页面继续渲染，而不必等待脚本加载完成。当脚本下载完成后，它会立即执行，而不管文档是否已经解析完成。多个带有 async 属性的脚本之间的执行顺序是不确定的。这意味着，如果一个页面中有多个 async 脚本，它们将并行下载和执行，并且它们之间的执行顺序是不确定的。async 属性适用于那些不需要整个文档都解析完成的独立脚本，比如用于分析数据或提供附加功能的脚本。

因此，如果需要确保在 DOMContentLoaded 事件之前执行某些脚本，则应使用 defer 属性。如果希望异步加载脚本，并且它不需要在 DOMContentLoaded 事件之前执行，则应使用 async 属性。

翔翔要努力！

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
防止js脚本阻塞页面的方法

这意味着，如果一个页面中有多个 defer 脚本，它们将按照它们在 HTML 中出现的顺序依次执行，而且它们都会在 DOMContentLoaded 事件之前执行。多个带有 async 属性的脚本之间的执行顺序是不确定的。这意味着，如果一个页面中有多个 async 脚本，它们将并行下载和执行，并且它们之间的执行顺序是不确定的。属性适用于那些不需要整个文档都解析完成的独立脚本，比如用于分析数据或提供附加功能的脚本。属性适用于那些需要整个文档都解析完成之后再执行的脚本，比如用于操作 DOM 的脚本。
复制链接

扫一扫