web前端性能優化

時間 2019-11-10

標籤 web 前端性能優化欄目 HTML 简体版

原文原文鏈接

　　性能優化對於用戶體驗無疑是很是重要的，下面介紹一些性能優化的方法。javascript

一.減小HTTP請求　

　　http請求越多，那麼消耗的時間越多，若是在加上網絡很糟糕，那麼問題就更多了。且若是網頁中的圖片、css文件、js文件不少甚至有音樂文件時，這勢必會形成負擔。php

　方法一：圖片地圖
css

　　即多個圖片排成一行做爲連接到其餘頁面的按鈕，咱們固然可使用五福圖片，發送5個http請求，可是這是不合適的。html

　　咱們能夠選擇使用圖片地圖，即只用一張圖片，而後使用<map>屬性經過控制座標來實現：前端

　http://stevesouders.com/hpws/imagemap-no.php 這是沒有使用圖片地圖的實例。
http://stevesouders.com/hpws/imagemap.php 這是使用了圖片地圖的例子，速度明顯加快。

　　優勢： 大幅加快加載速度，減小http請求；缺點： 手工設置座標很是麻煩，在IE下支持的很差。java

　方法二：CSS Sprite（可行）webpack

　　　　即一個網頁上有不少的小圖片，好比有20個，若是咱們都請求一遍，就須要使用20個http請求，這是很耗時的。web

　　　　可是咱們能夠把這些圖片合成一個大的圖片，而後將之做爲 background-img插入進去，根據不一樣的圖片設置不一樣的background-postion便可，網易等就是採起的這種作法。chrome

　　　　說明：雖然在不一樣的位置須要請求不少的圖片，可是，實際上咱們查看網絡只會請求一次，以下面的頁面：數據庫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fa</title>
</head>
<body>
    <img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt="">  <img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt="">
    <img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt="">
</body>
</html>

View Code

　http://stevesouders.com/examples/sprites.php 使用了CSS Sprite的實例。

　　優勢： 速度快，能夠和圖片地圖相比擬。

　　使用場景：一些不多改變的圖片（靜態的），如背景、按鈕、導航欄、鏈接等。缺點：沒有缺點。

　方法三：內聯圖片

　　　　即便用data：url的方式來內聯圖片，它不須要額外的http請求。

　　　　缺點：IE不支持。

　　http://stevesouders.com/examples/inline-css-images.php 這是內聯css圖片的例子。這種狀況下就沒有對該圖片產生請求。

　方法四：合併腳本和樣式表（可行）

　　　　通常來講將css和js放在外部文件中會比內聯更好一些，可是若是按照軟件工程師所推薦的方式和模塊化的原則將代碼分開放到不一樣的多個小的文件中，會下降性能，由於每一個文件都會致使一個額外的http請求。

　　　　爲了清晰，咱們不建議將腳本和樣式表合併在一塊兒，可是多個腳本應該合併爲一個腳本，多個樣式表應該合併爲一個樣式表。

　 http://stevesouders.com/examples/combo-none.php 這個是分離腳本的示例
http://stevesouders.com/examples/combom.php　這個是合併腳本的示例

　　　若是你是進行了js的模塊化開發，可能以爲合併是一種倒退，可是咱們可使用在生成過程當中從一組特定的模塊生成一個目標文件，如使用webpack構建工具。

2、使用內容發佈網絡

　　CDN即 content distribute network,內容分發網絡。其原理是---儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。CDN系統可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上。下面的這個例子能夠很好的說明問題：古代打仗你們必定都知道，因爲古代的交通很不發達，因此當外族進攻的時候每每不能及時的反擊，等朝廷徵完兵再把兵派往邊境的時候那些侵略者倒是早已不見了蹤跡，這個讓古代的帝王非常鬱悶。後來帝王們學聰明瞭，都將大量的兵員提早派往邊境駐紮，讓他們平時屯田，戰時當兵，這樣的策略起到了很顯著的做用。

