web-optimization

前端性能优化有很多方面，细节很多，最近面试也经常考到这个问题，现整理如下，以便日后查阅。

Http层面的优化：

1. 减少HTTP请求次数， Http请求是很耗时的操作，減少HTTP请求次数是提高网站性能的一个重要手段。
2. 使用缓存，缓存可以减少服务器的压力，提高网站的访问速度。
3. 使用CDN，CDN是内容分发网络，可以加速网站的访问速度。
4. 使用Gzip压缩，Gzip是一种压缩算法，可以减小文件的体积，提高网站的访问速度。
5. 使用HTTP2，HTTP2是HTTP协议的新版本，可以提高网站的访问速度。

JS/css/html层面的优化：

1. 使用lazy loading，对于首页不需要立即展示的组件，可以采用延迟加载。
2. 代码压缩，代码压缩是一种优化技术，可以减小文件的体积，提高网站的访问速度。现在的打包工具比如webpack都自动开启了代码压缩。
3. Reduce Bundle size，减小文件的体积，提高网站的访问速度。
   1. 使用Tree Shaking，Tree Shaking是一种优化技术，可以减小文件的体积，提高网站的访问速度。
   2. 使用Code Splitting，Code Splitting是一种优化技术，可以减小文件的体积，提高网站的访问速度。
4. 复杂的客户端计算可以用web worker来处理，web worker的好处是可以在后台线程中运行脚本，不会影响主线程的运行。不影响浏览器的渲染。
5. CSS优化
   1. CSS很小的话，可以采用内联的方式插入到html中，这样就不必额外下载一个css文件。
   2. CSS很大的话，则要独立出一个文件来，这样可以利用缓存机制，注意index.html一般是不缓存的。

图片优化：

1. 使用webp格式，webp是一种新的图片格式，可以减小文件的体积，提高网站的访问速度。
2. 使用图片懒加载，图片懒加载是一种优化技术，可以减小文件的体积，提高网站的访问速度。
3. 使用图片压缩，图片压缩是一种优化技术，可以减小文件的体积，提高网站的访问速度。
4. 雪碧图，雪碧图是一种优化技术，可以减小文件的体积，提高网站的访问速度。