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

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

    使用 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. [JavaScript程序设计] jQuery与表单操作 2 个条目
  2. [移动开发] ListView 使用相关问题集 1 个条目
  3. [软件工程与项目管理] 呈现树的构建 13 个条目
  4. [PHP程序设计] 声明式编程范式 12 个条目
  5. [PHP程序设计] fsockopen,curl与file_get_contents 12 个条目
  6. [PHP程序设计] PHP数组的遍历 7 个条目
  7. [PHP程序设计] PHP数组探索 4 个条目
  8. [智力开发与知识管理] 整体性学习策略 9 个条目
  9. [PHP程序设计] PHP里的引用 5 个条目
  10. [Python程序设计] 标准库:urllib/urllib2 14 个条目
  11. [运维管理] 路由器与交换机 4 个条目
  12. [PHP程序设计] PHP中的Hash算法 3 个条目
窗口 -- [博客]