浏览器工作原理与实践(一)——请求到渲染流程

Waxiangyu

本文总结于极客时间李兵老师的课程,有兴趣的同学可以自己去学习下。

浏览器包含的进程

  • 浏览器进程:界面显示、用户交互、子进程管理、存储等。
  • 渲染进程:render树、V8引擎、(每个Tab都是一个进程,沙箱中数据获取可能有问题)
  • GPU进程:3Dcss
  • 网络进程:网络资源加载
  • 插件进程:插件运行、崩溃不会对浏览器和页面产生影响

共用同一渲染进程情况:同一站点(根域名、协议一样)、同一浏览上下文组(AB打开,window.opener证明)。noopenernoreferren断开联系。

TCP/IP

TCP

image.png

  • 互联网中的数据是通过数据包来传输的,数据包在传输过程中容易丢失或出错。
  • IP 负责把数据包送达目的主机。
  • UDP 负责把数据包送达具体应用。
  • TCP 保证了数据完整地传输,它的连接可分为三个阶段:建立连接、传输数据和断开连接。

TCP连接

image.png

HTTP请求流程

  1. 构建请求:方式,地址,http协议版本
  2. 查找缓存:如果有缓存,拿浏览器缓存文件
  3. 准备IP地址和端口号:域名系统DNS寻址IP号,http内容是通过TCP传输数据阶段实现的
  4. 等待TCP队列
  5. 3次握手建立TCP连接:——>服务器
  6. 发请求:(请求行,请求头)post请求体
  7. 服务器处理
  8. 服务器响应:(回复响应行,响应头,回复正文)协议版本状态码
  9. 4次挥手断开TCP请求

DNS缓存

浏览器本地缓存对应的IP和域名。
浏览器缓存都服务器设置 Cache-Control: Max-age = 2000,缓存过期会在请求头加If-None-Match: ...token。没过期304,过期重新给,刷新缓存新鲜度。
baidu.com——>https://baidu.com301重定向,服务器处理跳转location地址。

从输入url到页面显示经历了什么

  1. 用户输入,判断输入的是url,地址栏会加上协议,合成完整的url,可以监听beforunload确认提交表单
  2. url请求过程,浏览器进程通过进程间通信IPCurl请求发到网络进程,网络进程会去查找是否有本地缓存。如有,直接返回资源。如没有就请求,第一步进行DNS解析,获取请求域名的服务器IP地址,如https,还要建立TLS连接,然后利用IP和服务器建立TCP连接,浏览器端会把请求行、请求头、cookie等向服务器发送构建的请求信息,服务器会生成响应数据发给网络进程,开始解析响应头内容。
    (1)重定向:响应头的状态码是301302,从响应头的location读取浏览器重定向的地址,然后再发起httphttps,从头开始。
    (2)响应数据类型处理:判断响应头content-type,如是application/octet-stream会被提交下载管理器请求流程结束,如是text/html页面渲染是在渲染进程。
  3. 准备渲染进程,每打开一个新页面就会有一个新的渲染进程,但根据域名、协议,同一站点会共用一个渲染进程。渲染进程准备好之后,要提交文档给渲染进程(html数据),当确认提交后会更新:前进后退状态、loading状态、地址栏urlweb页面、安全状态,走完后就进入渲染阶段了。
  4. 提交文档,浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程,之后会更新浏览器界面状态,包括了安全状态、地址栏的 URL、前进后退的历史状态,并更新 Web 页面
  5. 渲染阶段,页面解析和子资源加载

渲染流程

浏览器无法理解和使用html,所以要将其解析转换成DOM树,控制台输入document就能看到完整的DOM树。会把css转换成styleSheets,控制台document.styleSheets可以看到样式表,该结构具备查询和修改的功能,css属性值标准化是为了获得DOM树的几何位置。还需要创建布局树:遍历所有可见节点加到布局树,不可见元素忽略。
页面中有些复制效果如3D变换z-indexz轴排序,渲染引擎还要为其生成图层树。

  1. 有定位属性透明属性css滤镜等都有层叠上下文会被提升单独一层。
  2. 需要剪裁(滚动)也会创建图层,通过合成线程按照视口附近图块生成位图由栅格化操作,栅格化过程会用GPU加速,用到GPU线程。

重绘:js改背景色,没有几何位置变动,布局阶段不改,直接绘制执行,省去布局和分层,效率比重排高。
重排:改高度,触发重新布局,解析叫重排。需要更新完整的渲染过程,开销最大。
合成:translate(),跳过布局和绘制,避开重排重绘,直接非主线程合成动画,效率最高,css动画 > js动画。

阅读 371

那就 javascript 吧
小白笔记,从一开始。
628 声望
28 粉丝
0 条评论
628 声望
28 粉丝
文章目录
宣传栏