|
谷歌浏览器Timeline用法详解: 大家都知道，谷歌浏览器自带的相关工具是前端开发人员的利器。 点击F12会弹出一个界面，顶部带有功能的选项卡，其中有几个功能强大，但是相对较为复杂，比如Timeline,console和network。 （1）.关于console的使用可以参阅谷歌控制台console相关命令介绍一章节。 （2）.关于network的使用可以参阅谷歌浏览器network用法详解一章节。 近期发现一片介绍关于Timeline用法的文章，下面和大家做一下分享，下面进入正题。 一.简单介绍: Timeline工具栏提供了对于在装载你的Web应用的过程中，时间花费情况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件，框架，和实时内存用量3个方面的数据来监测网页，通过这些数据，我们可以方便的找出页面中存在问题的地方。 二.面板介绍: 打开chrome开发者工具，切换到Timeline选项卡，界面如下:  下面介绍一下各个按钮的作用:  工具默认是不开启记录的，如果要分析页面，请点击圆形的记录按钮，按钮变红后就可以开始记录页面的各个事件了，这个时候可以在页面上做各种操作，Timeline工具会详细的记录下各类事件。建议不要记录太久，太多会增加分析的难度。 三.颜色的属性: Timeline工具里面使用是4种颜色来表示不同类别的事件:  蓝色：加载； 黄色：脚本； 紫色：渲染； 绿色：绘制 四.过滤: 过滤面板可以对不同类型的事件和花费时间进行过滤，非常好用：  五.事件模式: 在这个模式中，Summary视图(在Timeline的顶部)显示了一些水平的栅栏，分别代表页面中的网络和HTML解析(蓝色)，JavaScript(黄色)，渲染(紫色)以及绘制(绿色)事件。重绘是浏览器事件，是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。  我们可以在最上面灰色的时间节点哪里拖动来选择查看的记录范围，如下图：  在DETAILS面板中可以查看该记录范围内各类型事件的时间开销：  other表示其它事件花费的时间，Idle表示空闲时间，也可以在DETAILS面板中查看单个记录的时间开销，如下：  六.名词解释: （1）.send request:发送请求。 （2）.evaluate script:评估脚本。 （3）.parse html:解析html。 （4）.recalculate style:重新计算显示样式。 （5）.layout:计算布局。 （6）.paint setup:绘制设置【准备绘制】。 （7）.paint:绘制。 （8）.composite layers:组合层。 （9）.timer fired:触发定时器。 （10）.function call:函数调用。 （11）.receive data:接收数据。 （12）.receive response:接收响应。 （13）.finish loading:结束加载。 （14）.GC event:浏览器垃圾回收。 （15）.pevaluate script:评估脚本。 （16）.rasterize:光栅化。 七.帧模式: 帧模式能让我们深入的了解页面的渲染性能，“帧”表示浏览器要呈现的内容显示到单个帧所必须做的工作，如运行 JavaScript、 处理事件、 更新 DOM 和更改的样式、 布局和绘制。  目前大多数的显示器的刷新频率是60Hz，那么我们页面的绘制频率能达到60帧每秒是最好的，因为软件帧和硬件的刷新频率一致的话，页面能给人非常流畅的感觉，否则就会感觉到很卡，这样我们大概有16.6ms（1000/60）来完成每一帧的呈现，这就是很多人说的“16.6ms”优化。  灰色的区域有点难理解，你可以理解是浏览器内部c++的一些工作，这部分可能和前端的js以及渲染没什么关系。 选择一个帧范围可以查看这个范围内帧的一些数据，如下：  八.内存模式: 内存视图会通过一个图表显示您的页面随着时间的推移所使用的内存，你可以查看每个时间段的内存使用量，并找出性能问题。  |