说一说从输入URL到页面呈现发生了什么?

由于里面原理三两句讲不完,本文只罗列简要过程

1.网络部分:

  1. 构建请求
  2. 查找强缓存
  3. DNS解析
  4. 建立TCP连接(三次握手、四次挥手)
  5. 发送HTTP请求
  6. 网络响应

完成了网络请求和响应,如果响应头中Content-Type的值是text/html,那么接下来就是解析渲染工作了。

2.解析部分:

  1. 构建DOM树
  2. 样式计算
  3. 生成布局树(Layout Tree)

3.渲染部分:

前面解析部分中,已经有了DOM节点、样式和位置,但是并不可以开始绘制页面,因为比如:一些3D动画如何呈现出变化效果、当元素含有层叠的时候如何显示和隐藏,为了姐姐这个问题,浏览器在构建完布局树之后,还会对特定的节点进行分层,构建一颗图层树。

  1. 建立图层树

  2. 生成绘制列表

  3. 生成图块并栅格化

  4. 显示器显示内容

重绘:过程5,6,7
回流:从goujianDOM树开始,整个过程

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值