Chrome开发者工具中评估性能的五大新特性

摘自:Chrome DevTools Revolutions 2013

本次开发者工具的改进中有几项新特性是针对性能的:

  • 持续绘制模式
  • 显示绘制矩形及其层的边框
  • 每秒帧数的测量仪
  • 找到强制同步布局(layout thrashing)
  • 对象分配跟踪

持续绘制模式

持续绘制模式是开发者工具设置中的一个选项(渲染>开启持续页面绘制),这个选项可以帮助你识别单个元素或CSS样式的渲染开销。

通常Chrome只在响应一个布局或样式的变化时绘制屏幕,并且只是绘制屏幕中需要更新的区域。当你开启持续页面绘制选项时,整个屏幕都会不断的重绘。一个置顶的界面会展示Chrome在绘制页面时所花费的时间,以及近期绘制时间的分布图。穿过整个直方图的那条横线代表16.6毫秒标记线。

置顶的绘制时间界面

这样做的好处是你可以走遍DOM树中的元素面板,隐藏单个元素(隐藏当前选中元素的快捷键是H)或关闭一个元素的CSS样式。通过留意页面绘制时间的变化,你可以看到单个元素或样式为页面渲染所增加的“负担”。如果隐藏一个元素使得绘制时间明显下降,那么你要重点关照一下这个元素的样式或构造了。

开启持续绘制模式的方法:

  1. 打开开发者工具的设置
  2. 打开常规选项卡,在渲染中,打开开启持续页面重绘

注意:如果你看不到这个设置项,请打开about:flags,打开在所有页面中使用GPU合成,并重启Chrome。

更多信息,请移步至:用开发者工具的持续绘制模式进行长绘制时间的性能分析

显示绘制矩形及其层的边框

另一个开发者工具的选项是展示正在被绘制的矩形区域(设置>渲染>展示绘制矩形)。比如,在下面这个屏幕截图中,一个矩形正在被绘制,在这里,CSS悬停效果被应用到了紫色图形中。

网站展示绘制中的矩形

你得回避导致整个界面被重绘的设计实践与开发实践。比如,在下面这个屏幕截图中,用户正在滚动页面。一个绘制矩形覆盖在了滚动条上,另有一个绘制矩形覆盖在了整个页面的剩余部分。它的罪魁祸首是body元素的背景图片。该背景图片是fixed定位的,它要求Chrome每次滚动页面的时候都得重绘整个页面。

网站展示全屏幕的重绘

每秒帧数测量仪

每秒帧数测量仪显示了页面当前的帧率、最小帧率和最大帧率、一个展示帧率随时间变化的条形图、以及不同帧率分布的直方图。

每秒帧数测量仪

开启每秒帧数测量仪的方法:

  1. 打开开发者工具的设置
  2. 打开常规选项卡
  3. 渲染中,打开强制加速合成以及显示每秒帧数测量仪

你可以通过打开about:flags,然后开启每秒帧数计数器并重启Chrome,来强制每秒帧数测量仪始终显示。

寻找强制同步布局(layout thrashing)

为了最大化渲染性能,Chrome通常会在应用程序中批处理布局变化请求,并制定一个日程来异步计算和渲染这些变化请求。尽管如此,当一个应用程序获取依赖于布局的属性值的时候(比如offsetHeight或offsetWidth),Chrome会强制立刻同步渲染页面布局。我们称之为强制同步布局。这会明显的降低渲染的性能,在大DOM树中重复运行时尤为明显。这种情形也被称之为“layout thrashing”。

当我们检测到一个强制同步布局的时候,时间线记录中会有警告,它会在相应的时间线记录边上显示一个黄色的警告图标。鼠标悬停在这些记录上会看到无效的布局的代码堆栈记录、以及造成强制布局的代码堆栈记录。

时间线视图中的强制同步布局弹泡

该弹泡同时展示了需要布局的结点数量、重新布局的树的尺寸、布局的范围和布局的根。

更多信息,请移步至:时间线Demo:诊断强制同步布局

对象分配跟踪

对象分配跟踪是一个新型的内存描述资料,它可以实时展示内容分配的情况。当你开始分配跟踪时,开发者工具实时持续生成堆的快照。堆分配的描述资料展示了对象在哪里被创建,且识别被保留的路径。

堆分配描述资料的视图

跟踪对象分配的方法:

  1. 打开开发者工具,点击描述资料选项卡
  2. 选择记录堆分配然后点击开始
  3. 当你完成数据的收集之后,点击停止记录堆描述信息(描述资料面板左下角的红色的圆)。

已有 2 条评论 »

  1. 这年头,到处都是错别字
    http://dengxijian.com http://dengxijian.com

  2. 天我亮阿拉丁的神灯,灯神说:我会满足你一个愿望。我说:请祝福正在看短消息的人新年快乐
    http://lyglxkjgs.com http://lyglxkjgs.com

添加新评论 »

(请至少包含一个汉字,且汉字不能比日本字少)