首页 > 试题广场 >

请简述浏览器渲染页面的过程,并给出下方script代码中对哪

[问答题]
请简述浏览器渲染页面的过程,并给出下方script代码中对哪些CSS属性的"修改"会触发重绘(repaint)和重排(reflow)?
<style>.sg-container {padding: 10px;margin-bottom: 10px;width: 100px; height: 100px;}</style>
<div class="sg-container">
    <p style="line-height:20px">2019搜狗校园招聘</p>
<script>
    document.querySelector('p').style.cssText +='height:10px; line-height:24px;font-size:20px;visibility:hidden;background-color:#00f;border:1px solid #f00';
</script>
</div>
简单来说,重绘就是只改变一些颜色之类样式,不会改变页面布局;而回流就是会改变页面布局,例如宽高的改变会导致其它元件的位置改变。但是重绘和回流本身就具不具有耦合性这件事我挺疑惑的,不知道这题是怎么考虑的。如果不考虑耦合性,答案应该是(个人理解):
重绘:visibility,background-color,border-style,border-color
重排:height,line-height,font-size,border-width
有错误望指出
发表于 2020-10-14 16:25:24 回复(1)
  1. 过程:
  • 并行加载HTML,js,css等外部文件
  • 解析HTML构建DOM树:
            1)字节流解码:将通过HTTP请求获取的字节流数据为字符数据
            2)输入流预处理:规范字符数据的格式
            3)转化为令牌(Token)
            4)以Document对象为根节点,构建器树将接收到令牌时创建对应的DOM元素,不断补充和完善DOM树
  • 解析css构建CSSOM树
            1)具有继承特性,先继承,再补充覆盖
  • 构建渲染树
            1)从DOM树根节点开始遍历,在CSSOM树找到相应的节点样式
            2)忽略不需要渲染的节点
  • 布局
            1)计算元素大小及位置
            2)输出对应盒模型
  • 绘制
            1)根据渲染树形成绘制记录
            2)渲染引擎根据绘制记录进行绘制。静态:生成不同图层,再进行合成。动画:随页面滚动,不断合成新的图形
发表于 2020-08-10 16:20:38 回复(0)
当DOM的变化影响了元素的几何属性(宽或高),浏览器需要重新计算元素的几何属性,同时也会影响其他元素的几何属性和位置。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树------这个过程称为重排
完成重排后,浏览器会重新绘制受影响的部分到屏幕-----这个过程称为重绘
重排必然会导致重绘
重排:
1.添加或者删除可见的DOM元素
2.元素位置改变
3.元素尺寸改变
4.元素内容改变(eg:一个文本被另一个不同尺寸的图片替代)
5.页面渲染初始化
6.浏览器窗口尺寸改变


发表于 2022-06-28 20:22:00 回复(0)
1解析html:浏览器获取html代码并进行解析,将二进制数据转换成字符串,在解析成token,然后解析成弄得,通过node之间的相互关系构建dom树结构
2解析css:css解析不会阻塞dom树的构建,解析完成构建cssom
3遇到js则会阻塞dom树和cssom树的构建,优先加载js文件
4cssom和dom构建完成后生成渲染树,GPU根据这个对页面进行渲染
5如果在渲染过程中又js对dom进行操作导致样式改变就会触发不同程度的重绘和重排
发表于 2022-04-29 20:34:53 回复(0)
用户在浏览器中输入地址,浏览器向服务器发出请求,服务器收到并响应,浏览器接收并再次发出请求
发表于 2020-09-22 21:15:51 回复(0)

1.根据html文件构建DOM树和CSSOM树。构建DOM树期间,如果遇到JS,阻塞DOM树及CSSOM树的构建,优先加载JS文件,加载完毕,再继续构建DOM树及CSSOM树。

2.构建渲染树(Render Tree)。

3.页面的重绘(repaint)与重排(reflow,也有称回流)。页面渲染完成后,若JS操作了DOM节点,根据JS对DOM操作动作的大小,浏览器对页面进行重绘或是重排。

发表于 2020-07-12 15:06:27 回复(0)
1.解析HTML
浏览器获取html代码进行解析,将二进制数据转换成字符串,再解析成token,然后解析成node,通过node之间的相互关系生成dom树
在解析html的过程中,如果遇到css和js,也会请求获取该资源进行解析
2.解析css
和解析html步骤差不多,最终生成cssom树
这个过程比较消耗性能,node节点的样式不仅可以在css中直接设置,也可能是继承来的,所以要不断的循环cssom
3.将cssom与dom树结合生成渲染树
确定每个node节点在屏幕中的位置以及大小。对于dom树中display为none的节点,不会进行渲染
4.调用GPU进行渲染
发表于 2020-07-06 17:20:02 回复(0)