减少 HTTP 请求
始终确保所请求的每个文件对网站或应用程序至关重要，尽可能减少http请求。
使用 HTTP2
HTTP2 四个新特性：
- 多路复用，无需多个TCP连接，因为其允许在单一的HTTP2连接上发起多重请求，因此可以不用依赖建立多个TCP连接。
- 二进制分帧，将所有要传输的消息采用二进制编码，并且会将信息分割为更小的消息块。
- 头部压缩，用HPACK技术压缩头部，减小报文大小
- 服务端推送，服务端可以在客户端发起请求前发送数据，换句话说，服务端可以对客户端的一个请求发送多个相应，并且资源可以正常缓存。
使用CDN提供静态文件
CDN (全称 Content Delivery Network)，即内容分发网络。
CDN 构建了全国、全球级别的专网，让用户就近访问专网里的边缘节点，降低了传输延迟，实现了网站加速。
通过CDN的负载均衡系统，智能调度边缘节点提供服务，相当于CDN服务的大脑，而缓存系统相当于CDN的心脏，缓存命中直接返回给用户，否则回源。
压缩文件
HTML,CSS,JavaScript文件代码压缩。
图片优化
1.图片压缩
(1)工具压缩:
- tinypng 免费、批量、速度块
- 智图压缩 百度很难搜到官网了，免费、批量、好用
- squoosh 在线图片压缩工具
- compressor 支持 JPG、PNG、SVG、GIF (2)webpack 压缩
可以在 webpack 里面配置 image-webpack-loader 进行图片压缩
2.使用 webp 格式的图片
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
3.图片懒加载
懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种非常好的优化网页性能的方式。
原理：图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 data-src 里面，等当前图片到了可视区域再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载。
4.使用 SVG 应对矢量图场景
在一些需要缩放与高保真的情况，或者用作图标的场景下，使用 SVG 这种矢量图非常不错。有时使用 SVG 格式会比相同的 PNG 或 JPEG 更小。
优点
- 像使用字体一样，设置大小、颜色及其他样式，不失真
- 轻量，易修改
- 有效减少 HTTP 请求次数
减少重绘重排
- 避免使用table布局。
- 尽可能在DOM树的最末端改变class。
- 避免设置多层内联样式。
- 将动画效果应用到position属性为absolute或fixed的元素上，脱离文档流。
- 避免使用CSS表达式（例如：calc()）。
使用事件委托
事件委托是将事件监听器添加到父元素，而不是每个子元素单独设置事件监听器。当触发子元素时，事件会冒泡到父元素，监听器就会触发。这种技术的好处是：
- 内存占用减少，因为只需要一个父元素的事件处理程序，而不必为每个后代都添加事件处理程序。
- 无需从已删除的元素中解绑处理程序，也无需将处理程序绑定到新元素上。
使用 Web Worker
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
降低 CSS 选择器的复杂性
按需加载,使用 tree shaking 技术减少 js 大小
通过构建工具分析 JavaScript 代码并移除生产环境中用不到的 js 模块或方法
使用 code splitting 分包加载 js
通过分包加载，减少首次加载所需时间
启用GZIP压缩
使用压缩方法（如Gzip或Brotli）来减小JavaScript文件的大小。使用较小尺寸的文件，用户可以更快地下载资源，从而提高性能。
减少Cookie 大小
cookie存在于HTTP头中，在Web服务器和浏览器之间交换。保持cookie的大小尽可能低是非常重要的，以尽量减少对用户响应时间的影响。
正确设置HTTP缓存标头
合理设置HTTP缓存标头来减少http请求次数。
防抖节流优化高频事件
防抖节流本质上是优化高频率执行代码的一种手段
如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能
为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（防抖）和debounce（节流）的方式来减少调用频率
定义
- 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
- 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
服务端渲染
渲染过程在服务器端完成，最终的渲染结果 HTML 页面通过 HTTP 协议发送给客户端，又被认为是‘同构'或‘通用'，如果你的项目有大量的detail页面，相互特别频繁，建议选择服务端渲染。
服务端渲染(SSR)除了SEO还有很多时候用作首屏优化，加快首屏速度，提高用户体验。但是对服务器有要求，网络传输数据量大，占用部分服务器运算资源。
Vue的Nuxt.js和React的next.js都是服务端渲染的方法。
移除生产环境的控制台打印
线上项目自然不应该被看到控制台的打印日志,所以我们需要将 console.log 都去除掉。
可通过配置terser-webpack-plugin实现，仅需在configureWebpack中设置terser插件的drop_console为true即可。
