最近在寫一個智慧教室行為管理網(wǎng)站，網(wǎng)站已經(jīng)完工，老師見我沒事兒干了，讓我嘗試如何在前端實現(xiàn)性能優(yōu)化，以前也模糊知道一些，圖片加載。http請求方面的東西，但是不全，現(xiàn)在就來總結(jié)一下，以下是比較常見的

• 減少http請求
• 壓縮并優(yōu)化js/css/image
• 簡化，盡量靜態(tài)頁面

減少http請求

80%的相應(yīng)時間花在下載網(wǎng)頁內(nèi)容(images,css,js,flash)等，減少請求次數(shù)是縮短響應(yīng)時間的關(guān)鍵，可以通過簡化頁面設(shè)計來減少請求次數(shù)，可使用一些技巧

• 捆綁文件：將多個腳本文件、樣式表文件捆綁成一個文件，以此來減少文件下載速度
• css雪碧圖： 將多個圖片拼成一幅圖片，然后使用css來控制在什么地方顯示著整張圖片的局部
• inline images： 通過編碼的字符串將圖片內(nèi)嵌到網(wǎng)頁文本中，例如將圖片轉(zhuǎn)為base64格式的數(shù)據(jù)編碼

減少DNS查詢次數(shù)

DNS查詢也消耗響應(yīng)時間，如果我們網(wǎng)頁內(nèi)容來自各個不同的domain（例如嵌入了開放廣告或者引入了外部圖片或者腳本），首次解析這些domain也需要消耗一定時間，DNS查詢結(jié)果緩存在本地系統(tǒng)和瀏覽器中一段時間，所以DNS查詢一般是對首次訪問速度有影響

緩存ajax

ajax可以幫助我們異步下載網(wǎng)頁內(nèi)容，但是有些網(wǎng)頁內(nèi)容即使是異步的，用戶還是在等待它的返回結(jié)果，例如ajax的返回是用戶聯(lián)系人的下拉列表，所以我們還是要注意應(yīng)用一些規(guī)則提高ajax的響應(yīng)速度

• 添加Expires或Cache-Control報文頭使回復(fù)可以被客戶端緩存
• 壓縮回復(fù)內(nèi)容
• 減少DNS查詢
• 精簡js
• 避免跳轉(zhuǎn)
• 配置Etags

延遲加載

網(wǎng)頁的加載其實是按照代碼書寫順序加載的，這就涉及到了加載的優(yōu)先級，首先應(yīng)該讓誰先加載，先顯示，剩下的次要內(nèi)容就可以延遲加載
js是典型的可以延遲加載的內(nèi)容，一個比較激進的做法是在開發(fā)網(wǎng)頁時確保網(wǎng)頁在沒有js的情況下也可以基本工作，然后通過延遲加載腳本完成一些高級功能

提前加載

與延遲加載相反，提前加載是為了提前加載接下來網(wǎng)頁中訪問的資源，下面是提前加載的了類型

• 無條件提前加載：當網(wǎng)頁加載完成后，馬上去下載一些其他內(nèi)容，例如google會在頁面加載成功后馬上去下載一個所有結(jié)果中都會用到的image sprite

  
  
• 有條件加載：根據(jù)用戶輸入推斷需要加載的內(nèi)容，很常見的就是用戶輸入一些關(guān)鍵字搜索引擎就會顯示很多相關(guān)詞條，還沒有按下搜索鍵就自動跳轉(zhuǎn)到搜索內(nèi)容

image.png

減少DOM元素數(shù)量

網(wǎng)頁中元素過多對網(wǎng)頁的加載和腳本的執(zhí)行都是沉重負擔，500個元素和5000個元素在加載速度上會有很大差別

image.png

document.getElementsByTagName('*').length

顯示google首頁只有358個元素

根據(jù)域名劃分內(nèi)容

瀏覽器一般對同一個域的下載連接數(shù)有所限制，按照域名劃分下載內(nèi)容可以瀏覽器增大并行下載連接，但是注意控制域名使用在2-4個之間，不然dns查詢會增多
可以將靜態(tài)資源放在類似于static.example.com,動態(tài)內(nèi)容放example.com，這樣做還有一個好處是可以在靜態(tài)域名商避免使用cookie

減少iframe數(shù)量

iframe使用有優(yōu)點也有缺點
優(yōu)點

• 可以用來加載速度較慢的內(nèi)容，例如廣告
• 安全箱保護，瀏覽器會對iframe中內(nèi)容進行安全控制
• 腳本可以并行下載
  缺點
• 即使iframe為空也消耗加載時間
• 會阻止頁面加載
• 沒有語義

