logo

哈达波斯王|网站建设|网页制作|网页设计【官方网站】

脚本

script 标签的属性、事件的探究

脚本  2019年02月18日 09:43:02  哈达波斯王  

defer 和 asnyc


只对外部文件有效
只有 Internet Explorer 支持 defer 属性
async 属性是 HTML5 中的新属性

defer 在页面完成解析才执行代码(图片资源还没下载,只是 dom 加载完毕),带 defer 属性的 script,下载 script 的时候是异步的,下载好之后,等待解析 dom 完毕才执行
这个属性表明脚本在执行时不会影响页面的构造,在元素中设置这个属性相当于告诉浏览器 立即下载 但 延迟执行
延迟到解析 dom 完毕,但图片资源加载之前执行

async 相对于页面其他部分异步执行脚本,带 async 属性的 script,下载 script 的时候是异步的,但是只要 script 文件下好了,那么就马上执行(如果此时 dom 未加载完毕,就会阻塞 dom 解析)

一般的 script 标签都是会阻塞页面执行的,一般用在不需要操作 dom 元素的脚本上,例如一些统计代码(跟页面执行逻辑无关的,不涉及 dom 操作的),可以加上 async 属性,可以避免因长时间加载而呈现白屏现象

1.jpg

  1. 没有 defer 和 async 属性的 script,在 html 解析中,html 会在 script 下载或执行的时候,都会暂停解析

  2. 带 async 属性的 script,如图所示,也就是下载 script 的时候是异步的,但是只要 script 文件下好了,那么就马上执行,执行过程中会阻塞 html 解析

  3. 带 defer 属性的 script,下载 script 的时候是异步的,下载好之后,等待解析 dom 完毕才执行


区别

没有 defer 和 async,会立刻加载并执行,期间阻塞 dom 解析

有 async 没有 defer 时,会与渲染后续文档元素并行加载(加载过程不会阻塞 dom 解析),加载完自动执行(执行会阻塞 dom 解析)

有 defer 没有 async 时,后续文档元素渲染会与脚本文件加载并行,当执行所有元素解析完成之后,脚本才执行,并且是在 DOMContentLoaded 之前执行(domready 之前执行)



使用方法解决

使用动态创建的 script 标签元素来下载并执行代码
无论何时启动下载,文件的下载和执行过程不会阻塞页面其他进程。

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "file1.js";document.getElementByTagName("head")[0].appendChild(script);


本文由 Krry 创作

网站首页 | 最新公告 | 漏洞修补 | 网站模板 | 知识文档 | 联系我们
Copyright © 2015 jlasp.com All Rights Reserved.
哈达波斯王|网站建设|网页制作|网页设计【官方网站】 版权所有
地址:吉林省吉林市昌邑区 联系QQ:383612004 联系人:董先生
未经本站授权,禁止复制或建立镜像
 ICP备案号:吉ICP备15000891号-1