　　曾經一個網站的全部服務器都只在一個地方，可是如今不一樣了，由於咱們知道http請求是耗時的，若是服務器用戶更近，請求的時間不久更短了嗎？因此能夠將服務器置於多個分散的地方，而使用cdn就能夠保證咱們每次從最近的地方獲取到響應。

　　說明1： CDN只是用來提供靜態內容的，如圖片、腳本、樣式表和Flash。提供動態html頁面會引入特殊的存儲需求 - 數據庫鏈接、狀態管理、驗證、硬件和OS優化等。

　　說明2：你所測試的CDN速度與你所處的位置、服務器位置都有很大的關係。

　　優勢：響應速度更快（大部分時間是這樣的）；

　　缺點1：依賴CDN使得你的響應時間會受到其餘網站-甚至是競爭對手網站流量的影響。由於CDN服務器提供商在其全部的客戶之間共享其Web服務器。

　　缺點2：沒法直接控制組件服務器所帶來的特殊麻煩。如，修改HTTP響應頭必須經過服務提供商來完成，而不是你的工做團隊完成。

　　http://stevesouders.com/hpws/ex-cdn.php 提供了cdn
http://stevesouders.com/hpws/ex-nocdn.php 無cdn （本機測試，cdn多數狀況下更快一些~）

3、添加Expires頭

　　在設計web頁面的時候，首次訪問的響應時間並非惟一須要考慮的。若是是這樣的話，咱們能夠將規則1發揮到極致，而且再也不頁面上放置任何圖片、腳本和樣式表。而後，咱們知道，這些能夠加強用戶體驗，這也就意味着須要更長的時間來加載這些東西。

　　雖然在第一次訪問的時候須要進行不少的http請求，可是經過一個長久的Expires頭，可使得這些組件被緩存，這樣在後續的請求中能夠避免不少沒必要要的http請求，須要添加的包括圖片、css、腳本，即全部的組件上。

　　http://www.cnblogs.com/zhuzhenwei918/p/6437574.html 能夠參考個人這篇文章。

　　注意： Expires的缺點是必須保證瀏覽器和服務器的時間嚴格一致，不然就會出現問題。

　　注意：只有在用戶已經訪問了你的網站以後，長久的Expires頭纔會對頁面瀏覽產生影響。當用戶第一次訪問你的網站的時候，它不會對HTTP請求的數量產生任何影響。故其性能的改進取決於用戶在訪問你的頁面的時候是否有完整的緩存。

　　爲圖片使用長久的Expires頭很是廣泛，可是這一最佳實踐不該當僅僅用在圖片上，長久的Expired頭應該包括任何不常常變化的組件，包括腳本、樣式表和Flash組件。可是HTML文檔不該該使用長久的Expires頭，由於他包含動態內容，這些內容在每次用戶請求時都將不斷刷新。

　　那些基本上不須要更新的內容咱們就直接緩存便可，緩存以後咱們就認爲這是靜態頁面了。如：govclouds.cn 他的圖片、大部分的css和js都是緩存的，由於大多數都不須要改變就能夠了。

　　另外，目前的不少網站的形式都是相似於www.sina.com.cn即一個頁面是詳情頁，而後其中還有插入的推薦頁面（不斷變化的）、還有用於收費廣告的頁面（須要不斷變化），這些動態變化的頁面大多數都是使用iframe嵌入的，而基本不變的詳情頁就使用了緩存，動態變化的iframe不會使用緩存。

　　而對於一些可能很快就要改變的，例如展現即時的新聞的頁面，其圖片通常就不會被緩存。如cnn.com，它對於圖片的緩存就只會緩存網站的圖標（基本上不會改變）和網站的一些背景圖片，而對於其餘內容就不會改變。

　　下面的兩個例子分別是無Expires的示例和有Expires的示例：

http://stevesouders.com/hpws/expiresoff.php 無Expires的示例
http://stevesouders.com/hpws/expiresoff.php 有Expires的示例

