CN105630902B

CN105630902B - 一种渲染和增量更新网页的方法

Info

Publication number: CN105630902B
Application number: CN201510962419.XA
Authority: CN
Inventors: 段垚
Original assignee: MAINBO EDUCATION TECHNOLOGY Co Ltd
Current assignee: MAINBO EDUCATION TECHNOLOGY Co Ltd
Priority date: 2015-12-21
Filing date: 2015-12-21
Publication date: 2019-03-26
Anticipated expiration: 2035-12-21
Also published as: CN105630902A

Abstract

本发明涉及一种渲染和更新网页的方法，包括以下步骤：(1)用树形数据结构来表示将要被渲染出来的网页的文档对象模型(DOM)，其中DOM节点的属性用虚拟DOM的节点的属性表示，DOM节点的子节点用虚拟DOM的节点的子节点线性表来表示；(2)如果对应的DOM树还不存在，则递归遍历上述虚拟DOM，根据其节点创建DOM节点，根据子节点线性表创建DOM节点的子节点，并将DOM子节点添加到其父节点中；(3)如果对应的DOM树已经存在，则同时递归遍历虚拟DOM和DOM树，对于两者中位置对应的节点进行操作。本发明的DOM的更新算法大大简化，既减少了代码量又获得了较好的性能。代码具有较好的可读性，开发人员的学习成本低，并减少了代码量。

Description

一种渲染和增量更新网页的方法

技术领域

本发明涉及网页的渲染和更新方法，尤其是浏览器客户端中的网页的渲染和更新方法，属于网页渲染技术领域。

背景技术

最近十年，大量的web网站采用客户端网页渲染来取代部分甚至全部服务器端网页渲染，目的是减少或消除整页刷新，提供更快速的用户体验。例如，在网页中嵌入的JavaScript脚本(运行于浏览器客户端中)可以通过XMLHttpRequest接口主动向服务器请求数据，然后根据获得的数据渲染和更新网页的文档对象模型(DOM)，从而改变呈现给用户的界面。几乎所有的网页都用(X)HTML语言来实现，所以其文档对象模型就是HTML DOM，以下在不至于混淆的情况下就简称DOM。

HTML文档，以及HTML中可以嵌入的SVG和MathML文档，都具有树形的结构，树的节点主要分为元素节点(Element)和文本节点(Text)，其中元素节点还可以有若干属性。DOM就是文档的树形结构在内存中的一种表示形式。DOM还提供一组应用程序编程接口(API)来查询和修改文档。在浏览器中，访问DOM API的语言是JavaScript(在底层，DOM对象是浏览器实现的对象，通常以C++实现，并非JavaScript对象)。在浏览器中，修改DOM后，相应的页面外观也会立即做出相应的变化。

应当注意的是，在浏览器编程环境中，“属性”一词有多重含义：

(1)HTML/XML属性。如“<a href＝’http://a.cn’>”中的href＝’http://a.cn’。

(2)CSS属性。如“color:red”。

(3)WebIDL属性。指DOM API定义的，由浏览器实现的DOM对象的属性，例如Element.onclick。

(4)JavaScript对象属性。指JavaScript语言本身实现的对象的属性。在网页渲染中，以上几种属性都可能涉及到，本发明会在必要时加以区分说明。

在浏览器客户端的网页编程中，“渲染”是指整体地创建、替换DOM树中较大的部分，而“更新”是指局部地更新整个DOM树中的若干较小的部分。两者在理论上并没有清晰的界线，但在实践上有重要区别。单纯依赖整体渲染而缺少局部更新的后果包括性能低下、页面闪烁、重置滚动条的位置、丢失用户输入等，所以理想的网页的渲染和更新方法应该对局部更新有很好的支持。

对于JavaScript脚本如何渲染和更新网页的DOM，业界已经有了很多种解决方案，但都有着各种各样的问题。例如：

1.服务器发送的数据中包含HTML文本片段，客户端的JavaScript代码通过在适当的HTML元素上设置Element.innerHTML属性来完成渲染。这样做的问题是(1)增加了服务器端代码的复杂性，限制了客户端JavaScript代码的灵活性。(2)不规范的HTML文本片段可能引发渲染错误甚至安全漏洞。(3)在HTML文本片段上添加事件监听器仍需通过DOM编程来实现。(4)HTML文本片段是一个整体，只能整体替换页面中的一大块，难以做到局部更新。

