浏览器渲染原理

目录

• 浏览器渲染原理
  • 浏览器渲染的6个步骤
  • 三种不同的渲染(更新)方式
    • 第一种 全走
    • 第二种 跳过布局
    • 第三种 跳过布局与绘制
• 动画的原理

浏览器渲染原理

chrome开发者工具可以查看哪些是重新绘制渲染的
步骤：chrome右键“检查”-> 按下esc -> 左上角三个点 -> 点击"Rendering" -> 勾上"paint flashing"
然后页面重新渲染时绿色就表示重新绘制(repaint)

浏览器渲染的6个步骤

1. 创建HTML DOM
2. 创建CSS DOM
3. 合成以上两棵树
4. 布局 Layout
5. 绘制 paint
6. 合成图层 composite

三种不同的渲染(更新)方式

有一个网站可以查看各属性重新渲染时到底触发哪种方式
点击跳转csstriggers

第一种 全走

JS/CSS -> style -> Layout -> Paint -> Composite
div.remove 触发当前元素消失，页面重新绘制，其它元素全部relayout

第二种 跳过布局

JS/CSS -> Style -> Paint -> Composite
如果改变背景颜色，直接repaint+composite

第三种 跳过布局与绘制

JS/CSS -> Style -> Composite
改变transform，只需要composite

动画的原理

帧：每个静止的画面
一般播放速度电视时24帧，游戏是30帧
一个小demo
html

<div id="demo"></div>

css

   #demo {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            transition: all is linear;
        }

        #demo.end {
            transform: translateX(200px);
        }

js

    let n = 1
        let id = setTimeout(() => {
            demo.classList.add('end')
        }, 1000);