打开网站不要出现 index.html,莱芜app下载,宣传片拍摄费用,竞价推广开户电话概述 这个工具真的很强大#xff0c;Timeline工具栏提供了对于在装载你的Web应用的过程中#xff0c;时间花费情况的概览#xff0c;这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件#xff0c;框架#xff0c;和实时内存用量3个方面的数…概述 这个工具真的很强大Timeline工具栏提供了对于在装载你的Web应用的过程中时间花费情况的概览这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件框架和实时内存用量3个方面的数据来监测网页通过这些数据我们可以方便的找出页面中存在问题的地方。 Timeline面板 打开chrome开发者工具切换到Timeline选项卡界面如下 功能很多非常复杂是不是对应E问不好的同学真的是无从下手幸好有翻译工具下面我们一步一步的揭开这个工具的神秘面纱。 强烈建议在浏览器隐身模式下使用这个工具并且禁用一切无关的插件因为这些插件会影响测试的结果。 工具默认是不开启记录的如果要分析页面请点击圆形的记录按钮按钮变红后就可以开始记录页面的各个事件了这个时候可以在页面上做各种操作Timeline工具会详细的记录下各类事件。建议不要记录太久太多会增加分析的难度。 颜色的属性 Timeline工具里面使用是4种颜色来表示不同类别的事件 蓝色加载 黄色脚本 紫色渲染 绿色绘制 过滤 过滤面板可以对不同类型的事件和花费时间进行过滤非常好用 事件模式 在这个模式中Summary视图(在Timeline的顶部)显示了一些水平的栅栏分别代表页面中的网络和HTML解析(蓝色)JavaScript(黄色)渲染(紫色)以及绘制(绿色)事件。重绘是浏览器事件是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。 我们可以在最上面灰色的时间节点哪里拖动来选择查看的记录范围如下图 在DETAILS面板中可以查看该记录范围内各类型事件的时间开销 other表示其它事件花费的时间Idle表示空闲时间 也可以在DETAILS面板中查看单个记录的时间开销如下 名词解释 send request发送请求evaluate script评估脚本parse html解析htmlrecalculate style重新计算显示样式layout计算布局paint setup绘制设置【准备绘制】paint绘制composite layers组合层timer fired触发定时器function call函数调用receive data接收数据receive response接收响应finish loading结束加载GC event浏览器垃圾回收pevaluate script评估脚本rasterize光栅化帧模式 帧模式能让我们深入的了解页面的渲染性能“帧”表示浏览器要呈现的内容显示到单个帧所必须做的工作如运行 JavaScript、 处理事件、 更新 DOM 和更改的样式、 布局和绘制。 目前大多数的显示器的刷新频率是60Hz那么我们页面的绘制频率能达到60帧每秒是最好的因为软件帧和硬件的刷新频率一致的话页面能给人非常流畅的感觉否则就会感觉到很卡这样我们大概有16.6ms1000/60来完成每一帧的呈现这就是很多人说的 “16.6ms”优化 。 灰色的区域有点难理解你可以理解是浏览器内部c的一些工作这部分可能和前端的js以及渲染没什么关系。【陈子舜】 选择一个帧范围可以查看这个范围内帧的一些数据如下 内存模式 内存视图会通过一个图表显示您的页面随着时间的推移所使用的内存你可以查看每个时间段的内存使用量并找出性能问题。 结束语 PS本文来自huihuixiao发表在部门博客的内容觉得非常有价值故转载出来在此感谢huihui的辛苦付出 通过Timeline来观察页面的渲染变化有利于分析页面的性能瓶颈。timeline是个非常不错的工具下一次将讲解”Rendering”的用法通过timeline Rendering 基本能分析出页面的渲染性能。这在移动端非常有用。 参考文档 https://developers.google.com/chrome-developer-tools/docs/timeline http://www.qingdou.me/3719.html http://www.w3cfuns.com/article-1248-1.html转载于:https://www.cnblogs.com/dasn/articles/4015755.html
