一個網站的網頁是好是壞，往往是體現在速度和高度兩個方面，速度是網頁所展示出來的時間，能否為瀏覽用戶節約時間。高度則是一個網站網頁本身的質量，能否為瀏覽用戶帶來真正的好體驗。然而看似簡單的兩個點，但是背后要實現起來是需要花費精力和時間的。任何網站的終極目標不僅僅是讓其運行很快，而是讓使用該網站的用戶滿意。用戶花在網站上的大多數時間不是等待加載，而是在使用過程中等待響應。

一個網頁打開速度慢，圖片加載慢，瀏覽卡頓，頁面的動畫效果不流暢，或者突然崩壞等，這種網站無疑在用戶心里就是“垃圾網站”。作為一個網站開發者，誰愿意看到這種情況?所以提高網頁性能勢在必行!

第一，要對頁面性能進行分析，那么首要了解瀏覽器加載的過程，主要包括連接和渲染。

1、建立連接過程

1) 瀏覽器查找域名的IP地址

2) 瀏覽器給web服務器發送一個HTTP請求

3) 服務器發送永久重定向響應

4) 瀏覽器跟蹤重定向地址

5) 服務器“處理”請求

6) 服務器發回一個HTML響應

2、瀏覽器渲染

解析HTML->構建DOM樹->渲染樹構建->渲染樹布局->繪制渲染樹

第二，優化網頁性能的大概方法

1、開啟瀏覽器緩存

瀏覽器要根據域名找出IP地址，而DNS查找過程的第一步是在瀏覽器緩存中查找，根據Chrome的PageSpeed給出的建議：要利用瀏覽器緩存存儲可緩存的資源。在 HTTP 標頭中為靜態資源設置有效期或最長存在時間，可指示瀏覽器從本地磁盤中加載以前下載的資源而不是從網絡中加載。

HTTP 1.1提供的緩存方法主要有兩種：

1) Expires和Cache-Control：max-age.即內容在緩存中的生命有效期。第一次請求后將在生命有效期之內直接從本地緩存中拿取。

2) Last-Modified和ETag.：Last-Modified標記文件最后一次修改的時間，瀏覽器請求是在頭部加入上次請求緩存下來的Last-Modified時間，若兩次請求期間服務器的內容沒有修改，服務器返回304 Not Modified，則不下載資源，瀏覽器直接使用本地緩存;否則，服務器會返回200以及更新后的版本。ETag是服務器對于文件生成的Hash散列，其生成算法與最后一次修改的時間相關。瀏覽器第二次請求發送上次的ETag信息，服務器通過簡單的比對就知道是否應該返回304還是200。PageSpeed建議，要為資源指定Last-Modified或ETag標頭，以便啟動緩存驗證。

2、頁面內容組織

1)為 HTML文檔指定字符集，可讓瀏覽器立即開始執行腳本。

2)將內嵌樣式塊和元素從文檔主體移至文檔標題，可改善顯示性能。

3)將小型樣式表或者腳本內嵌到主 HTML 網頁中，可減少在下載其他資源時的往返時間 (RTT) 和延遲時間。

3、HTML

1)壓縮HTML。

2)為圖片指定大小，減少重排。

3)減少HTML標簽嵌套深度，嵌套越深，在移動端的Web頁面渲染速度以及滾動流暢度都會有所減低。

4)使用HTML5新標簽，例如header、footer、section、nav、article。因為它們語義化，速度快，結構合理，瀏覽器上識別能力強。

4、CSS

1)避免使用濾鏡。

2)不使用@import。

3)合并和壓縮CSS代碼。

4)減少漸變、陰影的使用。

5)模塊化、精簡css，提高復用率。

6)合理使用CSS3高性能動畫，Translate3d支持硬件加速。

7)使用CssSprite將零星的背景圖包含到一張圖中，通過background-position來使它顯示在正確的位置;只請求一張圖，減少了HTTP請求的次數。

5、Java

1)模塊化代碼：SeaJs。

2)合并和壓縮Java代碼。

3)壓縮工具：YUI Compressor或JSMin等。

4)使用事件委托機制，避免頻繁操作DOM節點。

5)暫緩 Java 解析，暫緩解析不需要的 Java(等到需要執行時再進行解析)，可以提高網頁的初始加載速度。

6、 圖片優化

1)壓縮圖片

2)圖片時頁面大部分加載時間所花的地方，在圖片設計的時候應該考慮相應的圖片大小和格式

第三，網頁性能優化實戰分析

以Chrome Developer Tools作為示例工具講解(可通過F12鍵打開)，目前各大主流瀏覽器都有類似的插件功能。

1、 Network可以查看頁面加載時長，資源加載情況(狀態、時長)，資源加載時間具體分析，從而針對性的優化頁面

2、timeline 可看頁面渲染情況，從而進行頁面優化

3、profiles可看函數執行情況

第四，網頁性能優化推薦工具

1、Chrome(Firefox) Developer Tools ——分析性能

2、HttpWatch ——IE插件，分析網頁性能

2、PageSpeed —— 查看性能建議

3、Fiddler —— HTTP/HTTPS網絡調試

最后，別忘記了一件事，完成相關的網頁優化操作后，再進行適當的網頁性能測試，以防前面的工作變成無用功。一個好的網站不是開發一個人的事情，還有產品、設計、SEO、測試等人員參與其中。

總結

以上是生活随笔為你收集整理的html5 内嵌网页_如何分析并优化网页的性能？新梦想软件测试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。