1

1.DOCTYPE

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

解读:DTD就是告诉浏览器我是什么文档类型,那么浏览器根据这个来判断用什么引擎来解析渲染他。

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

解读:DOCTYPE通知浏览器当前文档的DTD。

  • 常见的DOCTYPE
  • 1.HTML 5,!DOCTYPE html
  • 2.HTML 4.01 Strict,严格模式,该DTD包含所有HTML元素和属性,但不包括展示型的和弃用的元素(比如font)。
  • 3.HTML 4.01 Transitional,传统模式(宽松模式),该DTD包含所有HTML元素和属性,包括展示型的和弃用的元素(比如font)。

2.浏览器渲染过程

图片描述图片描述图片描述图片描述

3.重排Reflow

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

  • 触发Reflow:(一般触发Reflow时都会需要Repaint)
  • 1.当你增加、删除、修改DOM节点时,会导致Reflow或Repaint;
  • 2.当你移动DOM的位置,或是搞个动画的时候;
  • 3.当你修改CSS样式的时候;(css改变宽高、display:none;)
  • 4.当你Resize窗口的时候(移动端没有这个问题),或是滚动的时候;
  • 5.当你修改网页的默认字体时;在页面加载完后避免这样做,会影响性能

如何尽量避免Reflow

4.重绘Repaint

定义:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为Repaint。(解读:页面要呈现的内容,统统画在屏幕上)

  • 触发Repaint:
  • 1.DOM改动;
  • 2.CSS改动;

如何尽量减少Repaint频率,将需要追加的多个DOM节点先存放在一个片段(createDocumentFragment())中,最后一次性放到页面中。

5.布局Layout

Layout作用是计算每一个DOM的位置,宽高。


stefanieliang
190 声望19 粉丝

一天一笔记~