Karam
Articles61
Tags43
Categories13
【前端优化】白屏时间,首屏时间计算,dom ready

【前端优化】白屏时间,首屏时间计算,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,但是它兼容性不够