项目介绍

项目以微前端的方式，以组件为最小粒度开发，通过落地页加载异步组件的方式，将组件动态的组装成运营页面。
落地页核心代码结构如下，通过可视化管理后台，将组件进行自由拼装，保存节点的数据结构，落地页循环递归
加载。

埋点需求设计

1、页面白屏时间

统计方案：
1、performance.timing
在首页组件触发created生命周期的时候

 Date.now() - performance.timing.fetchStart
复制代码

即为白屏时间。

缺点： performance.timing仅适用于高版本浏览器

2、服务器返回页面的时候，返回响应的时间戳挂在window上： window[“_backendRequestFirstTime”]

 Date.now() - window["_backendRequestFirstTime"]
复制代码

缺点：无法统计首次dns链接时间

2、页面首屏时间

页面的首屏一般多为图片，或者通过接口加载的异步资源，当然也有其他情况

• 页面存在 iframe 的情况下也需要判断加载时间
• 异步渲染的情况下应在异步获取数据插入之后再计算首屏
• css 重要背景图片可以通过 JS 请求图片 url 来统计(浏览器不会重复加载)
• 没有图片则以统计 JS 执行时间为首屏，即认为文字出现时间

针对以上情况：
首屏取落地页数据结构里排在最前面的两个组件，判断组件类型
如果为图片、iframe等情况：监听图片、iframe的onload事件

如果需要加载异步数据：约定好规范，在data里定义asyncData:null,通过监听asyncData值的变化

3、用户可操作时间

用户最早可操作时间（模块）：第一个加载完的组件

用户最晚可操作时间（模块）：最后一个加载完的组件

4、总下载时间

window.performance.timing.domContentLoadedEventEnd - window.performance.timing.fetchStart
复制代码

对应控制台的DOMConentLoaded,埋点触发时机 为window.onload

5、各个组件加载时间

方案同首屏，需要区分组件类型，然后在合适的时机里去进行计算。

性能优化

1、优化FCP

移除、缩小阻塞页面渲染的资源

2、优化LCP

提前建立第三方连接，减少dns时间

<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">
复制代码

3、通过谷歌代码覆盖分析面板，查看覆盖率低的文件，进行整合或移除，按需加载、减少http请求

4、图片处理

压缩图片、图片响应式、转换成新格式（webp）

5、个性化加载方案

针对单个组件，给组件添加权重值，针对权重大的组件优先展示