摘要：最近在做个人项目中登陆界面的时候，需要加一个人机验证也就是验证码的功能，和朋友商量再三由于时间有限，便选择引入第三方的验证码。如果解析遇到多个标签，依次加载顺序执行。
最近在做个人项目中登陆界面的时候，需要加一个人机验证也就是验证码的功能，和朋友商量再三由于时间有限，便选择引入第三方的验证码。使用过程中发现，该第三方验证码的实现逻辑基本是先编写指定id的HTML标签，然后加载该第三方的js，由其自己渲染而成，因此借这个机会，再次学习总结一下传统的
普通脚本
没有 defer 或 async修饰，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签后面的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 由于是模块化开发，在此采用的是再模块内通过动态方式加载第三方的验证码js，主要代码如下。 为保证该第三方库执行时有其渲染的元素，所以设置为defer。可能引发问题是如果网络慢或其他原因会导致该验证控件呈现较慢（暂时未遇到），所以项目中也加了遮罩处理。 参考
如果解析遇到多个function load (el, src, callback) {
if (!src) {
return;
}
// _verifyExist(src);
let scriptHeat = document.createElement("script");
scriptHeat.type = "text/javascript";
scriptHeat.src = src;
scriptHeat.defer = true;
/* 为保证兼容性，在此对回调包装， */
isFunction(callback) && addOnloadHandler(scriptHeat, callback);
el.appendChild(scriptHeat);
}
function isFunction (fn) {
return Object.prototype.toString.call(fn) === "[object Function]";
}
function addOnloadHandler (el, callback) {
el.onload = el.onreadystatechange = function () {
if (!this.readyState || // 这是FF的判断语句，因为ff下没有readyState这人值，IE的readyState肯定有值
this.readyState === "loaded" || this.readyState === "complete" // 这是IE的判断语句
) {
callback();
}
};
}
defer和async的区别
详解defer和async的原理及应用
MDN
前端文摘：深入解析浏览器的幕后工作原理
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93976.html
摘要：彻底搞懂通过浏览器的开发者工具可以直观的看到，图中蓝色的线和蓝色的字使用不同的表现形式表示这个事件触发的时间。当脚本下载完后立即执行，执行顺序不确定。 彻底搞懂 defer & async DOMContentLoaded showImg(https://segmentfault.com/img/remote/1460000013480394?w=1309&h=879); 通过 chr...
摘要：标签加载顺序如果要谈标签加载顺序问题，首先要谈的就是标签的位置，因为标签的位置对于加载顺序来说有着很重要的影响。例如标签在以上代码中，可能由于下载时间比较长，由于两个标签都是异步执行，互不干扰，因此可能就会先于执行。 谈谈 标签加载顺序的问题 这篇文章比较长，如果你耐心读完了，我会感谢你愿意在这篇文章上花费时间，也希望你有收获。 其实说起，几乎搞前端的都知道他的作用：引入 JavaS...
摘要：前言是浏览器的内置脚本语言。避免，在结构生成之前调用节点，而产生错误 前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本，浏览器加载网页时，就会执行脚本，从而操作浏览器，实现各种动态效果 JavaScript代码嵌入网页的方法 1、元素直接嵌入代码 function sayHello() { alert(hello!); ...
阅读 2420·2021-11-18 10:07
阅读 963·2021-08-03 14:04
阅读 635·2019-08-30 13:08
阅读 2469·2019-08-29 15:33
阅读 899·2019-08-29 14:07
阅读 2849·2019-08-29 14:04
阅读 1329·2019-08-29 11:19
阅读 1053·2019-08-29 10:59
