• 用Chrome DevTools监测网页的Reflow/Repaint

    学习DevTools的使用
    服务器君一共花费 8.007 ms 进行了 4 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    使用 Chrome 的 DevTools 可以很方便地监测网站的 Reflow 和 Repaint。比如下面是用 Chrmoe DevTools 的 Timeline 监测小站首页的结果:

    在上图中:

    • 绿色代表重绘 Repaint。
    • 黄色代表 js 的执行。
    • 紫色代表重排 Reflow。

    点击具体的事件,你甚至还可以查看是哪一行代码引起的重排,所以你可以根据上面的 Reflow 情况去优化网站。

    Timeline工具栏

    Timeline工具栏提供了对于在装载你的Web应用的过程中,时间花费情况的概览,这些应用包括处理DOM事件,页面布局渲染或者向屏幕绘制元素。

    它可以让你深入得到三个层面的数据,来帮助你明白问什么你的应用很缓慢:事件, 框架和实时的内存用量。开始,浏览你的应用,并在DevTools中切换到Timeline工具栏。

    默认情况下Timeline不会显示任何数据,但是你可以这样开始一个记录会话,打开你的应用并点击灰色圆圈,它在工具栏的底部——使用Cmd/Ctrl+E 快捷键也能开始一个记录。

    这个记录按钮会从灰色变成红色,而Timeline将开始从你的页面获取时间线(timeline)。在你的应用中完成一些操作,记录到一些数据之后,再一次点击按钮来停止记录。

    在Events这个模式中,Summary视图(在Timeline的顶部)显示了一些水平的栅栏,分别代表页面中的网络和HTML解析(蓝色),JavaScript(黄色),样式重计算和布局(紫色)以及绘画和合成(绿色)事件。重绘是浏览器事件,是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。

    Chrome 的 DevTools 很强大,你可以自己探索一下,还有很多好用的功能,这里的 Timeline 甚至 CSS 属性的修改会对样式重新进行计算导致的 Rendering 与 Painting 都可以看得到。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [计算机算法] TAOCP与算法 12 个条目
  2. [Python程序设计] Django后台管理系统 2 个条目
  3. [PHP程序设计] PHP中的Hash算法 3 个条目
  4. [移动开发] Layout_weight属性解析 5 个条目
  5. [Python程序设计] 写几个简单的Tornado程序吧 5 个条目
  6. [移动开发] Activity 初步知识 2 个条目
  7. [PHP程序设计] PHP扩展模块安装 1 个条目
  8. [数据结构] 图的定义 1 个条目
  9. [搜索引擎优化] 与百度权重有关的信息 2 个条目
  10. [PHP程序设计] PHP里的布尔类型 3 个条目
  11. [JavaScript程序设计] jQuery与表单操作 2 个条目
  12. [智力开发与知识管理] 学习编程为什么没会这么难? 7 个条目
窗口 -- [博客]