# 性能优化

# DNS

优化域名到 IP 的解析

<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

# 浏览器缓存

强缓存协商缓存 https://yiliangliang.cn/pages/interview/browser/cache.html (opens new window)

# CDN

Content Delivery Network

# HTTP2.0

https://yiliangliang.cn/pages/interview/NetWork/http2.html (opens new window)

# GZIP 压缩

Nginx 和 Webpack 都需要开启 Gzip

# 图片

webP 懒加载 (opens new window) CDN 压缩

# 服务器渲染

ssr

# 打包减少体积

# 压缩静态资源

HTML：html-webpack-plugin
CSS ：css-minimizer-webpack-plugin
JavaScript：terser-webpack-plugi

# 动态导入- VueRouter 路由懒加载

// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

可以根据使用情况，按照页面分到不同的 chunk 中

# Tree Shaking

利用 ESM 的静态分析能力，将 dead code 剔除

# 更多 Webpack 优化 (opens new window)

# 减少 DOM 操作

# 事件代理

# 重绘/重排

怎么理解回流跟重绘？什么场景下会触发 (opens new window)

# 节流/防抖

节流/防抖理解 (opens new window)

# 懒加载预加载

懒加载与预加载 (opens new window)

图片懒加载当图片咋可视区域内的时候，在去请求图片地址 vue 的懒加载指令 (opens new window) 核心：判断一个元素是否在可视区域内 (opens new window) 路由懒加载

预加载当加载的资源内容过于大的时候，可以提前进行一个加载

# 小程序

# 启动性能

体积优化优化代码下载时间
1. 分包
  - 分包减少主包体积
  - 独立分包针对功能独立的模块，单独分包。（可以单独打开，功能相对独立：活动页面）
  - 分包预下载针对首页进去以后，需要频繁交互的模块进行预下载
  - 分包异步化分包之间的代码共用
2. 避免非必要的全局自定义组件和插件
3. 控制代码包内的资源文件
4. 及时清理无用代码和资源
代码注入优化
- 按需注入
- 用时注入
- 减少同步 API 的调用，对使用的 API 进行缓存
- 启动事件中减少复杂计算
首屏渲染优化
1. 使用「按需注入」和「用时注入」
2. 启用「初始渲染缓存」
3. 避免引用未使用的自定义组件
4. 精简首屏数据
5. 提前首屏数据请求
6. 缓存请求数据
7. 骨架屏

# 运行时性能

合理 setSate
渲染性能优化
页面切换优化
资源加载优化
内存优化

# 资源加载检测

利用 performance.getEntries()方法，获取到所有加载成功的资源列表，在 onload 事件中遍历出所有页面资源集合，利用排除法，到所有集合中过滤掉成功的资源列表，即为加载失败的资源。此方法看似合理，也确实能够排查出加载失败的静态资源，但是检查的时机很难掌握，另外，如果遇到异步加载的 js 也就歇菜了。
添加一个 Listener（error）来捕获前端的异常，也是我正在使用的方法，比较靠谱。但是这个方法会监控到很多的 error, 所以我们要从中筛选出静态资源加载报错的 error

# Lighthouse

# performance

# FCP（First Contentful Paint ）首次内容绘制

页面上第一个元素绘制的时间点。

# Speed Index

是一种衡量页面可视区域加载速度的指标

# Total Blocking Time（TBT）

总阻塞时长，指的是 FCP 与 TTI 之间主线程被阻塞的总时长

# Largest Contentful Paint（LCP）

最大内容绘制，指页面上最大的图片或文字绘制的时间点

# Cumulative Layout Shift（CLS）

累积布局偏移，测量的是整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数

参考文章：

前端性能优化体系总结 (opens new window)

← vite