1 客户端性能--浏览器页面处理

1.1浏览器页面处理

  浏览器不是批量加载页面的。用户输入URL后,浏览器会并行各项活动,在网络连接的同时进行页面的解析,并将其呈现到屏幕。浏览器执行的这些步骤对用户是可见的,并且很大程度上影响着性能感知和整个页面的加载时间。

1.1.1网络连接和初始HTTP请求

  浏览器要检索页面,先从URL开始,使用DNS确定服务器的IP地址,然后通过TCP的应用层协议(HTTP)连接到服务器,请求与改URL内容。得到响应后,浏览器再次进行解析,将其呈现给屏幕。与此同时,浏览器还并行的继续进来网络活动,排队或从其他URL请求内容。浏览器通过发送TCP SYN让服务器打开一个连接。服务器确认SYN包做出响应,此时链接被打开。然后浏览器发送一个HTTP GET 包,包括请求的URL、Cookie等数据,浏览器接收后会发送ACK包,这段时间内服务器生成响应。

  然后服务器发送响应,而客户端用ACK包响应,ACK请求的频率由TCP“窗口”大小决定,他是决定网络速度的重要因素。你会看到浏览器请求的响应不会同时到达,在客户端发送包、服务器响应之间会有时间间隔,同时在接二连三的包之间也会有间隔。

  SYN 和 SYN ACK 包加上TCP的慢启动性,致使打开网络连接是很花时间的过程。因此,我们应该避免过多的打开网络连接。

1.1.2页面解析和新的资源请求

  当IE等待数据包时,他会解析已经得到的包,并且还会寻找其他可用的HTTP请求,并行启动,对于每个服务器来说,浏览器可以同时启用两个连接。

   

  如上图所示,横轴是时间,每一行代表浏览器发起的不同请求,最上一行表示使用DNS解析服务器的IP地址所需要的时间。第二行表示读取主页的时间,最左边的一段表示连接服务器的时间(SYN 和 SYN ACK 包),正好从解析完IP地址以后开始。中间一段是发送初始HTTP GET请求和接收初始的HTTP响应的时间,右边的一段是剩余的响应到达时间。最底下一行是检索图片所需的时间,左边是连接时间,右边一段是初始响应到达的时间。因为图片很小,图片的所有数据都包括在HTTP响应相同的数据包内,所有没有第三段。从第二和和第三行中可以看出,大约到接受HTML过半的时候浏览器才打开服务器的第二个连接,请求图片。因为浏览器一边接收图片,一边解析,而<img>标签离HTML的头部有一段距离,直到几个数据包到达后浏览器才会碰到这个标签。

  

原文地址:https://www.cnblogs.com/MaxJoker/p/5344577.html