web項目性能優化--網絡、js、渲染

網絡相關

• 減小http請求數

由於每一個完整的http請求都須要通過DNS尋址、與服務器創建鏈接、發送請求、等待響應、接收數據這樣一個消耗時間成本和資源成本的過程。因此，減小http請求數就等於減小時間和資源的開銷。咱們能夠經過如下幾項操做來減小http請求數：

1. 合併、壓縮js、css文件，這個可使用webpack等前端自動化構建工具實現。可是對於改動頻率不大的文件需單獨引入，好比jquery等第三方文件，這是爲了不這些文件的緩存失效又去從新下載。
2. 使用雪碧圖(css sprite)，即請求一張大圖來替換請求多張圖片，而後使用background-position來取得想要展現的圖片。
3. 使用base64表示極小或極簡單的圖片，這種方法將使圖片跟隨css進行http請求，不會額外開啓線程發送http請求（將圖片拖入chrome瀏覽器，查看控制檯的sources，能夠看到base64編碼）。可是用於大圖則拔苗助長，由於會增長解析css的時間。
4. 使用css、iconfont替代圖片，原理與3相同，如

loading動畫（https://loading.io/css/）

button（https://www.bestcssbuttongenerator.com）

阿里巴巴矢量圖標庫（https://www.iconfont.cn/collections）

• 減少資源體積

能夠經過如下幾個方面進行實施：

1. gzip壓縮
2. js混淆
3. css壓縮
4. 圖片壓縮

• 緩存

能夠經過如下幾個方面來描述：

1. DNS緩存
2. CDN部署與緩存
3. http緩存

常見的http緩存類型：私有緩存（通常爲本地瀏覽器緩存）和代理緩存。

好處：減小冗餘的數據傳輸、減小網費；減小服務器壓力；web緩存減小延遲和網絡阻塞，進而減小顯示某個資源所用的時間

查閱更多信息：http://blog.poetries.top/FE-Interview-Questions/simply/#_5-3-http-cache%EF%BC%9A%E5%B0%B1%E6%98%AF-http-%E7%BC%93%E5%AD%98

js相關

• 根據js時間線，一般把js放在文檔最下面引入，或使用異步加載/延遲加載，避免js阻塞html和css的加載。

• 懶執行，就是將某些邏輯延遲到使用時再執行。該技術可用於首屏優化，對於某些耗時邏輯並不須要在首屏就使用的，就可使用懶執行。懶執行須要喚醒，通常能夠經過定時器或者事件的調用來喚醒

• 使用css而不是js來實現DOM動畫

• 使用快速DOM遍歷，document.getElementById()等

渲染相關

• 減小重排重繪

1. 分離讀寫操做
2. 將屢次改變樣式屬性的操做合併成一次性操做

• 懶加載

懶加載就是將不關鍵的資源延後加載。懶加載的原理是隻加載自定義區域（一般是可視區域或即將進入可視區域）內須要加載的東西。

---

使用谷歌網頁性能優化工具PageSpeed Insights來測試網頁性能: https://developers.google.com/speed/pagespeed/insights/