chrome中Timeline的使用（译）

一、概括　　

Timeline面板包括以下四个部分：

控制面板。开始记录、停止记录、配置捕获信息；
概况。页面性能的整体概况；
flame chart。直观展示cpu堆的情况。你能够看到三条虚线，蓝色的代表DOM生成完毕，绿色的代表第一次绘制，红色代表加载完毕；
细节。当一个事件被选中，这块区域显示事件的更全面信息。当没有事件被选中，展示关于选中的事件帧的信息。

二、概况面板

　　概况面板包含三个图：

FPS。每秒的帧数量。绿色块越高，FPS越高。在绿色块上面的红色块表明每帧的事件过长，可能出现卡顿；
CPU。每种事件的CPU占用。
NET。每个颜色的块代表一种资源，块长度越长，获取此资源的时间也越长。较浅的区域表示等待时间（从发送请求到接收到第一个byte的时间）。深色区域代表传输事件。HTML 文件是蓝色的，Scripts是黄色的， * 样式表是紫色的，媒体文件是绿色的，混杂资源是灰色。

三、记录

　　记录一个页面加载，打开Timeline面板，打开你想记录的页面，然后刷新页面，timeline面板将自动记录页面重载。

　　记录页面交互，打开Timeline面板，点击RECORD按钮，RECORD按钮在记录时变成红色，执行页面交互，然后停止记录。

　　当记录完成后，DevTools会自动猜测哪部分与你相关，自动放大此本分。

记录小贴士：

记录时间越短越好
避免不必要操作
禁止浏览器缓存
禁止插件扩展

四、记录细节

　　当你在flame chart中选择了一个事件，细节面板会显示该事件的信息。

五、捕获屏幕截图

　　Timeline面板可以在页面加载时捕获屏幕截图，这个特点叫做Filmstrip。

原文地址：https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool

转载于:https://www.cnblogs.com/shytong/p/5409154.html

chrome中Timeline的使用（译）相关推荐

chrome的timeline中stalled问题解析
原文地址 :http://foio.github.io/chrome-stalled/ 在公司国做一个运营活动,上线后PM总是抱怨访问速度过慢,影响运营效果.然而从前端的角度来说我已经做了如下优化: ...
分析chrome中的network面板
network总览找了个简单的网页来录制network: 名词解释: Name (&path): 资源的名称及其路径 Method: 请求该资源的方法 Status (&Text) ...
Google Chrome 中的高性能网络
Google Chrome 中的高性能网络 Google Chrome的历史和指导原则原译注:这部分不再详细翻译,只列出核心意思. 驱动Chrome继续前进的核心原则包括: Speed:做最快的(f ...
在Chrome中打开网页时出现以下问题您的连接不是私密连接攻击者可能会试图从 x.x.x.x 窃取您的信息（例如：密码、通讯内容或信用卡信息）
现象:在Chrome中打开网页时出现以下问题您的连接不是私密连接攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码.通讯内容或信用卡信息). 当点开"了解详情"后显示 ...
解决Chrome中UEditor插入图片的选择框加载过慢问题
解决Chrome中UEditor插入图片的选择框加载过慢问题 ../resources/plugins/ueditor/ueditor.all.js 中line24489/24498中的 accept ...
在 Ubuntu 14.04 Chrome中安装Flash Player(转)
在 Ubuntu 14.04 中安装 Pepper Flash Player For Chromium 一个 Pepper Flash Player For Chromium 的安装器已经被 Ubun ...
从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
PNaCl：Google通过LLVM增强对Chrome中原生应用的支持
作者 Abel Avram ,译者臧秀涛发布于五月 20, 2013 通过支持运行LLVM位码(bitcode),Google增强了对Chrome中原生应用的支持. 在Google I/O 20 ...
图文详解】Chrome中安装JsonView插件
图文详解]Chrome中安装JsonView插件 Chrome中如何安装JsonView插件?chrome插件网为您图文详解. 1.下载JsonView插件在github中搜索JsonView,找到 ...

chrome中Timeline的使用（译）

chrome中Timeline的使用（译）相关推荐

最新文章

热门文章