如何打造亚秒级加载的网页2——网络性能 过程解读

对于我们前端来说，页面的加载速度是直接影响到用户的体验度

这一篇是第二篇关于提高网页加载速度的博客了，

第一篇可以在我以前的博客中找到

附上链接：

https://www.cnblogs.com/mlw1814011067/p/9683919.html

PS：本篇博客中我没做太多样式处理，如果你对这方面有兴趣的话请耐着性子看完，毕竟是有点枯燥的

 

页面加载速度影响因素——网络性能   

过程解读

 

在浏览器中输入 http://www.thinks.com/ 并按下回车后，

浏览器首先通过DNS查询解析该域名对应的IP地址

访问每个域名都需要进行这样的查询

 

在获得IP地址后，浏览器发起一个到服务器的TCP连接，TCP握手需要2次往返（1次可使用TCP Fast Open）。

对于安全的SSL连接，TSL握手需要额外的2次往返（1次可使用TLS False Start 或 Session Resumption）。

 

初始连接完成后，浏览器发出的实际请求并等待返回的数据。获得首个字节所需要的时间主要取决于客户端和服务器之间的距离，

其中还包括服务器呈现网页（包括回话查询、数据库查询、模板呈现等环节）所需的时间

 

最后一步需要下载资源（本例中为HTML）这一过程需要多次往返，尤其是新连接通常需要更多往返，

因为初始拥塞窗口很小。这意味着TCP并不能在一开始就全面使用所有可用带宽，而是会随着时间流逝逐渐增加带宽用量（可参阅TCP拥塞控制）。

具体速度受制于启动速度缓慢的算法，这种情况下会让每个往返的拥塞窗口内片段数量翻倍，直到数据包真正开始丢失。

在移动和WiFi网络中，因为这种情况导致的数据包丢失会对性能产生极大影响。

 

另外还要注意：在使用HTTP/1.1 的情况下，最多只能创建6个并发连接（如果浏览器依然沿袭了最初的标准，则最多只能创建2个连接）。

 

页面加载速度影响因素——网络性能 

1、 持久连接是必须的。HTTP是基于TCP应用协议进行数据请求的，TCP是服务器握手的协议

如果每次请求数据，都需要重新进行TCP握手，请求速度会有很大的影响，使用websocket可以保证持久连接

 

2、 尽可能避免重定向，重定向会大幅度降低页面初始加载速度。例如请尽量链接至完整URL（例如链接至www.thinks.com 而不是 thinks.com）

 

3、 可行的情况下使用HTTP/2。该标注可通过服务器推送一个请求传输多个资源，并可通过页头压缩降低请求和回应数据大小，

同时可通过管道化（Pipelinling）和多路复用（Multiplexing）借助一个连接发送任意数量的并行请求，

例如在使用服务器推送的情况下，服务器可以在发送HTML的同时，无需等待实际发出请求，

直接将网页所需的CSS和JS发送给客户端

 

4、 为静态资源（CSS  JS  徽标等图片）设置明确的缓存标头。借助可以告诉浏览器将这些资源缓存多久，何时重新验证。

缓存机制可大幅减少往返次数以及需要下载的字节数。

如果未设置明确的标头，浏览器将会进行启发式（Heuristic）缓存，

虽然是权宜之计，但这总归并非最优化的做法

 

5、 使用内容交付网络（CDN）缓存图片、CSS、JS和HTML。这种分布式缓存网络可以大幅拉近用户与资源之间的距离，

实现更快速的资源交付。同时这种技术也可以加快初始化连接速度，因为此时将会与距离最近的CDN节点进行TCP和TLS握手，

同时这种节点会与网络后端建立快速持久的连接。在客户端缓存资源

 

6、 考虑构建单页面应用，其中只包含小体积的初始页面，并通过异步方式加载其余内容。

为此可以使用可缓存的HTML模板，通过小请求加载动态数据，并只在导航过程中对页面中的部分区域进行更新

 

7、 在客户端缓存资源：缓存必要的应用资源，避免每次都重复请求相同的内容，例如多图片下载可以考虑使用缓存

 

 

 

呼~枯燥的知识普及到这总算是告一段落了

下次更新为大家做一个小总结

敬请期待： 

 　　如何打造亚秒级加载的网页3——用户体验  总结