学习首屏加载问题

分析加载问题：

1. FP（First Paint 首次渲染）

2.FCP（  首次内容渲染）

3.FMP（首次有效渲染）

4.LCP(Largest contentful  paint)最大内容渲染   加载最大内容呈现时间

5. INP

6. TTI

7. TBT

8. CLS

9.TTFB

怎么计算首屏加载时间：

-navigationStart: 页面导航开始的时间戳（****重要）

-unloadEventStart:卸载前一个页面的事件开始时间

-unloadEventEnd : 卸载前一个页面的事件结束时间

-redirectStart:  第一个重定向开始时间

-redirectEnd: 最后一个重定向结束的时间

-fetchStart: 浏览器开始获取文档的时间

-domainLookupStart: DNS查询开始的时间

-domainLookupEnd: DNS 查询结束时间

-connectStart: TCP链接开始时间

-connectEnd: TCP链接结束时间

-secureConnectionStart:安全链接开始时间（仅https有）

-requestStart: 浏览器向服务发送请求时间

-responseStart: 浏览器接受第一个字节时间

-responseEnd: 浏览器从服务器接受最后一个字节时间

-domLoading: 解析器开始解析DOM时间

-domInteractive:DOM解析完成，但资源（如图片，样式表）可能仍在加载的时间

-domContentLoadedEventStart:DOMContentLoaded事件开始时间

-domContentLoadedEventEnd: DOMContentLoaded事件结束时间

-domComplete: DOM和所有子资源都已完全加载时间***重要

-loadEventStart:load事件开始的时间

-loadEventEnd:load事件结束时间

计算性能时间：性能指标,首屏加载时间

window.onload = function(){

console.log(performance.timing.domComplete - performance.timing.navigationStart)



}

新的性能首屏加载时间检测字段=》方式：

PerformanceObserver() - Web API | MDN

window.onload = function(){


const obeserver = new performanceObserver((list)=>{
list.getEntries().forEach(entry=>{
    console.log(entry.domComplete)

})


})
observer.observe({entryTypes: ['navigation']})
}

背景：

H5页面移动端优化：

提出解决方案：

组件优化：异步组件（defineAsyncComponent）

图片优化：减少大的图片转化为base64,,可以用网络图片，用占位图先，

骨架屏：在根目录放置，会显示骨架屏样式，再被替换