前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。
页面的内容
通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况。
通过 DNS 缓存等机制来减少 DNS 的查询次数。
通过设置缓存策略，对常用不变的资源进行缓存。
使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。
通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。组件路由按需加载。
不管对于CSR或者SSR，都建议配合使用Service worker，来控制资源的调配及骨架屏秒开的体验。
服务器
使用 CDN 服务，来提高用户对于资源请求时的响应速度。
服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。
尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie
CSS 和 JavaScript
把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。
避免使用 @import 标签。
尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。
通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。
资源合并压缩 减少HTTP请求
尽量合并和压缩html css和js文件 借助前端工具 例如 webpack gulp grunt…
开启gzip压缩
图片优化
雪碧图 图片压缩 svg base64
懒加载 / 预加载
懒加载：图片进入可视区域之后请求图片资源 对于电商等图片很多，页面很长的业务场景适用 并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用
预加载：图片等静态资源在使用之前的提前请求 资源使用到时能从缓存中加载，提升用户体验
浏览器存储
localStorage：大小为 5M 左右仅在客户端使用，不和服务端进行通信 浏览器本地缓存方案
indexedDB：用于客户端存储大量结构化数据 为应用创建离线版本
浏览器缓存
强缓存：
expires： 缓存过期时间，用来指定资源到期的时间，是服务器端的绝对时间 告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求
cache-control：max-age = xxx 声明该资源在加载后的xxx秒内都直接使用缓存 使用的是相对时间 即加载文件本机的时间
如果在Cache-Control响应头设置了 “max-age” 或者 “s-max-age” 指令，那么 Expires 头会被忽略。
协商缓存：
触发条件
Cache-Control 的值为 no-cache （不强缓存） max-age 过期了 （强缓存，但总有过期的时候）
- Last-Modified / If-Modified-Since
Last-Modified ——- response header If-Modified-Since ——- request header 缺点：某些服务端不能获取精确的修改时间；文件修改时间改了，但文件内容却没有变
- Etag / If-None-Match
文件内容的 hash 值 etag ——- response header if-none-match ——- request header
CDN 内容分发网络
jsdelivr/PicGo/puppeteer
https://cdn.jsdelivr.net/gh/用户名/图床仓库名 通常情况下，图片大小都是超过 200KB 的，所以网页加载的时候会特别慢，一般我们会对图片进行压缩，这里我推荐 Imagine（点击下载） 支持全平台。
- Imagine 采用的是有损压缩，推荐一个无损压缩的网站：https://tinypng.com/
前端错误监控以及上报
- 前端错误分类：
- 即时运行错误：代码错误
- 资源加载错误
- 对于跨域的代码运行错误会显示 Script error. 对于这种情况我们需要给 script 标签添加 crossorigin 属性，并且服务器添加Access-Control-Allow-Origin
- 即时运行错误捕获 （1）try ….catch （2) window.onerror 或者 window.addEventListener 记住事件捕获阶段获得，不是冒泡阶段
- 资源加载错误 （1）object.onerror，如img.onerror （2）performance.getEntries （getEntries api返回一个资源加载完成数组，假设为img，再查询页面中一共有多少个img，二者的差就是没有加载上的资源） （3）Error事件捕获
- 错误如何上报
- ajax
- image的src上报
1
(new Image()).src = '错误上报的请求地址'
一般来说都是采用image对象的方式上报错误的；使用图片发送get请求，上报信息，由于浏览器对图片有缓存，同样的请求，图片只会发送一次，避免重复上 报。
