高性能js之js文件的加载与解析
? ? ? ? 隨著網(wǎng)站的發(fā)展，現(xiàn)在的網(wǎng)頁已經(jīng)離不開js，經(jīng)常一個(gè)頁面會(huì)引入大量的js。那么該如何合理的加載這些js？
? ? ? ? head標(biāo)簽中引入js文件可能是最常見的一種方式，但是這樣會(huì)造成一個(gè)問題。因?yàn)閖可以說是瀏覽器中的霸主，換句話說在js的引入和解析過程中頁面是不會(huì)進(jìn)行加載和渲染的。那么如果js加載的時(shí)間過長，就會(huì)造成頁面一段時(shí)間的空白，這樣的用戶體驗(yàn)無疑是很差的。下圖是引入head中js和css時(shí)的加載過程。
從上圖可以看到加載和解析每個(gè)js文件時(shí)都會(huì)耗費(fèi)一定的時(shí)間，而這段時(shí)間不能同時(shí)進(jìn)行別的事情，顯然這種情況是不合理的，下面將介紹幾種解決辦法。
? ? 1.將所有<script>標(biāo)簽盡可能的放在靠近<body>的底部，這樣js的加載將在頁面渲染完后進(jìn)行，不會(huì)造成頁面空白的現(xiàn)象。
? ? 2.限制js文件的總數(shù)，盡量合并成js文件，下載一個(gè)100k的文件遠(yuǎn)比下載四個(gè)25k的文件要快。這一工作可以用打包工具實(shí)現(xiàn)，例如“Yahoo! combo handler”。
? ? 3.使用<script>的defer屬性。defer屬性是HTML4增加的東西，只在internet Explorer和fireFox 3.5以上版本才支持。defer 屬性規(guī)定是否對(duì)腳本執(zhí)行進(jìn)行延 遲，直到頁面加載為止。但是要確保<script>中的js不會(huì)改變文檔的內(nèi)容，也就是說沒有document.write.
? ? 4.實(shí)現(xiàn)js的動(dòng)態(tài)加載。例如可以將js的引入封裝成一個(gè)函數(shù)，然后在頁面加載完成后再調(diào)用函數(shù)，個(gè)人覺得這種方法太麻煩，但是有一些js庫可能有封裝好的方法。
? ? 5.使用XHR注入，也就是Ajax技術(shù)動(dòng)態(tài)請(qǐng)求，這種方法的優(yōu)點(diǎn)是你可以下載不立即執(zhí)行的JavaScript代碼，等需要執(zhí)行時(shí)，代碼都已經(jīng)下載完成，可以直接使用，缺點(diǎn)是請(qǐng)求js文件必須在同一個(gè)域。
? ?總結(jié)：以上五種方法可能最常用的也就是前兩種，剛開始刻意要求自己做到前兩點(diǎn)，養(yǎng)成習(xí)慣后就會(huì)覺得順理成章。
?
轉(zhuǎn)載于:https://www.cnblogs.com/alichengyin/p/4190024.html
總結(jié)
以上是生活随笔為你收集整理的高性能js之js文件的加载与解析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hibernate与 MyBatis的比
- 下一篇： 【hadoop2.6.0】利用Hadoo