2.直接DOM编程。即直接编写客户端的JavaScript转换例程，将服务器端发送的数据转换为DOM。服务器端通常发送JSON(JavaScript Object Notation)格式的数据(也有采用XML的)，客户端将其解析为简单JavaScript对象。这需要大量使用过程式的DOM API(API＝应用程序编程接口)，使得代码冗长和难以维护，对于局部更新就更是复杂。尽管jQuery等JavaScript库可以简化部分代码，但问题并没有被有效地解决。

3.使用客户端模板引擎来渲染。客户端模板引擎是个JavaScript例程，以模板(通常是个有格式的字符串)和模板参数(通常是个简单JavaScript对象)为输入，以HTML文本片段或HTML DOM为输出。服务器端可以发送JSON(JavaScript Object Notation)格式的数据，客户端将其解析为简单JavaScript对象，作为模板参数输出。客户端模板引擎实际上是将前述JavaScript转换例程的一种抽象，可以大大简化DOM的渲染。但是模板引擎的问题是：(1)为了提高灵活性，模板字符串通常有有自己的编程结构，如分支、循环、作用域规则等，这等于要求开发人员学习一种新的语言，且这种语言缺乏编程工具的支持，难以被调试和除错，这就增大了开发成本；(2)模板的输出通常是一个整体，只能整体替换页面中的一大块，难以做到局部更新。

4.通过虚拟DOM和差异计算来渲染和更新DOM。虚拟DOM一般是用JavaScript对象实现的树形数据结构，与实际的DOM有一一对应的关系(实际的DOM是浏览器实现的对象，通常以C++实现)。客户端的JavaScript代码，每次从服务器端获得数据(如JSON)后，产生出描述整个界面的虚拟DOM树，交给JavaScript实现的渲染例程去产生渲染或更新DOM。初次渲染时，渲染例程根据虚拟DOM树创建实际DOM树；后续的更新中，渲染例程先计算的更新前后的两个虚拟DOM树的差异数据，然后根据这个差异数据去修改实际DOM。如果差异很小，则被修改的实际DOM节点就只是页面的一小部分，从而避免前述整体渲染的问题。虚拟DOM和差异计算是目前比较理想的网页渲染和更新方法，具体的例子有美国Facebook公司开发的React框架(https://facebook.github.io)等。但目前的一些实现，包括React也存在一些问题：(1)计算两个虚拟DOM树的差异数据是比较复杂的，一方面可能引起性能问题，另一方面也导致渲染例程的代码量较大，而这会导致页面的初次加载较慢；(2)虚拟DOM的创建需要使用特定的例程或者领域特定语言(Domain Specific Language,DSL，对于React就是JSX)，前者的问题是代码的可读性不佳，且增加了代码量，后者的问题与客户端模板引擎类似：产生了一门新语言。

发明内容

为解决以上问题，本发明旨在提供一种避免了现有虚拟DOM和差异计算的缺点的基于虚拟DOM的网页渲染和更新方法。

为实现上述目的，本发明采用的技术方案如下：

一种渲染和更新网页的方法，包括以下步骤：

(1)用树形数据结构(称为虚拟文档对象模型或虚拟DOM)来表示将要被渲染出来的网页的文档对象模型(DOM)，其中DOM节点的属性用虚拟DOM的节点的属性表示，DOM节点的子节点用虚拟DOM的节点的子节点线性表来表示；

(2)如果对应的DOM树还不存在，则递归遍历上述虚拟DOM，根据其节点创建DOM节点，根据子节点线性表创建DOM节点的子节点，并将DOM子节点添加到其父节点中；

(3)如果对应的DOM树已经存在，则同时递归遍历虚拟DOM和DOM树，对于两者中位置对应的节点：

A)如果两者的节点名不同，则根据虚拟DOM节点重新创建DOM节点并替换原来的DOM节点；

B)如果对应位置上的DOM节点不存在而虚拟DOM节点存在，则根据虚拟DOM节点创建DOM节点并插入该位置；

