一、網(wǎng)站性能優(yōu)化35條建議
下圖是我使用XMind根據(jù)雅虎的工程師團(tuán)隊(duì)給出的35項(xiàng)建議分類(lèi)而制作的思維導(dǎo)圖：
參考資料：
1、https://developer.yahoo.com/performance/rules.html
2、http://www.cnblogs.com/chenxizhang/category/194099.html
3、http://www.imooc.com/learn/50
4、http://kejian.jirengu.com/fe?q_l=%E8%AF%BE%E4%BB%B6&q_d=42-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96
二、網(wǎng)站性能優(yōu)化工具推薦
1、YSlow
我們可以使用YSlow 來(lái)測(cè)試我們網(wǎng)站的性能。
它的使用方法是在瀏覽器上安裝插件或者如果不想使用插件的話(huà)可以使用Bookmarklet書(shū)簽(其實(shí)就是把js立即執(zhí)行函數(shù)放在書(shū)簽中)的方法(采用Bookmarklet書(shū)簽的方法只能針對(duì)http協(xié)議的網(wǎng)站生效，對(duì)于https協(xié)議不能生效)；
下圖是我用它來(lái)測(cè)試qq.com網(wǎng)站的性能情況，
YSlow統(tǒng)計(jì)了23項(xiàng)建議各部分的得分情況，并給出了詳細(xì)的解釋?zhuān)?br> 當(dāng)然它還給出了網(wǎng)站的總體得分，好吧。。。qq.com得了最低等級(jí)---F等級(jí)。當(dāng)然這只是一個(gè)參考而已，不是絕對(duì)的，畢竟qq.com是一個(gè)超大型的門(mén)戶(hù)網(wǎng)站，它需要考慮很多種情況，YSlow制定的一些評(píng)分機(jī)制并不能完全適用它，但是里面的部分建議項(xiàng)我們還是可以參考下的。
我們可以通過(guò)YSlow來(lái)看看qq.com的資源分布情況：
通過(guò)上圖我們可以很直觀的看到，當(dāng)無(wú)緩存狀態(tài)訪(fǎng)問(wèn)qq.com時(shí)，所有文件加起來(lái)有1447.5K大小，其中圖片占大頭，其總共占1017.6K；訪(fǎng)問(wèn)qq.com時(shí)總共有 136 條HTTP 請(qǐng)求在這里也統(tǒng)計(jì)出來(lái)了。
另外YSlow還幫我們統(tǒng)計(jì)了js、css及圖片等數(shù)量：
我們可以看到qq.com此時(shí)js有12個(gè)，圖片有121個(gè)等等數(shù)據(jù)，并且我們可以很方便的查看及訪(fǎng)問(wèn)里面的資源。
再拿它測(cè)試我之前做的一個(gè)網(wǎng)頁(yè)：https://github.com/have-not-BUG/task/blob/master/renwu/task41/dist/index.html
可以看到我之前做的那個(gè)網(wǎng)站：
-
1、兩項(xiàng)被給了F等級(jí)：
Paste_Image.png
它給的建議是：
a、應(yīng)該使用CDN；b、應(yīng)該增加緩存操作； -
2、一項(xiàng)給了B等級(jí)：
Paste_Image.png
它給的建議是：不要在html中縮放圖片；（我確實(shí)在里面縮放了圖片：圖片原本是225px.225px，我設(shè)置成了200px.200px）
通過(guò)以上介紹我們可以看到Y(jié)Slow能夠很直觀展示我們需要的一些網(wǎng)站性能優(yōu)化的數(shù)據(jù)及提供一些可參考的建議，它對(duì)網(wǎng)站的性能優(yōu)化分析很有幫助。
2、PageSpeed Insights
谷歌的PageSpeed Insights ，它是先分析網(wǎng)頁(yè)的內(nèi)容，然后提供關(guān)于如何提升網(wǎng)頁(yè)加載速度的建議。
使用網(wǎng)址：https://developers.google.com/speed/pagespeed/insights/
我們把我以前做的那個(gè)網(wǎng)頁(yè)輸進(jìn)去：
它給我的建議是：
1、使用瀏覽器緩存；
2、清除首屏內(nèi)容中阻止呈現(xiàn)的 JavaScript 和 CSS；（它指出我的網(wǎng)頁(yè)中有2個(gè)阻止呈現(xiàn)的 CSS 資源，這樣會(huì)導(dǎo)致呈現(xiàn)網(wǎng)頁(yè)的過(guò)程出現(xiàn)延遲。）；
另外：它還評(píng)判網(wǎng)站在移動(dòng)端的性能及相應(yīng)的適配情況。（由于我并未為移動(dòng)端適配，因此它給出了提醒--此網(wǎng)頁(yè)可能無(wú)法通過(guò) Google 的移動(dòng)設(shè)備適合性測(cè)試
3、DynaTrace Ajax Edition
dynaTrace Ajax Edition 是一個(gè)強(qiáng)大的底層追蹤、前端性能分析工具。您可以利用它來(lái)分析頁(yè)面渲染時(shí)間、DOM方法執(zhí)行時(shí)間，甚至可以看到JS代碼的解析時(shí)間。
關(guān)于DynaTrace Ajax Edition的介紹可見(jiàn)前端性能分析工具：dynaTrace Ajax Edition及dynaTrace Ajax：前端性能分析利器
4、webpagetest
這個(gè)網(wǎng)站也是谷歌旗下的產(chǎn)品，將需測(cè)試的網(wǎng)址輸入后稍等片刻，便可看到很多詳細(xì)參數(shù)，不僅如此，我們還可以看到我們網(wǎng)站在被訪(fǎng)問(wèn)時(shí)的錄屏（ 部分）和過(guò)程截圖。
例如我將前面提到的網(wǎng)站輸進(jìn)webpagetest后，它便給我生成了一個(gè)非常詳細(xì)的報(bào)告：
具體可點(diǎn)擊這里進(jìn)行查看測(cè)試結(jié)果。
關(guān)于WebPageTest測(cè)試結(jié)果相關(guān)參數(shù)介紹可見(jiàn)：網(wǎng)站性能測(cè)試指標(biāo)，你真的看懂了？
5、showslow；
showslow 網(wǎng)站會(huì)綜合前面4個(gè)工具的信息(見(jiàn)下圖)：
另外，注冊(cè)后可我們可以添加網(wǎng)址，它會(huì)24小時(shí)自動(dòng)幫我們檢測(cè)YSlow, Page Speed 和 dynaTrace數(shù)據(jù)。
6、Chrome的performance功能
7、W3C 關(guān)于Web性能相關(guān)屬性
Performance.timeOrigin
8、其他；
具體可詳見(jiàn)： 網(wǎng)站性能優(yōu)化工具大全
這里就不做介紹啦~
三、前端頁(yè)面性能指標(biāo)
1.Apdex指數(shù)
Apdex值和Apdex指數(shù)是國(guó)際通用標(biāo)準(zhǔn)，是對(duì)用戶(hù)體驗(yàn)滿(mǎn)意度的量化值。
基于「真實(shí)用戶(hù)體驗(yàn)」，Apdex 定義了 3 個(gè)用戶(hù)滿(mǎn)意區(qū)間：「滿(mǎn)意」、「可容忍」、「失望」，通過(guò)響應(yīng)時(shí)間數(shù)值 “T” 來(lái)劃分。T 值代表著用戶(hù)滿(mǎn)意的響應(yīng)時(shí)間界限，國(guó)際上一般默認(rèn)為 2s，也就是說(shuō)滿(mǎn)意區(qū)間就是 0~2s；頁(yè)面響應(yīng)時(shí)間超過(guò) T 值用戶(hù)就有些不滿(mǎn)了，下一個(gè)區(qū)間「容忍」的界限值是 T 和 4T，即 4-8 秒之間為容忍區(qū)間；響應(yīng)時(shí)間再長(zhǎng)用戶(hù)就開(kāi)始考慮放棄了，最后一個(gè)區(qū)間「失望」的響應(yīng)時(shí)間則大于 4T，即多于 8 秒。
采集一定時(shí)間內(nèi)的 Apdex 值之后，經(jīng)過(guò)計(jì)算可以得出 Apdex 指數(shù)，具體計(jì)算公式為:<pre>Apdex 指數(shù) = [ 滿(mǎn)意數(shù)量 + （ 可容忍數(shù)量 / 2）] / 總樣本數(shù) </pre>這樣，用戶(hù)訪(fǎng)問(wèn)頁(yè)面的響應(yīng)時(shí)間被量化為一個(gè) 0 到 1 之間的「Apdex 指數(shù)」，0 代表沒(méi)有滿(mǎn)意用戶(hù)，1 則代表所有用戶(hù)都滿(mǎn)意。經(jīng)過(guò)統(tǒng)計(jì)，基于頁(yè)面性能的 Apdex 評(píng)分于用戶(hù)的體驗(yàn)緊密關(guān)聯(lián), 為管理、研發(fā)、運(yùn)維人員提供了一種通過(guò)應(yīng)用性能量化值來(lái)評(píng)估用戶(hù)滿(mǎn)意度的方法。[圖片上傳失敗...(image-dce4c1-1510803564016)]
可行工具：New Relic、OneAPM Browser Insight
2.頁(yè)面響應(yīng)時(shí)間
說(shuō)得再好，做的再多最后頁(yè)面也是要上生產(chǎn)的，線(xiàn)上的頁(yè)面用戶(hù)最直接的感受，就是頁(yè)面響應(yīng)時(shí)間，也就是頁(yè)面打開(kāi)耗時(shí)。
很多前端性能工具對(duì)頁(yè)面響應(yīng)時(shí)間這個(gè)指數(shù)只是簡(jiǎn)單的在本地模擬下，也就是所謂的「撥測(cè)」；或者只是簡(jiǎn)單的通過(guò) window.performance
接口把各個(gè)數(shù)據(jù)上傳給使用者，根本無(wú)法展現(xiàn)用戶(hù)的真實(shí)體驗(yàn)。
從技術(shù)的角度講，一個(gè)頁(yè)面的打開(kāi)時(shí)間也是要?jiǎng)澐譃楦鱾€(gè)部分的，例如：首屏打開(kāi)時(shí)間、白屏?xí)r間、dom文檔打開(kāi)時(shí)間、資源加載完成時(shí)間等；也要重視資源加載耗時(shí)詳情，是哪些腳本或者 css 拖慢了頁(yè)面的加載這些都要一目了然。只有這樣，一旦頁(yè)面響應(yīng)時(shí)間過(guò)長(zhǎng)，相關(guān)人員才能有針對(duì)性的去進(jìn)行維護(hù)。[圖片上傳失敗...(image-dad102-1510803564016)][圖片上傳失敗...(image-d4115f-1510803564016)]
可行工具：New Relic、OneAPM Browser Insight、AppDynamics、Ruxit
3.頁(yè)面響應(yīng)時(shí)間分布
想了想還是覺(jué)得有必要把這個(gè)指標(biāo)從「頁(yè)面響應(yīng)時(shí)間」里面拿出來(lái)單獨(dú)說(shuō)。
顧名思義，頁(yè)面響應(yīng)時(shí)分布間就是一段時(shí)間內(nèi)，用戶(hù)訪(fǎng)問(wèn)頁(yè)面的響應(yīng)時(shí)間的分布圖。其實(shí)大部分情況下，一個(gè)網(wǎng)站的維護(hù)只需照顧到絕大多數(shù)用戶(hù)就可以了，沒(méi)有必要為了滿(mǎn)足各種極端情況而耗費(fèi)各種資源，中國(guó)網(wǎng)絡(luò)環(huán)境的復(fù)雜性相信大家都深有體會(huì)，所以這種統(tǒng)計(jì)就顯得尤為必要，[圖片上傳失敗...(image-a7b068-1510803564016)]
可行工具：OneAPM Browser Insight、AppDynamics、Ruxit
4.DNS、TCP耗時(shí)
瀏覽器和 WEB 服務(wù)器連接 TCP/IP 的消耗時(shí)間以及域名解析時(shí)間也是網(wǎng)站優(yōu)化需要關(guān)注指標(biāo)。
還是那句話(huà)————國(guó)內(nèi)的網(wǎng)絡(luò)環(huán)境極其復(fù)雜，所以導(dǎo)致經(jīng)常有 DNS，CDN 不給力的情況，TCP 的連接也經(jīng)常會(huì)不穩(wěn)定。之前國(guó)內(nèi)外有些工具可以通過(guò)模擬撥測(cè)的方式來(lái)計(jì)算 DNS 耗時(shí)等數(shù)據(jù)，但講實(shí)在的，只是這種仿真數(shù)據(jù)的話(huà) DNS 廠(chǎng)家才不會(huì)理你，所以，從用戶(hù)真實(shí)體驗(yàn)的角度來(lái)收集這類(lèi)耗時(shí)則顯得尤為必要，而現(xiàn)在能做好這一點(diǎn)的工具確實(shí)不多，給大家推薦幾個(gè)。[圖片上傳失敗...(image-c8c8e2-1510803564016)]可行工具：OneAPM Browser Insight、AppDynamics、Ruxit
四、性能測(cè)試方法
網(wǎng)站上線(xiàn)前以及上線(xiàn)后，相關(guān)的性能測(cè)試也是必須要有的。性能測(cè)試是一個(gè)總稱(chēng)，具體可細(xì)分為性能測(cè)試、負(fù)載測(cè)試、壓力測(cè)試、穩(wěn)定性測(cè)試。
性能測(cè)試
以系統(tǒng)設(shè)計(jì)初期規(guī)劃的性能指標(biāo)為目標(biāo)，對(duì)系統(tǒng)不斷施加壓力，驗(yàn)證系統(tǒng)在資源可接受范圍內(nèi)，是否能達(dá)到性能預(yù)期。
負(fù)載測(cè)試
對(duì)系統(tǒng)不斷地增加并發(fā)請(qǐng)求以增加系統(tǒng)壓力，直到系統(tǒng)的某項(xiàng)或多項(xiàng)性能指標(biāo)達(dá)到安全臨界值，如某種資源已經(jīng)呈飽和狀態(tài)，這時(shí)繼續(xù)對(duì)系統(tǒng)施加壓力，系統(tǒng)的處理能力不但不能提高，反而會(huì)下降。
壓力測(cè)試
超過(guò)安全負(fù)載的情況下，對(duì)系統(tǒng)繼續(xù)施加壓力，直到系統(tǒng)崩潰或不能再處理任何請(qǐng)求，以此獲得系統(tǒng)最大壓力承受能力。
穩(wěn)定性測(cè)試
被測(cè)試系統(tǒng)在特定硬件、軟件、網(wǎng)絡(luò)環(huán)境條件下，給系統(tǒng)加載一定業(yè)務(wù)壓力，使系統(tǒng)運(yùn)行一段較長(zhǎng)時(shí)間，以此檢測(cè)系統(tǒng)是否穩(wěn)定。在不同生產(chǎn)環(huán)境、不同時(shí)間點(diǎn)的請(qǐng)求壓力是不均勻的，呈波浪特性，因此為了更好地模擬生產(chǎn)環(huán)境，穩(wěn)定性測(cè)試也應(yīng)不均勻地對(duì)系統(tǒng)施加壓力。
性能測(cè)試是一個(gè)不斷對(duì)系統(tǒng)增加訪(fǎng)問(wèn)壓力，以獲得系統(tǒng)性能指標(biāo)、最大負(fù)載能力、最大壓力承受能力的過(guò)程。所謂的增加訪(fǎng)問(wèn)壓力，在系統(tǒng)測(cè)試環(huán)境中，就是不斷增加測(cè)試程序的并發(fā)請(qǐng)求數(shù)，一般說(shuō)來(lái)，性能測(cè)試遵循如下圖所示的拋物線(xiàn)規(guī)律。
[圖片上傳失敗...(image-27aa08-1510803564016)]
性能測(cè)試反應(yīng)的是系統(tǒng)在實(shí)際生產(chǎn)環(huán)境中使用時(shí)，隨著用戶(hù)并發(fā)訪(fǎng)問(wèn)數(shù)量的增加，系統(tǒng)的處理能力。與性能曲線(xiàn)相對(duì)應(yīng)的是用戶(hù)訪(fǎng)問(wèn)的等待時(shí)間（系統(tǒng)響應(yīng)時(shí)間）
[圖片上傳失敗...(image-76f095-1510803564016)]
在日常運(yùn)行區(qū)間，可以獲得最好的用戶(hù)響應(yīng)時(shí)間，隨著并發(fā)用戶(hù)數(shù)的增加，響應(yīng)延遲越來(lái)越大，直到系統(tǒng)崩潰，用戶(hù)失去響應(yīng)。
而從 OneAPM 提供的 Browser Insight 的定位分析功能來(lái)看，跟這個(gè)圖還是很相似的，只不過(guò)是 X 坐標(biāo)軸是響應(yīng)時(shí)間，Y 是訪(fǎng)問(wèn)次數(shù)。[圖片上傳失敗...(image-f59f45-1510803564016)]
性能測(cè)試報(bào)告
測(cè)試結(jié)果報(bào)告應(yīng)能夠反映上述性能測(cè)試曲線(xiàn)的規(guī)律，閱讀者可以得到系統(tǒng)性能是否滿(mǎn)足設(shè)計(jì)目標(biāo)和業(yè)務(wù)要求、系統(tǒng)最大負(fù)載能力、系統(tǒng)最大壓力承受能力等重要信息，下表是一個(gè)簡(jiǎn)單示例：
[圖片上傳失敗...(image-c829ae-1510803564016)]
當(dāng)這些數(shù)據(jù)得到量化的之后，我們的目標(biāo)就很明確了，那么最終我們?yōu)榱舜蛟煲粋€(gè)高性能的網(wǎng)站，需要做哪些工作呢？接下來(lái)我們分析性能優(yōu)化的一些策略！
五、性能優(yōu)化策略
如果性能測(cè)試結(jié)果不能滿(mǎn)足設(shè)計(jì)或業(yè)務(wù)需求，那么就需要尋找系統(tǒng)瓶頸，分而治之，逐步優(yōu)化。
1．性能分析
大型網(wǎng)站結(jié)構(gòu)復(fù)雜，用戶(hù)從瀏覽器發(fā)出請(qǐng)求直到數(shù)據(jù)庫(kù)完成操作事務(wù)，中間需要經(jīng)過(guò)很多環(huán)節(jié)，如果測(cè)試或者用戶(hù)報(bào)告網(wǎng)站響應(yīng)緩慢，存在性能問(wèn)題，必須對(duì)請(qǐng)求經(jīng)歷的各個(gè)環(huán)節(jié)進(jìn)行分析，排查可能出現(xiàn)性能瓶頸的地方，定位問(wèn)題!
排查一個(gè)網(wǎng)站的性能瓶頸和排查一個(gè)程序的性能瓶頸的手法基本相同：檢查請(qǐng)求處理的各個(gè)環(huán)節(jié)的日志，分析哪個(gè)環(huán)節(jié)響應(yīng)時(shí)間不合理、超過(guò)預(yù)期；然后檢查監(jiān)控?cái)?shù)據(jù)，分析影響性能的主要因素是內(nèi)存、磁盤(pán)、網(wǎng)絡(luò)、還是 CPU？是代碼問(wèn)題還是架構(gòu)設(shè)計(jì)不合理？或者系統(tǒng)資源確實(shí)不足？
2．性能優(yōu)化
定位產(chǎn)生性能問(wèn)題的具體原因后，就需要進(jìn)行性能優(yōu)化，根據(jù)網(wǎng)站分層架構(gòu)，可分為 Web 前端性能優(yōu)化、應(yīng)用服務(wù)器性能優(yōu)化、存儲(chǔ)服務(wù)器性能優(yōu)化 3 大類(lèi)，每一類(lèi)都非常重要，一款好的工具的重要性就不言而喻了。
目前，OneAPM 針對(duì)前端性能的優(yōu)化產(chǎn)品，Browser Insight 可以讓用戶(hù)免費(fèi)試用；同時(shí)包括針對(duì)應(yīng)用服務(wù)器性能優(yōu)化 Application Insight 產(chǎn)品以及針對(duì)存儲(chǔ)服務(wù)器性能優(yōu)化 Cloud Insight產(chǎn)品也都提供了免費(fèi)版產(chǎn)品，希望能夠幫助用戶(hù)不斷優(yōu)化，做出真正意義上的高性能高流量網(wǎng)站?。?！
六、網(wǎng)站性能優(yōu)化相關(guān)書(shū)籍
2、《高性能網(wǎng)站建設(shè)進(jìn)階指南》
七、常見(jiàn)網(wǎng)站性能優(yōu)化方法
a.對(duì)于圖片：
1、對(duì)于一些小的不經(jīng)常變化的icon可采用雪碧圖技術(shù)；
2、采用的圖片一定要使用優(yōu)化后的，否則圖片體積太大會(huì)嚴(yán)重影響用戶(hù)體驗(yàn)；
3、對(duì)于較多圖片的網(wǎng)站可采用懶加載技術(shù)，或者設(shè)置加載更多的按鈕；
4、對(duì)于網(wǎng)站的favicon應(yīng)該使其足夠小且其應(yīng)該可被緩存；
5、不在html中來(lái)縮放圖片---即原本圖片有200px200px 在html中卻把它設(shè)置成100px100px；
6、img標(biāo)簽避免使用空的src；（具體詳見(jiàn)《javascript高級(jí)程序設(shè)計(jì)》作者的這篇文章---Empty image src can destroy your site）b.對(duì)于css和js：
1、css放在head中，script盡量放在body尾部；
2、發(fā)布前js使用r.js工具合并，然后使用gulp工具壓縮js及css；
3、js中能使用事件代理就使用事件代理；
4、對(duì)于css使用link來(lái)替代@improve；
5、使用ajax時(shí)盡可能使用get方法；
6、css不使用通配符；c.對(duì)于服務(wù)端：
1、使用CDN；
2、使用Gzip壓縮；
3、為文件頭指定Expires或Cache-Control；
4、配置實(shí)體標(biāo)簽（Etags）；d.對(duì)于cookie：
1、盡量減少cookie的大??；e.對(duì)于內(nèi)容：
1、避免URL重定向及404錯(cuò)誤；
2、盡量減少DOM元素的數(shù)量及對(duì)DOM過(guò)多的操作；
3、盡量減少iframe的數(shù)量；
八、 補(bǔ)充
1、張?chǎng)涡癫┛完P(guān)于性能優(yōu)化方面的介紹
2、提高Web頁(yè)面性能的技巧
3、騰訊yuanyan總結(jié)的一系列文章：
【高性能前端1】高性能HTML
【高性能前端2】高性能CSS
【高性能前端3】高性能JavaScript
【高性能前端4】Appcache Facts 中譯版
4、Google PageSpeed Insights規(guī)則
5、瀏覽器的渲染原理簡(jiǎn)介
九、 注明
本文第三至第五部分轉(zhuǎn)自：http://www.tuicool.com/articles/y26Bbi6
十、推薦文章集合
**本文版權(quán)歸本人即簡(jiǎn)書(shū)筆名：該賬戶(hù)已被查封 所有，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝！ *
