資訊專(zhuān)欄INFORMATION COLUMN
摘要：因上面我是等著方法觸發(fā)后才開(kāi)始載入文件，所以使用或者差別不大如果是要完全避免上面的問(wèn)題則是要等依賴的加載成功，觸發(fā)方法時(shí)再去加載該則可以解決因加載速度比依賴的的加載速度更快出現(xiàn)的問(wèn)題。
最近對(duì)單頁(yè)面比較感興趣，想用單頁(yè)面實(shí)現(xiàn)原生app的效果，但單頁(yè)面應(yīng)用將多頁(yè)面匯集到一個(gè)頁(yè)面上，由此可知初始加載的數(shù)據(jù)會(huì)很大，這樣會(huì)導(dǎo)致在初始加載網(wǎng)頁(yè)的時(shí)候會(huì)有一個(gè)比較漫長(zhǎng)的等待時(shí)長(zhǎng)，特別是網(wǎng)絡(luò)不好的情況下等待時(shí)長(zhǎng)就更不能讓用戶滿足。
為了解決這個(gè)問(wèn)題，我想到一個(gè)解決方法，在頁(yè)面先不加載js和css文件，首先展示一些準(zhǔn)備好的圖片或者等待頁(yè)面（數(shù)據(jù)盡量小），然后等onload事件觸發(fā)的時(shí)候再一一將js文件和css文件載入到頁(yè)面。
window.onload = function(){
var scripts = ["/static/js/jquery-1.8.3.min.js","/static/js/fuc.js","/static/js/app.js"];
var s = 0;
scripts.forEach(function(scriptSrc){
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.charset = "utf-8";
script.async = true;
script.timeout = 120000;
script.src = scriptSrc;
head.appendChild(script);
script.onload=function(){
s++;
if(s == scripts.length){
var load = document.getElementById("load");
var app = document.getElementById("app");
load.style.display = "none";
app.style.display = "block";
}
}
});
}
如代碼所示，當(dāng)所有的js都成功加載后，再將主頁(yè)面對(duì)應(yīng)的div顯示出來(lái)，這樣用戶的體驗(yàn)才會(huì)比較良好。這里定義了一個(gè)變量s，當(dāng)變量s等于加載的js的數(shù)量的時(shí)候才會(huì)顯示主頁(yè)面，所以如果出現(xiàn)一個(gè)沒(méi)有成功加載都會(huì)導(dǎo)致頁(yè)面不會(huì)出現(xiàn)。值得一提的是async這個(gè)屬性等于true的時(shí)候是異步加載，這樣加載速度會(huì)更加快，但是這也會(huì)出現(xiàn)一個(gè)問(wèn)題：如果出現(xiàn)一個(gè)js會(huì)依賴另一個(gè)js的時(shí)候就會(huì)可能出現(xiàn)錯(cuò)誤，就比如上面的代碼中的app.js用到了jquery，當(dāng)app.js加載速度會(huì)jquery-1.8.3.min.js更快的時(shí)候會(huì)提前渲染，此時(shí)jquery并沒(méi)有加載，所以app.js使用到j(luò)query的地方就會(huì)報(bào)錯(cuò)。
Script異步加載還可以用defer屬性，defer屬性與async不同的是defer載入成功不會(huì)自動(dòng)渲染而是等到onload事件觸發(fā)時(shí)才會(huì)開(kāi)始執(zhí)行，而async屬性是文件載入成功就立即執(zhí)行。
因上面我是等著onload方法觸發(fā)后才開(kāi)始載入js文件，所以使用async或者defer差別不大
如果是要完全避免上面的問(wèn)題則是要等依賴的js加載成功，觸發(fā)script.onload方法時(shí)再去加載該js,則可以解決因加載速度比依賴的js的加載速度更快出現(xiàn)的問(wèn)題。還有一種方法，就是把所有的js打包到一個(gè)js里面，我這里是使用了webpack打包程序?qū)⒄麄€(gè)程序都打包到了一個(gè)js，這樣加載就不會(huì)有問(wèn)題了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87189.html
摘要：介紹最近開(kāi)始刷一些書(shū)和題此系列是介紹在讀最佳實(shí)踐的一些收獲和體會(huì)。先修改諸如命名，格式等不涉及具體邏輯的內(nèi)容重構(gòu)過(guò)程中要持續(xù)測(cè)試，在多個(gè)瀏覽器測(cè)試，確保重構(gòu)的部分功能正確。 介紹 最近開(kāi)始刷一些書(shū)和題,此系列是介紹在讀Web最佳實(shí)踐的一些收獲和體會(huì)。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...
摘要：介紹最近開(kāi)始刷一些書(shū)和題此系列是介紹在讀最佳實(shí)踐的一些收獲和體會(huì)。先修改諸如命名，格式等不涉及具體邏輯的內(nèi)容重構(gòu)過(guò)程中要持續(xù)測(cè)試，在多個(gè)瀏覽器測(cè)試，確保重構(gòu)的部分功能正確。 介紹 最近開(kāi)始刷一些書(shū)和題,此系列是介紹在讀Web最佳實(shí)踐的一些收獲和體會(huì)。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...
摘要：介紹最近開(kāi)始刷一些書(shū)和題此系列是介紹在讀最佳實(shí)踐的一些收獲和體會(huì)。先修改諸如命名，格式等不涉及具體邏輯的內(nèi)容重構(gòu)過(guò)程中要持續(xù)測(cè)試，在多個(gè)瀏覽器測(cè)試，確保重構(gòu)的部分功能正確。 介紹 最近開(kāi)始刷一些書(shū)和題,此系列是介紹在讀Web最佳實(shí)踐的一些收獲和體會(huì)。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...
摘要：實(shí)際執(zhí)行緩存操作的函數(shù)需要用到數(shù)據(jù)行的延遲值，如果某個(gè)數(shù)據(jù)行的延遲值不存在，那么程序?qū)⑷∠麑?duì)這個(gè)數(shù)據(jù)行的調(diào)度。上一篇文章實(shí)戰(zhàn)第二章使用構(gòu)建應(yīng)用第三節(jié)網(wǎng)頁(yè)緩存下一篇文章實(shí)戰(zhàn)第二章使用構(gòu)建應(yīng)用第五節(jié)網(wǎng)頁(yè)分析 上一篇文章： Python--Redis實(shí)戰(zhàn)：第二章：使用Redis構(gòu)建Web應(yīng)用：第三節(jié)：網(wǎng)頁(yè)緩存下一篇文章：Python--Redis實(shí)戰(zhàn)：第二章：使用Redis構(gòu)建Web應(yīng)用：第...
閱讀 866·2023-04-25 15:13
閱讀 1481·2021-11-22 12:03
閱讀 882·2021-11-19 09:40
閱讀 1984·2021-11-17 09:38
閱讀 1802·2021-11-08 13:18
閱讀 705·2021-09-02 15:15
閱讀 1815·2019-08-30 15:54
閱讀 2792·2019-08-30 11:12
