前端性能優化一直都是一個老生常談的問題，面試中也經常被問到，今天就結合雅虎前端團隊的35條前端優化原則來總結下我在前端開發過程中的一些優化手段。
我將從六個方面來優化我們的前端頁面，分別是：網頁內容、服務器、cookie、css、js、圖片。
cookie
減少cookie的傳輸的大小，主要從以下幾個方面去做
- 去除沒有用的cookie，如果網頁不需要就完全禁掉
- 將cookie大小減到最小
- 設置合適的過期時間
使用無cookie域名，因為對于一些靜態資源沒必要使用cookie，所以我們通常用一個單獨的域名來存放這些靜態資源，這樣一個節省帶寬，提高網站的訪問速度。
css
將樣式表置頂，放在head標簽底部，這樣可以逐步加載已經下載好的網頁，不讓用戶一直等待在白屏上，提高用戶體驗。
避免使用css表達式，使用js代替，原因在于它的效率低，性能損耗大。
link代替import，import相當于將css放在網頁內容底部，只有當頁面內容全部加載完畢后才進行加載。
避免使用濾鏡，IE5-IE8支持，IE9不支持，使用濾鏡會導致圖片下載時阻塞網頁渲染，還會導致內存使用的問題，總之性能低下。
js
將腳本至于body底部，因為腳本加載的時候會阻塞瀏覽器加載其它資源（其它什么事都干不了），如果放在頂部，會有一段的白屏時間，用戶體驗不好，所以一般放在body底部，等待網頁內容下載完畢后再去加載腳本。
使用defer關鍵字，可以讓腳本在網頁加載完畢后在執行，主流瀏覽器都支持。
使用async關鍵字，HTML5新增，可以讓腳本異步執行。
使用外部的腳本文件，可以被瀏覽器緩存，代碼復用；減少網頁內容大小；
去除多余的代碼和注釋（壓縮）
減少DOM操作
- 緩存已經訪問過的元素
- 設置display為none，在更新節點，更新完之后，再顯示
- 減少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永久重定向，瀏覽器接收到這個響應后，會再次發送http請求，url為響應中的location。
緩存Ajax，雖然Ajax可以異步下載所需東西，但是我們再使用它的時候，采用下面的規則可以提高下載速度
- 添加Expires或者Cache-Control報文頭部使響應可以被客戶端緩存。
- 壓縮響應內容
- 減少DNS查詢
- 避免跳轉
- 配置Etags
延遲下載，這點很重要，但是我們首先需要保證網頁最初打開時能工作的最小內容集是什么，剩余的就屬于延遲加載的東西，比如常見的滾動到底部加載更多。
提前加載，與延遲加載目的相反，提前加載接下來需要訪問的資源，如谷歌當網頁加載完成后，馬上去下載一個所有頁面都用到的image sprites。還有一個例子是根據用戶的輸入推斷要加載的內容，很多搜索引擎都這樣做。
減少DOM數量。
根據域名劃分內容，瀏覽器一般對同一個域的下載連接數有限制，按照域名劃分內容可以增大瀏覽器并行下載，但是注意控制域名在2-4個左右，不然dns查詢也是個問題。
減少iframe
優點
- 加載速度較慢的內容，如廣告
- 瀏覽器會對iframe中的內容進行安全控制
- 腳本可以并行下載
缺點
- 阻止頁面渲染
- 不利于SEO
