美文网首页
HTML首屏和白屏时间如何计算

HTML首屏和白屏时间如何计算

作者: 三左君 | 来源:发表于2020-06-02 17:42 被阅读0次

performance

首屏

手机屏幕不滚动的情况下,从用户打开网站开始到渲染完成的时间。

这里我们要用的是window.performance.timing属性

属性 含义
navigationStart 准备加载页面的起始时间
domainLookupStart 开始进行dns查询的时间
domainLookupEnd dns查询结束的时间
connectStart TCP连接开始
connectEnd TCP连接完成
domInteractive 解析dom树开始
domComplete 解析dom树结束
loadEventEnd onload事件结束的时间
fetchStart 开始检查缓存或开始获取资源的时间
domLoading loading的时间 (这个时候还木有开始解析文档)

页面加载完成是没API的,那么我们就需要在首屏做标记,比如加载完哪个图片,或者加载到哪个JS就可以标记首屏加载结束。

首屏 = 标记时间 - performance.timing.navigationStart

白屏时间

白屏就是从用户打开网站到显示body的时间,我们可以在body标签onload的时候调用方法,获取当前时间time

白屏时间 = time - performance.timing.navigationStart

相关文章

  • HTML首屏和白屏时间如何计算

    performance 首屏 手机屏幕不滚动的情况下,从用户打开网站开始到渲染完成的时间。 这里我们要用的是win...

  • 如何计算白屏与首屏时间?

    什么是白屏与首屏时间? 白屏时间是指浏览器从响应用户输入网址地址,到浏览器开始显示内容的时间。 白屏时间 = 地址...

  • 网页性能优化

    一、网页加载流程图 二、白屏与首屏 2.1 白屏时间 白屏时间:页面开始展示的时间点 - 开始请求的时间点 开始请...

  • 浅析前端异常与性能监测

    浅析前端异常与性能监测 1. 接口加载时间和是否成功监控 2. 页面性能(dns解析等) 白屏时间和首屏时间有争议...

  • 前端白屏时间/首屏时间怎么计算--了解 Resource Tim

    Resource Timing转载: https://developers.google.cn/web/tools...

  • 前端监控系统

    前端的监控主要分为三个方面: 性能监控 白屏时间; 首屏时间; 用户可交互时间; 总下载时间; TCP连接时间;...

  • 单页面 VS 多页面

    单页面与多页面对比图 单页面应用缺点:1.首屏时间慢,SEO差:单页应用的首屏时间慢,首屏时需要请求一次html,...

  • 首屏预渲染方案

    该方案主要是为了解决,前端 spa (单页面应用),首屏渲染慢,白屏时间过长问题。 实现方法 通过 webpack...

  • 【转】前端黑科技:美团网页首帧优化实践

    前端黑科技:美团网页首帧优化实践 等待 HTML 文档返回,此时处于白屏状态。 对 HTML 文档解析完成后进行首...

  • 首屏时间与优化

    在做相关优化的时候,把整理的方案方法总结下。 首屏时间 计算页面的首屏时间可以用到H5的Performanace相...

网友评论

      本文标题:HTML首屏和白屏时间如何计算

      本文链接:https://www.haomeiwen.com/subject/qoouzhtx.html