(九)前端面试:渲染机制

文章内容参考自《前端跳槽面试必备技巧》 

1.什么是DOCTYPE及作用

DTD (document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式。

DOCTYPE是用来声明文档类型和DTD规范的,一个主要的用途便是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出一些差错。

2.浏览器渲染过程

3.重排Reflow

定义

DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow。

触发Reflow

  • 当你增加、删除、修改DOM结点时,会导致Reflow或Repaint
  • 当你移动DOM的位置,或是搞个动画的时候
  • 当你修改CSS样式的时候
  • 当你Resize窗口的时候(移动端没有这个问题), 或是滚动的时候
  • 当你修改网页的默认字体时
     

4. 重绘Repaint

定义
当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了-遍, 于是页面的内容出现了,这个过程称之为repaint。

触发Repaint

  • DOM改动
  • CSS改动

5.布局Layout 

猜你喜欢

转载自blog.csdn.net/qq_39025670/article/details/96855959