script标签属性sync和defer


<script src="a.js" defer></script>
加了defer属性script标签的页面,运行流程如下:
 
1.浏览器开始解析HTML页面
 
2.遇到有defer属性的script标签,浏览器继续往下面解析页面,且会并行下载script标签的外部js文件
 
3.解析完HTML页面,再执行刚下载的js脚本(在DOMContentLoaded事件触发前执行,即刚刚解析完</html>,且可保证执行顺序就是他们在页面上的先后顺序)
 
注意事项:
 
1.内置js代码的script标签,以及动态生成的script标签,defer属性不生效
 
2.有defer属性的script标签脚本文件里不能使用document.write方法
 
<script src="a.js" sync></script>
加了sync属性script标签的页面,运行流程如下:
1.浏览器开始解析页面
 
2.遇到有sync属性的script标签,会继续往下解析,并且同时另开进程下载脚本
 
3.脚本下载完毕,浏览器停止解析,开始执行脚本,执行完毕后继续往下解析
 
注意事项:
 
1.无法保证脚本的执行顺序,哪个脚本先下载完毕,就先执行哪个
 
2.也不能使用document.write方法
 
 
 
使用场景区分:
 
1.脚本之间没有依赖关系的,使用sync
 
2.脚本之间有依赖关系的,使用defer
 
3.若同时使用sync和defer,defer不起作用,sync生效


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



猜您在找 script标签里的defer属性 script标签中的async、defer属性 js之script属性async与defer script标签的crossorigin属性 [转]HTML5 script 标签的 crossorigin 属性到底有什么用? JS script脚本async和defer的区别 Ueditor插入script标签 【mybatis】——script标签作用 如何将 JavaScript 代码添加到网页中,以及