渲染机制

一、DOCTYPE及作用

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

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

    HTML5

        <!DOCTYPE html>

    HTML4.01 Strict——不包括展示性和弃用的元素(比如font)

        <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/strict.dtd">

    HTML4.01 Transitional

        <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/loose.dtd">

二、浏览器的渲染过程

三、重排Reflow

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

    触发Reflow:

            1)增加、删除、修改DOM结点时,会导致Reflow 或Repaint

            2)移动DOM的位置,或是写个动画的时候

            3)修改CSS样式的时候

            4)Resize窗口的时候(移动端则没有这个问题),或者是混动的时候

            5)修改网页的默认字体时

猜你喜欢

转载自my.oschina.net/u/3797724/blog/1812243