總結(jié)不僅僅是總結(jié)成績(jī)，更重要的是為了研究經(jīng)驗(yàn)，發(fā)現(xiàn)做好工作的規(guī)律，也可以找出工作失誤的教訓(xùn)。這些經(jīng)驗(yàn)教訓(xùn)是非常寶貴的，對(duì)工作有很好的借鑒與指導(dǎo)作用，在今后工作中可以改進(jìn)提高，趨利避害，避免失誤。那么我們?cè)撊绾螌懸黄^為完美的總結(jié)呢？下面是小編整理的個(gè)人今后的總結(jié)范文，歡迎閱讀分享，希望對(duì)大家有所幫助。
前端性能優(yōu)化案例分析 前端性能優(yōu)化總結(jié)篇一
上面的腳本計(jì)算了 head 中的第一個(gè) js腳本執(zhí)行后加載頁(yè)面所需的時(shí)間，但它沒有給出任何關(guān)于從服務(wù)器獲取頁(yè)面所需的時(shí)間，或是頁(yè)面初始化生命周期的信息。
由此我們可以計(jì)算舊文檔的卸載、重定向、應(yīng)用緩存、dns lookup、tcp 握手、http 請(qǐng)求處理、http 響應(yīng)處理、dom 處理、document加載完成等頁(yè)面性能打點(diǎn)。具體可以參考navigation-timing w3c的規(guī)范 和 幾個(gè)頁(yè)面關(guān)鍵指標(biāo)是如何計(jì)算的
從上圖中我們可以看出document processing是 navigation timing 獨(dú)有的，后面我們也會(huì)介紹resource timing。整體而言 level 2 標(biāo)準(zhǔn)更加的全面，把web performance timing分成了各個(gè) performance metric，看起來一目了然，然而各個(gè)主流瀏覽器還存在兼容性問題。
介紹完這兩個(gè)performance navigation timing api，我們順便再來看一下其余幾個(gè)主要的performance timing api：resource timing api 、 paint timing api 和 long task timing api，以及如何使用performanceobserver異步獲取性能數(shù)據(jù)。
performanceobserver 可以被動(dòng)地訂閱與性能相關(guān)的事件，也就是說這個(gè) api 通常不會(huì)干擾頁(yè)面主線程的性能，因?yàn)樗幕卣{(diào)通常在空閑期間觸發(fā)。默認(rèn)情況下，performanceobserver 對(duì)象只能在條目出現(xiàn)時(shí)觀察它們。如果想延遲加載性能分析代碼（不阻止更高優(yōu)先級(jí)的資源），我們需要這么做：
設(shè)置buffered 為true，瀏覽器將在第一次調(diào)用 performanceobserver 回調(diào)時(shí)返回其性能條目 緩沖區(qū)中的歷史條目。
前端性能優(yōu)化案例分析 前端性能優(yōu)化總結(jié)篇二
（下文以2022年2月a頻道頁(yè)面為例，均為dummy仿造后數(shù)據(jù)，也不代表整體情況）
.如何衡量性能問題嚴(yán)重性
衡量性能問題嚴(yán)重性，是為了讓大家意識(shí)到優(yōu)化的必要性，以及急迫性
同.性能黑榜，不贅述
見下圖“可交互時(shí)長(zhǎng)分布圖”，一個(gè)記錄代表一個(gè)用戶。
即使不去統(tǒng)計(jì)，我們都能很明顯的看出來，這個(gè)a頻道頁(yè)面：
和開發(fā)說明問題嚴(yán)重性時(shí)，這個(gè)會(huì)很有代入感，比如見下圖，10%的android用戶在以上，是不是可以認(rèn)為他們大部分都跳失了？
下圖不用算都能明顯發(fā)現(xiàn)，秒開率和 整體數(shù)據(jù)差異實(shí)在太大
.分析性能瓶頸-分析思路
首先要明確，性能分析主要是給相關(guān)頁(yè)面的前端、開發(fā)同學(xué)看，給關(guān)心問題的測(cè)試同學(xué)看，所以我們可以拆分的更細(xì)節(jié)、更專業(yè)?？梢韵确智岸?、后端2個(gè)大類：
.分析性能瓶頸-前端環(huán)節(jié)
業(yè)務(wù)因素（具體不表），分終端是重點(diǎn)。
從可交互時(shí)長(zhǎng)、秒開率、3秒+率、5秒+率，分別分析，都能論證--支付寶端問題更明顯。
下圖將t1~t9 每個(gè)階段打點(diǎn)情況可視化，并分析重點(diǎn)環(huán)節(jié)的差值（打點(diǎn)邏輯由前端定義）
見圖2可以明顯觀察到：
1、接口耗時(shí)太久，且后變差明顯（可以去追溯下發(fā)生了什么）； 2、lbs獲取耗時(shí)很久，高于平均1倍以上，而取lbs是a頻道頁(yè)的關(guān)鍵邏輯
我們根據(jù)手淘的高中低端機(jī)評(píng)判標(biāo)準(zhǔn)，埋點(diǎn)獲得數(shù)據(jù)。平均時(shí)長(zhǎng)，高中低各自占比，以及低端時(shí)長(zhǎng)分布（也可選中高端）。下圖可發(fā)現(xiàn)，低端機(jī)比例很低（需要思考是否有必要重點(diǎn)優(yōu)化），但低端機(jī)超過3秒以上的比例遠(yuǎn)高于其他的（和總體的完全時(shí)間分布對(duì)比） 。
包括：機(jī)型、系統(tǒng)等，可做參考
.分析性能瓶頸-后端環(huán)節(jié)
主要從后端維度來分析
這里可見，下圖盡管是開始發(fā)起請(qǐng)求-》收到請(qǐng)求的全過程，但也嚴(yán)重超標(biāo)（幾乎是標(biāo)準(zhǔn)值的2倍）
前端性能優(yōu)化案例分析 前端性能優(yōu)化總結(jié)篇三
通過線上用戶的真實(shí)采集，并制定能反應(yīng)用戶體感的指標(biāo)，進(jìn)行性能黑榜和全局趨勢(shì)分析。
從重點(diǎn)單點(diǎn)角度，我們通過性能黑榜；從整體視角，我們通過整體趨勢(shì)分析。
.性能數(shù)據(jù)的采集
arms前端監(jiān)控專注于對(duì)web場(chǎng)景、小程序場(chǎng)景的監(jiān)控，從頁(yè)面打開速度（測(cè)速）、頁(yè)面穩(wěn)定性（js診斷錯(cuò)誤）和外部服務(wù)調(diào)用成功率（api）這三個(gè)方面監(jiān)測(cè)web和小程序頁(yè)面的健康度。
sls日志服務(wù)為log、metric、trace等數(shù)據(jù)提供大規(guī)模、低成本、實(shí)時(shí)的平臺(tái)化服務(wù)。日志服務(wù)一站式提供數(shù)據(jù)采集、加工、查詢與分析、可視化、告警、消費(fèi)與投遞等功能。
odps即maxcompute，是適用于數(shù)據(jù)分析場(chǎng)景的企業(yè)級(jí)saas模式云數(shù)據(jù)倉(cāng)庫(kù)。
fbi是阿里內(nèi)的智能大數(shù)據(jù)分析和可視化平臺(tái)，下面的所有截圖都是在fbi平臺(tái)配置圖表而成，還未對(duì)外開放。
arms-sdk結(jié)合前端的自定義埋點(diǎn)，在海量用戶訪問的同時(shí)，就會(huì)自動(dòng)上報(bào)數(shù)據(jù)到sls日志庫(kù)，整體過程如下圖：
.性能指標(biāo)的確定
所有前臺(tái)頁(yè)面，每個(gè)用戶每次瀏覽的有效數(shù)據(jù)（完全加載<15s 內(nèi)有效）
指標(biāo)的影響因子：從用戶視角，頁(yè)面流量越大，則對(duì)整體數(shù)據(jù)的影響越大（也就是權(quán)重越大）
這樣做的好處：流量越大數(shù)值越嚴(yán)重的，優(yōu)化的效果（正反饋）越明顯，確定了治理性能問題的優(yōu)先級(jí)。
結(jié)合淘系、以及集團(tuán)其他部門的
.性能黑榜
為何要用性能黑榜來作為主要發(fā)現(xiàn)手段？我們通常可推理得：
（可根據(jù)各自業(yè)務(wù)，加個(gè)樣本量的篩選，如我們看每日pv 10w以上的）
.整體性能趨勢(shì)分析
整體趨勢(shì)分析，即是為在整體角度，看我們的頁(yè)面性能趨勢(shì)，它是重要的度量指標(biāo)。 這里我們把所有的流量都納入，沒有頁(yè)面的區(qū)分，為的是基于用戶維度，流量大的頁(yè)面權(quán)重自然會(huì)更大。
從上圖看，1月初到2月中旬的數(shù)據(jù)正在持續(xù)惡化，必須要采取措施治理！
前端性能優(yōu)化案例分析 前端性能優(yōu)化總結(jié)篇四
1、靜態(tài)資源的壓縮合并（js 代碼壓縮合并、css 代碼壓縮合并、雪碧圖）
2、靜態(tài)資源緩存（資源名稱加 md5 戳）
? ? ? 可以通過鏈接名稱控制緩存：通過前端構(gòu)建工具為打包的文件添加md5后綴，這樣當(dāng)打包上線時(shí)請(qǐng)求的鏈接發(fā)生改變，這樣可以防止由于緩導(dǎo)致靜態(tài)資源更新失效；
3、 使用 cdn 讓資源加載更快
二.優(yōu)化頁(yè)面渲染
1、css 放前面，js 放后面
2、懶加載（圖片懶加載、下拉加載更多）
先將src賦值成一個(gè)通用的預(yù)覽圖，下拉時(shí)候再動(dòng)態(tài)賦值成正式的圖片。如下，是預(yù)覽圖片，比較小，加載很快，而且很多圖片都共用這個(gè)，加載一次即可。待頁(yè)面下拉，圖片顯示出來時(shí)，再去替換src為data-src的值。（data-開頭的屬性瀏覽器渲染的時(shí)候會(huì)忽略掉，提高渲染性能）
3、減少dom 查詢，對(duì) dom 查詢做緩存
4、減少dom 操作，多個(gè)操作盡量合并在一起執(zhí)行（documentfragment）
dom 操作是非常耗費(fèi)性能的，因此插入多個(gè)標(biāo)簽時(shí)，先插入 fragment 然后再統(tǒng)一插入 dom。因?yàn)閒ragment文檔片段存在于內(nèi)存中，并不在dom樹中，所以將子元素插入到文檔片段時(shí)不會(huì)引起頁(yè)面回流。
5、事件節(jié)流
在開發(fā)過程中會(huì)遇到頁(yè)面一些頻繁觸發(fā)的事件，比如mouseover、scroll、resize等事件。一秒可以執(zhí)行很多次，這樣會(huì)造成嚴(yán)重的頁(yè)面性能問題，導(dǎo)致頁(yè)面c出現(xiàn)卡頓甚至瀏覽器崩潰。因此我們需要對(duì)事件進(jìn)行節(jié)流，簡(jiǎn)單的說就是控制其執(zhí)行的次數(shù)。這里就涉及到了常用到的js的節(jié)流和防抖功能實(shí)現(xiàn)。 ? ? ? ?1.防抖（debounce）：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。
? ? ?2、節(jié)流（throttle）：規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次，只有一次能生效。
6、盡早執(zhí)行操作（domcontentloaded）?
前端性能優(yōu)化案例分析 前端性能優(yōu)化總結(jié)篇五
很多人都以為，前端性能優(yōu)化，重點(diǎn)在“前端”優(yōu)化，“測(cè)試”很難起到主導(dǎo)作用。試著換個(gè)角度，從整個(gè)研發(fā)團(tuán)隊(duì)視角看，前端做運(yùn)動(dòng)員專項(xiàng)治理，測(cè)試做裁判員專項(xiàng)評(píng)測(cè)，這套機(jī)制，是否更能切實(shí)做到優(yōu)化，達(dá)成的數(shù)據(jù)也更讓大家信賴？再者，測(cè)試不止局限于此，還可做隊(duì)醫(yī)、分析師。。。。
.可持續(xù)優(yōu)化閉環(huán)
以下持續(xù)優(yōu)化閉環(huán)，是我們摸索著實(shí)行了一年多，有效且高效的解法。
從上圖看，整個(gè)過程為：
step0、前端事先進(jìn)行埋點(diǎn)，（一般前端做了sdk，直接引入即可）
step1、測(cè)試通過性能黑榜，發(fā)現(xiàn)最為突出的重點(diǎn)性能問題頁(yè)面（首屏平均時(shí)長(zhǎng)&秒開率，pv&業(yè)務(wù)意義， 多項(xiàng)結(jié)合度量）
step2、協(xié)助前端一起專業(yè)分析問題頁(yè)面，找出性能瓶頸點(diǎn)
step3、前端更有策略地針對(duì)性治理
step4、查看性能趨勢(shì)變化，驗(yàn)證優(yōu)化效果
step5、假設(shè)已達(dá)到優(yōu)化預(yù)期，或者有更糟糕的頁(yè)面把之前頁(yè)面擠下去，繼續(xù)關(guān)注黑榜前列的頁(yè)面（即跳到step1，繼續(xù)輪轉(zhuǎn)）
我們可以發(fā)現(xiàn)，測(cè)試通過發(fā)現(xiàn)、分析、驗(yàn)證 三板斧，驅(qū)動(dòng)推進(jìn)頁(yè)面性能優(yōu)化。
.效果明顯
從2021年10月份開始迭代以來，共發(fā)現(xiàn)了8類嚴(yán)重性能問題。
包括：端外（支付寶）性能問題，外投&跨端性能問題，pha架構(gòu)性能問題，運(yùn)營(yíng)不規(guī)范配置導(dǎo)致、其他業(yè)務(wù)原因?qū)е碌男阅軉栴}等。
并且快速有效，在業(yè)務(wù)方或其他同學(xué)提過來之前，我們都已經(jīng)發(fā)現(xiàn)并有了分析，在優(yōu)化節(jié)奏上更具有主動(dòng)性。
【本文地址：http://aiweibaby.com/zuowen/1813765.html】
