web前端性能分析--原理篇-阿里云开发者社区

开发者社区> boxti> 正文

web前端性能分析--原理篇

简介:
+关注继续查看

web前端性能:
  即是web用户在访问一个页面时所要花费的时间总和。即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素。那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧。
  页面的请求过程:
  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完成
  整个过程中会有很多的分别请求,所以TCP连接会很多,并且每一个用完都会自己关了,除非是keep-live类型的可以请求多次才关闭。
  综上所述:
  一个页面的请求等于一个或多个url的请求,因此一个页面里包含的外部请求数会影响页面的整体性能
  【每请求一次就要多占用一次cpu使用、多一次tcp连接】
  每个url的请求又包括寻址、连接、请求传输、返回传输、断连的过程;因此每个阶段的外部环境也会影响整体性能
  【DNS服务器的寻址时间,请求和返回内容时的网络环境】
  除了URL请求数量外,每个请求的内容大小也是影响性能的主要因素
  【文件越大消耗在传输过程中的时间就越长】
  请求同样多的资源,并行请求和串行请求速率是不一样的,所以请求的资源要尽量支持同步请求
  【同步请求不同资源,即请求被发送到不同的资源服务器即可】
  依据浏览器的加载、渲染机制,选择合适的HTML内容排版方式
  【减少反复创建对象实例的次数、充分利用缓存机制】
  优先加载用户关注的内容
  【css加载优于js内容,首屏内容优于非首屏内容】
  关注完http请求的过程后,再来关注整个请求过程中关注的几个时间点,通过确定时间点就可以确定影响性能的时间段,就是确定影响性能的因素。根据上面的介绍主要的几个时间点又可以分页面的整体时间点、以及单个url请求过程中的时间点。【基于httpanalyzer工具的指标】
  单个url请求的主要时间点:
  1、Cache Read:缓存读取时间,或304错误的处理时间
  2、Block:请求等待时间,取决于缓存检查,网络连接等待
  3、DNS Lookup:DNS服务器查找时间,取决于dns服务的数量,dns注册的域
  4、Connect:tcp连接的总时间,取决于连接类型,ssh,keepalive都会比http长
  5、Send first to last:发送请求内容的时间,取决于请求内容大小,及上行的传输速度
  6、Wait:等待响应的时间,取决于网络环境的响应,web服务器的处理时间
  7、Receive first to last:接收响应内容的时间,取决于响应内容,下行的传输速度,也要考虑服务器的带宽
  8、Time to first byte:从请求一直到接收到第一个字符的总时间,等于1+2+3+4+5+6
  9、Network:网络消耗时间,等于3+4
  10、Begin to end:整个请求的总时间,等于1+2+3+4+5+6+7
  单个页面的主要时间点:
  1、DOM Ready Time: DOM完成的时间,从接收html到完全转换成dom树所需的时间
  2、DOM Ready to Page Load: 页面元素的加载和渲染完成时间,包括html,css,img及其它内容
  3、Page Load Time: page页onload事件的时间,其实际时间等于总时间 - (DOM ready + 元素渲染时间)
  4、URL Requests Begin to End:url请求所消耗的所有时间,从发送请求发起到接收最后一个字节断开
  5、Network Time:消耗在网络上的时间,即tcp的连接时间
  6、Begin to End:所有消耗的时间,包括请求结束后的渲染时间
相关文章

   



最新内容请见作者的GitHub页:http://qaseven.github.io/

   

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端智能化漫谈 (3) - pix2code推理部分解析
# 前端智能化漫谈 (3) - pix2code推理部分解析 上一节我们将pix2code的流程梳理了一遍,相信大家已经都可以跑起来了。 在谈pix2code的算法改进之前,关于训练和推理过程还有若干细节我们还需要进一步讨论一下。 ## onehot编码 上次我们讲到create_binary_representation,就是将单词转换成one hot编码。 ```
4897 0
Fundebug前端JavaScript插件更新至1.7.1,拆分录屏代码,还原部分Script error.
摘要: BUG监控插件压缩至18K。 1.7.0拆分了录屏代码,BUG监控插件压缩至18K,另外我们还原了部分Script error,帮助用户更方便地Debug。请大家及时更新哈~ 拆分录屏代码 从1.7.0版本开始,我们拆分了录屏代码。
1349 0
+关注
boxti
12535
10037
文章
1327
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载