chrome devtool

文章目录

1. 1. Rendering工具

【参考资料1】
【参考资料2】

• Summary 统计图：展示各个事件阶段耗费的时间
  • Parse HTML
  • Event: mousedown等js event
  • Layout
  • Recalculate style
  • Paint
  • Composite
• Bottom-Up 排序：可以看到各个事件消耗时间排序
• Call Tree 调用栈：Main选择一个事件，可以看到整个事件的调用栈
• Event Log 事件日志

Rendering工具

测试页面

• shift + command + P
• show rendering