网页加载相关

张金掘
312 阅读3分钟

1. 利用google的network查看页面的加载时间

页面waterfall
根据上图可以知道知道有以下几个关键参数

Queueing 表示该请求排队时间。浏览器与统一域名下建立的tcp连接数是有限的，chrome设置的是6个，如果同一时间发送的同一域名的请求超过6个，就要进行排队 Stalled
是浏览器得到要发出的这个请求的指令，到请求可以发出的等待时间，一般是代理协商，等待可复用的tcp连接释放的时间，不包含dns查询，建立tcp连接等时间 DNS Loolup dns查询的时间，页面任何新的域名都要走一遍完整的dns查询过程，已经查询过的则走缓存 Initial Connection / Connecting 建立tcp连接的时间，包含tcp的三次握手和ssl认证 SSL ssl认证完成需要的时间 Waiting(TTFB) 请求发出后，到收到响应的第一个字节所花费的时间 Content Download 收到响应的第一个字节，到接受完最后一个字节的时间，即下载时间

2. 利用performance分析页面性能

performance
Loading相关事件

  • Parse HTML 浏览器执行HTML解析
  • Finish Loading 网络请求完毕事件
  • Receive Data 请求的响应数据到达事件，如果响应数据很大，可能会多次触发该事件
  • Receive Response 响应头报文到达时触发
  • Send Request 发送网络请求时触发

Scripting相关事件

  • Event js相关事件
  • DOMContentLoaded 当页面的DOM内容加载并解析完毕时触发
  • GC Event 垃圾回收时触发

Rendering事件

  • Layout 页面布局计算执行时触发
  • Invalidate layout 当DOM更改导致页面布局失效时触发
  • Recalculate style Chrome重新计算元素样式时触发

Painting事件

  • Image decode 一个图片资源完成解码后触发
  • Image Resize 一个图片被修改尺寸时触发

3. 从浏览器上输入url后的整个过程

  1. dns解析域名，得到ip

    具体过程： 查询浏览器缓存 查询系统缓存，本地的hosts文件 查询路由器缓存 递归查询、迭代查询

  2. 浏览器与服务端建立tcp链接

tcp三次握手

SYN: 表示请求创建连接
ACK: 确认接收
FIN: 表示请求关闭连接，TCP是双向的，所以要关闭连接2次
seq: 序列号，序列号对应发送的数据包的编码
ack: 下一个数据包的编码
三次握手的原因
    如果一个连接请求超时，客户端会再发一个连接请求，那么等超时的连接到了服务端就会创建两次连接，
    浪费资源

  1. 浏览器根据http规范，产生请求数据包--google具体http协议相关内容

  2. 请求与传输

    google具体的http请求，响应的相关内容

  3. 浏览器渲染页面

    google具体浏览器渲染页面的详细过程

相关参考：

https://blog.csdn.net/jiao_0509/article/details/82491299

https://baijiahao.baidu.com/s?id=1593714120815701015&wfr=spider&for=pc

https://www.cnblogs.com/tisikcci/p/5866753.html

avatar
文章
阅读
粉丝