Chrome運(yùn)行時(shí)性能瓶頸分析

Code4App 發(fā)布于2019-05-22 18:23 / 1186人閱讀

摘要：避免這種情況的出現(xiàn)，可以參考對比優(yōu)化的效果中存在兩種狀態(tài)，優(yōu)化和非優(yōu)化可以看到優(yōu)化的狀態(tài)，和的時(shí)間都大大減少了所以明顯提高性能優(yōu)化的知識(shí)儲(chǔ)備使用模型測量性能基礎(chǔ)儲(chǔ)備渲染性能概述的剖析

一，初探，根據(jù)現(xiàn)象發(fā)現(xiàn)問題

chrome的performance知道很久了，但總是沒有特別權(quán)威且跟上時(shí)代的學(xué)習(xí)資料，這次痛定思痛，直接看英文文檔，一點(diǎn)點(diǎn)把這塊啃掉，本筆記基于Chrome 59

step 1: 隱身模式打開chrome

目的是避免緩存以及不必要的問題

step 2: 打開測試地址

谷歌性能測試地址googlechrome.github.io/devtools-sa…
可以看到如下的頁面：

頁面中有一些藍(lán)色小方塊在運(yùn)動(dòng)

step 3: 限制cpu速度

由于有些用戶的設(shè)備cpu性能很高，無法很好的分析移動(dòng)端，或者發(fā)現(xiàn)低級(jí)設(shè)備的性能問題，所以我們要降速
找到控制臺(tái)中的performance項(xiàng)，找到CPU選項(xiàng)，選擇降低4倍性能或6倍性能

step 4：添加運(yùn)動(dòng)小塊，找到性能瓶頸

前面限制了cpu的性能，接下來就要找到性能瓶頸了
連續(xù)點(diǎn)擊Add 10按鈕，向頁面中添加小塊，直到自己都感覺頁面上小塊運(yùn)動(dòng)出現(xiàn)明顯卡頓

類似下面這種情況，就已經(jīng)明顯卡頓了

step 5：先看看優(yōu)化后的效果會(huì)怎樣？

點(diǎn)擊一下Optimize優(yōu)化，觀察一下效果

可以看到頁面瞬間變的賊流暢

step 6：體驗(yàn)過優(yōu)化，再體驗(yàn)一次不優(yōu)化

再點(diǎn)擊一次Un-Optimize（不優(yōu)化）按鈕，可以看到又卡的要死

ok，到這里，大家已經(jīng)能夠通過現(xiàn)象發(fā)現(xiàn)性能的差異了，接下來就是要分析現(xiàn)象了

二，了解performance各模塊

如何分析現(xiàn)象，肯定要依賴數(shù)據(jù)，這里就要用到chrome的performance功能了
先將頁面切到非優(yōu)化的狀態(tài)，點(diǎn)擊“錄制”按鈕

錄制4s-5s即可：

然后就可以看到錄制的效果了：

上面這些數(shù)據(jù)看不懂沒關(guān)系，現(xiàn)在來一步步了解各個(gè)部分都有哪些內(nèi)容

step 1：了解Fps

fps：是指頁面每秒幀數(shù)
fps = 60 性能極佳
fps < 24 會(huì)讓用戶感覺到卡頓，因?yàn)槿搜鄣淖R(shí)別主要是24幀

圖中藍(lán)色標(biāo)注出來的區(qū)域，就是FPS記錄的信息
放大點(diǎn)看，F(xiàn)PS由兩部分組成：
1，紅色的條
2，綠色的半透明條

action :1 ?切換至“已優(yōu)化”狀態(tài)

此時(shí)切換優(yōu)化狀態(tài)，到已優(yōu)化的狀態(tài)，再次進(jìn)行性能錄制：

得到Fps數(shù)據(jù)如下：

可以看到此時(shí)：
1，沒有了紅色條
2，綠色半透明條的高度，明顯要比未優(yōu)化的場景高度要高不少

總結(jié)：

紅色：意味著幀數(shù)已經(jīng)下降到影響用戶體驗(yàn)的程度，chrome已經(jīng)幫你標(biāo)注了，這塊有問題

綠色：其實(shí)就是Fps指數(shù)，所有綠色柱體高度越高，性能越好

step 2：了解Cpu

上圖中Fps下面的位置，即是Cpu信息
我們再采集一個(gè)真實(shí)業(yè)務(wù)的cpu數(shù)據(jù)，如下圖：

對比可以發(fā)現(xiàn)，cpu數(shù)據(jù)的一些特性：

1，cpu包括兩種狀態(tài)：

（1）充滿顏色

（2）不充滿顏色

2，cpu是否充滿顏色和fps存在聯(lián)系

step 3：了解Net

Net部分可以將屏幕逐幀錄制下來，可以幫助觀察頁面的狀態(tài)，主要用處，可以幫助分析首屏渲染速度

step 4：了解Frames

1，查看特定幀的fps

Frames部分，主要用于查看特定幀的fps，可以查看特定的幀情況。

2，懸停其上，可以查看數(shù)據(jù)

可以看到：

這一幀的時(shí)間間隔是129.1ms

當(dāng)前的fps是1000ms/129.1ms = 7.75fps，約等于8fps

這里主要體現(xiàn)的是頁面兩次刷新之間間隔了129.1ms

3，點(diǎn)擊Frames塊，得到更詳細(xì)的數(shù)據(jù)

點(diǎn)擊Frames可以顯示當(dāng)前關(guān)鍵幀的詳細(xì)信息：

1，duration是當(dāng)前幀從796.31ms開始等待，796.31ms+127.73ms后進(jìn)行了一次渲染