　　經過測試能夠發現，添加了Expires頭的示例的速度第一次比較慢，可是後面能夠縮短一半的時間。而前者一直都很是慢！效果很是顯著。

　　關於如何觀察緩存和緩存的相關問題能夠看這篇文章。（包括ｕｒｌ中回車、Ｆ５和　Ｃｔｒｌ　＋　Ｆ５的區別）

　　ｕｒｌ中是能用緩存就用緩存，不請求本身沒有的。

　　Ｆ５是無論咋樣，我先去服務器問問再說。

　　Ｃｔｒｌ　＋　Ｆ５是無論咋樣，我直接不要如今的，直接所有從服務器端獲取文件。

　　顯然從本地讀取速度更快。

　　ctrl + shift + del 清空緩存

4、壓縮組件

　　使用減少文件體積的壓縮已經在E-mail和FTP站點中使用了10年，目前HTTP1.1也是開始支持了。其中，web客戶端能夠經過HTTP請求中的Accept-Encoding來表示對壓縮的支持，以下所示：

　　顯然，只要是同一個客戶端，都會發送這樣的請求，其中，ｇｚｉｐ是免費的、標準的壓縮形式，而ｄｅｆｌａｔｅ用的則很是少。　

　　服務器端接收到這樣的請求以後，若是服務器將一個文件壓縮就會在響應的時候包含下面的字段表示對之進行了壓縮，以下所示：

　　通常，大多數的網站都會壓縮hTML、CSS和js腳本，一般不會壓縮圖片和PDF，由於他們原本就是已經被壓縮過的。

　　另外，壓縮是有成本的，由於服務器須要花費額外的CPU週期來完成對文件的壓縮，而且當壓縮文件響應到了客戶端時，客戶端須要進行解壓縮，這都要時間，若是說耗費的時間還不如節省的時間，那就不要壓縮了。美國前十的網站有9個都在壓縮HTML、而css和js則是選擇性的。經過壓縮，能夠將響應的額外的數據量較少將近70%。

　　我在地址欄輸入www.aol.com的時候，查看網絡信息以下：

　　能夠看到，它第一次發送的請求是 http: //www.aol.com/ ，響應狀態碼爲301（Moved Permanently），即永久移除，這時候響應頭中就會包含 Location 字段，而後瀏覽器就會根據服務器發送回來的新的地址，從新訪問，因而產生了第二條請求，以下所示：

　　即，此次瀏覽器利用服務器響應的Location字段的值來從新發送了請求，此次就發送成功了。即 200 Connetion established 。即創建了TCP創建了鏈接。

　　而若是咱們第一次就輸入 https://www.aol.com/ 這樣就不會發生301的狀況了，而是200 OK。

　　有時候咱們能夠看到在響應頭中含有vary字段，如www.aol.com中的，以下所示：

　　vary：「Accept-Encoding」；是什麼意思呢？

　　由於當瀏覽器直接和服務器進行通訊時，迄今爲止全部的介紹的配置都能很好的工做，可是當瀏覽器經過代理來發送請求時，狀況就變得複雜了會形成嚴重的問題。

　　解決方法就是在weg服務器的響應頭中添加vary頭。即web服務器告訴代理相關信息。

　　下面的例子是未壓縮、只壓縮HTML和壓縮全部組件的例子：

http://stevesouders.com/hpws/nogzip.html 這是沒有壓縮的例子。
http://stevesouders.com/hpws/gzip-html.html 這是隻壓縮html的例子。
http://stevesouders.com/hpws/gzip-all.html 這是壓縮全部組件的例子。

　　相對於不壓縮，壓縮html能夠節省約爲9.7%的時間（固然不是絕對的），壓縮全部組件能夠節約約爲53.2%的時間。

　　不壓縮的響應頭：

　　壓縮了html文件的響應頭：

　　實際測試時，感受響應的更快（是原做者將一個js文件也誤壓縮了）

　　壓縮了全部組件的響應頭：

