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

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

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

第一篇能够在我之前的博客中找到

附上连接：

http://www.javashuo.com/article/p-ywbpgluf-dr.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个链接）。

 

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

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

若是每次请求数据，都须要从新进行TCP握手，请求速度会有很大的影响，使用websocket能够保证持久链接

 

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

 

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

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

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

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

 

四、 为静态资源（CSS  JS  徽标等图片）设置明确的缓存标头。借助能够告诉浏览器将这些资源缓存多久，什么时候从新验证。

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

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

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

 

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

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

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

 

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

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

 

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

 

 

 

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

下次更新为你们作一个小总结

敬请期待： 

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