浏览器渲染原理

浏览器渲染过程

• 根据html创建html树（dom）
• 根据css创建css树（cssom）
• 将两棵树合并成一颗渲染树（render tree)
• layout布局（文档流，盒模型，计算大小和位置）
• paint绘制（画边框颜色，文字颜色，阴影等）

• compose合成（根据层叠关系展示画面）

  三棵树

  

  如何更新样式

• div.style.background=’red’

• div.style.display=’none’
• div.classList.add(‘red’)

• div.remove()

  三种更新方式

  

• 第一种全走，div.remove()会触发当前消失，其他元素relayout

• 第二种跳过layout，改变背景颜色，直接repaint+composite

• 第三种改变transform，只需composite

  transform

  四个常用功能

• 位移translate

• 缩放scale
• 旋转rotate

• 倾斜skew

  经验

• 一般要配合transition过渡

• inline要变成block

  translate

  常用写法

• translateX( )

• translateY( ）
• translate( , ?)）

• translateZ( )且父元素perspective

  经验

  translate(-50%,-50%)可做绝对定位元素的居中

  scale

• scaleX( )

• scaleY( )

• scale( , ?) )

  rotate

• rotateX( | [] )

• rotateY( | [] )

• rotateZ( | [] )

  skew

• skewX( | [] )

• skewY( | [] )

• skew( | [] , | []?) )

  transform多重效果

• transform:scale(0.5) translate(-100%,-100%);

• transform:none;

  transition

  作用

  补充中间帧

  语法

• transition：属性名 时长 过渡方式 延迟

• transition:left 200ms linear
• transition:left 200ms,top 400ms
• transition:all 200ms

• 过渡方式：linear|ease|ease-in|ease-out|ease-in-out

  注意

  并不是所有属性都能过渡

• display:none => block没法过渡

• 一般改成visibility:hidden => visible
• visibility和display的区别

visibility: hidden——将元素隐藏，但是在网页中该占的位置还是占着。
display: none——将元素的显示设为无，即在网页中不占任何的位置。

animation

@keyframes

语法

animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

• 时长：1s或1000ms
• 过渡方式：同transition
• 次数：整数小数或infinite
• 方向：reverse alternate alternate-reverse
• 填充模式：none forwards backwards both
• 是否暂停：paused running