前端性能優化方法

時間 2019-11-06

標籤前端性能優化方法欄目系統性能简体版

原文原文鏈接

平常工做和生活中，咱們常常利用瀏覽器去打開一些URL來獲取咱們所需的資源，那麼做爲一個開發者或者性能測試工程師，如何去測試並提高優化前端的性能呢？前端

1、瀏覽器打開URL和方式和過程web

不一樣瀏覽器工做方式不徹底同樣，大致來說，瀏覽器的核心是瀏覽器引擎；不一樣瀏覽器對W3C的規範支持不盡相同，在具體功能的實現上也不徹底一致。chrome

一、鏈接到URL所在的服務器瀏覽器

用戶在瀏覽器地址欄輸入URL，打開URL時，瀏覽器首先尋找該URL所在的服務器。經過向DNS服務器查詢，獲取該URL所在網站的IP地址，而後瀏覽器向該地址發起鏈接請求，緩存

簡歷瀏覽器到服務器間的鏈接。安全

二、獲取頁面對應的HTML文檔性能優化

鏈接創建後，瀏覽器向服務器發送http請求，請求URL對應的HTML文檔，不管請求的URL是一個靜態HTML文件仍是一個動態的腳本（ASPX、PHP或JS），服務器返回給瀏覽器服務器

的必定是一個HTML文檔。該文檔就是瀏覽器須要呈現的畫面。網絡

三、解析文檔並獲取所需的資源併發

瀏覽器獲取到HTML文檔後對其進行解析，目的是知道該頁面所需資源以及生成DOM樹（生成DOM樹的工做與下載頁面所需資源是並行的）。

四、JS及CSS文件

頁面處理JS文件，只需保證一下兩點：

①全部JS文件按照其在HTML穩重出現的順序執行，這樣能夠保證JS文件之間的依賴關係不被破壞；

②JS文件在執行時，其以來的DOM樹已經創建好；

CSS文件的做用：

瀏覽器處理CSS文件會影響頁面的展現，CSS通常用於控制頁面元素的顯示效果；若是DOM樹上某個元素被CSS修改後，瀏覽器可能須要從新對頁面局部或總體進行重繪。

此後若是某外部樣式表（Style Sheet）文件被加載，瀏覽器會根據外部樣式表文件的內容從新渲染頁面元素，所以，通常建議把對樣式表的引用放在HTML文檔的最前面。

五、onload事件

當HTML文件解析完成，生成DOM樹，全部頁面所需資源都已成功下載和執行後，瀏覽器會發出onload事件並回調HTML文檔中的onload函數。

對瀏覽器來講，onload事件是最接近頁面就緒的事件，但onload執行完成，並不徹底表明頁面已就緒，用戶能夠進行操做，由於在onload執行完成後，頁面可能還有一些

JavaScript腳本須要在其後運行（這種狀況在大量運用Ajax技術的網頁上很是常見）。

PS:上面簡略說了下瀏覽器打開URL的過程，固然，具體的如何經過DNS服務器獲取IP，HTML下載和渲染以及更多的前端知識，請自行查閱。。。

2、提升前端性能的方法

要優化提高前端性能，有如下兩大方法：

①減小頁面加載所需時間；

②提高用戶角度的觀感體驗（讓用戶以爲頁面更快）；

減小頁面加載所需時間，能夠從請求數量、請求併發度及網絡傳輸時間等方面着手；提高用戶觀感，則主要從讓頁面儘快展現入手；下面一一介紹：

一、減小網絡時間

瀏覽器從服務端獲取HTML文檔和資源都須要經歷「DNS解析——創建鏈接——獲取鏈接——斷開鏈接」的過程；若是能減小DNS解析和文件在網絡上傳輸的時間，性能天然能獲得提高。

①使用DNS緩存技術

使用DNS緩存技術可讓用戶得到更快的DNS解析時間，通常而言，因爲瀏覽器自己就具備必定的DNS緩存機制，因此服務端的DNS緩存並不能帶來太大的性能提高。

②減小須要傳輸的文件尺寸

在網絡帶寬有限的狀況下，減小傳輸的文件尺寸能夠提高很大的性能。常見的有將文件進行壓縮的方法，除此以外，還有使用混淆等方法儘可能減小JS文件和樣式表的大小，從JS文件和

樣式表中去除不須要使用的部分等，均可以起到減小須要傳輸文件尺寸的做用。

③加快文件傳輸速度

Internet網站的用戶一般分佈在一個較廣闊的區域內，Internet自己的多層次網絡結構致使從某一個節點到另外一些節點之間的可用帶寬和網絡傳輸速度都比較慢；這種狀況下使用CDN技術，

讓用戶儘量訪問到對用戶節點而言更快速的服務器就能夠加快文件傳輸速度。

國內而言，移動聯通電信三大運營商之間並無創建良好的互聯互通，一般需在三個服務商所在網絡中設置GDN服務器；另外，出於地域緣由，創建CDN也是種常見的方法。

CDN(Content Delivery Network):內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。

二、減小發送的請求數量

在短鏈接狀況下，每一個請求都須要通過「創建鏈接——發送數據——斷開鏈接」的過程，所以減小請求數量可帶來顯著的性能提高；即便使用持久鏈接方式，因爲瀏覽器與每一個服務器之間的

創建的持久鏈接數量是有限的，減小必須的請求也能夠帶來性能提高。

①利用瀏覽器緩存

爲了充分利用瀏覽器緩存，須要在服務端保證每一個能夠被緩存的資源在被服務端返回時附帶合適的expries頭信息；此外，爲了保證有儘量多的內容能夠被緩存，也要求網站儘量將頁面

