浏览器发送HTTP请求
减少请求次数
资源合并

使用打包工具

使用webpack等工具，对js和css资源进行打包，避免js或css文件过多。

但也要考虑打包文件过大的问题，需要再这之间进行综合考虑。

在SPA中常用的实践是，webpack提取出的公用文件先加载，然后路由相关的文件按需加载。

精灵图

多个小图合并后的图片。

使用的时候使用background-position进行定位使用。

缓存

HTTP Cache

强缓存

强缓存的特定是不需要询问服务器，它通过expires和cache-control来实现。cache-control的优先级高于expires，它们都用来表示过期时间，expires是存储时间戳，cache-control使用max-age来表示相对时间。

cache-control 的no-cache不询问浏览器，直接请求服务器（进行协商缓存）。 而no-store则不是不使用任何缓存策略。 s-maxage只在代理服务器中生效。

如果资源没有过期，则会直接使用该资源。

协商缓存

协商缓存是请求服务器后，服务器来判断是返回新的资源，还是告诉浏览器使用旧的资源。

服务器每次返回资源会带有Last-Modified时间戳，每次服务器请求带上If-Modified-Since的时间戳，由服务器来判断资源修改时间是否与该时间一致。

last-modified有个问题是，虽然服务器文件修改时间变了，但是文件内容并没有真正变化

所有加入了ETag，是由文件内容计算出来的唯一标识。请求的时候会以If-None-Match带上该值，来由服务器判断

Service Worker Cache
Memory Cache & Disk Cache
他们是配合http缓存的。 memory cache命中最快，但是它周期较短，base64的图片，较小的js和css能够有较大几率被写进内存，这没有确定的定论。 其他较大的js、css和图片等会被直接写进硬盘，进行缓存。

存储

cookie
cookie最大为4k，通常用来存储一些用户登录状态，每次请求，浏览器都会带上相同域名下的cookie
WebStrotage

webStorage分为两种，sessionStorage和localStorage，它们的大小在5-10M之间。
都是以键值对的方式进行存储的。
sessionStorage与localStorage的不同在于生命周期的不同，sessionStorage在tab关闭后，就不再存在了，而localStorage的永久存储，除非主动删除
indexDB

浏览器端的“数据库”
缩小请求体积
资源压缩

Gzip

传输的时候可以在服务器端开启gzip压缩，可以有效减少传输文件的大小，可以在响应头content-encoding: gzip中看到。
代码压缩

使用一些代码压缩工具，删除掉无用的注释、空行和缩减名称等操作来减少文件体积。
图片压缩

图片是网页上占用很多流量的一种资源。如果在图片损失一些颜色和像素的情况下并不会对用户体验有太大影响，那么就应该对图片进行压缩。

同时可以对图片做一些裁切和缩小等操作，来减小图片的体积。

图片选用正确的格式

PNG
无损格式，压缩率一般，支持透明背景，常用于透明图片或者Icon等。
JPG
有损格式，压缩率较好，常用于复杂的大图，不支持透明背景。
SVG
矢量图形，可编程。在各分辨率下不失真，但是渲染复杂图形较消耗性能。常用于简单图形。
WEBP
无损格式，相较于PNG和JPG来说，压缩率更好，同时支持透明背景。唯一的缺点是兼容性不好。可用于兼容性好的浏览器，用JPG和PNG做回退机制。