C)如果对应位置上的虚拟DOM节点不存在而DOM节点存在，则删除该DOM节点；

D)如果两者的节点名相同：一方面枚举两者的属性，对同名且等值的属性不做处理；对同名不等值的属性或DOM节点缺少的属性，，将虚拟DOM节点的属性值写入DOM节点中；对虚拟DOM节点缺少的属性，删除DOM节点的属性；另一方面，递归遍历两者的子节点，继续做上述A-D的操作。

进一步地，如上所述的渲染和更新网页的方法，该方法是用JavaScript语言来实现，且虚拟DOM采用简单JavaScript对象来表示。

进一步地，如上所述的渲染和更新网页的方法，用虚拟DOM节点的属性名的前缀来区分不同类型的属性。

进一步地，如上所述的渲染和更新网页的方法，为每个通过虚拟DOM创建的DOM元素节点建有一个簿记表，记录上述方法中添加的属性及其对应的值，在第(3-D)步中枚举DOM属性和比较属性值的操作通过该簿记表来进行。

进一步地，如上所述的渲染和更新网页的方法，根据虚拟DOM节点创建实际DOM节点时，根据节点名和父节点的命名空间来推测其命名空间。

本发明的有益效果在于：(1)没有单独的虚拟DOM差异计算步骤(可以认为与DOM树的更新合一了)，因此DOM的更新算法大大简化，既减少了代码量又获得了较好的性能。(2)可以直接利用简单JavaScript对象来表示虚拟DOM结构，使代码具有较好的可读性，开发人员的学习成本低，并减少了代码量。(3)可以方便地处理(X)HTML内嵌SVG和MathML的情形(此时需要区分命名空间)。(4)使用前缀区分不同类型的属性，即避免了属性名冲突又简化了代码。

具体实施方式

下面结合实施例对本发明进行详细的描述。

一、虚拟DOM的形式

本发明中，虚拟DOM采用简单JavaScript对象(Plain JavaScript Object)来表示，例如虚拟DOM树：

就对应于如下这个HTML DOM树：

可见虚拟DOM树就是一个简单JavaScript对象，可以用对象字面量的写法来创建。每个对象对应一个实际DOM中的元素，子节点则通过Kids属性列出。虚拟DOM的各种属性的意义如下：

(1)Name：对应HTML或SVG或MathML的元素名。

(2)Kids：子节点列表，是一个数组，其成员要么也是个DOM树，要么是字符串；字符串则对应实际DOM中的文本节点。

(3)以‘@’开头的属性映射到HTML/XML属性(去掉去掉首字符，下同)。

(4)以‘-’开头的属性开头的属性映射到CSS属性。

(5)以‘.’开头的属性映射到HTML class属性的片段，如果其值是“真”则该class存在，如果其值是“假”则该class不存在。

(6)其它的属性，如onclick、value，映射到同名的WebIDL属性。

二、从虚拟DOM树渲染、更新实际DOM树的方法

“从虚拟DOM树更新实际DOM树”的方法有三个输入参数：(1)虚拟DOM节点(可以是字符串或JavaScript对象)。(2)实际DOM节点。(3)更新后的实际父节点；方法的返回值(即输出)是更新后的实际DOM节点。第(2)、(3)个输入参数可以省略，这样就相当于初次渲染实际DOM的情形。该方法的具体过程是：

S01：让“当前实际父节点”的值是参数“实际DOM节点”的父节点，转到S02；

S02：如果参数“虚拟DOM节点”的类型是字符串，则转到S03，否则转到S04；

S03：如果参数“实际DOM节点”存在且类型是“文本节点”，则设置“实际DOM节点”的值为参数“虚拟DOM节点”的值，返回“实际DOM节点”，结束；否则，新建一个文本节点，名为“新实际DOM节点”，值为参数“虚拟DOM节点”的值(JavaScript代码的例子：document.createTextNode(虚拟DOM节点))，转到S21；

S04：如果“实际DOM节点”存在且其元素名(即其localName属性)等于“虚拟DOM节点”的Name属性，则转到S07，否则转到S05；

