浏览器页面加载性能
来源:互联网 发布:linux mysql源码安装 编辑:程序博客网 时间:2024/04/30 00:30
整个页面的耗时:
window.performance.timing
页面上某个静态资源的加载时间:
返回网页中所有资源和标记的数据:
window.performance.getEntries()
根据entryType返回数据:
window.performance.getEntriesByType()
window.performance.getEntriesByType(‘resource’)
根据name返回数据:
window.performance.getEntriesByName()
详细流程:
前一个网页页面 unload, 重定向(页面发生跳转且属于同域名下),
fetch 文件:
缓存(如果使用了本地缓存或持久连接), DNS 域名解析 (如果使用了本地缓存或持久连接,则没有此步骤)
连接:
HTTP (TCP)连接 (如果是持久连接,则与 fetchStart 值相等; 注意如果在传输层发生了错误且重新建立连接,)HTTP 请求读取真实文档开始的时间(完成建立连接)HTTP 接收请求文档的响应
渲染 DOM:
解析并渲染 DOM 树, Document.readyState 变为 interactive,此时并没有开始加载网页内的资源
网页内资源加载,
JS 脚本加载执行完
DOM 树解析完成,且资源也准备就绪
window.performance = { timing: { // 同一个域下,前一个网 unload 的时间戳, // 如果直接复制地址进入或者不是同域 // 则与 fetchStart 值相等 navigationStart: 1441112691935, // 前一个网页unload 的时间戳, // 如果无前一个网页 unload // 或者前一个网页与当前页面不同域,则值为 0 unloadEventStart: 0, // 和 unloadEventStart 相对应 // 返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳 unloadEventEnd: 0, // 第一个 HTTP 重定向发生时的时间。 // 有跳转且是同域名内的重定向才算 // 否则值为 0 redirectStart: 0, // 最后一个 HTTP 重定向完成时的时间 // 有跳转且是同域名内部的重定向才算 // 否则值为 0 redirectEnd: 0, // 浏览器准备好使用 HTTP 请求抓取文档的时间 // 发生在检查本地缓存之前 fetchStart: 1441112692155, // DNS 域名查询开始的时间 // 如果使用了本地缓存(即无 DNS 查询)或持久连接 // 则与 fetchStart 值相等 domainLookupStart: 1441112692155, // DNS 域名查询完成的时间 // 如果使用了本地缓存(即无 DNS 查询)或持久连接 // 则与 fetchStart 值相等 domainLookupEnd: 1441112692155, // HTTP(TCP) 开始建立连接的时间 // 如果是持久连接,则与 fetchStart 值相等 // 注意如果在传输层发生了错误且重新建立连接, // 则显示的是新建立的连接开始的时间 connectStart: 1441112692155, // HTTP(TCP) 完成建立连接的时间(完成握手) // 如果是持久连接,则与 fetchStart 值相等 // 注意如果在传输层发生了错误且重新建立连接, // 则显示的是新建立的连接完成的时间 // 注意这里握手结束,包括安全连接建立完成、SOCKS 授权通过 connectEnd: 1441112692155, // HTTPS 连接开始的时间, // 如果不是安全连接,则值为 0 secureConnectionStart: 0, // HTTP 请求读取真实文档开始的时间(完成建立连接 // 包括从本地读取缓存 // 连接错误重连时,这里显示的也是新建立连接的时间 requestStart: 1441112692158, // HTTP 开始接收响应的时间(获取到第一个字节) // 包括从本地读取缓存 responseStart: 1441112692686, // HTTP 响应全部接收完成的时间(获取到最后一个字节) // 包括从本地读取缓存 responseEnd: 1441112692687, // 开始解析渲染 DOM 树的时间 // 此时 Document.readyState 变为 loading // 并将抛出 readystatechange 相关事件 domLoading: 1441112692690, // 完成解析 DOM 树的时间 // Document.readyState 变为 interactive // 并将抛出 readystatechange 相关事件 // 注意只是 DOM 树解析完成 // 此时并没有开始加载网页内的资源 domInteractive: 1441112693093, // DOM 解析完成后,网页内资源加载开始的时间 // 在 DOMContentLoaded 事件抛出前发生 domContentLoadedEventStart: 1441112693093, // DOM 解析完成后, // 网页内资源加载完成的时间 // 如 JS 脚本加载执行完 domContentLoadedEventEnd: 1441112693101, // DOM 树解析完成 // 且资源也准备就绪的时间 // Document.readyState 变为 complete // 此时抛出 readystatechange 相关事件 domComplete: 1441112693214, // load 事件发送给文档 // 也即 load 回调函数开始执行的时间 // 注意如果没有绑定 load 事件,值为 0 loadEventStart: 1441112693214, // load 事件的回调函数执行完毕的时间 loadEventEnd: 1441112693215 }}
衡量时间性能
三种方法:
第一种:
var start1 = +new Date();function();var end1 = +new Date();console.log(end1-start1);
第二种:
var start2 = window.performance.now();function();var end2 = window.performance.now();console.log(end1-start1);
第三种:
window.performance.mark("start3");function();window.performance.mark("end3");window.performance.measure("difference", "start3", "end3");console.table(performance.getEntriesByName('difference'));
比较:
// 标记开始var ret=[];var start1 = +new Date();var start2 = window.performance.now();window.performance.mark("start3");for (var i = 0; i < 100; i++) { ret.push(i);}var end1 = +new Date();var end2 = window.performance.now();// 标记结束window.performance.mark("end3");// 计算差值并命名为difference, 无返回window.performance.measure("difference", "start3", "end3");// window.performance.getEntriesByType('measure');// window.performance.getEntriesByName('difference');console.log(end1-start1);console.log(end2-start2);console.table(performance.getEntriesByName('difference'));// // 清除指定标记点// window.performance.clearMarks('start'); // // 清除所有标记点// window.performance.clearMarks();// // 清除指定差值数据// window.performance.clearMeasures('difference'); // // 清除所有差值数据// window.performance.clearMeasures();
参考 :
http://www.atatech.org/articles/60540/?frm=mail_daily&uid=223313
0 0
- 浏览器页面加载性能
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- 浏览器的加载与页面性能优化
- [WebKit]浏览器的加载与页面性能优化
- 浏览器停止加载页面内容
- 浏览器怎么加载页面的?
- Git教程4——Git分支
- Dijkstra+堆优化 模板
- 浅析 AngularJS 全球化最优方案(二)
- JavaWeb JSP技术(上)
- Android控制文字水平间距android:letterSpacing
- 浏览器页面加载性能
- 解决Windows下载(Downloads)目录打开速度异常慢的问题
- 浅析 AngularJS 全球化最优方案(三)
- Maven入门
- js,easyui关闭当前的窗口!
- 浅析 AngularJS 全球化最优方案(四)
- 锐速Linux和谐版一键包
- CodeForces 471B MUH and Important Things 模拟 水
- 蓝鸥Unity开发基础——For语句学习笔记