css浏览器的渲染过程
小妮浅浅
2021-08-28 10:04:084091浏览 · 0收藏 · 0评论
说明
1、根据HTML构建HTML树（DOM）。
2、根据CS构建CSS树（CSSOM）。
3、将两棵树合并成一颗渲染树（render tree）。
4、Layout布局。
（文档流、盒模型、计算大小和位置）
5、Paint绘制。
（把边框颜色、文字颜色、阴影等画出来）
6、Compose合成。
（根据层叠关系展示画面）
如果是块级元素，就会设置好宽高，不存在任何问题。但如果是图片，此时是无法得知高度的（行内元素），只有等待第五步绘制以后再能确定高度。而图片的绘制需要时间，在尚未绘制完成的时候，获取到的高度则会出现问题。合理的解决方案是使用setTimeout延时获取div的高度。
<div></div>
<script>
var odiv = document.getElementById('bgImg');
odiv.innerHTML = '<img src="test.jpg">'
setTimeout(() => {
var oHeight = odiv.scrollHeight;
console.log(oHeight);
},100)
</script>以上就是css浏览器的渲染过程，希望对大家有所帮助。更多css学习指路：css教程
本文教程操作环境：windows7系统、css3版，DELL G3电脑。
关注公众号，随时随地在线学习
分享到微博
微信扫一扫
流芳
124384
