CSS3起步 07-------浏览器解析、加载页面过程以及过渡坑点

最新推荐文章于 2024-03-30 17:48:44 发布

燃情雪

最新推荐文章于 2024-03-30 17:48:44 发布

阅读量172

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/h1234561234561/article/details/89192872

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

浏览器解析、加载页面过程

问题一，浏览器是怎末解析页面的呢？
浏览器解析html节点生成DOM树，同时也生成CSSOM树，然后在调用javascript进行更改二者，最后生成Render Tree渲染树。

问题二，浏览器怎末解析生成DOM树【document object model 文档对象模型】呢？
浏览器会对整个html进行深度遍历，即当遍历某个节点时，只有当遍历完这个节点及其所有子节点后才会去遍历其兄弟节点。

问题三，什么是CSSOM树，怎末又让DOM树和CSSOM树结合呢？
CSSOM树全程为cascoding style sheet object model【层叠样式表对象模型】，用于渲染DOM树。
当在解析遍历生成DOM遇到CSS时，浏览器就会开启另外一个线程来生成CSSOM树，结合到相应的node节点上，如图：
在这里插入图片描述
问题四，javasrcipt具体在什么时候调用更改呢？
首先在CSSOM和DOM二者结合成一种未合法的Render Tree【就是此时还没有真正意义上的渲染完成，生成了最后真正初始化的Render Tree】后，调用非异步非延时javascript部分对未合法的Render Tree进行最初修改，之后渲染完成，生成真正初始化的Render Tree。

问题五，什么是Render Tree呢？
可以变相的称作已经明确了各个节点样式的DOM树，只是还没有在浏览器界面设计好排布位置，以及显示。具体过程图如下
在这里插入图片描述
总结而言：
01、将HTML构建成一个DOM树（DOM = Document Object Model 文档对象模型）
02、将CSS解析成CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
03、根据DOM树和CSSOM来构造 Rendering Tree（渲染树）。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。
04，有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。
05，下一步操作称之为Layout【布局】，顾名思义就是计算出每个节点在屏幕中的位置 layout render tree。
06，再下一步就是绘制，即遍历render树，并使用浏览器UI后端层绘制每个节点。

过渡

属性值
02，transition-property: width, height;//属性
03，transition-duration: 3s, 5s;//时间
04，transition-timing-function: cubic-bezier(.7, .77, 0, .92);//可以利用贝塞尔曲线自定义
05，transition-delay: 2s;//开始延迟时间
//如果列表数不一样,多的会全部截掉,少的话,时间会周期性重复
06，存在一个transitioned事件，每当过渡结束后触发

坑点
01，transition-duration: 3s, 5s;必须要加单位,不然会失效
02，在渲染过程还未真正结束时，transition属性失效
03，过渡只关心元素的最初位置和最终位置，没有方法获取元素在过渡中每一帧的状态
04，结合transform时，当变化前后transform中变换样式的数量顺序不同时，对于不同部分的transform变换样式，transition不会生效

示例
css和html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡</title>
		<style>
			div{
				width: 500px;
				height: 200px;
				border: 1px solid black;
				margin: 20px auto;
				background-color: #4A86E8;
				transition-property: width, height;
				transition-duration: 3s, 5s;
				transition-timing-function: cubic-bezier(.7, .77, 0, .92);
			}
		</style>
	</head>
	<body>
	<div></div>
	</body>
	<script>?</script>
</html>

js:
失效demo

var t = document.querySelector('div');
//整个DOM树【Document Object Model 文档对象模型】和CSSOM【CSS Object Model CSS对象模型】已经生成
//但是Rendering Tree渲染树还未生成
//因为t.style.width = '200px';执行速度太快了，没有任何的异步或则延时来使Rendering Tree渲染树生成
//所以在CSSOM立马将原先的width: 500px;改成width: 200px;因此过渡失效
t.style.width = '200px';

有效demo1【异步】

//因为是整个文档加载完毕后触发【异步】,说明Render Tree已经生成,渲染过程已经完毕
//所以,过渡生效
onload = function() {
	var t = document.querySelector('div');
	t.style.width = '200px';
}

有效demo2[【延时】

//因为是延时2s完毕后触发【延时】,对于浏览器而言，2s是个很长的时间足够Render Tree生成,渲染
//所以,过渡生效
setTimeout(function() {
	var t = document.querySelector('div');
	t.style.width = '200px';
},2000);

ps
01，一定要有异步思想，过程式同步思想害人啊，前段存在很多的异步事件啊。。。。
02，贝塞尔曲线在线站点
03，margin: 20px auto;注意这种对于inline/inline-block无效,应为他们并不是独占一块的块级元素

燃情雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3起步 07-------浏览器解析、加载页面过程以及过渡坑点

浏览器解析、加载页面过程问题一，浏览器是怎末解析页面的呢？浏览器解析html节点生成DOM树，同时也生成CSSOM树，然后在调用javascript进行更改二者，最后生成Render Tree渲染树。问题二，浏览器怎末解析生成DOM树【document object model 文档对象模型】呢？浏览器会对整个html进行深度遍历，即当遍历某个节点时，只有当遍历完这个节点及其所有子节点后才...
复制链接

扫一扫

专栏目录