前端性能優(yōu)化一直都是一個老生常談的問題，面試中也經常被問到，今天就結合雅虎前端團隊的35條前端優(yōu)化原則來總結下我在前端開發(fā)過程中的一些優(yōu)化手段。
我將從六個方面來優(yōu)化我們的前端頁面，分別是：網頁內容、服務器、cookie、css、js、圖片。

cookie

減少cookie的傳輸的大小，主要從以下幾個方面去做

• 去除沒有用的cookie，如果網頁不需要就完全禁掉
• 將cookie大小減到最小
• 設置合適的過期時間

使用無cookie域名，因為對于一些靜態(tài)資源沒必要使用cookie，所以我們通常用一個單獨的域名來存放這些靜態(tài)資源，這樣一個節(jié)省帶寬，提高網站的訪問速度。

css

將樣式表置頂，放在head標簽底部，這樣可以逐步加載已經下載好的網頁，不讓用戶一直等待在白屏上，提高用戶體驗。

避免使用css表達式，使用js代替，原因在于它的效率低，性能損耗大。

link代替import，import相當于將css放在網頁內容底部，只有當頁面內容全部加載完畢后才進行加載。

避免使用濾鏡，IE5-IE8支持，IE9不支持，使用濾鏡會導致圖片下載時阻塞網頁渲染，還會導致內存使用的問題，總之性能低下。

js

將腳本至于body底部，因為腳本加載的時候會阻塞瀏覽器加載其它資源（其它什么事都干不了），如果放在頂部，會有一段的白屏時間，用戶體驗不好，所以一般放在body底部，等待網頁內容下載完畢后再去加載腳本。

使用defer關鍵字，可以讓腳本在網頁加載完畢后在執(zhí)行，主流瀏覽器都支持。

使用async關鍵字，HTML5新增，可以讓腳本異步執(zhí)行。

使用外部的腳本文件，可以被瀏覽器緩存，代碼復用；減少網頁內容大?。?/p>

去除多余的代碼和注釋（壓縮）

減少DOM操作

• 緩存已經訪問過的元素
• 設置display為none，在更新節(jié)點，更新完之后，再顯示
• 減少reflow
• 使用事件委托綁定事件

圖片

保證質量的情況下，壓縮圖片到最小。

使用圖片精靈（CSS Sprite）

使用小且可以緩存的favicon.ico。

服務器

使用CDN加速，提高網站的訪問速度，大型網站必不可少。

添加Expires或者Cache-Control響應頭部，充分使用瀏覽器緩存（304）。

gzip壓縮傳輸內容，減少傳輸內容。

配置ETags，還是利用瀏覽器的304緩存。

能夠用Ajax get請求就使用它，不能夠采用post。

網頁內容（壓軸）

減少HTTP請求，有以下方式

• 多個文件合并，利用前端自動化工具gulp，webpack，grunt。
• css sprites
• 內聯圖片，base64

減少DNS查詢次數，域名不要太多

避免頁面跳轉，如301永久重定向，瀏覽器接收到這個響應后，會再次發(fā)送http請求，url為響應中的location。

緩存Ajax，雖然Ajax可以異步下載所需東西，但是我們再使用它的時候，采用下面的規(guī)則可以提高下載速度

• 添加Expires或者Cache-Control報文頭部使響應可以被客戶端緩存。
• 壓縮響應內容
• 減少DNS查詢
• 避免跳轉
• 配置Etags

延遲下載，這點很重要，但是我們首先需要保證網頁最初打開時能工作的最小內容集是什么，剩余的就屬于延遲加載的東西，比如常見的滾動到底部加載更多。

提前加載，與延遲加載目的相反，提前加載接下來需要訪問的資源，如谷歌當網頁加載完成后，馬上去下載一個所有頁面都用到的image sprites。還有一個例子是根據用戶的輸入推斷要加載的內容，很多搜索引擎都這樣做。

減少DOM數量。

根據域名劃分內容，瀏覽器一般對同一個域的下載連接數有限制，按照域名劃分內容可以增大瀏覽器并行下載，但是注意控制域名在2-4個左右，不然dns查詢也是個問題。

減少iframe
優(yōu)點

• 加載速度較慢的內容，如廣告
• 瀏覽器會對iframe中的內容進行安全控制
• 腳本可以并行下載

缺點

• 阻止頁面渲染
• 不利于SEO