曾自己借助阿里云和hexo搭了个站点，现已废弃，过往写的博客暂挪到此处。
title: 页面加载时间获取
date: 2016-12-11 14:29:17
tags:
- 技术
- Javascript
- 性能优化
- TODO
本来只是要完成一个领导交代的 获取dom加载时间 的任务，因为他说的很泛，dom加载时间，所以我要开始研究dom加载时间应该从什么时候开始算起，到什么时候结束，后来发现这个任务太不明确，我只好尽我所能多了解一些，然后把能抓到的有必要的时间都返回，到时候要是不需要删掉即可。反正我知道，他交代给我这个任务的终极目的，是为了了解页面性能。
然后，就一不小心的，接触了性能优化这件事情。
之前零零散散的看过一些文章，知道有这么件事情，然后都加入收藏夹待以后再深入。可能由于我实在喜欢刨根究底，明明给我的时间只有4个小时。。就趁着这个机会，在工作时间之外，好好研究一下。
当然时间还是有限，目前我还是在解决获取加载时间这个问题上。优化还没有。然而获取加载时间，还有问题，如下：
页面加载
在我理解，页面加载就是输入url，enter之后到window.onload事件。onload事件表示资源都已经加载完毕。
先不管我在各种文章中得到的，页面加载的过程中按照顺序做了什么。先说我自己从Chrome Timeline中得到的：
Receive Response(先receive新页面，然后才出发unload老页面??what??还有，为什么没有request？)
Receive Data
pagehide
beforeunload
unload
readystatechange
finish loading(为什么这么早就结束了？loading是什么意思？)
send Request(js)
receive response(js)
receive data(js)
parse HTML
evaluate script
parse HTML
readystatechange
DOMContentLoaded
load(window.onload)
pageshow
paint
composite layers
update layer tree
需要获取到时间段
Chrome Timeline中得到：
Loading
Scripting
Rendering
Paining
Other
Idle
Chrome可以统计这些时间，然而我通过js基本获取不到，因为很多事情都在同时进行，无法通过打点的方式分解开。
从HTML开始到window.onload的时间（这个“开始”不够明确）
打点如下
开始时间：HTML文档头第一行script 获取当前时间
结束时间：window.onload
网络请求响应时间：从输入urlenter之后，到html请求成功。
TODO 需要后端支持，待研究
其他
因为parse HTML 和js请求，执行等都在同时。根本不知道能抓什么，获取什么时间段。
TODO 暂时搁置
参考
http://www.alloyteam.com/2014/03/effect-js-css-and-img-event-of-domcontentloaded/
http://www.alloyteam.com/2016/01/points-about-resource-loading/
https://segmentfault.com/a/1190000004466407
http://www.ghugo.com/chrome-timeline/
Performance
在我谷歌如果获取加载时间（其实我是想获取不同阶段的加载时间）的时候，没有得到我想要的结果，但是不停的看到performance这个东西。但是担心兼容的问题（http://caniuse.com/#search=performance），所以没有使用，了解了一下，看起来很简单。等有空实际运用，再记录下来。
TODO
https://segmentfault.com/a/1190000004466407
http://javascript.ruanyifeng.com/bom/performance.html
好讨厌这种事情没做好的感觉。写这个时候才发觉，自己真的根本没解决这个问题，甚至只是开个头。但是不能在这个问题上耗太多时间了，自己以后一定要记得补充上来。
网友评论