乐趣区

关于javascript:了解-JS-的加载顺序和方式实现-Ready-方法

jiezi

页面加载 JS 程序或形式不同，可能会导致性能生效、谬误的产生或加载解析工夫过长，拖慢整个页面展现。

理解 JS 的加载程序

理解页面元素的加载程序，找到 JS 执行失败起因。有时明明没有问的代码，可就获取不到元素值或信息，这可能是 JS 执行工夫过早或过晚，而导致的 JS 执行失败。
咱们来看一幅图，理解 defer、async 属性对 JS 下载、执行程序的影响

  1. 默认状况下，浏览器解析到 JS 文件就会立刻下载文件，并执行文件，JS提前执行，获取不到页面元素，并导致页面解析中断，拖慢整个页面的加载。
  2. 增加 async 属性后，就会异步下载 JS 文件并执行，执行工夫不可控，JS执行工夫过早或过晚，而导致的 JS 执行谬误或失败。
  3. 增加 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/posts/20200807/

退出移动版