Google优化工具Timeline的使用(Chrome 57已经改为performance(性能模板))
来源:互联网 发布:linux怎么下载安装vim 编辑:程序博客网 时间:2024/06/06 22:26
前期学习基本一些前端知识搭一下页面但是现在越来越注重网页性能的优化。
通过什么看网页导致了性能问题呢? 通过介绍并使用performance进行性能的调试。
1.首先看看一看performance能够整理什么网页数据
如图第一个模块(Control窗格)是点击开始录制,停止,clear。
第二个模块(OverView窗格)右侧提示了FPS(帧频,流畅度),CPU的消耗,NET,HEAP(JavaScript堆内存)
- FPS。每秒帧数。绿色竖线越高,FPS 越高。 FPS 图表上的红色块表示长时间帧,很可能会出现卡顿。
3.NET.每条彩色横杆表示一种资源,横杆越长,检索资源所需要的时间越长,每个横杆的浅色部分表示等待时间(请求资源到第一个字节下载完成时间)、
HTML文件是蓝色。脚本是黄色。样式是紫色。媒体文件是绿色。其它资源是灰色。
4.底下的summary,Details,选择时间显示该事件相关的信息,未选择事件时,此窗格会显示选定时间范围的相关信息。
细节:保证录制的文件很纯粹(简短,没有不必要的操作,停止浏览器缓存,停用扩展程序(使用隐身登录))
第三个模块(火焰图)(第二个模块可以控制范围选择读取网页过程中的页码)(蓝线代表DOMContentLoaded事件,绿线首次绘制的时间,红线代表load事件)
Network 查看网络请求 interaction 基本的交互,mouseover,mouseon.
阅读全文
5 0
- Google优化工具Timeline的使用(Chrome 57已经改为performance(性能模板))
- Chrome页面性能工具(performance,以前的timeline)
- Chrome页面性能工具(performance,以前的timeline)——初探
- 使用 Chrome Timeline 来优化页面性能
- 使用 Chrome Timeline 来优化页面性能
- 使用用Chrome开发者工具(Timeline、Profiler)做JavaScript性能分析
- 使用Chrome DevTools的Timeline分析页面性能
- Chrome渲染分析之Timeline工具的使用
- Chrome渲染分析之Timeline工具的使用
- 前端性能优化利器:Chrome Timeline学习及实践
- 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
- 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
- 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
- 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
- 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
- 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
- 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
- 页面性能优化的利器 — Timeline
- JDBC之大段文本数据的保存与读取
- 广播(Broadcast)---《第一行代码Android》笔记
- java同步机制:synchronized
- java中局部变量和成员变量主要是他们作用域的区别
- 游戏周边增值服务
- Google优化工具Timeline的使用(Chrome 57已经改为performance(性能模板))
- Java枚举类的7种用法
- 欢迎使用CSDN-markdown编辑器
- 字符串转圈,之字形,旋转90度
- 洛谷 P1169 [ZJOI2007]棋盘制作(bzoj P1057 [ZJOI2007]棋盘制作)
- 入门经典_Chap06_习题:搜索 数据结构 欧拉回路
- android gridview 停止滚动
- mybatis $ #区别
- Object转Json差异之Gson fastJson jackson 修改字段名