浏览器渲染机制

一、DOCTYPE

DOCTYPE 是用来声明文档类型和 DTD 规范的，主要用途是合法性验证，并告诉浏览器 HTML 版本。

<!DOCTYPE> 不是 HTML 标签，是声明，并且不区分大小写。

二、浏览器渲染过程

• 解析 HTML 代码构建 DOM 树，解析 CSS 代码构建 CSSOM 规则树；
• 根据 DOM 和 CSSOM 构建 Render Tree ；
• 利用 Render Tree 对页面进行布局和绘制，最后显示；

关于阻塞：在解析 HTML 代码时，遇到<script> 浏览器会先下载和构建CSSOM，然后执行脚本，最后才是继续构建DOM。

（原因：不完整的 CSSOM 是无法使用的。并且在执行脚本的时候会暂停 DOM 的构建，所以建议把脚本放在 body 最后。）

三、Reflow

1. 定义：回流、重排，当对 DOM 的修改导致 DOM 发生变化（指大小、隐藏等），其他元素也会受影响，浏览器根据计算结果绘制页面。一个页面至少会回流一次，就是第一次加载的时候。

2. 触发方式：

• 添加、删除、修改、移动DOM；
• 元素尺寸改变——边距、填充、边框、宽度和高度；
• 浏览器窗口尺寸改变——resize事件发生时；
• 计算 offsetWidth 和 offsetHeight 属性；
• 内容变化，比如用户在input框中输入文字；
• 设置 style 属性的值。

四、Repaint

1. 定义：重绘，当对 DOM 的修改不影响布局时，只是背景色、字体颜色等等的修改，浏览器不需重新计算，直接为元素绘制样式。回流必定会发生重绘，重绘不一定会引发回流。
2. 触发方式：

• 修改字体、背景样式；
• 修改盒子边框曲率；
• 各种不影响尺寸、布局的方法。

五、dispaly:none 和 visibility:hidden

1. 定义：

   dispaly:none ：元素隐藏，占据的空间消失。

   visibility:hidden ：元素隐藏，依然占据空间。

2. 区别：

• visibility具有继承性，给父元素设置visibility: hidden子元素会继承。但如果给子元素设置visibility: visible,则子元素又会显示。
• visibility: hidden不会影响计数器的计数，例如ol>li标签的序号排列，display: none会始终排出连续的号，visibility: hidden不会。*
• CSS3 的 transition 支持visibility属性，但是并不支持display。**
• display: none会引起回流和重绘，visibility:hidden 只会引起重绘。

3. 补充：

   *：

   

   **：

   CSS代码：
   .trans-fadeout{
      -webkit-transition:all 0.5s linear;
      -moz-transition:all 0.5s linear;
      -ms-transition:all 0.5s linear;
      -o-transition:all 0.5s linear;
      transition:all 0.5s linear;
   }
   .image-fadeout{position:absolute; margin-top:20px; visibility:hidden; opacity:0;}
   .hover-fadeout:hover .image-fadeout{ visibility:visible; opacity:1; }
   HTML代码：
   <div class="hover-fadeout">
       <img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="trans-fadeout image-fadeout" />
       <a href="#">经过我显示图片</a>
   </div>