前端——渲染机制

 

1、什么是DOCTYPE及作用？

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

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

 

DOCTYPE 的类型：

（1）HTML5   

（2）HTML4.01  strict(严格模式)——该DTD包含所有HTML元素和属性，但不包含展示性和弃用性的元素，如：font

     严格模式又称标准模式，是指浏览器按照 W3C 标准解析代码，呈现页面。

 

（3）HTML4.01  Transitional(传统模式)——该DTD包含所有HTML元素和属性，也包含展示性和弃用性的元素，如：font

 

2、浏览器的渲染过程

 

 

 基本过程：

1、HTML解析出DOM Tree

2、CSS解析出Style Rules

3、将二者关联生成Render Tree

4、Layout 根据Render Tree计算每个节点的信息

5、Painting 根据计算好的信息绘制整个页面

 

发起请求—》解析HTML—》解析样式—》执行JavaScript—》布局—》绘制

页面渲染优化：

1、HTML文档结构层次尽量少，最好不深于六层；

2、脚本尽量后放，放在前即可；

3、少量首屏样式内联放在标签内；

4、样式结构层次尽量简单；

5、在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；

6、减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；

7、动画尽量使用在绝对定位或固定定位的元素上；

8、隐藏在屏幕外，或在页面滚动时，尽量停止动画；

9、尽量缓存DOM查找，查找器尽量简洁；

10、涉及多域名的网站，可以开启域名预解析

从输入URL到最后页面呈现的过程（网页响应过程）：

1、用户输入URL地址

2、浏览器从URL解析出主机名

3、 浏览器将主机名转换成服务器的ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）

4、浏览器将端口号从URL中解析出来

5、浏览器建立一条与目标Web服务器的TCP连接（三次握手）

6、浏览器向服务器发送一条HTTP请求报文

7、服务器向浏览器返回一条响应报文

8、关闭连接，浏览器解析文档

9、如果文档中有资源，重复6 7 8动作，直至资源全部加载完毕

3、重排 Reflow

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

触发reflow：

1、当增加、删除、修改DOM节点时，会导致reflow或repaint

2、当移动DOM的位置，或是插入动画的时候

3、当修改CSS样式的时候

4、当Resize窗口的时候，或是滚动的时候

5、当修改网页的默认字体时

4、重绘Repaint

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

触发Repaint:

1、DOM改动

2、CSS改动

如何避免最小长度的Repaint?

将要加的元素放在一个节点，再将该节点一次性加入DOM。（不要一个一个加）

5、布局Layout:根据渲染树将节点树的每一个节点布局在屏幕上的正确位置。