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