Web移動端使用localStorage緩衝Js和css檔案

將jquery和公用樣式緩衝到localStorage，可以減少Http請求，從而最佳化頁面載入時間，下面的代碼可以實現此功能：

 <script type="text/javascript">        //入口函數                if (window.localStorage) {                    initJs();                    initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css");                } else {                    addFile("/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", "js");                    addFile("/gfdzp201508257998/Turntable/Script/whir.turntable.js", "js");                    addFile("/gfdzp201508257998/Turntable/Style/css_whir.css", "css");                }         //第一步：載入頁面js：先載入jQuery後載入使用者指令碼        function initJs() {            var name = "jquery";            var url = "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js";            var xhr;            var js = window.localStorage ? localStorage.getItem(name) : "";            if (js == null || js.length == 0) {                if (window.ActiveXObject) {                    xhr = new ActiveXObject("Microsoft.XMLHTTP");                } else if (window.XMLHttpRequest) {                    xhr = new XMLHttpRequest();                }                xhr.open("GET", url);                xhr.send(null);                xhr.onreadystatechange = function () {                    if (xhr.readyState == 4 && xhr.status == 200) {                        js = xhr.responseText;                        localStorage.setItem(name, js);                        js = js == null ? "" : js;                        addTxt(js, "js");                        initTurntable(); //確保先引用Jquery                    }                };            } else {                addTxt(js, "js");                initTurntable();            }        }        //載入自訂指令碼        function initTurntable() {            var name = "turntable";            var url = "/gfdzp201508257998/Turntable/Script/whir.turntable.js";            var xhr;            var js = window.localStorage ? localStorage.getItem(name) : "";            if (js == null || js.length == 0) {                if (window.ActiveXObject) {                    xhr = new ActiveXObject("Microsoft.XMLHTTP");                } else if (window.XMLHttpRequest) {                    xhr = new XMLHttpRequest();                }                xhr.open("GET", url);                xhr.send(null);                xhr.onreadystatechange = function () {                    if (xhr.readyState == 4 && xhr.status == 200) {                        js = xhr.responseText;                        localStorage.setItem(name, js);                        js = js == null ? "" : js;                        addTxt(js, "js");                    }                };            } else {                addTxt(js, "js");            }        }        //第二步：初始化Css        function initCss(name, url) {            var xhr;            var css = window.localStorage ? localStorage.getItem(name) : "";            if (css == null || css.length == 0) {                if (window.ActiveXObject) {                    xhr = new ActiveXObject("Microsoft.XMLHTTP");                } else if (window.XMLHttpRequest) {                    xhr = new XMLHttpRequest();                }                xhr.open("GET", url);                xhr.send(null);                xhr.onreadystatechange = function () {                    if (xhr.readyState == 4 && xhr.status == 200) {                        css = xhr.responseText;                        localStorage.setItem(name, css);                        css = css == null ? "" : css;                        css = css.replace(/images\//g, "style/images/");                        addTxt(css, "css");                    }                };            } else {                css = css.replace(/images\//g, "style/images/");                addTxt(css, "css");            }        }        //輔助方法1：動態添加js，css檔案引用        function addFile(url, fileType) {            var head = document.getElementsByTagName('HEAD').item(0);            var link;            if (fileType == "js") {                link = document.createElement("script");                link.type = "text/javascript";                link.src = url;            } else {                link = document.createElement("link");                link.type = "text/css";                link.rel = "stylesheet";                link.rev = "stylesheet";                link.media = "screen";                link.href = url;            }            head.appendChild(link);        }        //輔助方法2：動態添加js，css檔案內容         function addTxt(text, fileType) {            var head = document.getElementsByTagName('HEAD').item(0);            var link;            if (fileType == "js") {                link = document.createElement("script");                link.type = "text/javascript";                link.innerHTML = text;            } else {                link = document.createElement("style");                link.type = "text/css";                link.innerHTML = text;            }            head.appendChild(link);        }    </script>

查看寫入記錄：

封裝成JS外掛程式：

