web優化之-js 異步加載 js延遲執行 js插件

時間 2019-12-02

標籤 web 優化異步加載延遲執行插件欄目 HTML 简体版

原文原文鏈接

最近因工做的須要主要作web前段的優化，其中之一就是js的優化，在項目中的js代碼相對比較規範的，都是$(function(){})這種格式。可是你們都知道js的下載比較耗時的，它的解析和執行是阻塞式的。咱們是否能夠先讓js下載下來，在windows的load事件中在去解析和執行了。答案是確定的，其中ControlJS .js就實現了這種方式。我的以爲它比LAB的延遲加載要優秀的一點，減小了js的加載時間。可是該js功能相對比較強大，同時也沒有解決js依賴關係的加載。我的本身寫了一個小插件來實現js異步加載延遲執行。
javascript

代碼以下： html

(function () {
    var document = window.document;
    var getAttribute = function (elem, name) {
        var attrs = elem.attributes;
        var len = attrs.length;
        for (var i = 0; i < len; i++) {
            var attr = attrs[i];
            if (name === attr.nodeName) {
                return attr.nodeValue;
            }
        } java

return undefined;
}; node

    var scriptsData;
    var orders = [];
    var findScripts = function () {
        var aScripts = document.getElementsByTagName('script');
        var len = aScripts.length;
        var scriptsArr = [];
        var scriptsSrc = []; jquery

        for (var i = 0; i < len; i++) {
            var script = aScripts[i];
            if ("text/asynjs" === getAttribute(script, "type") && "undefined" === typeof (script.founded)) {
                script.founded = true;
                var order = getAttribute(script, "order") || getAttribute(script, "data-order") || 0;
                script.order = order;
                if (orders.indexOf(order) < 0) {
                    orders.push(order);
                }
                var src = getAttribute(script, "asynsrc") || getAttribute(script, "data-asynsrc");
                script.src = src;
                if (src && scriptsSrc.indexOf(src) < 0) {
                    scriptsArr.push(script);
                }
            } web

        }
        orders.sort(function compare(a, b) { return a - b; });
        return scriptsData = scriptsArr;
    };
    var downloadScripts = function (scriptArr) {
        var scripts = scriptArr || findScripts();
        var len = scripts.length; windows

        for (var i = 0; i < len; i++) {
            var img = new Image();
            img.src = scripts[i].src;
            img.style.display = "none";
        }
    }; jquery插件

    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () { downloadScripts(); }, false);
        window.addEventListener("load", function () { setTimeout(processScripts, 0); }, false); ide

} else if (document.attachEvent) {

        document.attachEvent("onreadystatechange", function () { downloadScripts(); });
        window.attachEvent("onload", function () { setTimeout(processScripts, 0); });
    }

})();

調用代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
    <script type="text/javascript" src="Scripts/asynload.js"></script>
</head>
<body>
    <div id="container">
        <img src="images/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">