前端網頁載入優化

在現代網路發達的大環境下，各類網站大中型網站橫行，網站性能體現的尤為重要，特別是能給訪問用戶一個不同感受的體驗，同樣的網路環境，有的網站「嗖」地一下出來，而有的網站等半天才小露頭腳，如此一來，給用戶產生反感，網站打開速度慢，那訪問用戶幾乎不願意多等，轉頭離開了，這樣就大大減少了網頁訪問量，嚴重影響了用戶體驗，也不利於SEO優化。

對於前端開發人員而言，對於處理網頁載入性能也是需要做諸多事情的，那麼就介紹一些如何優化性能，且讓頁面提高載入的速度。

1、儘可能減少HTTP請求

減少HTTP請求，其中主要一點就是要合併一些內容，諸如css，圖片，js，合併成一個文件當然最好，這樣可以只進行一次訪問請求即可，同時利用瀏覽器強大的緩存能力，可以達到減少HTTP請求。

比如在實際做法中，使用css精靈圖片，字體圖標，圖片地圖等。

具體方案為：

1、瀏覽器緩存：

對一個網站，一些靜態資源文件諸如CSS、javascript、logo、圖標更新的頻率都比較低，而這些文件又幾乎是每次http請求還都得需要，那麼，如果我們將這些文件緩存在瀏覽器中，可以極好的改善性能。通過設置http頭中的cache-control和expires的屬性，可設定瀏覽器緩存。

2、使用壓縮機制

通常我們在服務端將這些文件進行壓縮處理，之後回到瀏覽器端進行解壓縮，可有效減少通信傳輸的數據量。但既然使用文件壓縮，或多或少會對瀏覽器和服務端產生一定的壓力，所以實際中應酌情使用。

同時遵循以下原則：

(1) 減少DNS請求所耗費的時間：

且不說對錯,因為從基本來說,減少http請求數的確可以減少DNS請求和解析耗費的時間；

(2) 減少伺服器壓力：

這個通常是被考慮最多的,也是我用來講解給別人聽的最大理由,因為每個http請求都會耗費伺服器資源,特別是一些需要計算合併等操作的伺服器,耗費伺服器的cpu資源可不是開玩笑的事情,硬碟可以用錢買來,cpu資源可就沒那麼廉價了；

(3) 減少http請求頭：

當我們對伺服器發起一個請求的時候,我們會攜帶著這個域名下的cookie和一些其他的信息在http頭部里,然後伺服器響應請求的時候也會帶回一些cookie之類的頭部信息.這些信息有的時候會很大,在這種請求和響應的時候會影響帶寬性能。

2、使用圖片懶載入策略

我們瀏覽網頁，圖片往往是最引人注目的，而往往圖片很占網路資源的，使用懶載入策略，可以是頁面載入時只載入首屏頁面用到的圖片即可，其他的圖片資源可以稍後再載入，這也是增加用戶體驗的方式。

3、css放頭部，js放底部，或使用js/css外鏈

根據瀏覽器載入渲染網頁的機制，瀏覽器會在下載完成全部CSS之後才對整個頁面進行渲染，因此最好的做法是將CSS放在頁面最上面，讓瀏覽器儘快下載CSS。如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕，所以可以考慮將CSS放在HEAD中。

對於javascript而言，如果瀏覽器立即載入javascript腳本，可能會阻塞頁面執行，表現緩慢，所以此時盡量放在頁面底部（除了必要的立即執行等的情況）。

有時候，我們合理地使用js/css外鏈載入，使用緩存，是HTML文件大大減小，也一定程度上提高載入的速度，當然這也是據實際情況來看，比如說根據實際用戶訪問的情況（經常性頻繁的瀏覽某一網頁等）。

3、傳輸方面，控制cookie

cookie應儘可能地控制大小，寫入cookie的數據應合理控制，減少傳輸數據量及次數，也是一個優化方案。

4、減少DOM操作

網頁中對DOM操作往往是代價很大的，修改和訪問DOM元素會造成頁面的Repaint和Reflow，循環對DOM操作更是罪惡的行為。所以請合理的使用JavaScript變數儲存內容，考慮大量DOM元素中循環的性能開銷，在循環結束時一次性寫入。減少對DOM元素的查詢和修改，查詢時可將其賦值給局部變數。

5、使用CDN加速

CDN的全稱是Content Delivery Network，即內容分發網路。是一個經策略性部署的整體系統，從技術上全面解決由於網路帶寬小、用戶訪問量大、網點分布不均而產生的用戶訪問網站響應速度慢的根本原因。其目的是通過在現有的Internet中增加一層新的網路架構，將網站的內容發布到最接近用戶的網路「邊緣」，使用戶可以就近取得所需的內容，提高用戶訪問網站的響應速度。

6、減少DNS查找

DNS用於映射主機名和IP地址，如同電話本映射人名與電話號碼一樣，DNS解析有代價，一般一次解析需要20～120毫秒。瀏覽器在DNS查詢完成前不會下載任何東西。

為達到更高的性能，DNS解析通常被多級別地緩存。如由ISP或本地網路維護的DNS緩存伺服器，用戶機器操作系統的緩存。DNS信息會保存在操作系統的DNS緩存中（如windows上的 DNS Client Service）。大多數瀏覽器有自己的緩存，與操作系統的緩存有所不同。只要瀏覽器在自己的緩存上面保留DNS記錄，它不會向操作系統請求DNS記錄。

IE的預設 DNS緩存時間為 30分鐘，由註冊表中的DnsCacheTimeout值指定。Firefox的預設緩衝時間是1分鐘，由network.dnsCacheExpiration配置設定。（Fasterfox將此值改為1小時）。

當客戶端的DNS緩存為空時（瀏覽器與操作系統），DNS查詢的次數等同於網頁中各域名的個數。包括該網頁URL、圖片、腳本文件、樣式表、FLASH對象等使用的域名。減少域名數量可以減少DNS查詢次數。

減少域名主機可減少DNS查詢的次數，但可能造成並行下載數的減少。避免 DNS查詢可減少響應時間，而減少並行下載數可能增加響應時間。一個可行的折中是把內容分布到至少2個，最多4個不同的主機名上。

...

關於網頁載入性能的優化還有很多解決方案，但實際開發中也是根據具體情況來合理分配使用，最大限度地提高網頁性能，提升網頁載入速度，增強用戶體驗性，從而加大用戶訪問量。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！