渲染机制

最新推荐文章于 2022-10-02 17:09:24 发布

WWWln1234

最新推荐文章于 2022-10-02 17:09:24 发布

阅读量176

点赞数

分类专栏：渲染机制文章标签：渲染机制

本文链接：https://blog.csdn.net/sinat_32308611/article/details/89764258

版权

渲染机制专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是DOCTYPE及作用

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

DOCTYPE是用来声明文档类型的DTD规范的，一个主要的用途是文件的合法性验证

如果文件代码不合法，那么浏览器解析时便会出一些差错

HTML5的DOCTYPE声明：

<!DOCTYPE html>

HTML4.0有两个模式：严格模式（strict）和传统模式（loose）

严格模式：该DTD包含所有HTML元素和属性，但不包含展示性和弃用的元素，比如font

传统模式：该DTD包含所有HTML元素和属性，包含展示性和弃用的元素，比如font

2.浏览器渲染过程

1.DOM Tree

浏览器中的HTML解析器把HTML解析成DOM Tree

2.CSSOM Tree

CSS解析器把各种样式整合起来（内联、style标签和外联）生成CSSOM Tree

3.Render Tree

DOM Tree和CSSOM Tree整合生成Render Tree

4.Layout

浏览器根据Render Tree计算出元素在浏览器中的位置，最后画出来

3.重排Reflow

1.Reflow定义

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

2.触发Reflow

新增、删除、修改（宽高位置有关的属性）DOM节点时，会触发Reflow或Repaint
移动DOM位置、或是有动画时
Resize窗口的时候（移动端没有），或者滚动的时候，可能有
修改网页的默认字体时

4.重绘Repaint

1.Repaint定义

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

2.触发Repaint

DOM改动

CSS改动

3.如何最大程度的降低Repaint

1.避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括一下几种：

先将元素从document中删除，完成修改后再把元素放回原来的位置
将元素的display设置为none，完成修改后再把display修改为原来的值
若需要创建多个DOM节点，可以使用DocumentFragment（document片段）创建完后一次性加入到document


function append(){
    for(var i=0;i<100;i++){
        var div = document.createElement("div");
        document.body.appendChild(div);
    }
}

//改进后

//使用document.createDocumentFragment()方法
function append(){
    var documentFragment = document.createDocumentFragment();
    for(var i=0;i<100;i++){
        var div = document.createElement("div");
        //加入到document片段中
        documentFragment.appendChild(div);
    }
    
    document.body.appendChild(documentFragment);
}

2.集中修改样式

尽可能少的修改元素style上的属性
尽量通过修改className来修改样式
通过cssText属性来设置样式值

3.缓存Layout属性值

对于layout属性中非引用类型的值（数字型）如果需要多次访问则可以在一次访问时先存储到变量中

 var width = el.offsetWidth;
 var scrollLeft = el.scrollLeft;

5.布局Layout

WWWln1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渲染机制

1.什么是DOCTYPE及作用DTD(document type definition，文档类型定义)是一系列的语法规则，用来定义XML或（X）HTML的文件类型，浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。DOCTYPE是用来声明文档类型的DTD规范的，一个主要的用途是文件的合法性验证如果文件代码不合法，那么浏览器解析时便会出一些差错HTML5的...
复制链接

扫一扫