　　根據content-type也能夠知道這是一個js文件。

　　總結：經過比較，能夠發現通過壓縮，響應的時間獲得了很明顯的提升。

注： content-type的值

html ： text/html

css    :   text/css

js      :   application/javascript

gif     :   image/gif

jpeg :   image/jpeg

json : application/json

5、使用link將樣式表放在頂部

　　　這條規則主要是用來解決無樣式內容的閃爍（Flash of Unstyled Content, FOUC）問題。

　　若是樣式表仍在加載，構建呈現樹就是一種浪費，由於全部樣式表加載並解析完畢以前無需繪製任何東西。不然，在其準備好以前顯示內容會遇到FOUC（無樣式內容的閃爍，Flash of Unstyled Content）問題。

　　　在 http://stevesouders/hpws/css-fouc.php 中查看fouc現象。

　　在 chrome 上僅僅是由閃爍的狀況，其餘瀏覽器甚至有可能出現白屏的狀況。 白屏是瀏覽器再嘗試修改前端工程師所犯的錯誤 --- 將樣式表放在文檔比較靠後的位置。白屏是對FOUC問題的補充。

6、將腳本放在底部

　剛剛解決了css的問題，最好放在頂部，而對於js來講，恰好相反，即最好從頂部移動到底部（若是能夠的話）。這樣頁面既能夠逐步呈現，也能夠提升下載的並行度。

　　先看這樣的一個例子：將一個頁面中部放置js腳本，以下所示：

　　　　http://stevesouders.com/hpws/js-middle.php

　　能夠發現， js執行須要將近10s鍾，因此頁面的下半部分大概要花10s鍾才能呈現出來。出現這個現象是由於js阻止了並行下載，js是單線程的。因此這就意味着將腳本放在頁面越靠下的地方，意味着越多的內容可以逐步地呈現。

　　下面是一個腳本阻塞加載的實例：

　　　　http://stevesouders.com/hpws/js-blocking.php

　　下面是一個腳本放在頂部的實例：

　　　　http://stevesouders.com/hpws/js-top.php

　　下面是一個腳本放在底部的實例：

　　　　http://stevesouders.com/hpws/js-bottom.php

　　常常出現的另一種建議是使用延遲（defer）腳本，以下所示：

　　　　http://stevesouders.com/hpws/js-defer.php

7、避免使用css表達式

　　這是IE5支持的，早已不被推薦使用。

8、使用外部的JavaScript和CSS

咱們首先來比較一下內聯和外置的區別。

1、純粹而言、內聯更快一些。

　　下面的兩個例子分別是內聯和外置,他們文件大小都是87kb：

http://stevesouders.com/hpws/inlined.php
http://stevesouders.com/hpws/external.php

　　能夠看到最開始顯然是內聯的要快一些。由於內聯就只有http請求。而外置須要有5個http請求。

　　但也不是這麼絕對，由於當外置的文件被緩存下來，那麼真正的http請求就只有1個了。其餘的文件都會從硬盤彙總讀取。因此這個不是很比如較。

　　結論：單純比較, 內聯快。

2、 頁面瀏覽量

　　若是用戶常常瀏覽你的網頁，那麼用到緩存的機率就更大一些，所以，外置更佔據優點。

　　可是若是用戶好久（一個月）才瀏覽一次，那麼顯然使用內置會更好一些。

3、空緩存&&完整緩存

　　在作比較時，知道用戶的緩存的可能性是很是重要的。若是網站本質上能夠爲用戶帶來高完整緩存率，使用外部文件的受益就會很大。若是不能（或機率較小）產生完整的緩存，那麼內聯是更好的選擇。

4、組件重用

　　若是你的網站中每一個頁面都使用了相同的JavaScript和CSS，使用外部組文件能夠提升這些組件的重用率。在這種狀況下使用外部文件更加具備優點，由於當用戶在頁面間導航時，JavaScript和CSS組件就已經位於瀏覽器的緩存中了，這樣進入後面的頁面後，就不用http請求，而是直接使用在導航頁面的緩存文件了。

