浏览器解析、加载页面过程
问题一,浏览器是怎末解析页面的呢?
浏览器解析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
无效,应为他们并不是独占一块的块级元素