頁面效能優化是前端從未停止**的問題，雅虎將 web 頁面的優化分為 7 部分，總結了 35 條軍規。這裡，總結頁面從輸入回車到內容展現這一過程中的優化方法，主要目的是為了縮短頁面的渲染時間，使頁面內容盡可能快的展示出來。
初次載入頁面，瀏覽器請求資源到接收到該資源之間，需要經歷一段漫長的網路傳輸過程。
dns 解析
瀏覽器請求乙個網路資源，如 html、css、js、img等，如 baidu.com，這是網域名稱，方便人們記憶，但機器只認 ip 位址。為了能夠找到正確的伺服器，就需要 dns 解析，找到對應的 ip。當瀏覽器遇到乙個新的網域名稱，就需要進行一次 dns 解析。
頁面中的外部資源網域名稱越多，需要的 dns 解析總時間就越長。因此，外部資源的網域名稱個數應盡可能的少。
根據 ip 位址請求資源
當 dns 解析完，獲取到對應的 ip 位址後，瀏覽器會向該伺服器傳送請求，建立 tcp 連線。不同瀏覽器對於同一網域名稱的併發連線數量均有限制，2~8個。如果外部資源均部署在同一伺服器上，當數量超過瀏覽器的限制時，就會造成阻塞，後面的資源需要等待前面的資源接受完後才能傳送請求。也就是說，外部資源應該盡可能多的部署到不同的伺服器上，但這與上文的 dns 解析優化矛盾了。因此，需要做乙個衡量，外部資源應該部署到多少個不同的伺服器上。
tcp 連線優化
tcp 每次連線都需要經過三次握手才能建立起來，這是乙個耗時的操作。
可以通過合併靜態資源，如合併 css、js，使用雪碧圖的方式減少外部資源請求次數，從而減少 tcp 連線次數。
（雅虎軍規：避免 img 的 src 為空）src為空，瀏覽器還是會向伺服器傳送請求的。
資源傳輸
除去網路因素，資源傳輸所需的時長取決於該資源的大小，以及接收方與傳送方的物理距離。
（雅虎軍規：壓縮 css、js）減少檔案體積。
（雅虎軍規：使用 cdn）將靜態檔案部署到 *** 上，減少接收方與實際傳送方的距離。
crp瀏覽器從接收到 html 檔案，到頁面內容繪製出來之間同樣發生了很多事情。瀏覽器初次繪製頁面的過程稱為「關鍵渲染路徑」。
對 crp 不熟悉的可以參看理解關鍵渲染路徑這篇譯文。
crp 主要有 6 部分：
1、構建 dom 樹
2、構建 cssom 樹
3、執行 js
4、建立 render 樹
5、布局
6、繪製
構建 dom 樹
當瀏覽器接收到 html 檔案後，開始解析檔案，構建 dom 樹。（雅虎軍規：減少 dom 元素的數量）dom 元素數量越少，html 檔案體積就越小，構建 dom 樹的速度也就越快。由於 dom 樹的構建過程是乙個深度遍歷的過程，dom 樹結構層次不要過深能夠加快遍歷，其次，也是為了後續 js 能夠更快的訪問 dom 。
構建 cssom 樹
（雅虎軍規：將樣式表放在頂部）在解析 html 時，遇到外部資源瀏覽器會立即傳送請求。盡可能快的載入樣式表，構建 cssom 樹，與 dom 樹一起建立 render 樹，讓頁面能夠逐步渲染，盡快的現實出內容。
執行js
（雅虎軍規：將 js 放在底部）因為 js 指令碼會阻塞 html 的解析，不管是內聯還是外聯，一般會將 js 放置在底部。
布局、繪製
這裡會涉及到頁面的回流（reflow）和重繪（repaint）。頁面如果有
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後，如何讓頁面更好更快的執行 從前端的角度來看，效能可以分為兩個方向 從使用者角度來看，乙個是頁面載入的很快，另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...
前端效能優化
隨著現在 越來越酷炫，各種，資源庫，動畫等等用的越來越多，在使用者視覺和功能的提公升的同時，效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s，網民就會流失70 以上。這種說法我覺得不是很正確的，除非是非常重要 必須要使用的 否則超過5s我基本直接關了，體驗太差。所以，使用者 忍讓 是有極限...