S05：如果“虚拟DOM节点”的Name属性是字符串‘math’，则让“实际命名空间”的值是字符串'http://www.w3.org/1998/Math/MathML'，否则如果Name属性是字符串‘svg’，则确定“实际命名空间”的值是字符串'http://www.w3.org/2000/svg'；否则，如果参数“更新后的实际父节点”存在，则让“实际命名空间”的值是“更新后的实际父节点”的命名空间(即其namespaceURI属性)；否则，如果“当前实际父节点”存在，则让“实际命名空间”的值是“当前实际父节点”的命名空间(即其namespaceURI属性)；否则，让“实际命名空间”的值是某个默认值(如当前文档的根元素的namespaceURI属性)；

转到S06；

S06：新建一个名为“新实际DOM节点”的元素节点，其元素名是“虚拟DOM节点”的Name属性，其命名空间是“实际命名空间”(JavaScript代码的例子：document.createElementNS(实际命名空间,虚拟DOM节点.Name))；

转到S07；

S07：如果“新实际DOM节点”存在，让“目标实际节点”是“新实际DOM节点”，否则让“目标实际节点”是“实际DOM节点”；

如果“虚拟DOM节点”的Kids属性不存在或者是长度为0的数组，则删除“目标实际节点”的所有子节点，转到S09；否则转到S08；

S08：让“最大子节点数”是“虚拟DOM节点”的Kids属性的长度和“目标实际节点”的子节点的个数中的较大者；

从0开始到“最大子节点数”减一，依次取出该位置的“虚拟DOM节点”的Kids的值“虚拟子节点i”和该位置的“目标实际节点”的子节点“实际子节点i”，执行以下步骤：

(1)如果“实际子节点i”存在，而“虚拟子节点i”不存在，则删除“实际子节点i”；

(2)如果“实际子节点i”和“虚拟子节点i”都存在，则调用“从虚拟DOM树更新实际DOM树”方法(注意这里发生了递归)，参数是：“虚拟子节点i”，“实际子节点i”，“目标实际节点”；

(3)如果“实际子节点i”不存在，而“虚拟子节点i”存在，则调用“从虚拟DOM树更新实际DOM树”方法(注意这里发生了递归)，参数是：“虚拟子节点i”，null，“目标实际节点”，并将返回值添加为“目标实际节点”的子节点；

转到S09；

S09：让“簿记映射表”是“目标实际节点”对应的簿记映射表，如果后者不存在则新建一个；初始状态的簿记映射表中没有任何属性；转到S10；

S10：遍历“簿记映射表”中的属性，如果“虚拟DOM节点”中没有同名属性或者同名属性的值是空(null/undefined)，则执行(1～5)的操作：

(1)从“簿记映射表”中删除该属性；

(2)如果该属性名以’@’开头(如’@src’)，则从“目标实际节点”中删除该HTML/XML属性，参数是去掉开头字符的部分(JavaScript的例子是：目标实际节点.removeAttribute(属性名.slice(1)))；

(3)如果该属性名以’-’开头(如’-color’)，则从“目标实际节点”中删除该CSS属性，参数是去掉开头字符的部分(JavaScript的例子是：目标实际节点.style.removeProperty(属性名.slice(1)))；

(4)如果该属性名以’.’开头(如’.selected’)，则从“目标实际节点”中删除该class，参数是去掉开头字符的部分(JavaScript的例子是：目标实际节点.classList.remove(属性名.slice(1)))；

(5)如果该属性名以其它字符开头(如’onclick’)，则将“目标实际节点”中的同名WebIDL属性置为null(JavaScript的例子是：目标实际节点[属性名]＝null)；

转到S11；

S11：遍历“虚拟DOM节点”中的属性(以下称为“属性名”和“属性值”)，如果“属性值”与“簿记映射表”中的同名属性的值不同，则执行以下操作：

(1)在“簿记映射表”中设置同名属性的值为“属性值”；

(2)如果该属性名以’@’开头(如’@src’)，则在“目标实际节点”中设置该HTML/XML属性，参数是“属性名”去掉开头字符的部分和“属性值”(JavaScript的例子是：目标实际节点.setAttribute(属性名.slice(1),属性值))；

