来QQ群 :257887726
讨论测试技术的真谛吧

鲁德——性能测试笔记之五:web前端性能的 一些概念

整个过程中会有很多的分别请求......
登录 后即可查看全部文章

由于web前端性能测试包含的知识点很多:浏览器工作原理、浏览器缓存、相关的http头信息、http状态码、完整的一个http请求及响应过程、响应时间、web前端性能测试工具以及优化方法等等,所以决定分两篇文章来总结,这一篇主要介绍一些跟web前端性能有关的一些概念,最近也在收集阅读相关文档,一边学习一边理解消化一边总结,有什么不对的希望指出。

浏览器的主要构成

1>.用户界面 - 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2>.浏览器引擎 - 用来查询及操作渲染引擎的接口。

3>.渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。

4>.网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。

5>. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。

6>. JS解释器 - 用来解释执行JS代码

7>.数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

虽然不同浏览器的工作方式不完全一样,但是基本上都包括以上各组件,浏览器的核心是浏览器引擎(Browser Engine),目前市场占有率最高的几种浏览器几乎使用了不同的浏览器引擎:IE使用的是Trident,Firefox使用的是Gecko,Safari和Chrome使用的是Webkit。

了解过浏览器的主要构成,来看看一个完整的页面请求及响应过程包括哪些:

 一个完整的页面请求及响应过程:

1、浏览器的url请求

2、递归寻找DNS服务器

3、连接目标IP并建立TCP连接

4、向目标服务器发送http请求

5、web服务器接收请求后处理

6、web服务器返回相应的结果【无效、重定向、正确页面等】

7、浏览器接收返回的http内容

8、开始解析html文件,当然是自上而下,先是头部,后是body

9、当解析到头部css外部链接时,同步去下载,如果遇到外部js链接也是下载【不过js链接不建议放在头部,因为耽误页面第一展现时间】

10、接着解析body部分,边解析边开始生成对应的DOM树,同时等待css文件下载

11、一旦css文件下载完毕,那么就同步去用已经生成的DOM节点+CSS去生成渲染树

12、渲染树一旦有结构模型了,接着就会同步去计算渲染树节点的布局位置

13、一旦计算出来渲染的坐标后,又同步去开始渲染

14、10-13步进行过程中如果遇到图片则跳过去渲染下面内容,等待图片下载成功后会返回来在渲染原来图片的位置

15、同14步,如果渲染过程中出现js代码调整DOM树机构的情况,也会再次重新来过,从修改DOM那步开始

16、最终所有节点和资源都会渲染完成

17、渲染完成后开始page的onload事件

18、整个页面load完成

  • 发表于 2018-01-23 13:17
  • 阅读 ( 504 )
  • 分类:性能测试


你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论

如需发布职位,请登录

鲁德——性能测试笔记之五:web前端性能的 一些概念

整个过程中会有很多的分别请求......
登录 后即可查看全部文章

由于web前端性能测试包含的知识点很多:浏览器工作原理、浏览器缓存、相关的http头信息、http状态码、完整的一个http请求及响应过程、响应时间、web前端性能测试工具以及优化方法等等,所以决定分两篇文章来总结,这一篇主要介绍一些跟web前端性能有关的一些概念,最近也在收集阅读相关文档,一边学习一边理解消化一边总结,有什么不对的希望指出。

浏览器的主要构成

1>.用户界面 - 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2>.浏览器引擎 - 用来查询及操作渲染引擎的接口。

3>.渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。

4>.网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。

5>. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。

6>. JS解释器 - 用来解释执行JS代码

7>.数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

虽然不同浏览器的工作方式不完全一样,但是基本上都包括以上各组件,浏览器的核心是浏览器引擎(Browser Engine),目前市场占有率最高的几种浏览器几乎使用了不同的浏览器引擎:IE使用的是Trident,Firefox使用的是Gecko,Safari和Chrome使用的是Webkit。

了解过浏览器的主要构成,来看看一个完整的页面请求及响应过程包括哪些:

 一个完整的页面请求及响应过程:

1、浏览器的url请求

2、递归寻找DNS服务器

3、连接目标IP并建立TCP连接

4、向目标服务器发送http请求

5、web服务器接收请求后处理

6、web服务器返回相应的结果【无效、重定向、正确页面等】

7、浏览器接收返回的http内容

8、开始解析html文件,当然是自上而下,先是头部,后是body

9、当解析到头部css外部链接时,同步去下载,如果遇到外部js链接也是下载【不过js链接不建议放在头部,因为耽误页面第一展现时间】

10、接着解析body部分,边解析边开始生成对应的DOM树,同时等待css文件下载

11、一旦css文件下载完毕,那么就同步去用已经生成的DOM节点+CSS去生成渲染树

12、渲染树一旦有结构模型了,接着就会同步去计算渲染树节点的布局位置

13、一旦计算出来渲染的坐标后,又同步去开始渲染

14、10-13步进行过程中如果遇到图片则跳过去渲染下面内容,等待图片下载成功后会返回来在渲染原来图片的位置

15、同14步,如果渲染过程中出现js代码调整DOM树机构的情况,也会再次重新来过,从修改DOM那步开始

16、最终所有节点和资源都会渲染完成

17、渲染完成后开始page的onload事件

18、整个页面load完成

  • 发表于 2018-01-23 13:17
  • 阅读 ( 504 )
  • 分类:性能测试


你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
咨询电话:4008-779-565
CopyRights 上海鲁德企业咨询管理有限公司