本网站非钮门官网,为"张工"个人原创创作和分享的钮门系统教程! 钮门官网链接:www.neoman.cn!
站长答疑:(张先生) 手机:18616712339 在线QQ: .
 
 
返回首页 · 软件简介 · 软件逻辑 · 安装试用 · 购买预算方案 · 设备推荐购买 · 相关电脑知识 · 业务操作教程 · 快递网站 · 常见问题
 
分享和转发请复制下面链接,或者直接点开下面的链接,然后分享静态格式链接↓
分享链接加载中....



钮门快递软件 >> 常见问题

钮门Ginfo网站页面优化加载速度 | 优化因为新闻模块js脚本的加载影响的html页面加载速度!javascript的defer属性和async属性的作用?
现在 script 标签新增了 2 个属性:defer 和 async,就是为了解决此类问题,提升页面性能的。
# ————————————————
<script的后面可以跟属性 defer 或
首先
head头部里的
<script src="info.js"  type="text/javascript"></script> 不要加这个

可以在body里面外部引用模块的js脚本加载方式,加上上面的属性

比如
原本这个样子 --》 <script src="test001.js"  type="text/javascript"></script>

改成这个样子 —》 <script defer src="test001.js"  type="text/javascript"></script>

# ——————原因↓————————————

浏览器的解析规则是:如果遇到 script 标签,则暂停构建 DOM,转而开始执行 script 标签,如果是外部 script,那么浏览器还需要一直等待其「下载」并「执行」后,再继续解析后面的 HTML。


如果请求并执行「vue.global.js」需要 3 秒,「vue-router.global.js」需要 2 秒,那么页面中的 Hello ~,则至少需要 5 秒以上才会展示出来。

# ——————建议↓————————
建议所有的外联脚本都默认设置此属性,因为他不会阻塞 HTML 解析,可以并行下载 JavaScript 资源,还可以按照他们在 HTML 中的相对顺序执行,确保有依赖关系的脚本运行时,不会缺少依赖。

在 SPA 的应用中,可以考虑把所有的 script 标签加上 defer 属性,并且放到 body 的最后面。在现代浏览器中,可以并行下载提升速度,也可以确保在老浏览器中,不阻塞浏览器解析 HTML,起到降级的作用。

#—————注意↓———————
defer 属性仅适用于外部脚本,如果 script 脚本没有 src,则会忽略 defer 特性。
defer 属性对模块脚本(script type='module')无效,因为模块脚本就是以 defer 的形式加载的。




# ——————————————————————————
# ——————————还有1个属性,async——————————
# ——————————————————————————


浏览器在解析到带有 async 属性的 script 标签时,也不会阻塞页面,同样是在后台默默下载此脚本。当他下载完后,浏览器会暂停解析 HTML,立马执行此脚本。

看起来还是蛮好理解的吧?咱们再来讨论 2 个小细节:

Q1:如果设置了 async 属性的 script 下载完之后,浏览器还没解析完 HTML,会怎样?

A1:浏览器会暂停解析 HTML,立马执行此脚本,等执行完之后,再继续解析 HTML。

Q2:如果有多个 async 属性的 script 标签,那等他们下载完成之后,会按照代码顺序执行吗?

A2:不会。执行顺序是:谁先下载完成,谁先执行。async 的特点是「完全独立」,不依赖其他内容。





最佳实践:

当我们的项目,需要集成其他独立的第三方库时,可以使用此属性,他们不依赖我们,我们也不依赖于他们。 通过设置此属性,让浏览器异步下载并执行他,是个不错的优化方案。

注意:

async 特性仅适用于外部脚本,如果 script 脚本没有 src,则会忽略 async 特性。



# ——————————————————————————
# ———————————区别↓———————————————

总结


defer
不阻塞浏览器解析 HTML,等解析完 HTML 之后,才会执行 script。
会并行下载 JavaScript 资源。
会按照 HTML 中的相对顺序执行脚本。
会在脚本下载并执行完成之后,才会触发 DOMContentLoaded 事件。
在脚本执行过程中,一定可以获取到 HTML 中已有的元素。
defer 属性对模块脚本无效。
适用于:所有外部脚本(通过 src 引用的 script)。


async
不阻塞浏览器解析 HTML,但是 script 下载完成后,会立即中断浏览器解析 HTML,并执行此 script。
会并行下载 JavaScript 资源。
互相独立,谁先下载完,谁先执行,没有固定的先后顺序,不可控。
由于没有确定的执行时机,所以在脚本里面可能会获取不到 HTML 中已有的元素。
DOMContentLoaded 事件和 script 脚本无相关性,无法确定他们的先后顺序。
适用于:独立的第三方脚本。
【重点来了,怎么理解“独立的第三方脚本”?我举几个例子就明白了,比如:广告的js脚本、网站访问流量统计的js脚本。】



另外:async 和 defer 之间最大的区别在于它们的执行时机。

钮门快递软件|EMMIS[2022.10.30-00:46]编辑:钮门快递软件|EMMIS 访问:630
[关闭窗口]  


您可能还感兴趣的关联教程文章↓

QQ快递资源群分享1(国际快递代理)
用微信或者QQ扫描即可添加
 
QQ快递资源群分享2(邮政国际小包)
用微信或者QQ扫描即可添加
 
QQ快递资源群分享2(国际快递|航空专线)
用微信或者QQ扫描即可添加
 
钮门快递软件.信息载入中...
 
 
 
友情链接维护中。。。。
人气指数: 高质量高人气,快递行业QQ群(资源分享):      
 
 
关于本网站
钮门相关链接
物流查询工具
网站快速通道
其他服务与支持
购买:186-1671-2339
QQ:154392081
E-mail:emmis@qq.com
快递订单管理系统
瘦客户端了解更多>>
总单插件了解更多>>
 
版权所有 ems-help.com Copyright © ems-help.com | Manager.

软件功能■关键词①: 快递软件 | 快递管理软件 | 快递管理系统 | 快递系统 | 快递查单软件 | 快递财务软件 | 快递面单打印软件 | 快递单号批量查询 | 国际航空小包软件 | 快递查单网站制作
软件公司■关键词②: 钮门快递管理系统 | 钮门软件 | 上海钮门 | 钮门网络科技 | 钮门快递系统 | 钮门系统
其他应用■关键词③: 快递电子秤 | 快递PDA | 快递云服务器 | 快递公司来电监听 | 屏蔽快递单号抓取信息关键词 | 快件签收邮件通知