学习用chrome检测性能
1 .https://googlechrome.github.io/devtools-samples/jank/
2 .
devtools
1 .coverage 不仅可以测试js代码使用率，也可以检测css代码使用率
2 .animations 是专门调试动画的部分
3 .
已经渲染好的东西，为什么滚动还会触发重绘
1 .只要在一个小的窗口里面进行超出父元素的滚动操作，这个小的窗口里面的所有东西都是每次滚动都重绘的
2 .ctrl + L 清除console.log里面的内容
3 .console.log-user message只会显示用户的js输出的日志
4 .console.count() 可以对某一函数执行次数进行计数
5 .console.dir()打印某一对象的json形式
6 .console.time() comsole.timeEnd() 对一段代码进行⏲
7 .copy(object) 将指定对象的字符串表示形式复制到剪贴板
8 .getEventListeners(object)返回在指定对象上注册的事件侦听器。返回值是一个对象，其中包含每个已注册事件类型（例如，click或keydown）的数组。每个数组的成员是描述为每种类型注册的侦听器的对象。例如，以下列出了在文档对象上注册的所有事件侦听器
9 .monitorEvents(window, "resize") 当指定对象上发生指定事件之一时，事件对象将记录到控制台。您可以指定要监视的单个事件，事件数组或映射到预定义事件集合的一般事件“类型”之一
10 .移动端甚至可以模拟你的位置，还能模拟你的手机的任意位置形况。设备加速度
11 .提升合成层,一些属性会让元素创造出不同的渲染层
1 .有明确的定位属性，relative,fixed,sticky,absolute
2 .透明 opacity 小于1
3 .有css滤镜
4 .有css transform 属性
12 .达成一些条件，渲染层会提升为合成层
1 .硬件加速的iframe元素
2 .3d或者硬件加速的2d canvas 元素
3 .video元素
4 .有3d transform
5 .对opacity，transform,fliter,bacldropfilter应用了animation或者transition
6 .will-change设置为opacity,transform,top,left,bottom,right
13 .提升为合成层之后，会由GPU合成，比cpu处理快，当需要repaint的时候，只需要repaint本身，不会影响到其他层
网友评论