渲染机制

2020-06-08 本文已影响0人爱看小说的叶子

1：DOCTYPE是什么？

解：声明文档类型，告诉浏览器这时什么文档类型、解析什么文档类型。

延申问题1：h5 doctype 怎么编写?其它的呢？

解：h5：<!DOCTYPE html>

h4以下分为严格类型(废弃掉和不展示的元素不能使用) 和传统型（废弃掉的和不展示元素可以使用）

2：渲染流程？

解：从html解析得到Dom树（dom 节点的二叉树），css样式文件得到Css rule（各个节点的样式二叉树）,然后将dom树和css rule 进行整合，得到rende tree。然后将renden tree进行布局具体位置，然后进行绘制进行页面展示。

3：重排（reflow）?

解：概念：将dom各个节点放置到确定的位置上。

触发： 位置的改变就会触发。例如插入节点或者删除节点之类。

4：重绘（repaint）?

解：将样式和位置展示出来就是重绘。

触发：修改样式和位置就会触发重绘。

避免引起重绘和重排的处理：

1、display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

2、将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。（例如：有动画效果的元素就最好设置为绝对定位）

3、尽量不要在布局信息改变时做查询（会导致渲染队列强制刷新）

4、同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）

5、如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发1次重排（fragment元素的应用）