网页加载首先我们要看一下我们的网页加载中间是什么进程。那些事情很费时间。比如我们访问github:Queued,Queueing:如果是HTTP/1.1，就会加上队头阻塞，浏览器最多可以为每个域名打开6个并发连接。停滞：浏览器必须预先分配资源并安排连接。DNSLookup：DNS解析域名。初始连接，SSL：与服务器建立连接，TCP握手，当然如果你是https，还有TLS握手。请求已发送：服务器发送数据。TTFB：等待返回数据，网络传输，即第一个字节响应时间。内容下载：接收数据。从图中可以看出，从与服务器建立连接到接收数据进行前端训练，需要花费大量的时间。当然也有DNS解析，不过这里有本地缓存??，基本没时间。gzip-减少加载量首先我们可以通过gzip压缩我们的js和css：vue.config.js:enablegzipinnginx:servermodule:这里简单说明一下，gzip_static会自动找到对应的file.gz文件，这个与是否启用gzip和gzip_types等无关，可以理解为先返回.gz文件。gzip的开启是为了实时压缩请求的文件，会消耗CPU。比如上面请求的文件Content-Length大于gzip_min_length，就会压缩返回。综上所述，如果打包后有.gz文件，只需要开启gzip_static即可。如果你不必启用gzip实时压缩，但我建议使用前者。另外，gzip适用于文本类型，如果用在图片上会适得其反。,所以请适当地设置gzip_types。如果想查看gzip是否开启成功，可以查看返回的headerContent-Encoding:gzip，查看文件大小。这里可以看到我们的原始文件是124kb，返回的gzip文件是44kb。压缩效率还是挺高的。:缓存控制——没有请求是最好的请求，与浏览器在服务器上的缓存进行交互。它更详细。如果您想了解更多，请阅读其他人整理的文章。我这里只说配置。:NegotiationCacheLast-Modified我们的单页入口文件是index.html，它决定了我们要加载的js和css，所以我们对html文件设置协商缓存Cache-Controlno-cache，当我们加载它的时候第一次的http状态码是200，服务器会返回一个Last-Modified来表示文件的最后修改时间。再次刷新时，浏览器会通过If-Modified-Since将修改时间发送给服务器，如果没有变化（Etag也会被修正）验证），那么服务器会返回一个304状态码，说我的文件没变，直接使用缓存即可。EtagHTTP协议解释Etag是请求变量的实体标签。你可以理解为一个id。当文件改变时，id也会改变。这类似于Last-Modified。服务器会返回一个Etag，浏览器下次再去请求。带上If-None-Match比较返回。有些服务器的Etag计算方式不一样，做分布式的时候可能会出问题。如果文件没有改变，缓存就不会去。当然，你可以关闭它，只使用Last-Modified。强缓存当我们的单页应用打包的时候，webpack等工具会根据文件的变化生成相应的js，也就是说如果文件不变，js的hash值是不会改变的，所以我们在加载的时候可以使用强缓存js等文件，让浏览器不请求缓存时间类，直接从缓存中取值。比如上面我们设置expires（Cache-Control也行，这个优先级更高）为30天，那么浏览器访问我们同样缓存的js和css（缓存时间）时，会直接从缓存中取（缓存中的200）无需请求我们的服务器。注：该方法是基于以上打包生成hash。如果生成1.js、2.js等，那么你修改1.js中的类内容，打包出来的还是1.js。那么浏览器还是会从缓存中取出，不会再去请求了。也就是说，要使用这种方式，需要保证修改文件包后修改的hash值需要改变。强制刷新强缓存如果用的好，会有飞的感觉，但是如果用错了，就会一直跑到浏览器缓存中去。这个怎么清除，我们常用的方法是Ctrl+F5或者在浏览器控制台上。禁用缓存已选中。其实这是在请求文件的时候自动加一个headerCache-Control:no-cache。也就是说，如果我不想缓存，浏览器会老老实实地向服务器发送请求。长连接——减少握手次数。TCP握手和TLS握手还是比较耗时的。比如之前http1.1之前的连接都要经过TCP三次握手，超级耗时。好在1.1默认使用长连接，可以减少Handshake的开销，但是如果你上传一个大文件，你会发现过一定时间就会断开。这是因为Nginx默认的长连接时间是75s。可以适当延长这个时间来减少握手次数（keepalive_requests可以限制keepalive请求的最大次数）。至于上传大文件，可以选择分片上传，这里就不介绍了。server:HTTP/2——更安全的HTTP，更快的HTTPS现在很多网站都启用了HTTP/2。HTTP/2的最大优点之一是它与HTTP/1完全兼容。HTTP/2协议本身并不是要求启用SSL，但是浏览器要求必须启用SSL才能使用HTTP/2。头部压缩、虚拟“流”传输、多路复用等技术可以充分利用带宽，减少延迟，从而大大改善上网体验。开启Nginx还是挺简单的：HSTS-Reduce302重定向现在大部分网站都是https，但是有一个问题就是用户在输入url的时候一般不会主动输入https，还是使用80端口，我们一般在80端口使用Rewrite:但是这种重定向增加了网络开销，多了一个请求。我想下次访问直接访问https怎么处理？我们可以使用HSTS，80端口不变，增加443端口的服务器：这相当于告诉浏览器：我的网站必须严格使用HTTPS协议，在max-age时间内不允许HTTP，nexttime可以直接使用HTTPS访问，那么浏览器只会在第一次访问时重定向80端口，之后访问将直接HTTPS（如果指定了includeSubDomains，那么该规则也适用于网站的所有子域）。SessionTicket-https会话复用我们知道在https通信过程中，SSL握手会消耗大量时间，使用非对称加密来保护会话密钥的生成。实际上传输的是通过对称加密的通信传输。那么我们每次刷新都要进行SSL握手，太费时间了。由于双方都获得了会话密钥，因此仅使用此密钥进行通信是不够的。这就是会话重用。服务器加密密钥以生成会话票证并将其发送给客户端。请求关闭后，如果客户端发起后续连接（在超时时间内），则客户端下次与服务器建立SSL连接时，会向服务器发送会话票证，服务器解锁会话票据并取出会话密钥进行加密通信。原作者：旭鑫
