渲染机制

• 知识面要广
• 理解要深刻
• 学会赞美（说自己没有了解的这么深）

---

• 渲染机制
• js运行机制
• 页面性能
• 错误监控

---

渲染机制

• 什么是DOCTYPE及作用
• 浏览器渲染过程
• 重排Reflow
• 重绘Repaint
• 布局Layout

什么是DOCTYPE及作用

• DTD
  用来定义xml，xhtml的文档类型。
  用来告诉浏览器我是什么文档类型。让浏览器根据文档类型来选择合适的引擎来解析渲染。
• DOCTYPE
  告诉浏览器是什么DTD，也就是什么文档类型。

• 常见的DOCTYPE有哪些，写一下html5的该怎么写？
  要知道html4有严格模式和传统模式。以及区别。

  
  
  

1.浏览器渲染过程

html解析器解析html生成dom tree，css解析器解析css生成cssom tree，然后这两颗树结合生成render tree，layout之前render tree不知道每个结点具体该画在页面的什么位置，layout可以精确的计算每个节点要显示位置的宽和高以及颜色。最后浏览器就开始画图啦，呈现出页面。

2.重排Reflow

• 定义

  
  
  
• 触发
  ---增加，删除，修改dom节点时，会导致reflow或repaint
  ---移动dom的位置，或者是动画的时候
  ---修改css样式的时候
  ---resize窗口的时候，或是滚动
  ---修改网页的默认字体时

3.重绘Repaint

页面要成仙的内容画在屏幕上。

• 定义

  
  
  
• 触发
  dom改动
  css改动
• 如何避免最小程度的重绘？
  通过documentframe，将要加的节点全部加在这个片段节点上，最后一次性添加到dom中，而不是一个一个节点依次添加到dom中。