美文网首页
首屏性能优化

首屏性能优化

作者: pengji | 来源:发表于2018-09-18 14:23 被阅读0次

performance API

前端打点

performance.timing 需记录时间:

Performance.timing.navigationStart: 开始导航到当前页面的时间,即在地址栏输入地址后按下回车时的时间

performance.timing.fetchStart: 开始通过HTTP GET取得页面的时间

DNS/ Lookupfordomain

domainLookupStart: 开始査询当前页面DNS的时间,如果使用了本地缓存或持久连接,则与fetchStart值相等
domainLookupEnd: 査询当前页面DNS结束的时间,如果使用了本地缓存或持久连接,则与fetchStart值相等

CONNECT、SSL

connectStart: 浏览器尝试连接服务器的时间
secureConnectionStart: 浏览器尝试以SSL方式连接服务器的时间。不使用SSL方式连接时,这个属性的值为0
connectEnd: 浏览器成功连接到服务器的时间

TTFB

requestStart: 浏览器开始请求页面的时间
responseStart: 浏览器接收到页面第一字节的时间

*responseEnd:浏览器接收到页面所有内容的时间

https://www.cnblogs.com/xiaohuochai/p/6523397.html
http://www.alloyteam.com/2012/11/performance-api-monitoring-page-performance/

https://tech.meituan.com/WebViewPerf.html?utm_source=tool.lu


后续跟进

相关文章

  • 前端性能优化 - 首屏渲染优化实现及其必要性

    前端性能优化,不得不提的就是这个首屏渲染优化 首屏渲染优化 其实更具体点,应该是:首次加载首屏渲染优化,原因是某些...

  • 首屏性能优化

    performance API 前端打点 performance.timing 需记录时间: Performanc...

  • 首屏性能优化

    1 前言 首屏的几个时间概念1.TTFB:time for First Byte 首字节时间2.FP:First ...

  • Cocos Creator 微信小游戏平台启动与包体优化(首屏渲

    0.小游戏平台与启动加载/首屏渲染 如果不了解首屏渲染是什么,以下是官方文档和一篇优化帖子: 微信官方性能优化指南...

  • React首屏性能优化

    1、CommonsChunkPlugin多页面分离资源引用,按需引用JS和css 2、new BundleAnal...

  • 网络性能优化实战

    网络性能优化实战 首屏一秒渲染原则 对于APP里面的H5页面首屏渲染时间不能超过1秒,首屏不要加载太多资源。Goo...

  • 移动web相关(二)

    首屏优化 前端性能 我们所说的前端性能一般包括:加载性能;渲染速度;用户交互响应速度;动画流畅性;DOM操作无闪动...

  • iOS 性能优化二

    主要讲解界面卡顿原因/优化方案/离屏渲染 iOS 性能优化一iOS 性能优化二iOS 性能优化三 1. 开发中遇到...

  • vue 首屏页面性能优化

    1、vue 开启文件大小分析 1.1 安装 1.2 vue.config.js 配置 1.3 运行命令 访问 ht...

  • react native 性能优化 总结

    rn性能优化 结合网上资料总结如下 1、首屏渲染问题。采用JS Bundle拆包解决。就是主体框架react单独打...

网友评论

      本文标题:首屏性能优化

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