/*** 外掛程式功能：使用localStorage緩衝js和css檔案，減少http請求和頁面渲染時間，適用於Web移動端H5頁面製作。* 外掛程式作者：zhangqs008@163.com* 使用方法：  *   1.使用此外掛程式前，需要給外掛程式的pageVersion變數賦值，建議變數值由伺服器後端輸出，當需要更新用戶端資源時，修改版本值即可。*   2.載入Js：由於js載入有順序要求，所以需要將後載入的指令碼作為前一個指令碼的回調參數傳入，如：*   whir.res.loadJs("jquery", "<%= BasePath %>Turntable/Script/jquery-1.8.3.min.js",*       function () {*            whir.res.loadJs("turntable", "Script/whir.turntable.js", null);*    });*   3.載入css，如：whir.res.loadCss("css", "/Style/css_whir.css", null);*/var whir = window.whir || {};whir.res = {    pageVersion: "", //頁面版本，由頁面輸出，用於重新整理localStorage緩衝    //動態載入js檔案並緩衝    loadJs: function (name, url, callback) {        if (window.localStorage) {            var xhr;            var js = localStorage.getItem(name);            if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) {                if (window.ActiveXObject) {                    xhr = new ActiveXObject("Microsoft.XMLHTTP");                } else if (window.XMLHttpRequest) {                    xhr = new XMLHttpRequest();                }                if (xhr != null) {                    xhr.open("GET", url);                    xhr.send(null);                    xhr.onreadystatechange = function () {                        if (xhr.readyState == 4 && xhr.status == 200) {                            js = xhr.responseText;                            localStorage.setItem(name, js);                            localStorage.setItem("version", whir.res.pageVersion);                            js = js == null ? "" : js;                            whir.res.writeJs(js);                            if (callback != null) {                                callback(); //回調，執行下一個引用                            }                        }                    };                }            } else {                whir.res.writeJs(js);                if (callback != null) {                    callback(); //回調，執行下一個引用                }            }        } else {            whir.res.linkJs(url);        }    },    loadCss: function (name, url) {        if (window.localStorage) {            var xhr;            var css = localStorage.getItem(name);            if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) {                if (window.ActiveXObject) {                    xhr = new ActiveXObject("Microsoft.XMLHTTP");                } else if (window.XMLHttpRequest) {                    xhr = new XMLHttpRequest();                }                if (xhr != null) {                    xhr.open("GET", url);                    xhr.send(null);                    xhr.onreadystatechange = function () {                        if (xhr.readyState == 4 && xhr.status == 200) {                            css = xhr.responseText;                            localStorage.setItem(name, css);                            localStorage.setItem("version", whir.res.pageVersion);                            css = css == null ? "" : css;                            css = css.replace(/images\//g, "style/images/"); //css裡的圖片路徑需單獨處理                            whir.res.writeCss(css);                        }                    };                }            } else {                css = css.replace(/images\//g, "style/images/"); //css裡的圖片路徑需單獨處理                whir.res.writeCss(css);            }        } else {            whir.res.linkCss(url);        }    },    //往頁面寫入js指令碼    writeJs: function (text) {        var head = document.getElementsByTagName('HEAD').item(0);        var link = document.createElement("script");        link.type = "text/javascript";        link.innerHTML = text;        head.appendChild(link);    },    //往頁面寫入css樣式    writeCss: function (text) {        var head = document.getElementsByTagName('HEAD').item(0);        var link = document.createElement("style");        link.type = "text/css";        link.innerHTML = text;        head.appendChild(link);    },    //往頁面引入js指令碼    linkJs: function (url) {        var head = document.getElementsByTagName('HEAD').item(0);        var link = document.createElement("script");        link.type = "text/javascript";        link.src = url;        head.appendChild(link);    },    //往頁面引入css樣式    linkCss: function (url) {        var head = document.getElementsByTagName('HEAD').item(0);        var link = document.createElement("link");        link.type = "text/css";        link.rel = "stylesheet";        link.rev = "stylesheet";        link.media = "screen";        link.href = url;        head.appendChild(link);    }}

調用該外掛程式：

    <script type="text/javascript">        //入口函數        whir.res.pageVersion = "1002";  //頁面版本，用於檢測是否需要更新緩衝        whir.res.loadJs("jquery", "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js",         function () {             whir.res.loadJs("turntable", "/gfdzp201508257998/Turntable/Script/whir.turntable.js", null);         });        whir.res.loadCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css", null);    </script>