浏览器渲染页面的步骤

本文详细介绍了浏览器渲染页面的步骤,包括构建DOM树、CSS规则树、生成render树和绘制页面。还讨论了可能导致页面重拍的因素,如DOM操作、尺寸变化和CSS属性更新。同时概述了浏览器加载资源的过程,强调了JavaScript执行对渲染的影响。
摘要由CSDN通过智能技术生成

浏览器的渲染页面时,表示网站资源已经请求成功。
渲染时,大致的流程如下:
(解析html以构建dom树->构建render树->布局render树->绘制render树)
具体的流程如下:
1:浏览器会将HTML解析成一个DOM树,DOM树的构建过程是一个深度遍历过程,当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点,
2:将CSS解析成CSS规则树;
3:根据DOM树和CSS来构造render树,渲染树不等于DOM树,像header和display:none;这种没有具体内容的东西就不在渲染树中;
4:根据render树,浏览器可以计算出网页中有哪些节点,各节点的CSS以及从属关系,然后可以计算出每个节点在屏幕中的位置;
5:遍历render树进行绘制页面中的各元素。
P.S页面发生重拍(回流)的话,会重新加载DOM树,影响页面加载速度。会导致页面重拍的原因如下:
1:页面初始化;
2:操作DOM时;
3:某些元素的尺寸变了;
4:CSS的属性发生改变。

浏览器加载页面资源的步骤如下(部分参考网络资料):
1.用户输入网址(假设是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
2.浏览器开始载入html代码,发现<he

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值