什么是DOCTYPE及作用?
DTD(Document Type Definition):文档类型定义。
是一系列的语法规则,用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型,决定使用何种协议来解析,以及切换浏览器模式。
DOCTYPE:用来声明DTD规范。
一个主要的用途便是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出现一些差错。
常见的DOCTYPE声明有几种:
- HTML 4.01 Strict:(严格模式)
该DTD包含所有的HTML元素和属性,但不包括展示性的和弃用的元素(比如 font、u下划线等,这些是被废弃了的)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional:(传统模式)
该DTD包含所有的HTML元素和属性,但包括展示性的和弃用的元素(比如 font、u下划线等)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 5
<!DOCTYPE html>
浏览器渲染过程
- DOM Tree:浏览器将HTML解析成树形的数据结构(DOM 树)。
- CSS Rule Tree:浏览器将CSS解析成树形的数据结构。
- Render Tree: DOM和CSSOM合并后生成Render Tree。(无法知道节点的位置)
- Layout: 有了RenderTree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置(宽高、颜色等)。
- Painting:按照算出来的规则,通过显卡,把内容绘制到屏幕上。
- Display:打印看到的最终效果。
浏览器渲染原理及流程【参考链接】https://www.cnblogs.com/slly/p/6640761.html
重排Reflow
定义:DOM结果中的各个元素都有自己的模型,这些都需要浏览器根据各种样式来计算,并根据计算结果将元素放在它该出现位置的过程。
什么时候触发Reflow
- 增加、删除、修改DOM节点时,会导致 Reflow 或 Repaint。
- 移动DOM的位置,或是加个动画的时候。
- 修改CSS样式时。(宽高、display 为none等,都是通过css样式来修改的)
- 当用户Resize窗口时(移动端没有这个问题),或是滚动的时候,有可能会触发(具体要看浏览器的规则)。
- 修改网页的默认字体时(这个影响非常严重)。
重绘Repaint
定义:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器便把这些元素都按照各自的特性绘制一遍的过程。
什么时候触发 Repaint
- DOM改动
- CSS改动
其实,就是判断当前呈现的内容是否发生变化(无论这个变化是通过DOM改动还是CSS改动)。只要页面显示的内容不一样了,肯定要 Repaint。
如何避免Reflow以及减少Repaint?
- 如果需要创建多个DOM节点,可以使用DocumentFragment创建完,然后一次性地加入document。
- 将元素的display设置为”none”,完成修改后再把display修改为原来的值。
如何减少浏览器repaint和reflow【参考链接】https://www.cnblogs.com/fullhouse/archive/2012/02/20/2360301.html