理解html中script标签的defer与async属性
来源:互联网 发布:js循环生成多个div 编辑:程序博客网 时间:2024/05/12 15:45
html中script标签的defer与async属性
经常会在一些地方看到一些 < script > 标签带上了defer和async,总是搞不清楚两者的具体区别,于是想记录下来。
从单词语义上来,defer代表延迟,async代表异步。那么我们就有一个基本的概念了。然后我们慢慢分析。
1.如果没有defer和async
< script > 标签如果没有带上defer 或 async属性的话,浏览器会立即加载并执行标签内的脚本,意思大概是不等待后续载入的文档元素,读到这个< script > 标签就加载并执行。
2.如果有defer
defer的意思是延迟,也就是说延迟执行,除了这一点,加载的过程是异步的。那么就很好解释了,当遇到
<script defer>
这种标签时,会开始加载script标签内容,但是不会阻塞后续文档元素的渲染,待所有页面元素解析完成后,DOMContentLoaded 事件触发之前执行这个script标签的代码。
3.如果有async
async就是sync的反义词,代表异步,也就是说异步加载和执行。所以,当遇到
<script async>
这种标签时,加载和执行脚本的同时不会阻塞其他文档元素的渲染。
4.多个标签的情况
还有一点要注意的就是,多个async标签是不会相互影响的,谁先加载完,谁就先执行了。而多个defer标签是异步加载,但是最后执行的顺序是根据其在页面上的顺序来决定的。
现在是不是觉得豁然开朗了呢?
阅读全文
0 0
- 理解html中script标签的defer与async属性
- HTML5中<script>标签中的defer与async属性详解
- script标签中async,defer两个属性的区别
- script标签中defer和async属性的使用
- script标签中defer和async属性的区别
- script标签的defer和async属性
- script标签的defer和async属性
- JS中script标签defer和async属性
- script标签的属性 async 和 defer 的区别
- script标签中的async和defer属性
- script标签不带属性与带async、defer的区别
- <script>标签 async与defer详解
- js之script属性async与defer
- js之script属性async与defer
- script属性 async 和defer
- script元素的位置及defer、async属性
- script的defer和async
- script中defer属性
- 欢迎使用CSDN-markdown编辑器
- Jedis客户端的使用
- React入门
- BZOJ3456:城市规划(EGF+FFT/CDQ分治+FFT)
- SQL语句where,Group By,having order by 的详细使用
- 理解html中script标签的defer与async属性
- 详解Nginx中HTTP的keepalive相关配置
- linux 命令大全
- 数据结构简单分析
- 【Android】getActionBar()为null的解决方法总结
- 使用hibernate的@SQLDelete和@Where注解实现逻辑删除
- MySQl优化千万数据级快速分页sql语句
- Day9 练习8
- lap+mysql+discuz部署