當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

网页前端优化

發布時間：2025/7/14 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了网页前端优化小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網站前端優化

主要是給學生介紹了這幾個規則。

第一：減少HTTP請求

1: 將超鏈接關聯到圖片上，例如在導航欄按鈕中。如果是以這種形式關聯多個帶有超鏈接的圖片，使用圖片地圖這種方式既能減少HTTP請求，有無需改變頁面外觀感受。圖片地圖允許在一個圖片上關聯多個URL.

2: CSS Sprites

和圖片地圖一樣，CSS Sprites也可以合并圖片，但是更加靈活，可以將多個圖片合并到一個單獨的圖片中。

3：合并腳本和樣式表

我們在使用Javascript和CSS時，到底是進行“內聯”(也就是將其嵌套在HTML文檔中)還是將其放在外部的腳本和樣式表文件中。一般來說，使用外部腳本和樣式表對性能更加有利（后面會說到）。但是，如果將代碼分割到過多的小文件中，會降低性能，因為每個文件都會導致一個額外的HTTP請求。為了清晰，不建議將腳本和樣式表合并在一起。但是多個

腳本應該合并為一個腳本，多個樣式表也應該合并為一個樣式表。到底頁面上應該有多少個腳本文件和CSS文件需要花一定的時間分析頁面。

第二：使用內容發布網絡

網站最初通常將其所有的服務器放在同一個地方。當用戶群增加時，公司就必須面對服務器放置地點不再使用的事實，有必要再多個地理位置不同的服務器上部署內容。

CDN的通俗理解就是網站加速，CPU均衡負載，可以解決跨運營商，跨地區，服務器負載能力過低，帶寬過少等帶來的網站打開速度慢等問題。

比如：

1.一個企業的網站服務器在北京，運營商是電信，在廣東的聯通用戶訪問企業網站時，因為跨地區，跨運營商的原因，網站打開速度就會比北京當地的電信客戶訪問速度慢很多，很容易造成這個企業的客戶流失

2.一個網站的服務器性能比較差，承載能力有限，有時面臨突發流量，招架不住，直接導致服務器崩潰，網站打不開，尤其是電商網站在節日期間，因為這種情況網站打不開，銷售額白白流失的占比都高漲至60%

3.再比如一些中小企業租用的虛擬主機，因為跟好幾個網站共用一臺服務器，每個網站所分帶寬有限，帶寬過小經常導致流量稍微一多，網站打開速度就很慢，甚至打不開。

國內較為有名的CDN服務商有藍汛、網宿科技，世紀互聯，帝聯科技等

第三：添加Expires頭

今天的WEB頁面包含了大量的組件，并且其數量在不斷增長，頁面的初次訪問者會進行很多HTTP請求，但通過一個長久的Expires頭，使這些組件可以被緩存。這回在后續的頁面瀏覽中避免不必要的HTTP請求。長久的Expires頭最常用于圖片，但是應該將其用在所有的組件上，包括腳本，樣式表等。在HTTP1.1引入了Cache-Control頭來克服Expires頭的限制。因為Expires頭使用一個特定的時間，它要求服務器和客戶端的時鐘嚴格同步。

使用帶有max-age的Cache-Control可以消除Expires的限制(我推薦盡量使用Cache-Control)。如果兩者同時出現，HTTP規定max-age指令將重寫Expires頭。

可以在IIS管理器為靜態內容設置Cache-Control:max-age.

還可以在web.config文件里應用該設置.如下所示:

…………..

<system.webServer>

……………………..

?<clientCache cacheControlMode=”UseMaxAge” cacheControlMaxAge=?‘365.00?:00?:00 ’?>?

</staticContent>

</system.webServer>

</configuration>

前面的<staticContent>節名字暗示這種方式只針對靜態內容。對于動態內容，需要設置客戶端緩存過期時間，可以在aspx文件中設置。

<%@ Page ……%>

<%@ OutputCache Duration=”86400” Location=”Client” VaryByParam=”None”%>

該指令告訴運行時生成的HTTP頭，讓瀏覽器緩存該內容1天（86400秒）。

第四：減少ViewState的大小。

有些控件，比如GridView,會很容易地產生數K字節的ViewState.因為瀏覽器會將ViewState作為HTTP POST的一部分發送回服務器，所以如果它大，會對頁面的加載時間有不利的影響。所以應該關閉ViewState,代碼如下

<%@ Page Title="" Language="C#" EnableViewState="false" AutoEventWireup="true" CodeBehind="View.aspx.cs" Inherits=" View" %>

第五：壓縮組件

