异步执行脚本

最新推荐文章于 2022-08-16 14:15:20 发布

weixin_30847865

最新推荐文章于 2022-08-16 14:15:20 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/huan-lin/p/4275294.html

版权

异步执行脚本

script 元素的 async 属性可以使关联脚本相对于页面的其余部分进行异步加载和执行。也就是说，在继续对页面进行解析的同时，在后台加载并执行脚本。如果页面使用了要占用大量处理时间的脚本，那么使用 async 属性可以显著提高页面加载性能。

async 属性。

async 属性是万维网联合会 (W3C) HTML5 规范的一部分，它是为以下情形设计的：对于脚本不存在依赖关系，但是脚本仍需要尽快运行。在以下假设示例中，如果不使用 async（或 defer）属性，则脚本可能会阻止加载其他页面内容。

Lilah 有一个博客，其中使用了一些基于脚本的小工具。这些小工具可以增强访问者的体验，即使不加载它们中的任何一个，她的页面也仍然能正常工作（她想在支持用户的同时禁用脚本）。目前，她在其 HTML 文件的页首加载所有这些小工具，但她已经收到一些访问者的抱怨，反映她的网页加载时间过长，原因是脚本执行时间过于冗长。她试图将脚本移动到页面的底部以帮助提高页面加载速度，但由于页面上的内容太多，所以这种改变仍然不足以改善她的网站的访问体验。她真正想要的是让这些小工具尽可能快地加载，同时又不阻止页面上的其他内容。在快速搜索之后，她认识到 HTML5 的 async 属性正是她所需要的。通过将其所有基于脚本的小工具都置于一个外部文件中，她已经在性能和基于脚本的增强之间找到一种更加平衡的方法。

 
     HTML 
    
      <head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>

实现详细信息

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用对于 script 元素既支持 async 属性又支持 defer属性（早期版本的 Windows Internet Explorer 仅支持 defer 属性）。只有在提供了 src 属性时，才能使用 async 和defer 属性。以下是四种可能的组合。

用法	描述
`<script src="widgets.js"></script>`	立即执行脚本，页面等待脚本完成之后再继续解析。这会大大降低页面加载性能。
`<script async src="widgets.js"></script>`	异步下载脚本，同时页面继续解析。下载完成之后执行脚本。
`<script defer src="widgets.js"></script>`	在页面完成解析之后执行脚本。
`<script async defer src="widgets.js"></script>`	处理 async 属性，并忽略 defer 属性。这使开发人员能够在支持 async 的浏览器中使用它，但在不支持 async 的浏览器中依然使用 defer。

总之，async 使 Web 开发人员能以最少的工作量来缩短页面加载时间。它还可以减少脚本加载程序库所要求的针对特定浏览器的解决方法的数量。

转载于:https://www.cnblogs.com/huan-lin/p/4275294.html

weixin_30847865

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步执行脚本

异步执行脚本script元素的async属性可以使关联脚本相对于页面的其余部分进行异步加载和执行。也就是说，在继续对页面进行解析的同时，在后台加载并执行脚本。如果页面使用了要占用大量处理时间的脚本，那么使用async属性可以显著提高页面加载性能。async 属性。async属性是万维网联合会 (W3C) HTML5 规范的一部分，它是为以...
复制链接

扫一扫