HTML5 performance 前端加载性能初探
来源:互联网 发布:Js button 非活性 编辑:程序博客网 时间:2024/05/22 07:54
前言
利用 HTML5 performance,可以对前端页面加载性能进行分析,如首屏加载性能这个重要的分析。
关于Performance
Performance目前支持浏览器:IE9+,Chrome11+,Firefox7+。Safari并不在列,亲测手机QQ浏览器iOS版,确实没有支持这个API。
performance 在window下的方法:window.performance,里边包含若干性能相关的数据,timing 详细记录了加载各个过程的时间点信息,对比可以分析出当前页面的打开性能数据。
Timing 对象里边的数据比较多,梳理如下几个关键性的节点:
参照如上几个时间点,基本覆盖了浏览器加载一个页面的全过程。其中可以看到domloading等时间发生于responseEnd之前,也说明浏览器是边下载边构建dom树的。
如果只关注业务的首屏加载时间,只需关注loadEventEnd和fetchStart的时间差,如果还需要关注其他如dns查找时间,dom树构建时间等,直接算相应的时间差值即可,如下图:
0 0
- HTML5 performance 前端加载性能初探
- Performance — 前端性能监控利器
- HTML5中的prefetch预加载功能初探
- 前端性能之懒加载
- HTML5的学习--performance获取加载时间的工具
- 译文:前端性能的重要性 The Importance of Frontend Performance
- 移动HTML5前端性能优化指南
- 移动HTML5前端性能优化指南
- 移动HTML5前端性能优化指南
- 移动HTML5前端性能优化总结
- 移动HTML5前端性能优化总结
- 移动HTML5前端性能优化总结
- 移动HTML5前端性能优化总结
- Optimizing DLL Load Time Performance(优化 DLL 加载时间性能)
- 前端性能准则-(高性能HTML5-总结)
- 前端性能优化:javascript的加载顺序
- Chrome页面性能工具(performance,以前的timeline)——初探
- 初探HTML5
- Android MVP模式学习
- 谈PLM和ERP的差异比较
- C#调用windows API的一些方法
- C# 调用Delphi动态库
- Angularjs 入门 (老司机开车版)
- HTML5 performance 前端加载性能初探
- iOS 获取控件相对屏幕的位置
- Quartz框架入门
- 英文会议专业流程
- 【LeedCode】78.Subset
- 快速入门TI 的 Codec Engine
- PLM与PDM的关系
- 数据结构之顺序存储结构1
- 结合 Android 浅谈 Builder 模式