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

script标签属性sync和defer的更多相关文章

  1. 1关于script标签属性,注意点,浏览器文档模式,各种数据类型的转化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js中的script标签属性

    HTML <script> 元素用于嵌入或引用可执行脚本. 在html中插入一个script标签 <script src="index.js" sync cros ...

  3. script标签加载顺序(defer & async)

    script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...

  4. script标签的async和defer

    兼容性 IE对于defer一直都支持,async属性IE6-9都没有支持,IE10及以上支持 相同点与不同点 带有async或defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的 ...

  5. [转]Script标签和脚本执行顺序

    Script标签和脚本执行顺序 这里详细聊聊和script标签相关的脚本执行顺序. Script标签的默认行为 几个首要特性: script标签(不带defer或async属性)的会阻止文档渲染.相关 ...

  6. 完整的JavaScript包括三部分、script标签、JavaScript的基本语法以及变量和字面量的关系

    完整的JavaScript包括三大部分: -ECMAScript   JavaScript的开发规范:提供核心语言功能 -DOM   document object model   文档对象模型:提供 ...

  7. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  8. script标签里的defer属性

    入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...

  9. HTML <script> 标签的 defer 和 async 属性

    HTMKL <script>标签中有defer和async属性,简单介绍一下两者的区别吧.   普通的script标签会让浏览器立即下载并执行完毕,执行也是按照先后顺序,再进行后面的解析. ...

随机推荐

  1. 下载、编译、运行android 7.1系统(ubuntu 16.0.4)【转】

    本文转载自:http://blog.csdn.net/andywuchuanlong/article/details/53977710

  2. 【Dairy】2016.11.5

    橘子洲一游

  3. poj 3621(最优比率环)

    Sightseeing Cows Farmer John has decided to reward his cows for their hard work by taking them on a ...

  4. Flask的flask-sqlalchemy

    flask-sqlalchemy是Flask和SQLAlchemy的管理者 - db = SQLAlchemy() - 包含配置 - 包含ORM基类 - 包含create_all - engine - ...

  5. bzoj4818

    http://www.lydsy.com/JudgeOnline/problem.php?id=4818 矩阵快速幂+dp 首先我们来写一个dp dp[i][j]:选到第i个数,和为j,复杂度nm,不 ...

  6. LaTex简历排版

    为了写好简历,倒腾了好几天的Latex,主要是因为中文支持问题还有morderncv的更新问题... 1.  http://www.ctex.org/CTeXDownload/ 建议下载v2.9.2. ...

  7. mac更改本地mysql登陆密码

    安装完mysql 之后,登陆以后,运行任何命令,提示 You must SET PASSWORD before executing this statement解决办法. step 1: SET PA ...

  8. Font Awesome矢量图标

    下载 font-awesome 文件夹到您的项目中. 在HTML的 <head> 中引用font-awesome.min.css. 可以将Font Awesome图标使用在几乎任何地方,只 ...

  9. hdu5926Mr. Frog’s Game

    Mr. Frog's Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  10. Android 性能优化(10)网络优化( 6)Optimizing General Network Use

    Optimizing General Network Use This lesson teaches you to Compress Data Cache Files Locally Optimize ...