　　可是若是沒有任何兩個頁面共享相同的JavaScript和CSS，那麼重用率就會很是低了。

　　最好的狀況通常就是將頁面劃分紅幾種頁面類型，而後爲每種類型建立單獨的腳本和樣式表。

經過對比咱們仍是認爲將js和css外置會更好一些。

主頁

　　通常主頁傾向於使用內聯而不是外置，他們對響應能力有着更高的要求。

9、減小DNS查找

10、精簡JavaScript

　　精簡

　　精簡是指從代碼中移除沒必要要的字符以減少其大小，進而改善加載時間。在代碼被精簡以後，全部的註釋以及沒必要要的空白字符（空格、換行和製表符）都將被移除，對於JavaScript而言，還能夠改善響應時間效率，由於須要下載的文件大小減少了。

　　混淆

　　混淆是能夠應用在源代碼上的另一種優化方式。和精簡同樣，它會移除註釋和空白，同時它還會改寫代碼。做爲改寫的一部分，函數和變量的名字會被轉化成更短的字符串，這時的代碼更爲精煉，也更難閱讀。 可是這對提升性能的幫助很大。 注意：因爲混淆更加複雜，因此混淆過程自己頗有可能引入錯誤。

　　觀察下面的例子：

http://stevesouders.com/hpws/js-large-normal.php 通常腳本
http://stevesouders.com/hpws/js-large-minify.php 精簡後腳本
http://stevesouders.com/hpws/js-large-obfuscate.php 混淆後腳本

11、避免重定向

　　在重定向中使用的最多的狀態碼是 301 和 302，而 303 和 307 是在HTTP1.1規範中添加的，用來澄清對302的使用（濫用），可是幾乎沒有人使用303和307，絕大多數網站仍然使用302.

　　一旦發生了重定向，就會嚴重阻塞html的傳輸。

12、刪除重複腳本

十3、配置ETag

十4、使Ajax可緩存

4.使用JSON格式來進行數據交換　

　　JSON是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是 JavaScript原生格式，這意味着在 JavaScript 中處理 JSON數據不須要任何特殊的 API 或工具包。與XML序列化相比，JSON序列化後產生的數據通常要比XML序列化後數據體積小。

5.減小DOM操做

　　在《高性能JavaScript》中有這樣一句話：

把DOM和JavaScript各自想象成一個島嶼，它們之間用收費橋樑鏈接。

　　所以咱們應當儘可能減小DOM操做、若是屢次訪問同一個DOM應該使用局部變量緩存該DOM、儘量使用querySelector，而不是使用獲取HTML集合的API。另外DOM操做會致使一系列的重繪（repaint）、從新排版（reflow）操做。爲了確保執行結果的準確性，全部的修改操做是按順序同步執行的。大部分瀏覽器都不會在JavaScript的執行過程當中更新DOM。相應的，這些瀏覽器將對對 DOM的操做放進一個隊列，並在JavaScript腳本執行完畢之後按順序一次執行完畢。也就是說，在JavaScript執行的過程，直到發生從新排版，用戶一直被阻塞。通常的瀏覽器中（不含IE），repaint的速度遠快於reflow，因此避免reflow更重要。

6.壓縮css文件、js文件、圖片

　　css文件和js文件中的註釋、額外的空格會佔用更多的資源，因此壓縮css和js是十分必要的。另外，對於圖片咱們能夠下降圖片的分辨率、改變圖片的格式以達到壓縮圖片的效果。

7.減小DNS查詢

　　咱們知道一次DNS的解析過程會消耗20-120毫秒的時間,在dns查詢結束以前，瀏覽器不會下載該域名下的任何東西。因此減小dns查詢的時間能夠加快頁面的加載速度。所以咱們建議一個頁面所包含的域名數儘可能控制在2-4個。這就須要對頁面總體有一個很好的規劃。

未完待續....