避免404

404代表服務(wù)器沒有找到資源，客戶端發(fā)送一個請求但是服務(wù)器卻返回一個無用的結(jié)果，時間浪費掉了
更糟糕的是我們網(wǎng)頁加載中需要加載一個外部腳本，結(jié)果卻返回一個404，不僅阻塞了其他腳本的下載，下載回來的內(nèi)容客戶端還會將其當成是js去解析

使用CDN

減少網(wǎng)頁下載的內(nèi)容，提高下載速度可以通過內(nèi)容分發(fā)網(wǎng)絡(luò)-CDN來提升，CDN通過部署在不同地區(qū)的服務(wù)器來提升客戶的下載速度，可以通過免費的CDN供應(yīng)商來分發(fā)網(wǎng)頁資源

添加Expires或Cache-Control報文頭

分為兩個方面

• 對于靜態(tài)內(nèi)容添加Expires， 將靜態(tài)內(nèi)容社會永不過期。
• 對于動態(tài)內(nèi)容應(yīng)用合適的Cache-Control，讓瀏覽器根據(jù)條件來發(fā)送請求

避免空的圖片SRC

空的圖片src仍然會使瀏覽器發(fā)送請求服務(wù)器，這樣完全是浪費時間，而且浪費服務(wù)器的資源，這種空請求造成的傷害不容忽略

減小cookie大小

cookie被用來做認證或個性化設(shè)置，其信息被包含在http報文當中，對于cookie我們要注意以下幾點，來提高請求響應(yīng)速度

• 將cookie大小減到最小
• 注意cookie設(shè)置的domain級別，沒有必要情況下不要影響到sub-domian
• 注意設(shè)置合適的過期時間，比較長的過期時間可以提高響應(yīng)速度

將css置頂

css放在網(wǎng)頁head中會讓網(wǎng)頁顯得加載速度更快，因為這樣做可以使瀏覽器逐步加載已經(jīng)下載的網(wǎng)頁內(nèi)容，這對內(nèi)容多的網(wǎng)頁很重要，用戶不用一直等在一個白屏上，而是可以先看到已經(jīng)下載的內(nèi)容，如果將樣式表放在底部，瀏覽器會拒絕渲染已經(jīng)下載的網(wǎng)頁，因為大多數(shù)瀏覽器起在實現(xiàn)時都會努力避免重繪

用<link>代替@import

避免使用@import，因為這個相當于將css放在網(wǎng)頁內(nèi)容底部

將js置于底部

腳本在下載時，即使是來自不同的hostname瀏覽器也不會下載其他資源，因為瀏覽器要在腳本下載之后依次解析和執(zhí)行，可以考慮下面方式來腳本提速

• 將腳本置地，優(yōu)先css渲染，呈現(xiàn)給用戶
• 主流瀏覽器支持defer關(guān)鍵字，可以指定腳本在文檔加載后執(zhí)行
• HTML5中新加了async關(guān)鍵字，可以讓腳本異步執(zhí)行

精簡js和css

精簡就是將js和css中空格和注釋全部去掉
統(tǒng)計表明，精簡后的文件平均減少了21%
用來幫助做精簡的紅菊很多
js compressors:

• Packer
• JSMin
• Clouse compile
• YUICompressor
• AjaxMin
  css compressors:
• CSSTidy
• Minify
• CSSCompressor

圖片延遲加載

延遲加載時提高網(wǎng)頁首屏顯示速度的有效辦法，當圖片元素進入窗口可視區(qū)域的時候，它就會改變圖像的src屬性，從服務(wù)端加載所需的圖片，這也是一個異步的郭層
推薦的簡單易用的圖片延遲加載插件-

• Echo.js
  github:https://github.com/toddmotto/echo
  官網(wǎng)地址：https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/
• Layzyr.js
  github:https://github.com/callmecavs/layzr.js
  官網(wǎng)網(wǎng)址：http://callmecavs.com/layzr.js/

優(yōu)化css Sprite

• Sprite中水平排列圖片，處置排列會增加文件大小
• Sprite中把顏色較近的組合放在一起降低顏色書，理想狀況是低于256色以便適用于PNG8格式
• 不要在Sprite圖像中留有較大空隙，這雖然不大會增加文件大小，但對于用戶代理來說，需要更少的內(nèi)存來把圖片解壓為像素地圖

使用小且可緩存的favicon.ico

網(wǎng)站文件favicon.ico不管服務(wù)器有沒有，都會去嘗試請求這個圖標，這個圖片的要求

• 存在
• web盡量小，小于1k
• 設(shè)置一個較長的過期時間