设为首页收藏本站心情墙手机版 今天是: 2024-02-29    美好的一天,从现在开始
天气与日历 切换到宽版

绵羊优创

 找回密码
 立即注册
搜索
查看: 429|回复: 0

html5页面加载速度优化(js defer和async属性)

[复制链接]
  • 打卡等级:LV6

442

主题

30

回帖

24万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
246929

突出贡献荣誉管理论坛元老本科学士学位拥有劳力士宇宙计型迪通拿系列m116515ln-0059拥有欧米茄星座系列131.23.41.21.03.001拥有梅赛德斯-奔驰EQS 580 4MATIC拥有宝马M8四门轿跑车 雷霆版

QQ
sheep 发表于 2023-1-1 11:43:40 | 显示全部楼层 |阅读模式 ip属地: 北京市

明确: defer和 async的使用,可以用于提升网页性能
script标签存在两个属性,defer和async,因此 script标签的使用分为三种情况:

1、<script src="example.js"></script>
没有defer或async属性,浏览器会立即加载并执行相应的脚本。
不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载

2、<script async src="example.js"></script>(js资源加载后直接执行js)
有了async属性,表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行;

3、<script defer src="example.js"></script>(js资源加载后延迟执行js)
有了defer属性,加载后续文档的过程和js脚本的加载是并行进行的(异步),此时的js脚本仅加载不
执行, js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之
前。

注意:
① defer 和 async 脚本只适用于外部脚本(如果 <script> 脚本没有 src,则会忽略都会立即并行加载 script 资源,不同的是,defer 将 script 脚本的运行放到了最后,而 async 则是加载完后立即暂停 html 渲染,等待 script 执行完成后再继续。

② 多个带有 defer 或 async 的 script 标签,由于每个 script 标签的加载都是单独另外开辟的进程,位置靠后的 script 资源可能先于完成,因此无法保证每个标签是按照代码位置顺序执行的


下图是使用了 defer、async、和未使用时的运行情况对比:

html5页面加载速度优化(js defer和async属性)

html5页面加载速度优化(js defer和async属性)

绿线:HTML的解析时间
蓝线:JS脚本的加载时间
红色:JS脚本的执行时间

从图中我们可以明确一下几点:
1.defer和async在网络加载过程是一致的,都是异步执行的;(放在页面顶部,也不会阻塞页面的加
载,与页面加载同时进行)
2.两者的区别,脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行,等dom的加载)
所以, js脚本加上 async或 defer,放在头部可以减少网页的下载加载时间,如果不考虑兼容性,可以用于优化页面加载的性能




急躁,是因为经历不够,轻浮,是因为磨练不够,烦乱,是因为思路不清,压力,是因为格局不够,恐惧,是因为假想太多,在这个薄凉的世界,自己不强大,一切都是浮云 ...
回复 论坛版权

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【乱回复纯数字纯字母将禁言】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|小黑屋|社区规范|绵羊优创 ( 京ICP备19037745号-2 )|网站地图

公安备案京公网安备11011502037529号

GMT+8, 2024-2-29 13:31 , Processed in 0.333061 second(s), 13 queries , Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表