【前端优化】白屏时间，首屏时间计算，dom ready

白屏时间

first paint白屏时间，指的是浏览器从白屏到界面上开始有东西显示的时间，一般认为是head标签内容解析完，或者开始解析body，等待JS，css加载完成，生成CSSDOM和DOM，合成布局树

如何计算白屏时间？
在head标签中加入script，在script中写入，window.firstPaint = Date.now()
白屏时间 = firstPaint + performance.timing.navigationStart

首屏时间

首屏时间是从用户打开页面开始，到页面渲染完的时间

如何计算首屏时间？
在body标签中加入script，在script中写入，window.screen = Date.now()
首屏时间 = screen + performance.timing.navigationStart

根据实际情况计算白屏时间和首屏时间

DOMReady

DOMReady是在构建完DOM树以后就开始执行JS代码，而不是等到渲染完以后才执行

如何实现DOM Ready？

• 写一个定时器
• script标签上写上defer
• FireFox支持DOMContentLoad，但是它兼容性不够