掘金小册前端性能优化原理与实践读后总结
webpack性能优化
1.不要让loader做太多事情
2.处理第三方库
3.构建结果体积压缩
a.文件可视化，找出导致体积过大的原因
b.拆分资源（可通过使用await import动态导入文件，这样动态导入的文件会被拆分出来打包）
c.删除冗余代码
d.按需加载
4.webpack Gzip压缩
5.使用happypack,打包文件变成并行打包，可大大提高速度
图片优化
总的来说就是根据图片类型的特点去使用图片
1.jpg图片
特点是有损压缩、高质量压缩、体积小、加载快、不支持透明，适用于呈现色彩丰富的图片，适合用作背景图、轮播图或Banner图的格式
2.png图片
特点是无损压缩、高质量压缩、体积大、支持透明，适用于呈现小的Logo，或者颜色简单且对比强烈的图片或背景图的格式
3.SVG图片
特点是体积小，不失真，兼容性好，可压缩性强，可编程，渲染成本高，学习成本高，最适合带有大型渲染区域的应用程序（地图应用）
4.雪碧图
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。
5.Base64
对图片进行Base64编码，会得到一串字符串，浏览器会直接将这串字符串解码为图片，这样就不用发送http请求了，但是这样的缺点是图片会膨胀，体积会增加，所以它的应用条件是：图片尺寸小、无法用雪碧图、图片更新频率低（不需要我们重复编码和修改文件内容，维护成本较低）
6.webP
集各种格式的优点于一身，缺点就是兼容性不好，所以应用时需要判断浏览器
合理利用浏览器缓存机制
1.MemoryCache，即在内存中的缓存，从优先级上来说，它是浏览器最先尝试去命中的一种缓存。从效率上来说，它是响应速度最快的一种缓存。
2.Services Worker Cache，Service Worker 是一种独立于主线程之外的 Javascript 线程。它脱离于浏览器窗体，因此无法直接访问 DOM。这样独立的个性使得 Service Worker 的“个人行为”无法干扰页面的性能，可利用这一点帮我们实现离线缓存、消息推送和网络代理等功能
3.Http缓存，分为强缓存和协商缓存
http缓存的是指:当Web请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而不是从原始服务器中提取这个文档
强缓存（优先于协商缓存，返回码200）：
利用Expires（http1.0，记录缓存过期时间）和Cache-Control（http1.1，记录缓存过期时间）来控制，Cache-Control优先级高于Expires，Expires 使用的是服务器端的时间，要是客户端时间和服务端不同步，就可能造成浏览器本地的缓存无用或者一直无法过期，Cache-Control使用的是使用的是客户端本地时间的计算，所以不会出现上述情况，Cache-Control优先级高于Expires，
协商缓存（返回码304）：
利用If-None-Match（请求头）/Etag（响应头）和If-Modified-Since（请求头）/Last-Modified（响应头），If-None-Match和Etag记录的是服务器为每个资源生成的唯一的标识字符串，缓存的数据要是改变了，那么这两个数据就会变，这样可判断缓存到底有没有更新，If-Modified-Since和Last-Modified记录的是服务端的文件最后改变的时间，通过判断这个，可以缓存有没有被更新，Last-Modified有一个缺陷就是只能精确到1s，所以对于精确更高的可能不适用，Etag优先级高于Last-Modified，Etag生成过程需要服务器额外付出开销，会影响服务器性能，所以要看情况使用Etag
强缓存与协商缓存更细致的了解，请参考：
彻底弄懂HTTP缓存机制及原理
HTTP缓存是如何实现
4.Push Cache
http2阶段的缓存，应用尚处于萌芽阶段，是缓存的最后一道防线。
浏览器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情况下才会去询问 Push Cache。Push Cache 是一种存在于会话阶段的缓存，当 session 终止时，缓存也随之释放。不同的页面只要共享了同一个 HTTP2 连接，那么它们就可以共享同一个 Push Cache。
合理利用本地存储
1.利用WebStorage
WebStorage提供了一种方式让网站能够把信息存储到本地的计算机上，并在以后需要的时候进行获取。这样一来，当需要用到什么资源时，可以直接在本地存储里获取，而不用发起网络请求等待响应。WebStorage分为localStorage（只支持string类型的存储）与Session Storage（只支持string类型的存储），Session Storage在会话结束消失， localStorage永久有效，手动删除才会消失，Session Storage 和localStorage都遵循同源策略，但是对Session Storage特殊的一定在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享。
2.利用IndexDB
IndexDB运行在浏览器上的非关系型数据库，突破了WebStorage的存储大小限制，支持存储字符串和二进制数据，IndexDB可创建数据库和表，可以被当成一个真正的数据库使用。
使用CDN
CDN全称是内容分发网络，简单的来说，CDN做的事，就是把资源存在离自己最近的服务器里，从而实现就近访问数据，快速获取到需要的数据
CDN 往往被用来存放静态资源(像 JS、CSS、图片等不需要业务服务器进行计算即得的资源),可以将静态资源和主页面置于不同的域名下，避免cookie的携带，这样可以做到优化CDN
CDN的原理请看: 一张图说明CDN网络的原理
使用服务端渲染
服务端渲染，就是当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容。
没有服务器渲染，当浏览器解析html文档解析到