<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. libsqlite3.dylib与libsqlite3.0.dylib的差别

    在我们加入数据库框架时,在搜索框中输入sqlitekeyword,以下列表区会显示libsqlite3.dylib,libsqlite3.0.dylib. 此时我们选择libsqlite3.0.dyl ...

  2. codeforces 552 C Vanya and Scales

    这个题的意思就是给出一个数m.以及一个以1为首元素.w为比例常数的等比数列,数列长度为101,数列中每一个数字最多仅仅能用一次.问是否存在xa+wb+--=wc+wd+--+we+m. 非常显然,换句 ...

  3. YTU 2500: 二元表达式计算

    2500: 二元表达式计算 时间限制: 1 Sec  内存限制: 128 MB 提交: 38  解决: 23 题目描述 根据输入的含有两个二元运算的表达式,编程计算并输出表达式的值.如输入:  2+9 ...

  4. git如何避免每次pull或者push的时候都要输入用户名和密码?

    git config --global credential.helper store 这个命令则是在你的本地生成一个账号密码的本子似的东东,这样就不用每次都输入了(但是还得输入一次) 这个指令对于w ...

  5. hdoj--2187--悼念512汶川大地震遇难同胞——老人是真饿了(贪心)

     悼念512汶川大地震遇难同胞--老人是真饿了 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  6. BSGS算法及拓展

    https://www.zybuluo.com/ysner/note/1299836 定义 一种用来求解高次同余方程的算法. 一般问题形式:求使得\(y^x\equiv z(mod\ p)\)的最小非 ...

  7. Unity WebGL请求Http接口出现的Cors跨域问题

    1.运行环境 (1)WebGL运行浏览器:Firfox Quantum 67.0(64位) (2)服务端API运行环境:IIS,.Net Core 2.1 API 2.问题:CORS 头缺少Acces ...

  8. hdu 模拟 贪心 4550

    卡片游戏 Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepted Su ...

  9. LOJ#120. 持久化序列(FHQ Treap)

    题面 传送门 题解 可持久化\(Treap\)搞一搞 //minamoto #include<bits/stdc++.h> #define R register #define inlin ...

  10. 横向移动-广告图(web)

    项目 (移动的广告牌) 要求: 1,实现图片一次以移动的方式出现,到最后一张完全出现时,回弹到第一张 2,鼠标放在图片上面图片移动,鼠标离开,图片停止移动 HTML结构 <!DOCTYPE ht ...