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

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

    使用 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. [数据库技术] 数据库范式篇 5 个条目
  2. [Python程序设计] urls.py设置技巧 8 个条目
  3. [移动开发] 使用support-v7 ActionBar前的那些坑 3 个条目
  4. [软件工程与项目管理] 浏览器与CSS渲染技巧 2 个条目
  5. [软件工程与项目管理] 开始了解Git 5 个条目
  6. [PHP程序设计] PHP中的Hash算法 3 个条目
  7. [PHP程序设计] htaccess 设置技巧 6 个条目
  8. [Python程序设计] Python语言概述 6 个条目
  9. [Python程序设计] Django 入门知识浅介 10 个条目
  10. [PHP程序设计] 对输入文件类型的检测 1 个条目
  11. [PHP程序设计] PHP里的引用 5 个条目
  12. [运维管理] 防火墙原理与应用 5 个条目
窗口 -- [八点]