2，fps還是老算法，1000ms/127.73ms約等于7fps

3，最下面是關(guān)鍵幀的視圖畫像

step 5：了解FPS快捷工具

1，在chrome中，還有格more tools選項(xiàng)，選中rendering選項(xiàng)

2，開啟fps meter開關(guān)

3，直接在頁面上，出現(xiàn)了一個(gè)fps統(tǒng)計(jì)器

這個(gè)東西，暫時(shí)先關(guān)閉，不利于系統(tǒng)性的學(xué)習(xí)

三，找到瓶頸

前面已經(jīng)知道我們的測試頁面有性能問題，那么接下來就要想為什么了？

step 1：了解Summary

對性能進(jìn)行錄制完成的時(shí)候，會(huì)默認(rèn)在底部展示一個(gè)Summary摘要，顯示全局的信息

上面展示了0～5.52s錄制時(shí)間的具體耗時(shí)：

1，script執(zhí)行耗時(shí)1952.8ms

2，render渲染耗時(shí)2986.8ms

3，Painting重繪耗時(shí)472.1ms

主要就是這3個(gè)耗時(shí)，知道了這三部分耗時(shí)，只是知道了，哪有問題，但具體問題在哪呢？

step 2：了解Main

上圖，紅色邊框圈出來的，就是Main部分，其中每一塊是每一幀中所做的事情

目前這樣看不出來什么，腦殼疼，為了方便我們觀看，我們可以在fps、cpu、net模塊，點(diǎn)擊一下，縮小時(shí)間區(qū)間

如上圖，可以通過縮小時(shí)間區(qū)間，從而放大Main中的內(nèi)容
現(xiàn)在已經(jīng)能夠看到，Main中展示的是火焰圖，也就是函數(shù)調(diào)用的堆棧

火焰圖，可以簡單理解，x軸表示時(shí)間，y軸表示調(diào)用的函數(shù)，函數(shù)中還包含依次調(diào)用的函數(shù)，y軸只占用x軸的一個(gè)時(shí)間維度

step 3：識(shí)別問題，紅色三角號(hào)

上圖中，可以看到Animation Frame Fired右上角有個(gè)紅色三角號(hào)，這就是chrome自動(dòng)幫助識(shí)別出有問題的部分
就像FPS中的紅條一樣，用來識(shí)別問題

上圖可以看到提示了Warning : 重復(fù)處理程序耗時(shí)287.77毫秒

step 4：追溯問題，定位代碼位置

如上圖，可以看到函數(shù)調(diào)用在代碼中的位置，可以點(diǎn)擊進(jìn)行查看

雖然定位到了，是方法update造成的問題，但不夠明確，所以需要進(jìn)一步探索

step 5：進(jìn)一步分析問題位置

繼續(xù)查看Main，可以看到app.update下面有很多紫色的條，紫色條本身表示渲染
但請注意?。?！ 紫色條上還有更小的
運(yùn)用前面學(xué)過放大功能，調(diào)整時(shí)間區(qū)間

可以看到，每個(gè)小紫條上，都有一個(gè)紅色三角
前面提到：紅色三角就是chrome幫助自動(dòng)識(shí)別有問題的地方
查看提示信息：強(qiáng)制回流可能是性能瓶頸
點(diǎn)擊查看摘要：

可以看到問題定位在了，app.js的71行，點(diǎn)擊查看，能夠看到是對每一個(gè)元素進(jìn)行樣式修改

此代碼的問題在于，在每個(gè)動(dòng)畫幀中，它會(huì)更改每個(gè)方塊的樣式，然后查詢頁面上每個(gè)方塊的位置。由于樣式發(fā)生了變化，瀏覽器不知道每個(gè)方塊的位置是否發(fā)生了變化，因此必須重新布局方塊以計(jì)算其位置。

避免這種情況的出現(xiàn)，可以參考developers.google.com/web/fundame…

step 6：對比優(yōu)化的效果

demo中存在兩種狀態(tài)，優(yōu)化和非優(yōu)化
可以看到優(yōu)化的狀態(tài)，script和render的時(shí)間都大大減少了
所以fps明顯提高

step 7：性能優(yōu)化的知識(shí)儲(chǔ)備

使用rail模型測量性能developers.google.com/web/fundame…
基礎(chǔ)儲(chǔ)備：

渲染性能概述developers.google.com/web/fundame…

A Frame 的剖析aerotwist.com/blog/the-an…

GPU云服務(wù)器云服務(wù)器性能瓶頸識(shí)別性能瓶頸 linux性能瓶頸數(shù)據(jù)庫性能瓶頸

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/6811.html

發(fā)表評論

登陸后可評論

0條評論

Code4App

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

SciPy 積分 | Python技能樹征題

閱讀 962·2021-10-11 10:59
前端 CSS : 7# 純 CSS 實(shí)現(xiàn)像極了愛情

閱讀 2878·2019-08-30 15:43
?最近正在重構(gòu)之前開發(fā)過的記賬本

閱讀 2225·2019-08-30 11:08
【快速入門系列】CSS盒模型基礎(chǔ)

閱讀 1774·2019-08-29 15:20
Outlook HTML郵件中英文混排字體設(shè)置

閱讀 1179·2019-08-29 13:53
WebSocket網(wǎng)絡(luò)通信協(xié)議

閱讀 571·2019-08-26 13:24
生成自己的js工具包，包括打包webpack、測試mocha、生成文檔jsdoc、發(fā)布npm包的操作

閱讀 1715·2019-08-26 13:24
從零到一，新建webpack工程

閱讀 2915·2019-08-26 12:08

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！