整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
首先要設定優化目標，測試當前性能，找出問題，提出解決方案。
一般來說，網站優化的需要考慮的方面有：
減少HTTP請求次數是縮短響應時間的關鍵
減小加載文件的大小
減少請求，減小文件
DNS查詢也消耗響應時間，如果我們的網頁內容來自各個不同的domain (比如嵌入了開放廣告，引用了外部圖片或腳本)，那么客戶端首次解析這些domain也需要消耗一定的時間。DNS查詢結果緩存在本地系統和瀏覽器中一段時間，所以DNS查詢一般是對首次訪問響應速度有所影響
將一個URL重新路由到另一個URL。重定向功能是通過301和302這兩個HTTP狀態碼完成的，如： 瀏覽器自動重定向請求到Location指定的URL上，重定向的主要問題是降低了用戶體驗。 種最耗費資源、經常發生而很容易被忽視的重定向是URL的最后缺少/，導致自動產生結尾斜線的原因是，瀏覽器在進行get請求時必須指定一些路徑；如果沒有路徑它就會簡單的使用文檔根。缺少結尾斜線發生重定向是很多web服務器的默認行為。需要在服務器端設置方可消除。
Cookie被用來做認證或個性化設置，其信息被包含在http報文頭中，對于cookie我們要注意以下幾點，來提高請求的響應速度，
大多數網站的靜態資源都沒必要cookie，我們可以采用不同的domain來單獨存放這些靜態文件，這樣做不僅可以減少cookie大小從而提高響應速度，還有一個好處是有些proxy拒絕緩存帶有cookie的內容，如果能將這些靜態資源cookie去除，那就可以得到這些proxy的緩存支持。
網站圖標文件favicon.ico，不管你服務器有還是沒有，瀏覽器都會去嘗試請求這個圖標。所以我們要確保這個圖標
當美工完成了網站的圖片設計后，我們可以在上傳圖片之前對其做以下優化
script文件放在頁面頂部會阻塞頁面的逐步呈現。script元素會阻塞后續內容的解析（不論JavaScript是內嵌的還是外鏈的），瀏覽器在執行JavaScript代碼時，不能同時做其它事情，即每次出現都會讓頁面等待腳本的解析和執行，JavaScript代碼執行完成后，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。解決的辦法就是將script標簽放在頁面底部。這樣既可以讓內容逐步呈現，提高下載的并行度，有效的防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。
使用外部Javascript和CSS文件可以使這些文件被瀏覽器緩存，從而在不同的請求內容之間重用。 同時將Javascript和CSS從inline變為external也減小了網頁內容的大小。
使用外部Javascript和CSS文件的決定因素在于這些外部文件的重用率，如果用戶在瀏覽我們的頁面時會訪問多次相同頁面或者可以重用腳本的不同頁面，那么外部文件形式可以給你帶來很大的好處。但對于用戶通常只會訪問一次的頁面，例如microsoft.com首頁，那inline的javascript和css相對來說可以提供更高的效率。
延遲加載需要我們知道我們的網頁最初加載需要的最小內容集是什么。剩下的內容就可以推到延遲加載的集合中。 Javascript是典型的可以延遲加載內容。一個比較激進的做法是開發網頁時先確保網頁在沒有Javascript的時候也可以基本工作，然后通過延遲加載腳本來完成一些高級的功能。
與延遲加載目的相反，提前加載的是為了提前加載接下來網頁中訪問的資源，下面是提前加載的類型
網頁中元素過多對網頁的加載和腳本的執行都是沉重的負擔，500個元素和5000個元素在加載速度上會有很大差別。 想知道你的網頁中有多少元素，通過在瀏覽器中的一條簡單命令就可以算出document.getElementsByTagName('*').length
通過Javascript訪問DOM元素沒有我們想象中快，元素多的網頁尤其慢，對于Javascript對DOM的訪問我們要注意
使用iframe要注意理解iframe的優缺點
404我們都不陌生，代表服務器沒有找到資源，我們要特別要注意404的情況不要在我們提供的網頁資源上，客戶端發送一個請求但是服務器卻返回一個無用的結果，時間浪費掉了。
更糟糕的是我們網頁中需要加載一個外部腳本，結果返回一個404，不僅阻塞了其他腳本下載，下載回來的內容(404)客戶端還會將其當成Javascript去解析。
瀏覽器在實現XMLHttpRequest POST的時候分成兩步，先發header，然后發送數據。而GET卻可以用一個TCP報文完成請求。另外GET從語義上來講是去服務器取數據，而POST則是向服務器發送數據，所以我們使用Ajax請求數據的時候盡量通過GET來完成。
空的圖片src仍然會使瀏覽器發送請求到服務器，這樣完全是浪費時間，而且浪費服務器的資源。尤其是你的網站每天被很多人訪問的時候，這種空請求造成的傷害不容忽略。
瀏覽器如此實現也是根據RFC 3986 - Uniform Resource Identifiers標準，空的src被定義為當前頁面。
所以注意我們的網頁中是否存在這樣的代碼
<!--straight HTML-->
<img src="">
//JavaScript
var img=new Image();
img.src="";
不要通過圖片縮放來適應頁面，如果你需要小圖片，就直接使用小圖片吧。
這里說智能的事件處理需要開發者對事件處理有更深入的了解，通過不同的方式盡量少去觸發事件，如果必要就盡早的去處理事件。
比如一個div中10個按鈕都需要事件句柄，那么我們可以將事件放在div上，在事件冒泡過程中捕獲該事件然后判斷事件來源。
這條規則分為兩個方面，
Gzip通常可以減少70%網頁內容的大小，包括腳本、樣式表、圖片等文件。Gzip比deflate更高效，主流服務器都有相應的壓縮支持模塊。
雖然標題叫配置ETags，但是這里你要根據具體情況進行一些判斷。首先Etag簡單來說是通過一個文件版本標識使得服務器可以輕松判斷該請求的內容是否有所更新，如果沒有就回復304 (not modified)，從而避免下載整個文件。
網頁后臺程序中我們知道有個方法叫Response.Flush()，一般我們調用它都是在程序末尾，但注意這個方法可以被調用多次。目的是可以將現有的緩存中的回復內容先發給客戶端，讓客戶端“有活干”。
那在什么時候調用這個方法比較好呢？一般情況下我們可以在對于需要加載比較多外部腳本或者樣式表時可以提前調用一次，客戶端收到了關于腳本或其他外部資源的鏈接可以并行的先發請求去下載，服務器接下來把后續的處理結果發給客戶端。
言：
對于剛學完HTML+CSS的初學者們，剛開始寫代碼的你們還沒有前端優化的概念，其實我們不只是會做出一些網頁出來，前端優化也必須被注入到代碼里。有時候我們會發現一些細少的差別，為什么有的網站打開的速度特別快，有的網站打開的時候前面還有一會大白板時。這時你們有沒有想過什么導致有這種差別呢？單從用戶體驗的角度上來講，您愿意為打開一個網站等待多長時間？那么問題來了，前端優化，我們應該做些什么呢？如何加快網站響應的速度呢？
接下來的文章中源碼時代Web前端（http://www.itsource.cn）講師會給大家介紹一些常歸的提高網頁性能的實踐和相應的解決方案，讓未來的你們在處理前端性能優化上，對自己做出來的產品更有信心。
網頁內容
減少http請求次數
大部分網站響應時間都花費在了下載網頁資源上，這里的資源指的是：圖片、CSS、JS、和Flash等。我們這里講的減少請求次數是縮短響應時間的關鍵點。
一般情況下，可以分為兩種：
一是通過簡化頁面設計來減少請求次數。
二是網頁比較復雜的腳本或CSS文件可以采用多個腳本或打包放在一個文件里面，圖片采用CSS Sprites(圖象拼合技術)，把多個圖拼成一副圖片，然后通過CSS來控制在什么地方顯示這張圖的什么位置，從而來減少請求次數，這一塊的內容，大家可以參照京東下面這一塊的CSS定位來實現。
避免頁面跳轉
避免頁面跳轉是什么呢？就是當客戶端收到服務器的跳轉回復時，客戶端再次根據服務器回復中的location指定的地址再次發送請求，也是就說，SEO上常用的301重定向
比如說：
我現在要讓訪問源碼時代的同學，進到源碼論壇，這就就是服務器端301重定向的實現方法
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//這是客戶端請求的地址
RewriteRule ^(.*)$ http://bbs.itsource.cn/ [R=301,L]//這是客戶端實際看到的網頁
延遲加載
我們這里講的延遲加載需要我們先知道網頁最初加載最小的內容是什么，剩下的內容就可以使用延遲加載的實現。
最典型的是Javascript可以延遲加載內容，這個做法是開發網頁的時候先確保網頁在沒有javascript的時候也可以很好的顯示正常的頁面效果，然后通過延遲加載腳本來完成一些高級的功能效果的做法。
提前加載
這種方法，恰好與上面的方法相反，也就是說先提前加載一些網頁中的資源，它又分三類：
1.無條件提前加載
該方法就是當網頁加載完成后，馬上去加載一些其他內容，如淘寶會在加載完成功后會去加載一些圖片拼合后的圖片
2.有條件加載
根據用戶輸入的信息來推斷需要加載的內容，比如說百度搜索。
有預期的加載
這個就比較高大上一些了，這個情況一般是在網頁重新設計的時候，由于用戶的訪問行為，本地有舊網頁的緩存，而新設計的網站沒有，設計者可以通過在舊網頁中預先加入一些新網站中可能會用到內容，這樣的話，新網頁就會先下載一些資源到本地。
減少DOM元素數量
如果網頁中的元素過多也對網頁的性能有影響，同時也會加重網頁加載和腳本的執行，大家可以想一下，平時在使用JS的時候，我們要實現一些效果，是不是得先找到相關DOM元素，然后再執行相關操作。 如果我們網頁中的元素過多，是不是就會有一個非常明顯的時差呢！所以減少DOM元素數量，仍然影響網頁性能。
根據域名劃分內容
很多時候，我們在查看其它大型的網站的時候，圖片的地址和網站的主域名還不一樣，會采用多個域名來存放相關資源的，那為什么要這樣使用呢？其實，瀏覽器一般對同一個域名的下載連接數有所限制，根據域名劃分下載內容，可以間接的增大瀏覽器并行下載連接。大大提高了網站整體的下載資源能力。從而達到優化性能的作用。
減少iframe數量
之前，我們講過怎么使用iframe，但是在實際的項目中，我們在使用的時候請先注意它的優缺點。
優點：
可以用來加載速度較慢的內容，腳本可以并行下載
缺點：
使用iframe內容為空時也會消耗加載時間并會阻止頁面加載
避免404
404就是常見的沒有找到服務器資源，一是：影響用戶體驗，打開一個返回無用信息的頁面。二是網頁中需要加載一個外部腳本，結果返回一個404，不僅阻塞了其他腳本下載，下載回來的內容(404)客戶端還會將其當成Javascript去解析。
CSS
將樣式表置頂
由于網頁內容從上往下的加載方式，我們盡可能的將CSS樣式放在網頁的head中會讓網頁顯得加載速度更快，對于內容比較多的網頁非常重要，至少不會讓用戶一直等待一個白屏上，這樣的用戶體驗也是相當好的。
假如我們把樣式表放在底部的話，就是出現一種情況，瀏覽器會拒絕渲染已經下載的網頁，因為多數瀏覽器在實現時都努力避免重新繪制。所以這一樣也是一個重點。
避免CSS表達式
有一些基礎CSS3的小伙伴們一直很仰慕它強大的二開能力，喜歡用一些CSS表達式來動態的設置CSS屬性，在IE5~IE8中支持，其他瀏覽器中表達式會被忽略。
其它CSS表達式的問題在于它被重新計算的次數遠比我們想象的要多，所以我們還是盡量避免使用它來防止使用不當造成的性能開消過多。
用link標簽代替@import
在網頁的設計中，請盡量使用link標簽來引用CSS，避免使用@import來引用，原因很簡單，您可以理解為就是將CSS樣式放在網頁中的內容底部就可以了。
圖片
優化圖像
在網頁的制作中，我們會發現，banner這一類的圖片加載起來非常的慢，同時也影響網站的速度，少者幾百K，大者幾M。那么究竟這樣的圖片還有沒有優化的空間呢！？
今天我給大家推介一個圖片優化的平臺，它就是設計師們經常去的智圖網，同時我們也可以來看一個例子：
大家可以看到，原圖和優化過后的（智圖）圖片，相差了500多K，如果對于圖片比較多的網站，我們把整站的圖片都用來優化一下，那么可以想象一下，這是要節省多少流量呀！所以這些圖片優化我要強力推薦一下了。
避免空的圖片src
我們在使用img標簽的時候，盡量避免使用空的圖片src，因為空的圖片src仍然會使瀏覽器發送請求到服務器，這樣完全是浪費時間，而且浪費服務器的資源。尤其是你的網站每天被很多人訪問的時候，這種空請求造成的傷害不容忽略
優化CSS Sprite
Spirite中水平排列圖片，垂直排列會增加文件大小；
Spirite中把顏色較近的組合在一起可以降低顏色數，理想狀況是低于256色以便適用PNG8格式；
不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加文件大小,但對于用戶代理來說它需要更少的內存來把圖片解壓為像素地圖。
不要在HTML中縮放圖片
避免使用大圖實現圖片大小縮放來適應頁面，如果你需要小圖片，就直接使用小圖片吧。原因很簡單，針對不同的設備可以做到最好的效果，而不是加載就大的圖，來整體實現效果，如果是手機端用戶，這個開消還是挺大的，畢竟這是一個講流量的時代。
使用小且可緩存的favicon.ico
一般企業網站或站長都喜歡加一個圖標文件favicon.ico，不管你服務器有還是沒有，瀏覽器都會去嘗試請求這個圖標。所以我們要確保這個圖標存在并且文件盡量小，最好小于1k 設置一個長的過期時間
總結：
最后，本文主要針對初級入門網頁設計人員，該文內容僅涉及到HTML、CSS、Javascript、images等內容，當然還有一些其它的方法，我們在下一期的文章中指出。
當然，上面提及的一些常歸的前端優化小技巧你GET到了嗎？請不要在你的網頁中出現與此類似的錯誤，要不然真的很影響用戶體驗，畢竟，現在是WEB2.0的時代，如果用戶對你的網頁不滿意，那就是對開發者的否定，所以為了做出更好更優秀的網頁，我們盡可能多的去關注這些小細節。
寫本文的目的，就是為了更好的讓初級的小伙伴們快速成長起來。做一個優秀的開發人員，同時寫出來的內容可以用于同行交流體會，如果你還有更好的方法和技巧，請在下方的交流區里留言，我會第一時候回復您。謝謝！
用Firebug動態的查看元素的變化(HTML與CSS)
.blogs figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.blogs figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }CSS3標簽中的transform：scale(圖片縮放比例), 1代表原圖顯示, 1.1縮放1.1倍…
transform: 變形
scale: 縮放
tranistion: 過渡
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
