浏览器渲染原理

渲染流程
浏览器在服务器获取到html文档后，自上而下进行解析，在脚本文件不包含defer和async属性时，会按照以下方式执行文档内容
1. 解析html标签，生成DOM树
2. 解析css标签，生成CSSOM树
3. 把DOM树和CSSOM树组合成渲染树
4. 通过渲染树进行布局，计算每个节点的几何结构
5. 绘制元素的颜色、阴影
6. 将不同层次的元素合成，展示在页面上

相关资料网页渲染

CSS动画

transition

在元素的css属性发生改变时，transition可以以动画的方式将元素改变前的值过渡到改变后的值

transition: width 2s linear, height 2s ease, background-color 2s ease-in, transform 2s linear;

相关属性

transition-property：指定需要过渡的css属性名称，多个名称用逗号隔开

transition-duration：设置过渡动画的完成时间

transition-timing-function：指定transition效果的转速曲线，默认值为ease

linear  规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay：定义transition效果等待多长时间后开始执行，非必填

监听transitions

el.addEventListener("transitionstart", func1, true);
el.addEventListener("transitionrun", func2, true);
el.addEventListener("transitionend", func3, true);

相关资料CSS 动画之——transition

animation

animation可以通过指定动画开始、结束以及中间点样式的关键帧来实现动画效果

.test {
    animation: skyset 5s linear 2s infinite alternate;
}
@keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}

相关属性

animation-name: 设置 @keyframes 动画的名称。

animation-duration：设置动画完成一个周期的时间，单位为s或ms，默认是0。

animation-timing-function：设置动画执行的速度曲线，默认是ease

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-delay：定义animation效果等待多长时间后开始执行，非必填

animation-iteration-count：设置动画被播放的次数。默认是 1。

animation-direction：设置动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state：设置动画是否正在运行或暂停。默认是 "running"。

监听animation

e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);


相关资料animation、关于step、css3动画实践

BFC

官方解释是：块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

BFC特性

计算BFC元素高度时，子元素的浮动元素也参与计算

    <div style="border:1px solid green;width:250px;">
        <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;float: left;"></div>
    </div>

浮动元素因为脱离了文档流，会导致父元素高度坍塌，看起来会在父元素外部

<div style="overflow:hidden;border:1px solid green;width:250px;">
<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"> </div>
<div style="border:1px solid red;width:100px;height:100px;margin:10px;float: left;"></div>
</div>


但是在BFC元素中浮动元素就会被父元素包裹住

BFC元素不会和浮动元素重叠

    <div style="overflow:hidden;border:1px solid green;width:250px;">
            <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;float: left;"></div>
            <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>

这里蓝边框的浮动盒子和红底盒子重叠，会影响页面的排版

<div style="overflow:hidden;border:1px solid green;width:250px;">
<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;float: left;"></div>
<div style="overflow:hidden;border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"> </div>
</div>


在红底盒子创建了BFC后，两个盒子就不再重叠

BFC内的块级元素垂直方向的外边距会发生重叠

    <div style="overflow:hidden;border:1px solid green;width:250px;">
        <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>

可以看到两个盒子都有10px的外边距，正常情况下两个盒子中间应该会有20px，但是在BFC内块级元素垂直方向的外边距会发生重叠，所以两个盒子之间的间隔只有10px，如果两个盒子本身设置的边距不一样大，两个盒子之间的距离取较大的那个边距
而且你会发现在没有BFC元素包裹下，两个块级元素一样会有外边距合并的情况

在网上查BFC资料的时候很多地方都提到BFC的一个特性：BFC内部的块级盒子会在垂直方向，一个接一个地放置，刚看到的时候我就很纳闷，因为即使没有在BFC元素内，块级元素本来就是在垂直方向一个接一个放置的，BFC的这个特性就很奇怪，但是网上资料都没有对这个特性有什么说明，当初还钻了很长时间的牛角尖，后面才注意到BFC创建条件中的其中一条是，html本身就拥有BFC特性。所以没有在创建的BFC元素内，块级元素也会在垂直方向一个接一个放置的，块级元素垂直方向的外边距也会重叠。
明明很早就看到html有BFC的特性，但是一直没当回事

BFC是一个独立的容器，容器内外不会互相影响

    <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
    <div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>

红底盒子被一个正常div包裹着，但是还是和蓝框盒子发生了边距合并

<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
<div style="overflow: hidden">
<div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
</div>


在红底盒子的父元素拥有了BFC特性后，两个盒子的边距就没有合并了，因为BFC容器内外不会互相影响

关于外边距合并：CSS外边距合并（塌陷/margin越界）、关于margin、外边距合并场景和规则

常用创建BFC的方法

1. 根元素（HTML）
   
2. float 除了none以外的值
   
3. overflow 除了visible 以外的值（hidden，auto，scroll ）
   
4. display (table-cell，table-caption，inline-block, flex, inline-flex)
   
5. position值为（absolute，fixed）
   

很多时候我们在处理浮动元素时，都会给元素添加clear: both的css属性，但是如果了解BFC后，就会知道其实很多时候没必要去加clear: both
相关资料块格式化上下文