經典面試題-Web前端性能優化方法之延遲加載
在昨天的文章《經典面試題-Web前端性能優化方法（1）》中，我們講解了幾個Web前端性能優化的措施，今天我們繼續來學習下其他性能優化的方法。
延遲加載
一個頁面的展示如果每次都要等到所有內容都加載完畢，頁面的加載速度勢必會受到很大影響，這個時候延遲加載的優勢就體現出來了。
延遲加載是保證頁面初次加載時，所需要的最小內容集，其他的內容在需要的時候再進行加載，這可以保證頁面只需加載最少的資源，加快響應速度。
JS延遲加載
Javascript文件延遲加載有幾種方法，這裡我就簡單的表述幾種
讓js最後加載
在引入外部js文件時，我們將js文件放在<body>的結束標籤之前，這樣可以讓js文件在最後引入，從而可以加快頁面加載速度。下面這張圖就是百度首頁的js文件，可以看到這些文件是放在頁面的底部的
讓js文件最後加載
使用setTimeout方法
使用setTimeout方法，動態的添加js腳本到head中
setTimeout方法
Google幫助頁面的推薦方案
將下面代碼添加至</body>標籤之前，然後修改defer.js為項目中具體的js文件路徑。
Google幫助頁面推薦方案
需要注意的是這個外部引入的文件中不應該包含頁面正常加載需要的js代碼，而應該是一些在頁面加載後才執行的js代碼，例如綁定的click，change事件。
使用lazyload.js插件
lazyload.js是一款jQuery插件，使用方法如下
lazyload.js插件
圖片延遲加載
現在很多的Web或者App應用中的圖片都是進入可視區域時才去加載，這就用到了延遲加載的知識，圖片的延遲加載也有幾種方法，這裡也總結一下。
使用lazyload.js插件
lazyload.js是一款jQuery插件，需要在lazyload.js之前引入jQuery文件，如下圖所示
lazyload延遲加載
原生Javascript代碼圖片滾動加載
使用Javascript代碼控制圖片在滾動到可視區域時才加載，代碼如下
Javascript實現圖片延遲加載
CSS文件延遲加載
CSS文件的延遲加載同樣有幾種方法，這裡做下總結
使用lazyload.js插件
這裡同js文件的延遲加載一樣，引入lazyload.js
lazyload延遲加載
使用setTimeout方法實現
我們同樣可以使用setTimeout方法去實現css的延遲加載
setTimeout實現css延遲加載
總結
今天這篇文章主要針對延遲加載來實現Web性能優化的，後面會繼續更新Web性能優化的文章。
相關推薦
