在做相关优化的时候，把整理的方案方法总结下。
首屏时间
计算页面的首屏时间可以用到H5的Performanace相关API；
performance基本结构
performance_field.png
performance对应的时间点
performance.jpg
首屏时间可以理解为白屏时间+第一次渲染的用时
//这里取的首屏结束的时间点,我们需要的首屏时间段：应该是fpEntry.startTime
function firstPaintTime() {
if (window.PerformancePaintTiming) {
const fpEntry = performance.getEntriesByType('paint')[0];
return (fpEntry.startTime + performance.timeOrigin) / 1000;
}
}
Chrome Performance页面性能分析
在利用performance的api外，也可以利用chrome 自带的performance性能分析页面
具体参考这里
优化
可以根据performance对于的各个时间点进行优化
重定向阶段：
遇到需要重定向跳转代码的代码，可以把重定向之后的地址直接写到前端的html或JS中，可以减少客户端与服务端的通信过程，节省重定向耗时。
DNS阶段:
1.减少DNS，将资源尽量放在同一域名下
2.DNS预获取，chrome 会自动把当前页面的所有带href的标签的dns都prefetch一遍；对于一些其他没有出现在href中的域名的情况，如静态资源、跳转的地址等等，可以进行手动DNS预获取
<link rel="dns-prefetch" href="" />
HTTP阶段：
CDN优化，减少响应时间；
本地缓存，减少请求；
使用HTTP2.0，增加请求并发；若是使用HTTP1.1，可以使用域名分片的方式来增加并发；
DOM解析渲染阶段:
服务端渲染；
将script脚本加载置后，因为script执行会阻塞渲染
其他资源：
对于图片等资源，可以通过控制图片大小、懒加载等形式来提升页面加载速度。
对于scpit脚本加载太慢；如果脚本太大，可以优化打包的方式来进行,如拆分包，进行按需加载等，压缩包——gzip压缩等；
网络请求方面：DNS缓存；提升带宽等；
参考
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming
https://www.w3.org/TR/navigation-timing/#sec-window.performance-attribute
https://github.com/w3c/navigation-timing/issues/21
https://developers.google.com/web/updates/2017/12/chrome-loadtimes-deprecated#startloadtime
网友评论