WEB优化方案整合

1.DNS预解析

DNS解析也是需要时间的，通过DNS预解析可以预先获得域名对应的Ip

2 缓存策略的选择

缓存一般分为强缓存和协商缓存。良好的缓存方案可以避免资源的重复加载，提高网页整体的加载速度。
强缓存表示在缓存期间不需要再次请求。一般通过两种响应头实现：
Expires（http1.0）和Cache-Control（http1.1）
原理是通过设置过期时间，来避免在这个时间内对这个资源的再次请求
如果缓存过期了，可以通过协商缓存来解决。
ETag 是协商缓存的一种方式，类似于文件指纹。

选择合适的缓存策略：

1. 对某些不需要的缓存的资源使用Cache-Control： no-store，表示该资源不需要缓存

2. 对于频繁变动的资源，使用Cache-Control： no-cache 配合 Etag
   表示该资源已经被缓存，但是每次都会发送请求询问资源是否更新

3.使用Http 2.0

http2.0引入了多路复用，能让多个请求同时使用一个TCP链接，极大的加快了网页的加载速度

4.预加载、与渲染、懒加载和懒执行。

5.文件优化

图片优化
对于图片的优化有两个思路：

• 减少像素点
• 减少每个像素点能够使用的颜色

-图片加载的优化

• 不用图片，很多基础的修饰类图片其实是可以使用CSS代替
• 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都使用CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片
• 小图使用base64格式
• 将多个图片整合（雪碧图）
• 文件格式的选择

1. 图片的格式有JPEG、PNG、WebP、SVG

2. 对于图标类的图，优先使用svg

3. 对于内容图，优先考虑WebP。因为WebP具有更好的图像数据算法，而且体积小，更拥有肉眼识别无差异的图像质量。尽量不适用PNG8，色位太低。PNG24压缩率低。

4. 小图使用PNG，照片使用JPEG

6.其他文件优化

• CSS 文件放在 head 中
• 服务端开启文件压缩功能
• 将 script 标签放在 body 底部，因为 JS文件执行会阻塞渲染。当然也可以把
  script 标签放在任意位置然后加上 defer ，表示该文件会并行下载，但是会放到
  HTML 解析完成后顺序执行。对于没有任何依赖的 JS 文件可以加上 async ，表示加 载和渲染后续文档元素的过程将和 JS 文件的加载与执行并行无序进行。 执行 JS 代码 过程会卡住渲染，对于需要很多时间计算的代码
• 可以考虑使用Webworker 。 Webworker 可以让我们另开一个线程执行脚本而不影响渲 染。

7.其他

使用webpack优化项目

• 对于 Webpack4 ，打包项目使用production 模式，这样会自动开启代码压缩
• 使用 ES6 模块来开启 tree shaking ，这个技术可以移除没有使用的代码
• 优化图片，对于小图可以使用 base64 的方式写入文件中
• 按照路由拆分代码，实现按需加载
• 给打包出来的文件名添加哈希，实现浏览器缓存文件