1. 为什么要做性能优化？
因为页面加载慢，体验糟糕；用户流失，利益的损失。
2. 性能优化主要做什么？
利用一切手段提升页面打开速度
减少请求，加快渲染，减少等待
3. 如何建立性能优化文化？
性能监控与可视化
督促与授权
4. 定义合理的性能指标
白屏时间
首屏时间
页面可以交互时间
dom content loaded 时间
页面onload时间
Performance接口指标时间
5. 设定合适的性能目标
首屏秒开
图片< 50kb
关键文件大小 < 170kb
页面交互动作 < 100ms
弱网环境下3秒打开
6. 了解项目的性能现状
LightHouse
WebPagetest
Performance
Chrome Devtools
自己埋点
强、弱网用户比
7.开发时性能优化
随着项目体积越来越大，项目的打包编译速度越来越慢，严重影响开发体验。
a. 多线程支持： 开启多线程，加速项目的打包，HappyPack解决node单线程
b. Cache: 缓存耗时编译结果，cache-loader 缓存耗时的loader结果
c. Externals: 项目依赖公共库，外链方式引入，减少打包编译耗时
d. 模块缓存： hard-source-webpack-plugin
8.下载时性能优化
8-1. 静态资源优化
CDN 优化： 用户通过访问最近的CDN节点，获取资源，从而减少网络传输距离，提升加载速度。比如，用户访问最近的CDN节点；CDN节点未命中，就溯源源站；源站返回内容，CDN节点缓存；并响应用户请求；如果同一节点再次访问，则直接返回缓存；CDN节点会定期溯源。
图片优化： 尽量不使用图片。选择图片时，谨慎选择图片格式。JPEG.GIF,PNG,APNG,webP，SVG,Base64。 选择合适的图片尺寸，可以大大减少图片的体积。对图片进行压缩。
文件压缩合并： 使用webpack中commonChunkPlugin插件，抽离合并公共文件。通过tree-shaking删除冗余的内容；通过code-spliting 将文件切割成多个文件，根据页面、路由按需加载。
8-2.网络传输优化
a.DNS Prefetch： 提前解析需要的域名，并缓存起来。
一次DNS 解析需要耗费20-120ms
<link rel="dns-prefetch" href=“www.baidu.com”></link>
b.避免重定向:重定向需要耗费 20-100ms
c.避免空链接：<img src="">影响页面重排，阻止页面渲染
d.多域名请求：针对http1.0 最大利用浏览器的并行下载能力，比如Chrome最大并行域名6个
8-3.缓存优化
8-3-1： http缓存
强缓存：
expires： 固定的过期时间，但受本地时间的影响；
cache-control： 相对时间；
协商缓存：
last-modified： 表明资源的最后修改时间，但只能精准到秒
Etag： 文件内容MD5值，分布式环境不适用
8-3-2： 本地缓存
cookie： 减少cookie大小
localStorage：初始数据存储；组件代码存储；
APP 缓存：APP 离线包
8-3-3： service-worker缓存
service-worker ： 客户端与服务端的代理人角色
9.运行时性能优化
9-1 首屏功能优化
9-1-1 服务端渲染与预渲染：
在打包解析js之前，一直白屏，所以需要优化。
服务端渲染（SSR）： 将html页面转成字符串吐给前端浏览器，动态生成，秒开首页。
预渲染： 纯静态页面。
9-1-2 骨架屏：
什么是骨架屏？
一个页面的空白版本，告诉用户页面正在渐进式的加载过程中。
为什么需要骨架屏？
Js框架加载慢，骨架屏渐进式渲染页面，用户的感知速度更快。
如何实现骨架屏？
通过puppeteer，在服务端操控headless Chrome，打开开发中需要生成骨架屏的页面，隐藏图片文字，覆盖样式，提取骨架屏HTML与CSS。
9-1-3 懒加载和预加载：
懒加载： 进入可视区域的内容才做加载处理，非可视区域的内容不加载。
预加载： 对于未来可能会用到的内容在后台默默加载，加快未来页面展现时间。
9-1-4 其他：
preload:内存中，不阻塞渲染，不执行。
prefetch:硬盘中，空闲下载，当前页不用。
defer: 所有元素解析完成后顺序执行。
async: 顺序不固定，加载独立代码。
9-2 页面动态渲染
页面按需加载：动态import，页面按需加载资源。
组件按需加载：页面组件级按需加载；<component>元素加特殊的 is 属性动态加载。
避免重绘、回流：动画元素脱离文档流，transform代替常规宽、高设置，GPU动画加速
CSS前、js后： CSS页面前放，JS页面后放
虚拟列表： 缓存上下偏移量，计算可视区域元素，动态渲染可视列表。
防抖，节流。
9-3 交互优化
tap代替click点击，300ms延迟
keep-alive
转场动效
加载loading
