偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

獻(xiàn)給前端研發(fā)同學(xué)的福利!性能診斷神器——Performance insight!

開(kāi)發(fā) 開(kāi)發(fā)工具
關(guān)于Performance insight的使用,建議大家親自上手試試,該工具設(shè)計(jì)極其易用,相信從事過(guò)前端相關(guān)工作的開(kāi)發(fā)或者測(cè)試同學(xué)十分鐘之內(nèi)就可以上手。

Performance insight概述

Performance insight是chrome Chrome DevTools中的自帶工具(Chrome102 版本發(fā)布),目前還是在chrome DevTool中啟動(dòng)即可,如下圖所示:我們可以模擬cpu,選擇4x slowdown,就開(kāi)始模擬4倍低速CPU,同理還可以模擬網(wǎng)絡(luò)應(yīng)對(duì)不同網(wǎng)絡(luò)的測(cè)試需求。

點(diǎn)擊上圖中的Measure page load 就開(kāi)始對(duì)當(dāng)前的頁(yè)面性能進(jìn)行分析了!

Performance insight工具最方便的部分是"insights"面板,它位于面板的最右側(cè)。它以垂直時(shí)間線(xiàn)的形式按照事件發(fā)生的順序顯示事件,如渲染阻塞請(qǐng)求、長(zhǎng)任務(wù)、布局變化等。點(diǎn)擊這些具體事件將導(dǎo)航到"詳細(xì)信息"選項(xiàng)卡,它給出了關(guān)于它的潛在原因和受它影響的元素等的詳細(xì)信息,在Details中看到影響性能問(wèn)題的各種因素,遺憾的是修復(fù)方案仍然需要翻墻。我們以jd首頁(yè)為例,我們很容易看到Cumulative Layout shift 慢(紅色框,紅色箭頭被認(rèn)定為嚴(yán)重超標(biāo),需要整改),想要進(jìn)一步進(jìn)行優(yōu)化,點(diǎn)擊該事件就可以查看關(guān)于問(wèn)題的詳細(xì)描述和具體的優(yōu)化方案。另外在頁(yè)面的頂端(綠色框)我們可以方便的看到當(dāng)前頁(yè)面FCP,LCP,DCL和TTI這些參數(shù)指標(biāo),關(guān)于指標(biāo)的含義和參考時(shí)間的詳情可以參考文章:

一文帶大家了解前端性能測(cè)試所涉及的核心性能指標(biāo)

點(diǎn)擊下圖中的Toggle visual preview 按鈕可以看到頁(yè)面具體時(shí)間點(diǎn)展示的UI情況,拖動(dòng)滾動(dòng)條就可以方便的看到不同時(shí)間點(diǎn)UI加載的變化了。

Performance和Performance insight對(duì)比

我們也可以通過(guò)Chrome DevTools的performance來(lái)具體分析頁(yè)面性能,但個(gè)人認(rèn)為該工具不夠易用,Performance insight相比之前Performance而言?xún)?yōu)勢(shì)如下:

  • 給開(kāi)發(fā)者提供更簡(jiǎn)潔友好的頁(yè)面性能記錄,在主界面從兩個(gè)維度來(lái)展示整個(gè)頁(yè)面渲染流程,橫軸為時(shí)間軸,縱軸為渲染進(jìn)程的各個(gè)階段
  • 給開(kāi)發(fā)者提供了關(guān)鍵頁(yè)面性能指標(biāo)的分析,在Insight面板展示頁(yè)面的性能指標(biāo)和缺陷,并給出修復(fù)建議
  • 對(duì)于常規(guī)開(kāi)發(fā)者了解網(wǎng)頁(yè)性能更加輕松,不過(guò)這還是一個(gè)實(shí)驗(yàn)性的模塊,有很多優(yōu)化的空間。

關(guān)于Performance insight的使用,建議大家親自上手試試,該工具設(shè)計(jì)極其易用,相信從事過(guò)前端相關(guān)工作的開(kāi)發(fā)或者測(cè)試同學(xué)十分鐘之內(nèi)就可以上手。

我的每一篇文章都希望幫助讀者解決實(shí)際工作中遇到的問(wèn)題!如果文章幫到了您,勞煩點(diǎn)贊、收藏、轉(zhuǎn)發(fā)!您的鼓勵(lì)是我不斷更新文章最大的動(dòng)力!

責(zé)任編輯:武曉燕 來(lái)源: 今日頭條
相關(guān)推薦

2020-07-22 08:27:26

函數(shù)監(jiān)控前端

2024-01-30 13:53:40

前端性能Chrome

2020-08-14 07:54:45

前端開(kāi)發(fā)工具

2021-05-11 10:03:06

性能優(yōu)化工具Performance

2024-09-06 07:55:42

2019-10-31 11:50:19

MySQL數(shù)據(jù)庫(kù)Windows

2017-12-02 23:18:53

云計(jì)算公共云云性能

2010-04-12 16:59:52

Oracle性能診斷

2012-02-07 10:25:50

2013-01-08 11:02:03

.NET.NET性能調(diào)優(yōu)ANTS

2021-04-01 07:52:57

前端開(kāi)發(fā)技術(shù)熱點(diǎn)

2024-02-02 15:21:08

工具頁(yè)面性能

2017-12-13 15:10:40

Linux性能分析神器BPF

2021-12-29 08:21:01

Performance優(yōu)化案例工具

2023-11-22 19:10:42

前端父應(yīng)用文案

2009-04-07 13:42:41

OracleStatspack診斷

2023-12-06 07:36:27

前端開(kāi)發(fā)

2019-11-01 14:00:58

前端性能優(yōu)化代碼

2020-10-16 09:00:12

前端開(kāi)發(fā)技術(shù)

2019-07-01 08:46:37

AI 數(shù)據(jù)人工智能
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)