學(xué)習(xí)用chrome檢測(cè)性能

1 .https://googlechrome.github.io/devtools-samples/jank/
2 .

devtools

1 .coverage 不僅可以測(cè)試js代碼使用率，也可以檢測(cè)css代碼使用率
2 .animations 是專門調(diào)試動(dòng)畫的部分
3 .

已經(jīng)渲染好的東西，為什么滾動(dòng)還會(huì)觸發(fā)重繪

1 .只要在一個(gè)小的窗口里面進(jìn)行超出父元素的滾動(dòng)操作，這個(gè)小的窗口里面的所有東西都是每次滾動(dòng)都重繪的
2 .ctrl + L 清除console.log里面的內(nèi)容
3 .console.log-user message只會(huì)顯示用戶的js輸出的日志
4 .console.count() 可以對(duì)某一函數(shù)執(zhí)行次數(shù)進(jìn)行計(jì)數(shù)
5 .console.dir()打印某一對(duì)象的json形式
6 .console.time() comsole.timeEnd() 對(duì)一段代碼進(jìn)行?
7 .copy(object) 將指定對(duì)象的字符串表示形式復(fù)制到剪貼板
8 .getEventListeners(object)返回在指定對(duì)象上注冊(cè)的事件偵聽器。返回值是一個(gè)對(duì)象，其中包含每個(gè)已注冊(cè)事件類型（例如，click或keydown）的數(shù)組。每個(gè)數(shù)組的成員是描述為每種類型注冊(cè)的偵聽器的對(duì)象。例如，以下列出了在文檔對(duì)象上注冊(cè)的所有事件偵聽器
9 .monitorEvents(window, "resize") 當(dāng)指定對(duì)象上發(fā)生指定事件之一時(shí)，事件對(duì)象將記錄到控制臺(tái)。您可以指定要監(jiān)視的單個(gè)事件，事件數(shù)組或映射到預(yù)定義事件集合的一般事件“類型”之一
10 .移動(dòng)端甚至可以模擬你的位置，還能模擬你的手機(jī)的任意位置形況。設(shè)備加速度
11 .提升合成層,一些屬性會(huì)讓元素創(chuàng)造出不同的渲染層

1 .有明確的定位屬性，relative,fixed,sticky,absolute
2 .透明 opacity 小于1
3 .有css濾鏡
4 .有css transform 屬性

12 .達(dá)成一些條件，渲染層會(huì)提升為合成層

1 .硬件加速的iframe元素
2 .3d或者硬件加速的2d canvas 元素
3 .video元素
4 .有3d transform
5 .對(duì)opacity，transform,fliter,bacldropfilter應(yīng)用了animation或者transition
6 .will-change設(shè)置為opacity,transform,top,left,bottom,right

13 .提升為合成層之后，會(huì)由GPU合成，比cpu處理快，當(dāng)需要repaint的時(shí)候，只需要repaint本身，不會(huì)影響到其他層