通過減小HTTP響應的大小來減少響應時間。如果HTTP請求產生的響應包很小，傳輸時間就會減少，因為只需要將很小的包從服務器傳遞到客戶端。這一效果對速度較慢的帶寬尤其明顯。最主要的方式是通過gzip編碼來壓縮HTTP響應包，并由此減少網絡響應時間。這是減小頁面大小的最簡單的技術，但影響是最大的。還有很多方式可以減小HTML文檔的頁面大小（例如刪除注釋和額外的空格，移除沒有使用的CSS，移除沒有使用的JAVASCRIPT,檢查并移除冗余標簽，移除沒有內容的標簽，移除<meta refresh>標簽：頁面自動刷新乍一看有時很動人，但是考慮到這樣的情況，用戶離開了電腦，或者正在看瀏覽器的另外一個選項卡，那么這只會浪費客戶端和服務器的資源）。

Web客戶端可以通過HTTP請求中的Accept-Encoding頭來標示對壓縮的支持。

Accept-Encoding:gzip,deflate

如果Web服務器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來壓縮響應。Web服務器通過響應中的Content-Encoding頭來通知Web客戶端

Content-Encoding:gzip

Gzip是目前最流行和有效地壓縮方法，你能看到的另一種壓縮方式為deflate,但是效果不如gzip,并且也不太流行，支持deflate的瀏覽器也支持gzip,但是很多瀏覽器支持gzip卻不支持deflate,因此gzip是最理想的壓縮方法。很多網站會壓縮其HTML文檔，壓縮腳本和CSS樣式表也是很重要的，圖片不應該壓縮，因為可以在上傳時進行壓縮，試圖對它們進行壓縮

只會浪費CPU資源。當然壓縮也是有成本的，服務端會額外花費CPU周期來完成壓縮，客戶端需要對壓縮文件進行解壓縮。要檢測收益是否大于開銷，需要考慮響應的大小，鏈接的帶寬和客戶端與服務器之間的Internet距離，這些信息是很難得到的，根據經驗通常對于大于1KB或2KB的文件進行壓縮。

可以在IIS中配置文件的壓縮，具體步驟可以參考微軟的MSDN

http://msdn.microsoft.com/zh-cn/ff695514.aspx

壓縮分為靜態壓縮和動態壓縮，我建議在這里啟用靜態壓縮，而不要啟用動態壓縮。對于一個活躍的網站，啟用壓縮通常會增加大概3%~5%的CUP使用率。對于大多數網站，這種取舍通常是值得的。

這里需要考慮代理緩存的情況，有興趣的同學可以查一下資料。

第六：將樣式表放在頂部（使用Link標簽將樣式表放在HEAD標簽中）

我們希望瀏覽器能夠盡快顯示內容，這對于有很多內容的頁面以及Internet鏈接很慢的用戶來說很重要。將樣式表放在文檔底部會導致在瀏覽器中阻止內容逐步呈現。該規則對于加載頁面所需要的時間沒有什么太大的影響。在瀏覽器和用戶等待位于底部的樣式表時，瀏覽器會延遲顯示任何的可視化的內容，我們稱之為”白屏”

大家可以自己測試一下。

為了避免白屏，請將樣式表放在文檔頂部的Head中。在Head中導入外部樣式可以使用Link,和@import，我更喜歡使用Link，因為性能要好一些，并且@import有時候可能會導致白屏的出現，甚至放在文檔的Head標簽中。

第七：將腳本放在底部

在使用樣式表時，頁面逐步呈現會被阻止，直到所有的樣式表下載完成。這就是最好將樣式表移到文檔的HEAD的原因，這樣就能首先下載它們而不會阻止頁面呈現。使用腳本時，對于所有位于腳本以下的內容，逐步呈現都被阻塞了。將腳本放在頁面越靠下的地方，意味著越多的內容能夠逐步呈現。

并行下載組件的優點是很明顯的。然而在下載腳本文件時并行下載實際上是被禁用的，其中的一個原因是，腳本可能使用了document.write來修改頁面內容，因此瀏覽器會等待，以確保能夠恰當的布局。

另外一個原因是為了保證腳本能夠按照正確的順序執行。所以腳本會阻塞對其后面內容的呈現。如果將腳本放在頁面頂部，頁面中的所有的內容都位于腳本之后，整個頁面的呈現和下載都會被阻塞，直到腳本加載完畢。由于整個頁面的呈現被阻塞了，因此也會出現白屏的現象。

第八：使用外部的CSS和Javascript

使用外部的CSS和Javascript的原因是這些文件有機會被瀏覽器緩存起來。

