隨著前端技術(shù)的不斷發(fā)展诈唬，JS在web應(yīng)用中的作用越來(lái)越來(lái)大夺蛇，同時(shí)也意味著JS越來(lái)越成為前端的瓶頸该面。寫出高性能的JS代碼卡乾，也成為了前端開發(fā)者必備的技能翼悴。這里分享一下《高性能JavaScript》的讀書心得，以便大家更好的理解JS幔妨，寫出更高效的JS代碼鹦赎。
JS加載和執(zhí)行
JS的加載
- 地球人都知道，為了不阻塞頁(yè)面的加載和渲染误堡，JS文件一般放在html的底部加載古话。
- 減少加載的JS腳本數(shù)量，一般采用合并文件的方式
- 減小JS文件大小锁施，壓縮JS文件陪踩，開啟GZIP壓縮
無(wú)阻塞的腳本
避免一次加載一個(gè)很大的JS文件杖们，避免阻塞瀏覽器。主要采用延遲加載技術(shù)肩狂，具體實(shí)現(xiàn)方法包括：
<script type="text/javascript" src="file1.js" defer></script>
帶有defer屬性的script標(biāo)簽，可以放在文檔的任何位置傻谁。對(duì)應(yīng)的JS文件將在script標(biāo)簽解析時(shí)下載孝治，但代碼不會(huì)被執(zhí)行，直到DOM加載完成（onload事件觸發(fā)之前）才會(huì)執(zhí)行栅螟。JS文件下載時(shí)不會(huì)阻塞頁(yè)面的其他處理過(guò)程荆秦。
- 動(dòng)態(tài)創(chuàng)建script元素,通過(guò)src加載腳本
var script= document.createElement ("script");
script.type= "text/javascript";
script.src= "file1.js";
document.getElementsByTagName("head")[0].appendChild(script)
特點(diǎn)：無(wú)論在何處啟動(dòng)下載，文件的下載和運(yùn)行都不會(huì)阻塞頁(yè)面的其他處理過(guò)程力图。如需控制狂態(tài)和加載順序步绸，需要自己添加監(jiān)聽事件處理.
//Internet Explorer
script.onreadystatechange =function(){...}
//Firefox,Opera, Chrome,Safari3+
script.onload = function(){...}
- XMLHttpRequest腳本注入，通過(guò)XHR獲取JS字符串吃媒，填入script元素瓤介。
var xhr= newXMLHttpRequest();
xhr.open("get","file1.js",true);
xhr.onreadystatechange= function(){
if (xhr.readyState==4){
if (xhr.status>=200&&xhr.status<300|| xhr.status== 304){
varscript= document.createElement("script");
script.type= "text/javascript";
script.text= xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null)
特點(diǎn)：下載后可以不用立即添加script元素，從而控制執(zhí)行時(shí)間赘那。
推薦的無(wú)阻塞模式
先加載必要的JS文件刑桑，然后再執(zhí)行l(wèi)oad函數(shù)，再加載其他功能所需的腳本募舟。
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadScript("the-rest.js",function(){
Application.init();
});
</script>
目前各主流的延遲加載類庫(kù)祠斧，也是采用這些技術(shù)。比如拱礁，圖片懶加載琢锋，動(dòng)態(tài)給img元素的src賦值。requireJS是使用動(dòng)態(tài)創(chuàng)建script元素實(shí)現(xiàn)的呢灶。
