网页加载优化一直是一个很重要的命题，本文主要概述一些网页加载优化的原理，希望对大家有所帮助。
Native端手段
主文档预加载
这种方案适用于网页文章直出型（SSR，Server Side Render服务端渲染）页面，我们可以在合适的时机先将主文档下载到本地，当需要使用时直接使用本地缓存。
需要注意的是，很多页面主文档是不设置缓存时间的，或缓存时间比较短，按照正常缓存过期机制，在使用时可能缓存就已经过期了，所以这里需要特殊处理，再评估缓存过期也不影响使用的情况下，继续使用过期缓存。
模版预加载
模版预加载适用于渐进式加载的页面，页面的主文档只是一个壳，页面打开后通过ajax去拉取正文内容，里面包括一些框架相关的CSS、js等子资源，一般这些子资源都会设置缓存时间，我们可以在合适的时机用后台webview加载网页模版，并在缓存即将过期的某个时间段更新模版，这样我们就能保证用户打开相关页面时，模版都是有效的。
ajax资源预加载
前面有提到，很多渐进式页面是通过ajax方式来加载正文资源，我们如果知道这个ajax的加载机制，我们就可以在合适的时机提前加载ajax资源(可以在网页创建时同步发起ajax请求)，并在网页发起这个ajax请求时将请求拦截，将本地缓存的数据返回给网页。
腾讯一个开源项目https://github.com/Tencent/VasSonic使用的就是类似机制，因为webview创建到webview发起请求中间有一个时间差，根据我的经验，这个时间差大概在200毫秒左右，VasSonic的核心原理就是在创建webview的同时发起网络请求，这样就能比正常请求提前200毫秒，从而达到网页快速加载的目的。
304后置验证
正常情况下当一个本地缓存的资源过期时，网页会向服务端发起一个304验证请求，如果服务端发现这个资源并未更新则会返回304，否则会返回200并将更新之后的资源返回，页面只有当网络请求结束时才能真正拿到这个资源。304请求不仅降低服务端负载，同时也提高了网络请求的速度(因为不需要返回资源文件数据)，但是即便如此，webview还是要等待请求结束之后才能拿到缓存资源。
304后置验证的意思是，只要304请求发起，不管本地缓存是否过期都将缓存先给到webview，同时不阻断该请求，当服务端资源有更新时能拿到更新的资源并缓存到本地，这样webview下次就能拿到新的资源。这样带来的一个问题是，webview拿到的资源可能是一个过期的资源，这个资源是否是合适的，需要根据业务特点做好评估，一般而言其方案带来的影响类似于网页发了一个新版本，而用户晚了一个瞬间才能使用到这个新版本，其实对用户影响并不大。
预连接
预连接的意思是，在用户发起网页请求之前，提前建立好tcp连接，节省网络建连时间，这个时机比较难把握，需要根据业务特点特殊设计，但是有了前面一些手段，这个方案的作用就没那么大了。
中间件机制
一般客户端请求网页时都是直接向第三方网站发起请求，这中间是否可以做一层中转呢？比如我们建一个中间件服务器，客户端请求网页A时先访问我们的服务器B，服务器B再访问网页A，拿到网页数据后再返回给客户端。
这种方案是可行的，并且有它的一些优势。首先，一些站点带宽低，访问本来就慢。另外，对于用户不常访问的站点，当用户发起请求时，通常本地都不会有缓存，相当于整个网页都是全新加载，速度肯定慢。
而如果我们访问自己的中间件，首先我们访问中间件一般速度会比较可靠，另外中间件访问第三方站点时也会使用缓存，这个缓存利用率是非常高的，所以整体访问效率要比客户端直接访问第三方站点要高很多。同时访问中间件还有一个附加好处，可以降低网页劫持(原理后续补充)。
Service Work
Service Work是webapp离线缓存的一个系统化解决方案，是PWA的一部分，原理有上面提到的一些点，但是方案更加通用跟体系化。
Web端手段
资源打包&降size
这个没什么好说的，通常一个网页显示前要发起N个资源请求，这些请求通常是排成一队串行发起（单线程），只有当所有请求结束时，网页才能正常显示，如果请求越多网页显示当然就越慢。资源打包就是将多个资源打包的一个文件，这样就减少了请求的个数，提升显示速度。如果使用webpack等打包工具的话，资源打包这类事情基本上工具都帮我们解决了，当然不排除需要特殊处理的情况(未做过太多前端实践，不算太熟)。
降size就是对资源进行压缩，减少单次请求的时间，比如js压缩，图片使用webp等。
域名收敛
一个网页里面可能包括很多个域名，不同域名间的tcp连接是不能复用的，所以每个请求都需要重新建立tcp请求。对域名进行收敛可以有效减少tcp建立连接次数。收敛的方式很简单，就是尽量将资源放在同一个域名下。
cache control
很简单，对于一些不需要经常更新的静态资源，设置缓存有效时间。
子资源lazyload
对图片资源，非首屏资源等使用lazyload。有的站点，甚至连首屏都是lazyload，首屏lazyload的话，搜索引擎在抓取网页内容时会认为网页没有有效内容，权重会降低，不利于seo优化，所以很多站点都使用首屏直出(SSR)加非首屏资源lazyload的模式。
合理使用localstorage
localstorage给h5提供了本地缓存的便利，但是滥用会带来性能问题，所以使用时也要注意。
支持http2
http2因为通道的多路复用，具有性能方面的理论优势(简单理解，单车道变四车道，可同时跑的车多了)。但是因为http2是建立在https的基础之上的，https本来性能比http差，所以最终效果可能跟业务自身特点有关。
服务端手段
提高物理处理能力
没什么好说，业务量大了，就是加机器，提高服务端处理能力。
负载均衡
通过一个分发器，让每一个业务处理服务器都能均衡的处理任务，提高并发能力及稳定性，不让单台机器过劳死。
各种缓存机制
放哪都通用，使用memcache，redis等进行数据缓存。
CDN
两个作用，其一，就近获取资源。其二，降低业务服务器压力。将一些静态资源放CDN是一个不错的选择。
支持http2
前面有提到。
网友评论