1.前言
公司要求做性能測試俐巴，不知道從哪里入手。就說哪個(gè)網(wǎng)頁慢笼沥，就重點(diǎn)測試哪一個(gè)業(yè)務(wù)下的場景蚪燕，從哪里入手。首先實(shí)現(xiàn)了登錄接口的并發(fā)100奔浅，沒有問題馆纳。其他web場景怎么判斷是否可以需要測試，怎么判斷頁面響應(yīng)時(shí)間等等汹桦。研發(fā)老大提示說可以安裝APM工具鲁驶。研究了半天，試著搭建環(huán)境舞骆，發(fā)現(xiàn)有點(diǎn)大材小用钥弯。公司是給政府部門做網(wǎng)站，所有用戶才幾百人督禽。
分享APM工具pippoint安裝部署脆霎，以后需要可以用到：https://blog.csdn.net/heyeqingquan/article/details/74456591
查了一下資料，覺得web前端性能優(yōu)化工具可以滿足要求狈惫，轉(zhuǎn)發(fā)資料：來自https://www.cnblogs.com/yanghj010/p/8954730.html
2.轉(zhuǎn)發(fā)
前段時(shí)間接手了一個(gè) web [前端性能優(yōu)化]的任務(wù)睛蛛，一時(shí)間不知道從什么地方入手，查了不少資料胧谈，發(fā)現(xiàn)其實(shí)還是蠻簡單的忆肾，簡單來說說。
一.前端性能測試是什么?
前端性能測試對象主要包括：
HTML菱肖、CSS客冈、JS、AJAX 等前端技術(shù)開發(fā)的 Web 頁面
影響用戶瀏覽網(wǎng)頁速度的因素主要有：
服務(wù)端數(shù)據(jù)返回稳强、網(wǎng)絡(luò)傳輸场仲、頁面渲染等
前端性能測試目的：
計(jì)算出包含頁面渲染和悦、網(wǎng)絡(luò)傳輸以及服務(wù)器端解析等綜合因素在內(nèi)的加載時(shí)間指標(biāo)，對該頁面性能進(jìn)行評估分析燎窘，找出影響性能的主要因素和瓶頸摹闽，并在此基礎(chǔ)上，給出一定的優(yōu)化建議和解決方案褐健，從而提升用戶體驗(yàn)
前端性能優(yōu)化主要工具：
頁面結(jié)構(gòu)分析工具： YSlow/PageSpeed
通過網(wǎng)頁 JS/CSS/Image 數(shù)及請求數(shù)量、請求類型澜汤、緩存等方面的靜態(tài)分析 蚜迅，多用于本地開發(fā)或者本地測試
真實(shí)用戶瀏覽頁面分析：OneAPM Browser Insight
通過真實(shí)瀏覽器訪問頁面，收集頁面的 w3c 標(biāo)準(zhǔn)信息俊抵，ajax谁不，網(wǎng)絡(luò)等數(shù)據(jù)等終端分析，多用于內(nèi)網(wǎng)多終端系統(tǒng)檢測和 web 網(wǎng)站檢測
二.靜態(tài)分析——Yslow（業(yè)界俗稱：雅虎評估網(wǎng)站性能的23條軍規(guī)）
通過給瀏覽器安裝 Yslow 插件并開啟后徽诲，在控制面板里就會(huì)給你評分提示刹帕，和改進(jìn)建議。
YSlow 的 Grade (等級視圖)
Yslow 給出的網(wǎng)站性能評分是從 F~A谎替，A 最優(yōu)偷溺、F 最差，通過上圖的測試博客來看钱贯，網(wǎng)站有 4 處得分最低挫掏，例如上圖中的最低分提示：我博客的 HTTP 請求太多。其中應(yīng)用了 14 個(gè)外部 js秩命、3 個(gè) CSS 文件（之前我已從 6 個(gè)合并為 3 個(gè)）尉共、14個(gè) CSS 背景圖片。
Yslow 的建議是讓我合并這些弃锐，至于合并 CSS 引用圖片我在“提高網(wǎng)站打開速度的7大秘籍”中介紹過袄友。
Yslow Components（組件視圖）
可以通過 Components 考驗(yàn)查看網(wǎng)頁各個(gè)元素占用的空間大小。例如我博客某個(gè)頁面霹菊，有 236 個(gè) images（圖片）剧蚣，占用了 489.2 K，通過詳細(xì)查看浇辜，發(fā)現(xiàn)來自 gravatar 頭像的引用圖片非常大券敌，再加上博客本身評論量就大，每個(gè)頭像就占用幾 K柳洋，幾百個(gè)就占用了整個(gè)網(wǎng)頁 50% 的大小待诅，而且圖片還是引用的，加載就更慢熊镣。
所以卑雁，得出的結(jié)論是：gravatar 雖然增強(qiáng)了互動(dòng)性和個(gè)性募书，但也結(jié)結(jié)實(shí)實(shí)影響了網(wǎng)站速度。
Yslow Statistics（統(tǒng)計(jì)信息視圖）
上圖左側(cè)圖表顯示的是頁面元素在空緩存中的加載情況测蹲，右側(cè)為頁面元素使用緩存后的頁面加載情況莹捡。從圖中可以直觀的看出（尤其是我標(biāo)的紅框），這個(gè)網(wǎng)頁有 263 個(gè) HTTP 請求扣甲，網(wǎng)頁的大小達(dá)到 773.9K 篮赢，意味著每打開一個(gè)頁面幾乎需要下載 1M 的東西，而通過使用緩存后我們可以看到效果圖片基本靠緩存琉挖，而網(wǎng)頁總大小壓縮到 43.2K 启泣。
Statistics 這個(gè)統(tǒng)計(jì)信息視圖工具和 Components （第三選項(xiàng)卡）一樣，只是效果更直觀示辈，如果要獲得性能優(yōu)化建議還是要看 Grade （第二選項(xiàng)卡）的詳細(xì)建議寥茫。
三.終端分析：OneAPM Browser Insight/業(yè)界俗稱—real user monitoring
通過各種語言探針給頁面自動(dòng)插入 js 代碼，在瀏覽器瀏覽的時(shí)候收集頁面加載時(shí)間和網(wǎng)絡(luò)信息矾麻，多用于內(nèi)網(wǎng)多終端系統(tǒng)檢測和 web 網(wǎng)站.
主要性能指標(biāo):白屏?xí)r間纱耻、首屏?xí)r間、資源加載完成時(shí)間险耀、網(wǎng)頁加載完成時(shí)間
OneAPM 的 Browser Insight 做的不是簡單的把 window.performance 的數(shù)據(jù)采集過來然后報(bào)上去弄喘，它們從網(wǎng)頁打開的整個(gè)過程區(qū)分了四個(gè)響應(yīng)時(shí)間，具體的劃分標(biāo)準(zhǔn)每個(gè)頁面都有標(biāo)注胰耗。為了避免某一次訪問的特殊情況拖慢了整個(gè)平均時(shí)間限次，用戶還可以結(jié)合下面的定位分析功能一起來看。
從整體趨勢查看頁面性能——定位分析
其實(shí)大多數(shù)互聯(lián)網(wǎng)公司之所以優(yōu)化前端網(wǎng)頁柴灯，關(guān)心的是大多數(shù)打開自己的網(wǎng)頁是否流暢卖漫，一兩個(gè)個(gè)例并不在他的考慮范圍之內(nèi)或者說并不是當(dāng)務(wù)之急。
定位分析功能實(shí)現(xiàn)了按響應(yīng)時(shí)間把用戶體驗(yàn)進(jìn)行分區(qū)赠群，包括 Apdex 指數(shù)分區(qū)和 W3C 頁面加載時(shí)間標(biāo)準(zhǔn)分區(qū)羊始，通過分區(qū)可以清晰的定位用戶體驗(yàn)群體，根據(jù)不同的群體查看應(yīng)用性能區(qū)間查描，包括網(wǎng)絡(luò)突委、服務(wù)器請求排隊(duì)、Web 應(yīng)用處理耗時(shí)冬三、網(wǎng)頁構(gòu)建耗時(shí)匀油、資源加載耗時(shí)，同時(shí)可以多維度的查看用戶體驗(yàn)區(qū)間的影響范圍
慢加載追蹤—瀑布流圖
頁面加載緩慢大家都能感覺出來勾笆，可是敌蚜，是服務(wù)器的原因？是網(wǎng)絡(luò)的原因窝爪？是頁面資源加載的原因弛车？是哪個(gè)圖片加載的慢齐媒？這些問題 OneAPM 的慢加載追蹤解決的都比較好。上幾張干貨圖纷跛！
必須得說這個(gè)做的真心棒!界面做的很漂亮喻括，還很詳細(xì)，安卓 4.3 版本以上的微信瀏覽器也都能監(jiān)控贫奠！
好了今天就簡單說這些唬血，之后有機(jī)會(huì)我們再聊拜拜了各位
