性能优化

• 减少请求数量
• 减小资源大小
• 优化网络连接
• 优化资源加载
• 减少重绘回流
• 使用性能更好的API
• 构建优化

减少请求数量

• 文件合并
• 图片：
  1.雪碧图
  可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台
  2.base64
  将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33%
  3.字体图标代表图片
• 减少重定向
• 使用缓存
  使用catch-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。强缓存过期时，会使用if-modefied-since或if-none-match这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应
• 【不使用CSS @import】
  　　CSS的@import会造成额外的请求

减小资源大小

1. 压缩
   html压缩，css压缩，js压缩，图片压缩
2. webp
   同等画面质量下，体积比jpg、png少了25%以上，而且同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性
3. 开启gzip
   当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%

优化网络连接

1. 使用cdn
   导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度

2. 使用dns预解析
   DNS Prefetch，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度

   
   
   dns预解析

3. 多域名
   　由于在HTTP1.1协议下，chrome每个域名的最大并发数是6个。使用多个域名，可以增加并发数

4. 持久连接
   keep-alive，减少tcp连接

5. 管线化
   在HTTP2协议中，可以开启管道化连接，即单条连接的多路复用，每条连接中并发传输多个资源，这里就不需要添加域名来增加并发数了

优化资源加载

1. 资源加载位置
   css放head中，js放body底部
2. 资源加载时间

• 异步script标签
  　defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似。
  async: 异步加载，加载完成后立即执行
• 模块按需加载
  在SPA等业务逻辑比较复杂的系统中，需要根据路由来加载当前页面需要的业务模块
  webpack 提供了两个类似的技术，优先选择的方式是使用符合 ECMAScript 提案 的 import() 语法。第二种则是使用 webpack 特定的 require.ensure
• 预加载preload、预读取prefetch
  preload让浏览器提前加载指定资源，需要执行时再执行
  prefetch告诉浏览器加载下一页面可能会用到的资源
• 懒加载、预加载
  延迟加载也称为懒加载，延迟加载资源或符合某些条件时才加载某些资源
  预加载是提前加载用户所需的资源，保证良好的用户体验
  懒加载和预加载都是一种错峰操作，在浏览器忙碌的时候不做操作，浏览器空间时，再加载资源，优化了网络性能

减少重绘回流

• 样式设置
  1. 避免使用层级较深的选择器
  2. 避免使用CSS表达式
  3. 给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流
  4. 能够使用CSS实现的效果，尽量使用CSS而不使用JS实现
• DOM操作
  1. 缓存DOM
  2. 批量操作DOM
     由于DOM操作比较耗时，且可能会造成回流，因此要避免频繁操作DOM，可以批量操作DOM，先用字符串拼接完毕，再用innerHTML更新DOM
  3. DOM元素离线更新
     　对DOM进行相关操作时，例、appendChild等都可以使用Document Fragment对象进行离线操作，带元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作

4. 事件代理
5. 防抖、节流

性能更好的API

• 使用requestAnimationFrame来替代setTimeout和setInterval
• 使用web worker
  客户端javascript一个基本的特性是单线程：比如，浏览器无法同时运行两个事件处理程序，它也无法在一个事件处理程序运行的时候触发一个计时器。Web Worker是HTML5提供的一个javascript多线程解决方案，可以将一些大计算量的代码交由web Worker运行，从而避免阻塞用户界面，在执行复杂计算和数据处理时，这个API非常有用。

webpack优化

• 打包公共代码
• 动态导入和按需加载
• tree shaking