(3)如果该属性名以’-’开头(如’-color’)，则在“目标实际节点”中设置该CSS属性，参数是“属性名”去掉开头字符的部分和“属性值”(JavaScript的例子是：目标实际节点.style.setProperty(属性名.slice(1),属性值))；

(4)如果该属性名以’.’开头(如’.selected’)，且“属性值”为“真”，则对“目标实际节点”添加该class，参数是去掉开头字符的部分(JavaScript的例子是：目标实际节点.classList.add(属性名.slice(1)))；

(5)如果该属性名以’.’开头(如’.selected’)，且“属性值”为“假”，则从“目标实际节点”删除该class，参数是去掉开头字符的部分(JavaScript的例子是：目标实际节点.classList.remove(属性名.slice(1)))；

(6)如果该属性名以其它字符开头(如’onclick’)，则将“目标实际节点”中的同名WebIDL属性置为“属性值”(JavaScript的例子是：目标实际节点[属性名]＝属性值)；

转到S21；

S21：如果“新实际DOM节点”存在且“当前实际父节点”存在，则用“新实际DOM节点”替换“实际DOM节点”；转到S22；

S22：如果“新实际DOM节点”存在则返回它，否则如果“实际DOM节点”存在则返回它，否则返回空(null)；结束。

其中，补充说明如下：

1.S09步中，“簿记映射表”存在的意义是能够统一和快速地遍历实际DOM节点的属性。目前有的浏览器中遍历DOM节点的属性有困难，有的遍历速度比较慢。

2.S09步中，“簿记映射表”可以用简单JavaScript对象或者JavaScript Map类型来等实现，只要能提供从字符串类型的属性名到任意类型的值的映射即可。

3.S09步中，“目标实际节点”和“簿记映射表”有一一对应的关系，这种对应关系可以有多种实现。(1)可以在“目标实际节点”上添加一个JavaScript属性，指向“簿记映射表”，如“目标实际节点.bookkeeper＝簿记映射表”；(2)可以建立一个全局的弱引用映射表(WeakMap)，将两者关联起来，如“weakMap.set(目标实际节点,簿记映射表)”。

4.DOM节点的WebIDL属性都是小写英文字母开头的，所以对HMTL/XML属性、CSS属性等采用’@’、’-’等非字母前缀足以区分它们。有的虚拟DOM实现(如React)不使用前缀区分，这就导致需要处理不同类型的属性名称冲突的问题，使得代码变得复杂。

5.因为嵌入HTML的SVG片段的根元素总是<svg>，MathML片段的根元素总是<math>，所以S05步只跟踪这两个元素名，并让子元素继承父元素的命名空间就可以基本准确地确定任意元素的命名空间。这避免了让代码处理所有的SVG和MathML元素名。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若对本发明的这些修改和变型属于本发明权利要求及其同等技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims

1.一种渲染和更新网页的方法，其特征在于所述方法包括以下步骤：

(1)用树形数据结构来表示将要被渲染出来的网页的文档对象模型(DOM)，其中DOM节点的属性用虚拟DOM的节点的属性表示，DOM节点的子节点用虚拟DOM的节点的子节点线性表来表示；

D)如果两者的节点名相同：一方面枚举两者的属性，对同名且等值的属性不做处理；对同名不等值的属性或DOM节点缺少的属性，将虚拟DOM节点的属性值写入DOM节点中；对虚拟DOM节点缺少的属性，删除DOM节点的属性；另一方面，递归遍历两者的子节点，继续做上述A到D的操作。

2.如权利要求1所述的方法，其特征在于，该方法用JavaScr i pt语言来实现，且虚拟DOM采用简单JavaScr i pt对象来表示。

3.如权利要求1所述的方法，其特征在于，用虚拟DOM节点的属性名的前缀来区分不同类型的属性。

4.如权利要求1所述的方法，其特征在于，为每个通过虚拟DOM创建的DOM元素节点建有一个对应的簿记表，记录上述方法中添加的属性及其对应的值，在第(3-D)步中枚举DOM属性的操作通过该簿记表来进行。

5.如权利要求1所述的方法，其特征在于，根据虚拟DOM节点创建实际DOM节点时，根据节点名和父节点的命名空间来推测其命名空间。