現代網絡發達的大環境下，各類網站大中型網站橫行，網站性能體現的尤為重要，特別是能給訪問用戶一個不同感受的體驗，同樣的網絡環境，有的網站“嗖”地一下出來，而有的網站等半天才小露頭腳，如此一來，給用戶產生反感，網站打開速度慢，那訪問用戶幾乎不愿意多等，轉頭離開了，這樣就大大減少了網頁訪問量，嚴重影響了用戶體驗，也不利于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個不同的主機名上。

...

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