大家好，欢迎来到IT知识分享网。
页面加载 JS 顺序或方式不同，可能会导致功能失效、错误的产生或加载解析时间过长，拖慢整个页面展示。
了解 JS 的加载顺序
了解页面元素的加载顺序，找到 JS 执行失败原因。有时明明没有问的代码，可就获取不到元素值或信息，这可能是JS执行时间过早或过晚，而导致的 JS 执行失败。我们来看一幅图，了解defer、async属性对JS下载、执行顺序的影响
- 默认情况下，浏览器解析到JS文件就会立即下载文件，并执行文件，JS提前执行，获取不到页面元素，并导致页面解析中断，拖慢整个页面的加载。
- 添加async属性后，就会异步下载JS文件并执行，执行时间不可控，JS执行时间过早或过晚，而导致的 JS 执行错误或失败。
- 添加defer属性后，就会异步下载JS文件，等页面解析完成后再执行JS
Ready方法的实现
很多时候我们不把JS放在head中，而把JS放到body的最后面也就很好解释了？
- 首先，JS的下载和执行会中断页面的解析，拖慢整个页面展示，
- 然后，放在head中，页面元素还没有加载，JS方法就无法获取或处理页面上的元素，这一点很容易忽视，
- 但是，我们还有ready方法。
jQuery中的ready方法会在页面解析后运行，语法如下：
//语法 1 $(document).ready(function) //语法 2 $().ready(function) //语法 3 $(function) 自定义方法，通过监听DOMContentLoaded实现ready方法
/ * 页面解析后执行 fn * https://ichochy.com * / function ready(fn) { if (window.addEventListener) { window.addEventListener('DOMContentLoaded', function () { //注销时间，避免重复触发 document.removeEventListener('DOMContentLoaded', arguments.callee, false); fn(); //运行函数 }, false); } else if (document.attachEvent) { //IE浏览器 document.attachEvent('onreadystatechange', function () { if (document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fn(); //函数运行 } }); } } 当然还有我的onload方法，可以在页面完成所有加载后再执行
//window 的 onload window.onload = function(){ //load https://ichochy.com //some things …… } //body 的 onload <body onload="load()"> 总结
可以看到，JS的执行顺序决定着程序是否正常工作。加载过早，可能无法获取到页面元素，而太晚，页面元素无法交互。对于执行的顺序，要以当前的程序功能而定。
联系方式
网站：https://ichochy.com/
源文：https://ichochy.com/posts//
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/95153.html