中較少改變的部分提取出來。

△保證服務端返回資源的響應頭帶有Expires信息，使得資源能夠被緩存；

△用引用方式引用樣式表和JS腳本。若是使用內嵌的樣式表和JS腳本，每次HTML文檔的變化都會致使樣式表和JS腳本從新加載，沒法充分利用緩存；固然，在沒有緩存或樣式表與JS腳本

常常變更的狀況下，引用方式使用樣式表和JS腳本反而會致使更多的http請求；

△使用更多的URI能夠被緩存。

②使用合併的圖片文件

當頁面包含不少個小圖片文件時，能夠考慮將小圖片文件合併爲一個大的圖片文件，在頁面使用CSS Sprites技術將大圖片顯示爲分隔開的小圖片，在沒有緩存的狀況下，將許多小圖片合併爲

大圖片文件能夠大量減小http請求數。

三、提升瀏覽器下載的併發度

①JS文件放在HTML文檔最後

在某些瀏覽器上，JS文件的下載和執行會阻止其餘頁面資源文件的下載和執行，之道JS文件下載和執行完，其餘資源文件才能夠開始下載和執行，所以，將JS文件放在HTML文檔最後能夠保證

JS文件不會阻止任何其餘元素的下載。

②使用多個域名

瀏覽器對服務器的鏈接限制是基於域名的。好比S服務器有2個域名a.com和b.com，在瀏覽器限制最多與同一個域名創建2個鏈接時，瀏覽器實際上能夠與服務器S創建4個鏈接；

通常大型網站都擁有幾個域名，根據文件類型（靜態資源、動態資源、JS腳本等）選擇合適的服務器進行部署，也是個很好的作法。

四、讓頁面儘早開始顯示

①將樣式表的引用放在HTML文檔的開頭（如放在<Head>標籤中），這樣可使樣式表在一開始就被下載下來，一旦樣式表下載完成，瀏覽器就可使用樣式表中定義的樣式開始在屏幕上

顯示頁面元素；另外，也避免了新樣式表可能帶來的屏幕顯示的重繪。

②將JS的引用放在HTML文檔的最後，這樣JS文件的下載和執行會在全部頁面都下載完成後，不會阻止其餘頁面元素的顯示。從用戶感官上說，JS文件的下載和執行時間徹底不會被用戶感受到。

PS：上面幾項都是一些提高前端性能的通用方式，除這些以外，還有更多更細緻的針對JS文件或樣式表的提高性能技巧，後續會不斷更新。。。

3、常見的前端性能工具

下面簡單介紹下幾種常見的前端性能工具，具體使用方法及用途請自行查找資料。

一、Firebug工具

①Firebug工具是一個備受推崇的、強大的web開發工具，它提供了方便的查看頁面元素功能，容許用戶以鼠標指示、DOM樹等方式查看任意頁面元素；

②提供了JavaScript控制檯，容許用戶在控制檯直接調試JavaScript；

③提供了可視化的CSS標尺，方便用戶調整頁面佈局；

④提供了網路面板，容許用戶獲知每一個頁面被加載過程當中的頁面元素下載和執行細節；

⑤還提供了良好的擴展，好比YSlow和Page Spend工具就是基於其擴展而創建；

⑥Firebug以Firefox的插件形式存在，須要安裝Firebug；

⑦Firebug給出了瀏覽器請求URL過程當中發生的所有HTTP交互，列出每一個元素的返回碼、大小及按照時間序列給出的頁面元素下載時間等信息；

二、HttpWatch工具

①HttpWatch是能夠在IE和Firefox下使用的一個商業網頁數據分析工具，其提供了一個基於basic的免費版本；

②安裝簡單，下載安裝包後在Windows平臺上直接執行便可；

③與Firebug相似，HttpWatch也給出了瀏覽器請求URL過程當中發生的所有HTTP交互，列出每一個元素的返回碼、大小及按照時間序列給出的頁面元素下載時間等信息；

④HttpWatch在Page Event選項卡中給出了Render Start（瀏覽器開始渲染頁面的時間）、Page Load（onload事件觸發時間）和HTTP Load時間（最後一個請求發送和接受完畢的時間點）；

⑤以上三個時間對應Firebug中的第一個Paint事件發生時間、onload時間以及收到最後一個HTTP響應的結束時間；

三、Chrome自帶的開發工具

①chrome是Google推出的一款瀏覽器產品，特色是快速、安全、簡潔。

②chrome開發工具在對URL的請求過程的發生的HTTP交互信息和Firebug以及HttpWatch很類似；

③chrome開發工具還提供了很是詳盡的瀏覽器時間信息；

四、Page Speed工具

Page Speed是一個基於Firebug工具的前端性能優化工具，由Google建立併發布，其依據一些規則對頁面進行檢查，查找可優化的地方並給出響應建議。

五、DynaTrace AJAX Edition工具

①DynaTrace AJAX Edition是Windows平臺上的免費工具，其提供了很是強大的前端性能測試支持，主要針對Ajax技術的應用而開發；

②DynaTrace AJAX Edition可以給出瀏覽器訪問給定的URL時的許多信息，如頁面各元素下載和執行時間點、頁面對瀏覽器的緩存使用狀況，並給出一些優化建議；

③DynaTrace AJAX Edition工具最突出的功能是對頁面的JavaScript的調優；

PS：合適的工具能夠大大下降前端性能問題定位的難度，但不要過分依賴工具給出的建議，相對於工具，更多的是對瀏覽器工做方式和前端性能自己的瞭解。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。