端性能優化方法
一、瀏覽器打開URL和方式和過程
不同瀏覽器工作方式不完全一樣，大體來講，瀏覽器的核心是瀏覽器引擎；不同瀏覽器對W3C的規範支持不盡相同，在具體功能的實現上也不完全一致。
1、連接到URL所在的服務器
用戶在瀏覽器地址欄輸入URL，打開URL時，瀏覽器首先尋找該URL所在的服務器。通過向DNS服務器查詢，獲取該URL所在網站的IP地址，然後瀏覽器向該地址發起連接請求，
簡歷瀏覽器到服務器間的連接。
2、獲取頁面對應的HTML文檔
連接建立後，瀏覽器向服務器發送http請求，請求URL對應的HTML文檔，無論請求的URL是一個靜態HTML文件還是一個動態的腳本（ASPX、PHP或JS），服務器返回給瀏覽器
的一定是一個HTML文檔。該文檔就是瀏覽器需要呈現的畫面。
3、解析文檔並獲取所需的資源
瀏覽器獲取到HTML文檔後對其進行解析，目的是知道該頁面所需資源以及生成DOM樹（生成DOM樹的工作與下載頁面所需資源是並行的）。
4、JS及CSS文件
頁面處理JS文件，只需保證一下兩點：
①所有JS文件按照其在HTML穩重出現的順序執行，這樣可以保證JS文件之間的依賴關系不被破壞；
②JS文件在執行時，其以來的DOM樹已經建立好；
CSS文件的作用：
瀏覽器處理CSS文件會影響頁面的展示，CSS一般用於控制頁面元素的顯示效果；如果DOM樹上某個元素被CSS修改後，瀏覽器可能需要重新對頁面局部或整體進行重繪。
此後如果某外部樣式表（Style Sheet）文件被加載，瀏覽器會根據外部樣式表文件的內容重新渲染頁面元素，因此，一般建議把對樣式表的引用放在HTML文檔的最前面。
5、onload事件
當HTML文件解析完成，生成DOM樹，所有頁面所需資源都已成功下載和執行後，瀏覽器會發出onload事件並回調HTML文檔中的onload函數。
對瀏覽器來說，onload事件是最接近頁面就緒的事件，但onload執行完成，並不完全代表頁面已就緒，用戶可以進行操作，因為在onload執行完成後，頁面可能還有一些
JavaScript腳本需要在其後運行（這種情況在大量運用Ajax技術的網頁上非常常見）。
PS:
二、提高前端性能的方法
要優化提升前端性能，有以下兩大方法：
①減少頁面加載所需時間；
②提升用戶角度的觀感體驗（讓用戶覺得頁面更快）；
減少頁面加載所需時間，可以從請求數量、請求並發度及網絡傳輸時間等方面著手；提升用戶觀感，則主要從讓頁面盡快展示入手；下面一一介紹：
1、減少網絡時間
瀏覽器從服務端獲取HTML文檔和資源都需要經歷“DNS解析——建立連接——獲取連接——斷開連接”的過程；如果能減少DNS解析和文件在網絡上傳輸的時間，性能自然能得到提升。
①使用DNS緩存技術
使用DNS緩存技術可以讓用戶獲得更快的DNS解析時間，一般而言，由於瀏覽器本身就具有一定的DNS緩存機制，所以服務端的DNS緩存並不能帶來太大的性能提升。
②減少需要傳輸的文件尺寸
在網絡帶寬有限的情況下，減少傳輸的文件尺寸可以提升很大的性能。常見的有將文件進行壓縮的方法，除此之外，還有使用混淆等方法盡量減少JS文件和樣式表的大小，從JS文件和
樣式表中去除不需要使用的部分等，都可以起到減少需要傳輸文件尺寸的作用。
③加快文件傳輸速度
Internet網站的用戶通常分布在一個較廣闊的區域內，Internet本身的多層次網絡結構導致從某一個節點到另一些節點之間的可用帶寬和網絡傳輸速度都比較慢；這種情況下使用CDN技術，
讓用戶盡可能訪問到對用戶節點而言更快速的服務器就可以加快文件傳輸速度。
國內而言，移動聯通電信三大運營商之間並沒有建立良好的互聯互通，通常需在三個服務商所在網絡中設置GDN服務器；另外，出於地域原因，建立CDN也是種常見的方法。
CDN(Content Delivery Network):內容分發網絡。其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。
2、減少發送的請求數量
在短連接情況下，每個請求都需要經過“建立連接——發送數據——斷開連接”的過程，因此減少請求數量可帶來顯著的性能提升；即使使用持久連接方式，由於瀏覽器與每個服務器之間的
建立的持久連接數量是有限的，減少必須的請求也可以帶來性能提升。
①利用瀏覽器緩存
為了充分利用瀏覽器緩存，需要在服務端保證每個可以被緩存的資源在被服務端返回時附帶合適的expries頭信息；此外，為了保證有盡可能多的內容可以被緩存，也要求網站盡可能將頁面
中較少改變的部分提取出來。
△保證服務端返回資源的響應頭帶有Expires信息，使得資源可以被緩存；
△用引用方式引用樣式表和JS腳本。如果使用內嵌的樣式表和JS腳本，每次HTML文檔的變化都會導致樣式表和JS腳本重新加載，無法充分利用緩存；當然，在沒有緩存或樣式表與JS腳本
經常變動的情況下，引用方式使用樣式表和JS腳本反而會導致更多的http請求；
△使用更多的URI可以被緩存。
②使用合並的圖片文件
當頁面包含很多個小圖片文件時，可以考慮將小圖片文件合並為一個大的圖片文件，在頁面使用CSS Sprites技術將大圖片顯示為分隔開的小圖片，在沒有緩存的情況下，將許多小圖片合並為
大圖片文件可以大量減少http請求數。
3、提高瀏覽器下載的並發度
①JS文件放在HTML文檔最後
在某些瀏覽器上，JS文件的下載和執行會阻止其他頁面資源文件的下載和執行，之道JS文件下載和執行完，其他資源文件才可以開始下載和執行，因此，將JS文件放在HTML文檔最後可以保證
JS文件不會阻止任何其他元素的下載。
②使用多個域名
瀏覽器對服務器的連接限制是基於域名的。比如S服務器有2個域名a.com和b.com，在瀏覽器限制最多與同一個域名建立2個連接時，瀏覽器實際上可以與服務器S建立4個連接；
一般大型網站都擁有幾個域名，根據文件類型（靜態資源、動態資源、JS腳本等）選擇合適的服務器進行部署，也是個很好的做法。
4、讓頁面盡早開始顯示
①將樣式表的引用放在HTML文檔的開頭（如放在<Head>標簽中），這樣可以使樣式表在一開始就被下載下來，一旦樣式表下載完成，瀏覽器就可以使用樣式表中定義的樣式開始在屏幕上
顯示頁面元素；另外，也避免了新樣式表可能帶來的屏幕顯示的重繪。
②將JS的引用放在HTML文檔的最後，這樣JS文件的下載和執行會在所有頁面都下載完成後，不會阻止其他頁面元素的顯示。從用戶感官上說，JS文件的下載和執行時間完全不會被用戶感覺到。
PS：上面幾項都是一些提升前端性能的通用方式，除這些之外，還有更多更細致的針對JS文件或樣式表的提升性能技巧，後續會不斷更新。。。
三、常見的前端性能工具
下面簡單介紹下幾種常見的前端性能工具，具體使用方法及用途請自行查找資料。
1、Firebug工具
①Firebug工具是一個備受推崇的、強大的web開發工具，它提供了方便的查看頁面元素功能，允許用戶以鼠標指示、DOM樹等方式查看任意頁面元素；
②提供了JavaScript控制臺，允許用戶在控制臺直接調試JavaScript；
③提供了可視化的CSS標尺，方便用戶調整頁面布局；
④提供了網路面板，允許用戶獲知每個頁面被加載過程中的頁面元素下載和執行細節；
⑤還提供了良好的擴展，比如YSlow和Page Spend工具就是基於其擴展而建立；
⑥Firebug以Firefox的插件形式存在，需要安裝Firebug；
⑦Firebug給出了瀏覽器請求URL過程中發生的全部HTTP交互，列出每個元素的返回碼、大小及按照時間序列給出的頁面元素下載時間等信息；
2、HttpWatch工具
①HttpWatch是可以在IE和Firefox下使用的一個商業網頁數據分析工具，其提供了一個基於basic的免費版本；
②安裝簡單，下載安裝包後在Windows平臺上直接執行即可；
③與Firebug類似，HttpWatch也給出了瀏覽器請求URL過程中發生的全部HTTP交互，列出每個元素的返回碼、大小及按照時間序列給出的頁面元素下載時間等信息；
④HttpWatch在Page Event選項卡中給出了Render Start（瀏覽器開始渲染頁面的時間）、Page Load（onload事件觸發時間）和HTTP Load時間（最後一個請求發送和接受完畢的時間點）；
⑤以上三個時間對應Firebug中的第一個Paint事件發生時間、onload時間以及收到最後一個HTTP響應的結束時間；
3、Chrome自帶的開發工具
①chrome是Google推出的一款瀏覽器產品，特點是快速、安全、簡潔。
②chrome開發工具在對URL的請求過程的發生的HTTP交互信息和Firebug以及HttpWatch很相似；
③chrome開發工具還提供了非常詳盡的瀏覽器時間信息；
4、Page Speed工具
Page Speed是一個基於Firebug工具的前端性能優化工具，由Google創建並發布，其依據一些規則對頁面進行檢查，查找可優化的地方並給出響應建議。
5、DynaTrace AJAX Edition工具
①DynaTrace AJAX Edition是Windows平臺上的免費工具，其提供了非常強大的前端性能測試支持，主要針對Ajax技術的應用而開發；
②DynaTrace AJAX Edition能夠給出瀏覽器訪問給定的URL時的許多信息，如頁面各元素下載和執行時間點、頁面對瀏覽器的緩存使用情況，並給出一些優化建議；
③DynaTrace AJAX Edition工具最突出的功能是對頁面的JavaScript的調優；
PS：合適的工具可以大大降低前端性能問題定位的難度，但不要過度依賴工具給出的建議，相對於工具，更多的是對瀏覽器工作方式和前端性能本身的了解。
端性能優化方法