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

1 客户端性能--浏览器页面处理相关推荐

浏览器页面有哪三层构成，分别是什么，作用是什么
前端面试题(1) 打卡: 2021-4-25 HTML 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别为:html.css.JavaScript 作用: (1)h ...
手机浏览器页面知识收集
wap手机网页css(wap css) 大部分手机现在都支持XHTML浏览器,这意味着我们只需在stylesheets的类型设置成"handheld"即 * { position: ...
监视和排错客户端性能和连接性
工具: Windows网络工具-->Ping Telnet RPCPing Nslookup 常规排错工具-->Exchange Server Active sync ...
手机浏览器页面知识收集（转）
wap手机网页css(wap css) 大部分手机现在都支持XHTML浏览器,这意味着我们只需在stylesheets的类型设置成"handheld"即 * { position: ...
客户端性能优化实战经验分享
合理的架构设计,对客户端后期优化至关重要暴风影音播放器一直因为"慢",而引发用户诸多抱怨.新发布的暴风影音5在启动速度上较暴风影音3提升了3倍.暴风影音播放研发总监黄森堂以暴风影 ...
浏览器页面资源加载过程与优化
评价页面性能好坏的核心之一就是页面的加载速度,而页面加载速度的关键就是页面资源的加载.本文将从浏览器浏览器页面资源加载过程展开分析,来引出页面关键请求路径的概念,并给出如何优化该关键请求路径的一些方法 ...
jsp页面适应手机屏幕_Jsp编写的页面如何适应手机浏览器页面
经常遇到JSP网页需要适配手机设备的尺寸问题解决: 在JSP加入 content属性值 : width:可视区域的宽度,值可为数字或关键词device-width(设备的宽度) maximum-sc ...
浏览器页面渲染机制-前端原理剖析
浏览器页面渲染机制前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种: ...
小兔鲜儿项目pc客户端前端静态页面
小兔鲜儿项目pc客户端前端静态页面一.效果图二.文件和目录准备新建index.html在根目录新建css文件夹保存网站的样式,并新建以下css文件: base.css:基础公共样式 commo ...

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

1.1浏览器页面处理

1.1.1网络连接和初始HTTP请求

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

1 客户端性能--浏览器页面处理相关推荐

最新文章

热门文章