一萨脑、網(wǎng)站性能優(yōu)化35條建議
下圖是我使用XMind根據(jù)雅虎的工程師團隊給出的35項建議分類而制作的思維導(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 來測試我們網(wǎng)站的性能。
它的使用方法是在瀏覽器上安裝插件或者如果不想使用插件的話可以使用Bookmarklet書簽(其實就是把js立即執(zhí)行函數(shù)放在書簽中)的方法(采用Bookmarklet書簽的方法只能針對http協(xié)議的網(wǎng)站生效柔袁，對于https協(xié)議不能生效)呆躲；
下圖是我用它來測試qq.com網(wǎng)站的性能情況，
YSlow統(tǒng)計了23項建議各部分的得分情況捶索，并給出了詳細的解釋插掂；
當然它還給出了網(wǎng)站的總體得分，好吧腥例。辅甥。。qq.com得了最低等級---F等級燎竖。當然這只是一個參考而已璃弄，不是絕對的，畢竟qq.com是一個超大型的門戶網(wǎng)站构回，它需要考慮很多種情況夏块，YSlow制定的一些評分機制并不能完全適用它，但是里面的部分建議項我們還是可以參考下的纤掸。
我們可以通過YSlow來看看qq.com的資源分布情況：
通過上圖我們可以很直觀的看到脐供，當無緩存狀態(tài)訪問qq.com時，所有文件加起來有1447.5K大小借跪，其中圖片占大頭政己，其總共占1017.6K；訪問qq.com時總共有 136 條HTTP 請求在這里也統(tǒng)計出來了垦梆。
另外YSlow還幫我們統(tǒng)計了js匹颤、css及圖片等數(shù)量：
我們可以看到qq.com此時js有12個，圖片有121個等等數(shù)據(jù)托猩，并且我們可以很方便的查看及訪問里面的資源印蓖。
再拿它測試我之前做的一個網(wǎng)頁：https://github.com/have-not-BUG/task/blob/master/renwu/task41/dist/index.html
可以看到我之前做的那個網(wǎng)站：
-
1、兩項被給了F等級：
Paste_Image.png
它給的建議是：
a京腥、應(yīng)該使用CDN赦肃；b、應(yīng)該增加緩存操作； -
2他宛、一項給了B等級：
Paste_Image.png
它給的建議是：不要在html中縮放圖片船侧；（我確實在里面縮放了圖片：圖片原本是225px.225px，我設(shè)置成了200px.200px）
通過以上介紹我們可以看到Y(jié)Slow能夠很直觀展示我們需要的一些網(wǎng)站性能優(yōu)化的數(shù)據(jù)及提供一些可參考的建議厅各，它對網(wǎng)站的性能優(yōu)化分析很有幫助镜撩。
2、PageSpeed Insights
谷歌的PageSpeed Insights 队塘，它是先分析網(wǎng)頁的內(nèi)容袁梗，然后提供關(guān)于如何提升網(wǎng)頁加載速度的建議。
使用網(wǎng)址：https://developers.google.com/speed/pagespeed/insights/
我們把我以前做的那個網(wǎng)頁輸進去：
它給我的建議是：
1憔古、使用瀏覽器緩存遮怜；
2、清除首屏內(nèi)容中阻止呈現(xiàn)的 JavaScript 和 CSS鸿市；（它指出我的網(wǎng)頁中有2個阻止呈現(xiàn)的 CSS 資源锯梁，這樣會導(dǎo)致呈現(xiàn)網(wǎng)頁的過程出現(xiàn)延遲。）焰情；
另外：它還評判網(wǎng)站在移動端的性能及相應(yīng)的適配情況陌凳。（由于我并未為移動端適配，因此它給出了提醒--此網(wǎng)頁可能無法通過 Google 的移動設(shè)備適合性測試
3烙样、DynaTrace Ajax Edition
dynaTrace Ajax Edition 是一個強大的底層追蹤冯遂、前端性能分析工具。您可以利用它來分析頁面渲染時間谒获、DOM方法執(zhí)行時間蛤肌，甚至可以看到JS代碼的解析時間。
關(guān)于DynaTrace Ajax Edition的介紹可見前端性能分析工具：dynaTrace Ajax Edition及dynaTrace Ajax：前端性能分析利器
4批狱、webpagetest
這個網(wǎng)站也是谷歌旗下的產(chǎn)品裸准，將需測試的網(wǎng)址輸入后稍等片刻，便可看到很多詳細參數(shù)赔硫，不僅如此炒俱，我們還可以看到我們網(wǎng)站在被訪問時的錄屏（ 部分）和過程截圖。
例如我將前面提到的網(wǎng)站輸進webpagetest后爪膊，它便給我生成了一個非常詳細的報告：
具體可點擊這里進行查看測試結(jié)果权悟。
關(guān)于WebPageTest測試結(jié)果相關(guān)參數(shù)介紹可見：網(wǎng)站性能測試指標，你真的看懂了推盛？
5峦阁、showslow；
showslow 網(wǎng)站會綜合前面4個工具的信息(見下圖)：
另外耘成，注冊后可我們可以添加網(wǎng)址榔昔，它會24小時自動幫我們檢測YSlow, Page Speed 和 dynaTrace數(shù)據(jù)驹闰。
6、Chrome的performance功能
7撒会、W3C 關(guān)于Web性能相關(guān)屬性
Performance.timeOrigin
8嘹朗、其他；
具體可詳見： 網(wǎng)站性能優(yōu)化工具大全
這里就不做介紹啦~
三诵肛、前端頁面性能指標
1.Apdex指數(shù)
Apdex值和Apdex指數(shù)是國際通用標準屹培，是對用戶體驗滿意度的量化值。
基于「真實用戶體驗」曾掂，Apdex 定義了 3 個用戶滿意區(qū)間：「滿意」惫谤、「可容忍」、「失望」珠洗，通過響應(yīng)時間數(shù)值 “T” 來劃分。T 值代表著用戶滿意的響應(yīng)時間界限若专，國際上一般默認為 2s许蓖，也就是說滿意區(qū)間就是 0~2s；頁面響應(yīng)時間超過 T 值用戶就有些不滿了调衰，下一個區(qū)間「容忍」的界限值是 T 和 4T膊爪，即 4-8 秒之間為容忍區(qū)間；響應(yīng)時間再長用戶就開始考慮放棄了嚎莉，最后一個區(qū)間「失望」的響應(yīng)時間則大于 4T米酬，即多于 8 秒。
采集一定時間內(nèi)的 Apdex 值之后趋箩，經(jīng)過計算可以得出 Apdex 指數(shù)赃额，具體計算公式為:<pre>Apdex 指數(shù) = [ 滿意數(shù)量 + （ 可容忍數(shù)量 / 2）] / 總樣本數(shù) </pre>這樣，用戶訪問頁面的響應(yīng)時間被量化為一個 0 到 1 之間的「Apdex 指數(shù)」叫确，0 代表沒有滿意用戶跳芳，1 則代表所有用戶都滿意。經(jīng)過統(tǒng)計竹勉，基于頁面性能的 Apdex 評分于用戶的體驗緊密關(guān)聯(lián), 為管理飞盆、研發(fā)、運維人員提供了一種通過應(yīng)用性能量化值來評估用戶滿意度的方法次乓。[圖片上傳失敗...(image-dce4c1-1510803564016)]
可行工具：New Relic吓歇、OneAPM Browser Insight
2.頁面響應(yīng)時間
說得再好，做的再多最后頁面也是要上生產(chǎn)的票腰，線上的頁面用戶最直接的感受城看，就是頁面響應(yīng)時間，也就是頁面打開耗時丧慈。
很多前端性能工具對頁面響應(yīng)時間這個指數(shù)只是簡單的在本地模擬下析命，也就是所謂的「撥測」主卫；或者只是簡單的通過 window.performance
接口把各個數(shù)據(jù)上傳給使用者，根本無法展現(xiàn)用戶的真實體驗鹃愤。
從技術(shù)的角度講簇搅，一個頁面的打開時間也是要劃分為各個部分的，例如：首屏打開時間软吐、白屏時間瘩将、dom文檔打開時間、資源加載完成時間等凹耙；也要重視資源加載耗時詳情姿现，是哪些腳本或者 css 拖慢了頁面的加載這些都要一目了然。只有這樣肖抱，一旦頁面響應(yīng)時間過長备典，相關(guān)人員才能有針對性的去進行維護。[圖片上傳失敗...(image-dad102-1510803564016)][圖片上傳失敗...(image-d4115f-1510803564016)]
可行工具：New Relic意述、OneAPM Browser Insight提佣、AppDynamics、Ruxit
3.頁面響應(yīng)時間分布
想了想還是覺得有必要把這個指標從「頁面響應(yīng)時間」里面拿出來單獨說荤崇。
顧名思義拌屏，頁面響應(yīng)時分布間就是一段時間內(nèi)，用戶訪問頁面的響應(yīng)時間的分布圖术荤。其實大部分情況下倚喂，一個網(wǎng)站的維護只需照顧到絕大多數(shù)用戶就可以了，沒有必要為了滿足各種極端情況而耗費各種資源瓣戚，中國網(wǎng)絡(luò)環(huán)境的復(fù)雜性相信大家都深有體會端圈，所以這種統(tǒng)計就顯得尤為必要，[圖片上傳失敗...(image-a7b068-1510803564016)]
可行工具：OneAPM Browser Insight带兜、AppDynamics枫笛、Ruxit
4.DNS、TCP耗時
瀏覽器和 WEB 服務(wù)器連接 TCP/IP 的消耗時間以及域名解析時間也是網(wǎng)站優(yōu)化需要關(guān)注指標刚照。
還是那句話————國內(nèi)的網(wǎng)絡(luò)環(huán)境極其復(fù)雜刑巧，所以導(dǎo)致經(jīng)常有 DNS，CDN 不給力的情況无畔，TCP 的連接也經(jīng)常會不穩(wěn)定啊楚。之前國內(nèi)外有些工具可以通過模擬撥測的方式來計算 DNS 耗時等數(shù)據(jù)，但講實在的浑彰，只是這種仿真數(shù)據(jù)的話 DNS 廠家才不會理你恭理，所以，從用戶真實體驗的角度來收集這類耗時則顯得尤為必要郭变，而現(xiàn)在能做好這一點的工具確實不多颜价，給大家推薦幾個涯保。[圖片上傳失敗...(image-c8c8e2-1510803564016)]可行工具：OneAPM Browser Insight、AppDynamics周伦、Ruxit
四夕春、性能測試方法
網(wǎng)站上線前以及上線后，相關(guān)的性能測試也是必須要有的专挪。性能測試是一個總稱及志，具體可細分為性能測試、負載測試寨腔、壓力測試速侈、穩(wěn)定性測試。
性能測試
以系統(tǒng)設(shè)計初期規(guī)劃的性能指標為目標迫卢，對系統(tǒng)不斷施加壓力倚搬，驗證系統(tǒng)在資源可接受范圍內(nèi)，是否能達到性能預(yù)期靖避。
負載測試
對系統(tǒng)不斷地增加并發(fā)請求以增加系統(tǒng)壓力潭枣，直到系統(tǒng)的某項或多項性能指標達到安全臨界值，如某種資源已經(jīng)呈飽和狀態(tài)幻捏，這時繼續(xù)對系統(tǒng)施加壓力，系統(tǒng)的處理能力不但不能提高命咐，反而會下降篡九。
壓力測試
超過安全負載的情況下，對系統(tǒng)繼續(xù)施加壓力醋奠，直到系統(tǒng)崩潰或不能再處理任何請求榛臼，以此獲得系統(tǒng)最大壓力承受能力。
穩(wěn)定性測試
被測試系統(tǒng)在特定硬件窜司、軟件沛善、網(wǎng)絡(luò)環(huán)境條件下，給系統(tǒng)加載一定業(yè)務(wù)壓力塞祈，使系統(tǒng)運行一段較長時間金刁，以此檢測系統(tǒng)是否穩(wěn)定。在不同生產(chǎn)環(huán)境议薪、不同時間點的請求壓力是不均勻的尤蛮，呈波浪特性，因此為了更好地模擬生產(chǎn)環(huán)境斯议，穩(wěn)定性測試也應(yīng)不均勻地對系統(tǒng)施加壓力产捞。
性能測試是一個不斷對系統(tǒng)增加訪問壓力，以獲得系統(tǒng)性能指標哼御、最大負載能力坯临、最大壓力承受能力的過程焊唬。所謂的增加訪問壓力，在系統(tǒng)測試環(huán)境中看靠，就是不斷增加測試程序的并發(fā)請求數(shù)赶促，一般說來，性能測試遵循如下圖所示的拋物線規(guī)律衷笋。
[圖片上傳失敗...(image-27aa08-1510803564016)]
性能測試反應(yīng)的是系統(tǒng)在實際生產(chǎn)環(huán)境中使用時芳杏，隨著用戶并發(fā)訪問數(shù)量的增加，系統(tǒng)的處理能力辟宗。與性能曲線相對應(yīng)的是用戶訪問的等待時間（系統(tǒng)響應(yīng)時間）
[圖片上傳失敗...(image-76f095-1510803564016)]
在日常運行區(qū)間爵赵，可以獲得最好的用戶響應(yīng)時間，隨著并發(fā)用戶數(shù)的增加泊脐，響應(yīng)延遲越來越大空幻，直到系統(tǒng)崩潰，用戶失去響應(yīng)容客。
而從 OneAPM 提供的 Browser Insight 的定位分析功能來看秕铛，跟這個圖還是很相似的，只不過是 X 坐標軸是響應(yīng)時間缩挑，Y 是訪問次數(shù)但两。[圖片上傳失敗...(image-f59f45-1510803564016)]
性能測試報告
測試結(jié)果報告應(yīng)能夠反映上述性能測試曲線的規(guī)律，閱讀者可以得到系統(tǒng)性能是否滿足設(shè)計目標和業(yè)務(wù)要求供置、系統(tǒng)最大負載能力谨湘、系統(tǒng)最大壓力承受能力等重要信息，下表是一個簡單示例：
[圖片上傳失敗...(image-c829ae-1510803564016)]
當這些數(shù)據(jù)得到量化的之后芥丧，我們的目標就很明確了紧阔，那么最終我們?yōu)榱舜蛟煲粋€高性能的網(wǎng)站，需要做哪些工作呢续担？接下來我們分析性能優(yōu)化的一些策略擅耽！
五、性能優(yōu)化策略
如果性能測試結(jié)果不能滿足設(shè)計或業(yè)務(wù)需求物遇，那么就需要尋找系統(tǒng)瓶頸乖仇，分而治之，逐步優(yōu)化挎挖。
1．性能分析
大型網(wǎng)站結(jié)構(gòu)復(fù)雜这敬，用戶從瀏覽器發(fā)出請求直到數(shù)據(jù)庫完成操作事務(wù)，中間需要經(jīng)過很多環(huán)節(jié)蕉朵，如果測試或者用戶報告網(wǎng)站響應(yīng)緩慢崔涂，存在性能問題，必須對請求經(jīng)歷的各個環(huán)節(jié)進行分析始衅，排查可能出現(xiàn)性能瓶頸的地方冷蚂，定位問題!
排查一個網(wǎng)站的性能瓶頸和排查一個程序的性能瓶頸的手法基本相同：檢查請求處理的各個環(huán)節(jié)的日志缭保，分析哪個環(huán)節(jié)響應(yīng)時間不合理、超過預(yù)期蝙茶；然后檢查監(jiān)控數(shù)據(jù)艺骂，分析影響性能的主要因素是內(nèi)存、磁盤隆夯、網(wǎng)絡(luò)钳恕、還是 CPU？是代碼問題還是架構(gòu)設(shè)計不合理蹄衷？或者系統(tǒng)資源確實不足忧额？
2．性能優(yōu)化
定位產(chǎn)生性能問題的具體原因后，就需要進行性能優(yōu)化愧口，根據(jù)網(wǎng)站分層架構(gòu)睦番，可分為 Web 前端性能優(yōu)化、應(yīng)用服務(wù)器性能優(yōu)化耍属、存儲服務(wù)器性能優(yōu)化 3 大類托嚣，每一類都非常重要，一款好的工具的重要性就不言而喻了厚骗。
目前示启，OneAPM 針對前端性能的優(yōu)化產(chǎn)品，Browser Insight 可以讓用戶免費試用领舰；同時包括針對應(yīng)用服務(wù)器性能優(yōu)化 Application Insight 產(chǎn)品以及針對存儲服務(wù)器性能優(yōu)化 Cloud Insight產(chǎn)品也都提供了免費版產(chǎn)品丑搔，希望能夠幫助用戶不斷優(yōu)化，做出真正意義上的高性能高流量網(wǎng)站Ｌ嶙帷！煮仇！
六劳跃、網(wǎng)站性能優(yōu)化相關(guān)書籍
七、常見網(wǎng)站性能優(yōu)化方法
a.對于圖片：
1夹姥、對于一些小的不經(jīng)常變化的icon可采用雪碧圖技術(shù)杉武；
2、采用的圖片一定要使用優(yōu)化后的辙售，否則圖片體積太大會嚴重影響用戶體驗轻抱；
3、對于較多圖片的網(wǎng)站可采用懶加載技術(shù)旦部，或者設(shè)置加載更多的按鈕祈搜；
4较店、對于網(wǎng)站的favicon應(yīng)該使其足夠小且其應(yīng)該可被緩存；
5容燕、不在html中來縮放圖片---即原本圖片有200px200px 在html中卻把它設(shè)置成100px100px梁呈；
6、img標簽避免使用空的src蘸秘；（具體詳見《javascript高級程序設(shè)計》作者的這篇文章---Empty image src can destroy your site）b.對于css和js：
1官卡、css放在head中，script盡量放在body尾部醋虏；
2寻咒、發(fā)布前js使用r.js工具合并，然后使用gulp工具壓縮js及css灰粮；
3仔涩、js中能使用事件代理就使用事件代理；
4粘舟、對于css使用link來替代@improve熔脂；
5、使用ajax時盡可能使用get方法柑肴；
6霞揉、css不使用通配符；c.對于服務(wù)端：
1晰骑、使用CDN适秩；
2、使用Gzip壓縮硕舆；
3秽荞、為文件頭指定Expires或Cache-Control；
4抚官、配置實體標簽（Etags）扬跋；d.對于cookie：
1、盡量減少cookie的大辛杞凇钦听；e.對于內(nèi)容：
1、避免URL重定向及404錯誤倍奢；
2朴上、盡量減少DOM元素的數(shù)量及對DOM過多的操作；
3卒煞、盡量減少iframe的數(shù)量痪宰；
八、 補充
1、張鑫旭博客關(guān)于性能優(yōu)化方面的介紹
2酵镜、提高Web頁面性能的技巧
3碉碉、騰訊yuanyan總結(jié)的一系列文章：
【高性能前端1】高性能HTML
【高性能前端2】高性能CSS
【高性能前端3】高性能JavaScript
【高性能前端4】Appcache Facts 中譯版
4、Google PageSpeed Insights規(guī)則
5淮韭、瀏覽器的渲染原理簡介
九垢粮、 注明
本文第三至第五部分轉(zhuǎn)自：http://www.tuicool.com/articles/y26Bbi6
十、推薦文章集合
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有靠粪，如需轉(zhuǎn)載請注明出處蜡吧。謝謝盯捌！ *
