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元素的应用）
网友评论