网页前端优化
網站前端優(yōu)化
?
主要是給學生介紹了這幾個規(guī)則。
?
第一：減少HTTP請求
?
1: 將超鏈接關聯到圖片上，例如在導航欄按鈕中。如果是以這種形式關聯多個帶有超鏈接的圖片，使用圖片地圖這種方式既能減少HTTP請求，有無需改變頁面外觀感受。圖片地圖允許在一個圖片上關聯多個URL.
?
2: CSS Sprites
和圖片地圖一樣，CSS Sprites也可以合并圖片，但是更加靈活，可以將多個圖片合并到一個單獨的圖片中。
?
3：合并腳本和樣式表
我們在使用Javascript和CSS時，到底是進行“內聯”(也就是將其嵌套在HTML文檔中)還是將其放在外部的腳本和樣式表文件中。一般來說，使用外部腳本和樣式表對性能更加有利（后面會說到）。但是，如果將代碼分割到過多的小文件中，會降低性能，因為每個文件都會導致一個額外的HTTP請求。為了清晰，不建議將腳本和樣式表合并在一起。但是多個
腳本應該合并為一個腳本，多個樣式表也應該合并為一個樣式表。到底頁面上應該有多少個腳本文件和CSS文件需要花一定的時間分析頁面。
?
第二：使用內容發(fā)布網絡
?
網站最初通常將其所有的服務器放在同一個地方。當用戶群增加時，公司就必須面對服務器放置地點不再使用的事實，有必要再多個地理位置不同的服務器上部署內容。
CDN的通俗理解就是網站加速，CPU均衡負載，可以解決跨運營商，跨地區(qū)，服務器負載能力過低，帶寬過少等帶來的網站打開速度慢等問題。
比如：
1.一個企業(yè)的網站服務器在北京，運營商是電信，在廣東的聯通用戶訪問企業(yè)網站時，因為跨地區(qū)，跨運營商的原因，網站打開速度就會比北京當地的電信客戶訪問速度慢很多，很容易造成這個企業(yè)的客戶流失
2.一個網站的服務器性能比較差，承載能力有限，有時面臨突發(fā)流量，招架不住，直接導致服務器崩潰，網站打不開，尤其是電商網站在節(jié)日期間，因為這種情況網站打不開，銷售額白白流失的占比都高漲至60%
3.再比如一些中小企業(yè)租用的虛擬主機，因為跟好幾個網站共用一臺服務器，每個網站所分帶寬有限，帶寬過小經常導致流量稍微一多，網站打開速度就很慢，甚至打不開。
國內較為有名的CDN服務商有藍汛、網宿科技，世紀互聯，帝聯科技等
?
第三：添加Expires頭
今天的WEB頁面包含了大量的組件，并且其數量在不斷增長，頁面的初次訪問者會進行很多HTTP請求，但通過一個長久的Expires頭，使這些組件可以被緩存。這回在后續(xù)的頁面瀏覽中避免不必要的HTTP請求。長久的Expires頭最常用于圖片，但是應該將其用在所有的組件上，包括腳本，樣式表等。在HTTP1.1引入了Cache-Control頭來克服Expires頭的限制。因為Expires頭使用一個特定的時間，它要求服務器和客戶端的時鐘嚴格同步。
使用帶有max-age的Cache-Control可以消除Expires的限制(我推薦盡量使用Cache-Control)。如果兩者同時出現，HTTP規(guī)定max-age指令將重寫Expires頭。
可以在IIS管理器為靜態(tài)內容設置Cache-Control:max-age.
還可以在web.config文件里應用該設置.如下所示:
<configuration>
…………..
<system.webServer>
……………………..
<staticContent>
?<clientCache cacheControlMode=”UseMaxAge” cacheControlMaxAge=?‘365.00?:00?:00 ’?>?
</staticContent>
</system.webServer>
</configuration>
?
前面的<staticContent>節(jié)名字暗示這種方式只針對靜態(tài)內容。對于動態(tài)內容，需要設置客戶端緩存過期時間，可以在aspx文件中設置。
<%@ Page ……%>
<%@ OutputCache Duration=”86400” Location=”Client” VaryByParam=”None”%>
該指令告訴運行時生成的HTTP頭，讓瀏覽器緩存該內容1天（86400秒）。
?
第四：減少ViewState的大小。
有些控件，比如GridView,會很容易地產生數K字節(jié)的ViewState.因為瀏覽器會將ViewState作為HTTP POST的一部分發(fā)送回服務器，所以如果它大，會對頁面的加載時間有不利的影響。所以應該關閉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
?
壓縮分為靜態(tài)壓縮和動態(tài)壓縮，我建議在這里啟用靜態(tài)壓縮，而不要啟用動態(tài)壓縮。對于一個活躍的網站，啟用壓縮通常會增加大概3%~5%的CUP使用率。對于大多數網站，這種取舍通常是值得的。
這里需要考慮代理緩存的情況，有興趣的同學可以查一下資料。
第六：將樣式表放在頂部（使用Link標簽將樣式表放在HEAD標簽中）
我們希望瀏覽器能夠盡快顯示內容，這對于有很多內容的頁面以及Internet鏈接很慢的用戶來說很重要。將樣式表放在文檔底部會導致在瀏覽器中阻止內容逐步呈現。該規(guī)則對于加載頁面所需要的時間沒有什么太大的影響。在瀏覽器和用戶等待位于底部的樣式表時，瀏覽器會延遲顯示任何的可視化的內容，我們稱之為”白屏”
大家可以自己測試一下。
為了避免白屏，請將樣式表放在文檔頂部的Head中。在Head中導入外部樣式可以使用Link,和@import，我更喜歡使用Link，因為性能要好一些，并且@import有時候可能會導致白屏的出現，甚至放在文檔的Head標簽中。
?
第七：將腳本放在底部
在使用樣式表時，頁面逐步呈現會被阻止，直到所有的樣式表下載完成。這就是最好將樣式表移到文檔的HEAD的原因，這樣就能首先下載它們而不會阻止頁面呈現。使用腳本時，對于所有位于腳本以下的內容，逐步呈現都被阻塞了。將腳本放在頁面越靠下的地方，意味著越多的內容能夠逐步呈現。
并行下載組件的優(yōu)點是很明顯的。然而在下載腳本文件時并行下載實際上是被禁用的，其中的一個原因是，腳本可能使用了document.write來修改頁面內容，因此瀏覽器會等待，以確保能夠恰當的布局。
另外一個原因是為了保證腳本能夠按照正確的順序執(zhí)行。所以腳本會阻塞對其后面內容的呈現。如果將腳本放在頁面頂部，頁面中的所有的內容都位于腳本之后，整個頁面的呈現和下載都會被阻塞，直到腳本加載完畢。由于整個頁面的呈現被阻塞了，因此也會出現白屏的現象。
?
第八：使用外部的CSS和Javascript
?
使用外部的CSS和Javascript的原因是這些文件有機會被瀏覽器緩存起來。
如果你的網站中的每個頁面都使用了相同的CSS和Javascript，使用外部文件可以提高這些組件的重用率。在這些情況下使用外部文件更加具有優(yōu)勢，因為當用戶在頁面間導航時，Javascript和CSS組件已經位于瀏覽器的緩存中了。相反的情況時，如果沒有任何兩個頁面共享相同的JAVASCRIPT和CSS，重用率就會降低。當然解決這個問題，沒有什么好的辦法，我認為可以采用一個折中的辦法，就是將你網站的頁面劃分成幾種頁面類型，然后為每種類型創(chuàng)建單獨的腳本和樣式表，這樣的話對于給定的任意界面都只需要下載很少的多余的CSS和JAVASCRIPT文件。當然，你的CSS和JAVASCRIPT有很高的重用度，則部署在外部文件中更有優(yōu)勢，但是如果重用度很低，還是內聯更有意義一些。
?
第九：減少DNS的查找
Internet是通過IP地址來查找服務器的，由于IP地址比較難記，通常使用包含主機名的URL來代替（域名），但是當瀏覽器發(fā)出請求時，IP地址仍然是必須的，這就需要DNS將主機名稱映射到IP地址上，你在瀏覽器上鍵入?:www.baidu.com時，連接到瀏覽器的DNS解析器會返回服務器的IP地址。DNS也是有開銷的，通常情況下瀏覽器查找一個給定的主機名的IP地址需要花費20~120毫秒，在DNS查找完成之前，瀏覽器是不能從主機名那里下載到任何東西的。響應的時間依賴于DNS解析器，它所承擔的請求的壓力，你與它之間的距離和你的帶寬。當然DNS也是可以被緩存起來的，但是瀏覽器對緩存的DNS記錄的數量也有限制，而不管緩存記錄的時間。如果用戶在短時間內訪問了很多具有不同域名的網站，較早的DNS記錄將被丟棄，必須重新查找該域名。
減少DNS查找，我的建議是將CSS,圖片，腳本等這些組件分別放在至少2個，但不要超過4個主機域名下。這是在減少DNS查找和允許高度并行下載之間做出的很好的權衡。
?
第十：精簡JavaScript
精簡是從代碼中移除不必要的字符以減小其大小，進而改善加載時間，在代碼被精簡以后，所有的注釋以及不必要的空白字符（空格，換行等）都被移除。對于Javascript而言，這可以改善響應時間效率，因為需要下載的文件大小減小了。說到精簡，簡單提一下混淆。
混淆是可以應用在源碼上的另外一種優(yōu)化方式，和精簡一樣，它也會移除注釋空白，同時它還會改寫代碼。作為改寫的一部分，函數和變量的名字將被變的更短，但是也更難閱讀。通常這樣做的目的主要是為了增加對代碼進行反向工程的難度。當然對提高性能也有幫助，因為這比精簡更能減小代碼的大小。缺點就是，更加復雜，而且很難閱讀與調試。
精簡JavaScript代碼的工具可以使用JSMin.
我們在前面說過，可以對Javascript外部文件使用gzip來完成壓縮，當前gzip壓縮比精簡更能減少文件的大小，那么如果已經啟用了壓縮，是否還要在進行精簡呢？
是有必要的，因為gzip雖然壓縮產生的影響更大，但是精簡能夠進一步的減小文件的大小。
精簡CSS能夠帶來的節(jié)省要小于精簡JAVASCRIPT，因為CSS中的空白和注釋一般情況下要比JAVASCRIPT的少，所以CSS主要是合并相同的類，移除不用的類等。
?
十一：移除重復的腳本
重復腳本損傷性能的方式主要有兩種情況，不必要的HTTP請求和執(zhí)行JavaScript所浪費的時間。這種錯誤看似簡單但是卻是經常發(fā)生的，例如在母版頁中引用了一個腳本文件，在具體的內容頁面中又引用了一次。有可能有人認為，現在腳本文件已經被緩存了，不會再發(fā)新的請求了，但是如果單擊瀏覽器的刷新按鈕時，還是會產生兩個HTTP請求（這種情況存在IE中）。同時，對腳本進行多次求值也會浪費時間。
?
十二：注意圖片的優(yōu)化
?
1：減少頁面上的圖片的數量
圖片通常比HTML占用更多的網站帶寬，所以圖片優(yōu)化的第一步應該是考慮一下是否需要頁面上所有的圖片。
2：可以使用CSS來代替翻轉圖片的效果。
3：優(yōu)化背景圖片
優(yōu)化背景圖片，一定要利用瀏覽器可以通過平鋪重復單個圖片的功能。例如將圖片是1像素寬的漸變圖片平鋪。
4：選擇正確的圖片格式
5：壓縮縮小圖片尺寸。
6：使用圖片切片
7：如果您的網站存在大量的圖片讀寫操作，我建議您使用圖片服務器
?
?
?
?
?
轉載于:https://www.cnblogs.com/liuweiqiang11188/p/6684079.html
總結
- 上一篇： Wrong FS: hdfs://xxx
- 下一篇： 添加sudo权限脚本