美文网首页
JavaScript 文件延迟和异步加载:defer和async

JavaScript 文件延迟和异步加载:defer和async

作者: 张思学 | 来源:发表于2021-08-31 14:21 被阅读0次
延迟执行 JavaScript 文件

<script>标签中有一个布尔属性值 defer 设置该属性能够将JavaScript文件延迟到页面解析完成后在运行
示例:

// index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" defer src="test.js"></script>
</head>
<body>
    <h1>网页标题</h1>
    <p>正文内容</p>
</body>
</html>

注意:defer 属性适用于外部 JavaScript 文件,不适用于 <script>签包含的 JavaScript 脚本。

异步加载JavaScript文件

在默认情况下,网页都是同步加载外部 JavaScript 文件的,如果 JavaScript 文件比较大, 就会影响后面 HTML 代码的解析。上面提到一种解决方法:就是最后加载 JavaScript 文件。

现在可以为 <script> 标签设置 async 属性,让浏览器异步加载 JavaScript 文件,即在加载 JavaScript 文件时,浏览器不会暂停,而是继续解析。这样能节省时间,提升响应速度。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" async src="test.js"></script>
</head>
<body>
    <h1>网页标题</h1>
    <p>正文内容</p>
</body>
</html>

async 是 HTML5 新增的布尔型属性,通过设置 async 属性,就不用考虑 <script> 标签的放置位置,用户可以根据习惯继续把很多大型 JavaScript 库文件放在 <head> 标签内。

相关文章

  • Js延迟加载的方式有哪些?defer和async的区别是什么?

    Js延迟加载的方式有哪些? 给javascript标签添加 defer和async属性。 defer和async的...

  • JavaScript 文件延迟和异步加载:defer和async

    延迟执行 JavaScript 文件 标签中有一个布尔属性值 defer 设置该属性能够将JavaScript文件...

  • 前端面试题

    基础知识 延迟脚本(defer)、异步脚步(async)defer: 异步加载,HTML渲染完成,再执行;asyn...

  • JS基础

    defer(延迟脚本)和async(异步脚本)区别:当把script的标签放在头部时,都是延迟加载,立即执行。但是...

  • H5 资源异步加载策略

    1、async & defer 区别async异步加载脚本,加载完立马执行defer异步加载脚本,并在DOMCon...

  • async / defer

    async / defer 共同点: 使用 async/defer 属性在加载脚本时,异步下载文件,不会阻塞页面解...

  • JavaScript补充

    01-延迟和异步加载JS 如何延迟加载JS:defer defer:js脚本可以延迟到文档完全被解析后执行 如何异...

  • js性能优化

    无阻塞式加载脚本-延迟脚本 在script标签上添加defer(延迟脚本)或者async(异步脚本)属性。相同点:...

  • async和defer的具体作用和使用场景。

    async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。 defer,加载...

  • 第二章在HTML中使用javascript

    1. 中defer和async属性可以改变页面解析顺序,defer将该js文件延迟到最后解析(defer="def...

网友评论

      本文标题:JavaScript 文件延迟和异步加载:defer和async

      本文链接:https://www.haomeiwen.com/subject/xdjziltx.html