# front-end-performance

**Repository Path**: cscao/front-end-performance

## Basic Information

- **Project Name**: front-end-performance
- **Description**: 前端性能优化实践
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-15
- **Last Updated**: 2023-10-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端性能优化实践

# 代码仓库目录

（1）`sour-patch-hugger`文件夹

lighthouse进行前端性能优化代码示例，配合[利用LightHouse进行合理的页面性能优化](https://blog.csdn.net/Zong_0915/article/details/131773108)阅读体验更佳。

（2）`performance-api`文件夹

performance相关Api代码示例

（3）`lighthouse-reports`文件夹

生成Lighthouse报告代码示例

## 前端性能常规解决思路

- **减少体积**：minify/文本压缩/合理的图片尺寸
- **减少http请求次数**：合并js/css/雪碧图/删除重复引入的资源
- **找出非页面加载的关键资源**：按需加载/延迟加载/异步加载/预加载
- **升级到http2.0**：非阻塞，避免排队，浏览器对于相同域名下的资源有并发连接数限制
- **CDN**：缓存、提高并发连接数
- **减少主线程的工作**：主线程有很多工作要做，解析和执行HTML、CSS、javascript，渲染页面，尽量避免过重的任务

## 主要问题

offline主要有两种类型的站点，java站点和node.js站点。

- **java站点**：1、依赖的静态资源数量多；2、走的http1.1的协议，资源加载时排队现象严重；3、没有走CDN缓存。

- **node.js站点**：1、资源体积太大；2、没有按需加载。

结合常规解决思路以及主要问题我们调研发现，对于java站点和Node.js站点，都可以：

- 将静态资源或合并或拆包、minify，使用h2、CDN等服务。

- **使用Lighthouse工具**：使用[**LightHouse**](https://github.com/GoogleChrome/lighthouse)可以发现页面存在的性能问题并得到相应的优化建议。

- **页面性能监控埋点**，并开发报表，形成了**监控->解决问题**的闭环。

## 主要工具介绍

### **LightHouse**

**[Lighthouse](https://github.com/GoogleChrome/lighthouse)**是一个由Google开发的开源工具，用于评估Web应用程序的质量和性能。它可以对Web应用程序进行全面的自动化测试，包括性能、可访问性、最佳实践、SEO等方面的评估，并提供详细的报告和建议，帮助开发者改进Web应用程序的质量和性能。

![](lighthouse-architecture.png)



## js端网页性能数据采集原理

目前高版本浏览器提供的获取网页性能API：[Navigation Timing](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/Navigation_timing)，可以得到以下数据：

<img src="navigation_timing.png" style="zoom:150%;" />

**关键事件**

| 名词 | 全称                   | 解释                                                         | 分类       |
| :--- | ---------------------- | :----------------------------------------------------------- | ---------- |
| FP   | firstPaint             | 首次绘制，通常说的白屏时间。                                 | 性能、渲染 |
| FCP  | firstContentfulPaint   | 首次内容绘制，通常说的首屏时间。DOM内容可以是文本、图像（包括背景图像）、<svg>元素或非白色的 <canvas> 元素，不包括input、仅含有背景色的div等。 | 性能、渲染 |
| LCP  | largestContentfulPaint | 最大内容绘制，可视区域内可见的最大图像或文本块完成渲染的相对时间。 | 性能、渲染 |
| DCL  | domContentLoaded       | 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发并执行完成。无需等待样式表、图像和子框架的完全加载。 | 性能、加载 |
| L    | loaded                 | 页面的load事件，页面依赖的外部样式表、图片等资源完全加载，OnLoad事件触发并执行完成。（不包括延迟加载的图片） | 性能、加载 |
| TTI  | timeToInteractive      | 完全可交互时间<br />1、从 FCP 时间开始，向前搜索一个不小于 5s 的静默窗口期。（静默窗口期定义：窗口所对应的时间内没有 Long Task，且进行中的网络请求数不超过 2 个）<br/>2、找到静默窗口期后，从静默窗口期向后搜索到最近的一个 Long Task，Long Task 的结束时间即为 TTI。<br/>3、如果一直找到 FCP 时刻仍然没有找到 Long Task，以 FCP 时间作为 TTI。<br/>[计算说明](https://image-static.segmentfault.com/729/863/729863341-ebf004064e29f144_fix732) | 体验       |

**计算公式**

```js
// FP
const fp = performance.getEntries('paint').filter(entry => entry.name == 'first-paint')[0].startTime;
// FCP
const fcp = performance.getEntries('paint').filter(entry => entry.name == 'first-contentful-paint')[0].startTime;

const navigation = performance.getEntriesByType('navigation')[0];
// DCL
const dcl = navigation.domContentLoadedEventEnd - navigation.fetchStart;
// L
const l = performance.now() - navigation.fetchStart;
// LCP
new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        console.log('LCP candidate:', entry.startTime + entry.duration);
    }
}).observe({ type: 'largest-contentful-paint', buffered: true });
// long task
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log('TTI ≈ Long task: ', entry.startTime + entry.duration);
        // TBT无法准确估算
        // console.log('TBT ≈ Long task - FCP: ', entry.startTime - fcp);
    }
}).observe({ entryTypes: ['longtask'], buffered: true });

console.log('FP: ', fp);
console.log('FCP: ', fcp);
console.log('DCL: ', dcl);
console.log('L: ', l);
```



## 参考文档

（1）[利用LightHouse进行合理的页面性能优化](https://blog.csdn.net/Zong_0915/article/details/131773108)
（2）[前端性能监控和性能指标计算方式](https://blog.csdn.net/Zong_0915/article/details/131957963)
（3）[Umi拆包优化](https://blog.csdn.net/Zong_0915/article/details/131247138)

**LightHouse**：https://github.com/GoogleChrome/lighthouse

**Perfomance**：

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/Navigation_timing

https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings

https://segmentfault.com/a/1190000043990314

https://blog.csdn.net/doomliu/article/details/124771351

https://zhuanlan.zhihu.com/p/403720335

**TTI**：https://image-static.segmentfault.com/729/863/729863341-ebf004064e29f144_fix732

**Webpack**：https://webpack.docschina.org/concepts/

**Pupperteer**：https://github.com/puppeteer/puppeteer