為了讓用戶得到更好的體驗，我們經常會采用一些手段來優化我們的前端工程，下面給大家簡單介紹一些前端優化的方案

參照雅虎前端軍規進行簡單網頁的優化

我們的優化原則有以下幾個：

• 能緩存的，盡量強緩存。
• 引入外部資源時不要出現超時、404的狀況。
• 減少HTTP請求數。
• 合理設置cookie的大小以及過期時間。
• 合理利用懶加載。

網頁內容的優化

1、懶加載數據。
首先根據標簽的left和top屬性判斷是否顯示在了屏幕中（如果顯示在屏幕中，其left和top屬性值應該是在0到窗口長寬之間）。
如果顯示在屏幕中，則將src標簽的內容替換為圖片的url。

2、使用外部引入的css和js文件，并且引入的css和js越少越好（HTTP2.0不適用）。
這里可以使用webpack打包這些文件，也可以使用強緩存與協商緩存來緩存這些文件。

3、不要在中縮放圖片。
img計算縮放也需要時間

4、避免重定向。
重定向會重新渲染網頁。

5、盡量不要用iframe。
因為iframe會阻塞渲染。

6、使用base64編碼將圖片嵌入到樣式表中，減少請求數（由于base64會比一般的圖片大一點，只適用于那些體積比較小但是很常用的圖片）。

7、使用雪碧圖（精靈圖）：
通過使用background-position：-xpx -ypx;來調整圖片的位置，不過HTTP2不適用，原因為HTTP2實際上是多路復用的，只用一個TCP連接，所以多個圖片的請求也是在同一個TCP連接里，這樣能省下非常多的請求時間，但壞處就是單連接開銷很大，如果要傳多個大文件，就很麻煩。

8、要有網站小圖標favicon.ico。

如果沒有小圖標，會引起404，拖慢網頁加載進度。

9、能使用jpeg就不要用png，能使用png8就不要用png24。
（1）色彩豐富的、大的圖片切成jpg的；
（2）尺寸小的，色彩不豐富的和背景透明的切成gif或者png8的；
（3）半透明的切成png24。

10、使用canvas壓縮圖片。

css的優化

1、避免使用@import。
使用@import相當于將引入的css放在了頁面底部，因為使用@import引用的文件只有在引用它的那個css文件被下載、解析之后，瀏覽器才會知道還有另外一個css需要下載，這時才去下載，然后下載后開始解析、構建render tree等一系列操作。因此使用@import會拖慢渲染的過程。

2、將樣式表放在head中。
如果放在body中，可能出現在瀏覽器下載好css樣式表之前，組件就已經加載好了的情況，這可能會導致重新渲染。

3、避免使用css表達式。
如：expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
解析表達式和計算都需要時間。

JavaScript的優化

1、盡量減少DOM訪問。

2、使用事件代理（減少DOM操作）。

3、把腳本放在底部（加載腳本時會阻塞頁面渲染）。

4、合理使用節流函數和防抖函數。

使用CDN優化加載速度

CDN即內容分發網絡。它依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。

針對webpack打包優化

針對webpack打包優化主要是減少打包后的代碼體積，主要的措施有：
1、進行tree-shaking
2、使用UglifyJS等插件壓縮代碼
3、分割代碼、按需加載

我們可以使用webpack-bundle-analyzer這個插件來查看每部分代碼的加載耗時，進而分析可以優化的地方。

開啟Gzip壓縮

這是一個非常有效的優化方案，可以減少60%左右的代碼體積，使用node.js+express可以非常便捷的開啟Gzip

const express = require('express'); const app = express(); const compression = require('compression'); app.use(compression()); // 注意，使用compression中間件必須要在其他中間件之前

總結

以上是生活随笔為你收集整理的前端优化方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。