如果你的網站中的每個頁面都使用了相同的CSS和Javascript，使用外部文件可以提高這些組件的重用率。在這些情況下使用外部文件更加具有優勢，因為當用戶在頁面間導航時，Javascript和CSS組件已經位于瀏覽器的緩存中了。相反的情況時，如果沒有任何兩個頁面共享相同的JAVASCRIPT和CSS，重用率就會降低。當然解決這個問題，沒有什么好的辦法，我認為可以采用一個折中的辦法，就是將你網站的頁面劃分成幾種頁面類型，然后為每種類型創建單獨的腳本和樣式表，這樣的話對于給定的任意界面都只需要下載很少的多余的CSS和JAVASCRIPT文件。當然，你的CSS和JAVASCRIPT有很高的重用度，則部署在外部文件中更有優勢，但是如果重用度很低，還是內聯更有意義一些。

第九：減少DNS的查找

Internet是通過IP地址來查找服務器的，由于IP地址比較難記，通常使用包含主機名的URL來代替（域名），但是當瀏覽器發出請求時，IP地址仍然是必須的，這就需要DNS將主機名稱映射到IP地址上，你在瀏覽器上鍵入?:www.baidu.com時，連接到瀏覽器的DNS解析器會返回服務器的IP地址。DNS也是有開銷的，通常情況下瀏覽器查找一個給定的主機名的IP地址需要花費20~120毫秒，在DNS查找完成之前，瀏覽器是不能從主機名那里下載到任何東西的。響應的時間依賴于DNS解析器，它所承擔的請求的壓力，你與它之間的距離和你的帶寬。當然DNS也是可以被緩存起來的，但是瀏覽器對緩存的DNS記錄的數量也有限制，而不管緩存記錄的時間。如果用戶在短時間內訪問了很多具有不同域名的網站，較早的DNS記錄將被丟棄，必須重新查找該域名。

減少DNS查找，我的建議是將CSS,圖片，腳本等這些組件分別放在至少2個，但不要超過4個主機域名下。這是在減少DNS查找和允許高度并行下載之間做出的很好的權衡。

第十：精簡JavaScript

精簡是從代碼中移除不必要的字符以減小其大小，進而改善加載時間，在代碼被精簡以后，所有的注釋以及不必要的空白字符（空格，換行等）都被移除。對于Javascript而言，這可以改善響應時間效率，因為需要下載的文件大小減小了。說到精簡，簡單提一下混淆。

混淆是可以應用在源碼上的另外一種優化方式，和精簡一樣，它也會移除注釋空白，同時它還會改寫代碼。作為改寫的一部分，函數和變量的名字將被變的更短，但是也更難閱讀。通常這樣做的目的主要是為了增加對代碼進行反向工程的難度。當然對提高性能也有幫助，因為這比精簡更能減小代碼的大小。缺點就是，更加復雜，而且很難閱讀與調試。

精簡JavaScript代碼的工具可以使用JSMin.

我們在前面說過，可以對Javascript外部文件使用gzip來完成壓縮，當前gzip壓縮比精簡更能減少文件的大小，那么如果已經啟用了壓縮，是否還要在進行精簡呢？

是有必要的，因為gzip雖然壓縮產生的影響更大，但是精簡能夠進一步的減小文件的大小。

精簡CSS能夠帶來的節省要小于精簡JAVASCRIPT，因為CSS中的空白和注釋一般情況下要比JAVASCRIPT的少，所以CSS主要是合并相同的類，移除不用的類等。

十一：移除重復的腳本

重復腳本損傷性能的方式主要有兩種情況，不必要的HTTP請求和執行JavaScript所浪費的時間。這種錯誤看似簡單但是卻是經常發生的，例如在母版頁中引用了一個腳本文件，在具體的內容頁面中又引用了一次。有可能有人認為，現在腳本文件已經被緩存了，不會再發新的請求了，但是如果單擊瀏覽器的刷新按鈕時，還是會產生兩個HTTP請求（這種情況存在IE中）。同時，對腳本進行多次求值也會浪費時間。

十二：注意圖片的優化

1：減少頁面上的圖片的數量

圖片通常比HTML占用更多的網站帶寬，所以圖片優化的第一步應該是考慮一下是否需要頁面上所有的圖片。

2：可以使用CSS來代替翻轉圖片的效果。

3：優化背景圖片

優化背景圖片，一定要利用瀏覽器可以通過平鋪重復單個圖片的功能。例如將圖片是1像素寬的漸變圖片平鋪。

4：選擇正確的圖片格式

5：壓縮縮小圖片尺寸。

6：使用圖片切片

7：如果您的網站存在大量的圖片讀寫操作，我建議您使用圖片服務器

轉載于:https://www.cnblogs.com/liuweiqiang11188/p/6684079.html