---
title: "性能优化"
date: 2018-12-29
lastmod: 2020-01-05
weight: 4
type: 
icon: #
description: "性能优化"
# search related keywords
---

- 指标
  - 真实指标
    - First Contentful Paint (FCP)
    - Largest Contentful Paint (LCP)
    - First Input Delay (FID)
    - Cumulative Layout Shift (CLS)
  - 实验室指标
    - Total Blocking Time (TBT)
    - Time to Interactive (TTI)
- 评估工具
  - Chrome DevTools
  - LightHouse
  - PageSpeed Insights
  - WebPageTest
- 优化方案
  - 压缩
    - 代码压缩
    - 文本压缩（gzip、Brotli、Zopfli等）
    - Tree-shaking
    - Code-splitting
  - 图片优化
    - 小图优化（css sprite、iconfont、dataURI、svg）
    - 图片格式选择
    - 压缩（如tinypng）
    - 响应式
  - 加载策略
    - 懒加载
    - DNS预解析、预加载、预渲染
    - 离线化（ServiceWorker、AppCache、离线包等）
    - HTTP缓存
    - 数据缓存（localStorage、sessionStorage）
    - 资源加载（顺序、位置、异步等）
    - 请求合并
    - HTTP2
    - CDN
    - 服务端渲染
  - 执行渲染
    - CSS代码优化（选择器、启用GPU、避免表达式等）
    - JS代码优化及评估
  - 感官体验优化
    - 骨架屏
    - Snapshot
    - Loading