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生效

转载于:https://www.cnblogs.com/gqymy/p/10473909.html