浏览器渲染

leehome
200 阅读2分钟

浏览器渲染原理

浏览器内核可以分成两部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分，但随着 JS 引擎越来越独立，内核也成了渲染引擎的代称。渲染引擎又包括了 HTML 解释器、CSS 解释器、布局、网络、存储、图形、音视频、图片解码器等等零部件。
目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。

每个页面的渲染都经过了下面几个阶段：

  • 解析 HTML生成DOM树
  • 解析 CSS 生成 CSSOM 树，并与 DOM 合并生成 render 树
  • 计算所有元素的位置大小
  • 绘制图层：把每一个页面图层转换为像素，并对所有的媒体文件进行解码
  • 整合图层：浏览器合并各图层，将数据由 CPU 输出给 GPU 最终绘制在屏幕上

什么叫渲染树？

HTML构建的HTML树（DOM）和CSS构建的CSS树（CSSOM）CSSOM合并成的树叫做渲染树（Render Tree）。

如何更新样式

  • 一般我们用JS来更新样式
  1. 比如div.style.background:'red'
  2. 比如div.style.display:'none'
  3. 比如div.classlist.add:('red')
  4. 比如div.remove:()直接删掉节点

  • 三种更新方式

第一种relayout、repaint、recompose全走一遍：div.remove:()会触发当前消失，其他元素relayout。

第二种跳过relayout：改变背景颜色直接repaint和recompose。

第三种跳过relayout和repaint:改变transform,只需要recompose。

CSS动画的两种做法（transition 和 animation）

  • transition（过渡）

作用：补充中间帧

语法：

  1. transition:属性名 时长 过渡方式 延迟

transition:left 200ms linear

   2.可以用逗号分离两个不同属性

transition:left 200ms ；top 400ms

   3. 可以用all代表所有属性all

transition:all200ms 

  4.过渡方式：linear|ease|ease-in|ease-out|ease-in-out|...

  • 注意
  1. 并不是所有属性都能过渡，display:none=>block没法过渡。
  2. 过渡必须有起始，如果有中间点，使用两次transform。
  • animation

作用：声明关键帧，添加动画

标准写法：

  1. from to

  2. 百分数

缩写语法：

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

  1. 时长：1或者1000ms
  2. 过渡方式：跟transition一样
  3. 次数：数字或则infinite
  4. 方向:reverse、alternate、
  5. 填充模式：none、forwards、backwards、both
  6. 是否暂停:paused、running

avatar
文章
阅读
粉丝