breakpoint
1 调试可以忽略代码
- Blackbox a script from the Editor pane ：blackbox source 右击代码 blackbox script
- Blackbox a script from the Call Stack pane
- Blackbox提供了这个便利功能，当你把不需要调试的代码加入Blackbox时候，调试的时候便会自动绕过这些文件，断点也不会调入黑盒中
- restart frame : 右击 call stack里第一个函数 ，选择 restart frame 可以重新 debugger 函数
- breakpoint continue to here Add conditional breakpoint 设置条件断点
- xhr fetch breakpoints 添加 url 关键字， 有访问就会打端点
- Dom breakpoints Dom 属性改变 删除 内容改变 都可以打断点
- 在 scope 改 变量数据
performance
看每秒的帧数， 如果FPS 是红线说明 用户不到60FPS
解决问题
看summary 扇形图 看看哪个时间长 然后减少它的时间
- Expand the Main section. DevTools shows you a flame chart of activity on the main thread, over time. main 里每一个bar 代表一个事件，事件下面是当前bar的子事件
- Animation Frame Fired （估计每个screenshot 是一帧） 当你在main 里 看到 一个 动画帧里有红色三角行，就说明这个bar当前事件有警告， 点开mian 里的 bar 事件，然后点击 summary 的 reveal link， 再点击关联文件就到 source 里了
- 减少页面re-layout 重绘，用flex 布局
- 坚持仅合成器的属性和管理层计数
- 坚持使用 transform 和 opacity 属性更改来实现动画。
- 使用 will-change 或 translateZ 提升移动的元素。
- 避免过度使用提升规则；各层都需要内存和管理开销。
.moving-element {
will-change: transform;
}
.moving-element {
transform: translateZ(0);
}