一种渲染和增量更新网页的方法
【技术领域】
[0001] 本发明设及网页的擅染和更新方法，尤其是浏览器客户端中的网页的擅染和更新 方法，属于网页擅染技术领域。
【背景技术】
[0002] 最近十年，大量的web网站采用客户端网页擅染来取代部分甚至全部服务器端网 页擅染，目的是减少或消除整页刷新，提供更快速的用户体验。例如，在网页中嵌入的 化vaScript脚本(运行于浏览器客户端中）可W通过XMLHttpRequest接口主动向服务器请 求数据，然后根据获得的数据擅染和更新网页的文档对象模型(D0M)，从而改变呈现给用户 的界面。几乎所有的网页都用(X)HTML语言来实现，所W其文档对象模型就是HTML D0M，W 下在不至于混淆的情况下就简称DOM。
[0003] HTML文档，W及HTML中可W嵌入的SVG和MathML文档，都具有树形的结构，树的节 点主要分为元素节点化lement)和文本节点（Text),其中元素节点还可W有若干属性。D0M 就是文档的树形结构在内存中的一种表示形式。D0M还提供一组应用程序编程接口（API)来 查询和修改文档。在浏览器中，访问D0M API的语言是化vaScript(在底层，D0M对象是浏览 器实现的对象，通常WC++实现，并非化vaScript对象）。在浏览器中，修改D0M后，相应的页 面外观也会立即做出相应的变化。
[0004] 应当注意的是，在浏览器编程环境中，"属性"一词有多重含义：
[0005] (l化TML/XML属性。如''<a虹ef='http://a.cn'〉"中的虹ef='http://a.cn'。
[0006] (2)CSS属性。如 "color:reef。
[0007] (3)WebIDL属性。指D0M API定义的，由浏览器实现的D0M对象的属性，例如 Element.onclick。
[000引（4)化vaScript对象属性。指化vaScript语言本身实现的对象的属性。在网页擅染 中，W上几种属性都可能设及到，本发明会在必要时加 W区分说明。
[0009] 在浏览器客户端的网页编程中，"擅染"是指整体地创建、替换D0M树中较大的部 分，而"更新"是指局部地更新整个D0M树中的若干较小的部分。两者在理论上并没有清晰的 界线，但在实践上有重要区别。单纯依赖整体擅染而缺少局部更新的后果包括性能低下、页 面闪烁、重置滚动条的位置、丢失用户输入等，所W理想的网页的擅染和更新方法应该对局 部更新有很好的支持。
[0010] 对于化vaScript脚本如何擅染和更新网页的D0M，业界已经有了很多种解决方案， 但都有着各种各样的问题。例如：
[0011] 1.服务器发送的数据中包含HTML文本片段，客户端的化vaScript代码通过在适当 的HTML元素上设置Element. innerHTML属性来完成擅染。运样做的问题是（1)增加了服务器 端代码的复杂性，限制了客户端化vaScript代码的灵活性。（2)不规范的HTML文本片段可能 引发擅染错误甚至安全漏桐。（3)在HTML文本片段上添加事件监听器仍需通过D0M编程来实 现。（4)HTML文本片段是一个整体，只能整体替换页面中的一大块，难W做到局部更新。
[0012] 2.直接DOM编程。即直接编写客户端的化vaScript转换例程，将服务器端发送的数 据转换为D0M。服务器端通常发送JSONQavaScript Object No化tion)格式的数据(也有采 用XML的），客户端将其解析为简单化vaScript对象。运需要大量使用过程式的D0M APKAPI =应用程序编程接口），使得代码冗长和难W维护，对于局部更新就更是复杂。尽管jQuery 等化vaScript库可W简化部分代码，但问题并没有被有效地解决。
[0013] 3.使用客户端模板引擎来擅染。客户端模板引擎是个化vaScript例程，W模板(通 常是个有格式的字符串）和模板参数(通常是个简单化vaScript对象）为输入，WHTML文本 片段或HTML D0M为输出。服务器端可W发送JSONQavaScript Object No化tion)格式的数 据，客户端将其解析为简单化vaScript对象，作为模板参数输出。客户端模板引擎实际上是 将前述化vaScript转换例程的一种抽象，可W大大简化D0M的擅染。但是模板引擎的问题 是：（1)为了提高灵活性，模板字符串通常有有自己的编程结构，如分支、循环、作用域规则 等，运等于要求开发人员学习一种新的语言，且运种语言缺乏编程工具的支持，难W被调试 和除错，运就增大了开发成本；（2)模板的输出通常是一个整体，只能整体替换页面中的一 大块，难W做到局部更新。
[0014] 4.通过虚拟D0M和差异计算来擅染和更新D0M。虚拟D0M-般是用化vaScript对象 实现的树形数据结构，与实际的D0M有一一对应的关系（实际的D0M是浏览器实现的对象，通 常WC++实现）。客户端的化vaScript代码，每次从服务器端获得数据(如JS0N)后，产生出描 述整个界面的虚拟D0M树，交给化vaScript实现的擅染例程去产生擅染或更新D0M。初次擅 染时，擅染例程根据虚拟D0M树创建实际D0M树;后续的更新中，擅染例程先计算的更新前后 的两个虚拟D0M树的差异数据，然后根据运个差异数据去修改实际D0M。如果差异很小，则被 修改的实际D0M节点就只是页面的一小部分，从而避免前述整体擅染的问题。虚拟D0M和差 异计算是目前比较理想的网页擅染和更新方法，具体的例子有美国化cebook公司开发的 React框架化ttps :/7facebook.github. io)等。但目前的一些实现，包括React也存在一些 问题：（1)计算两个虚拟D0M树的差异数据是比较复杂的，一方面可能引起性能问题，另一方 面也导致擅染例程的代码量较大，而运会导致页面的初次加载较慢；（2)虚拟D0M的创建需 要使用特定的例程或者领域特定语言（Domain Specific Language，DSL，对于React就是 JSX)，前者的问题是代码的可读性不佳，且增加了代码量，后者的问题与客户端模板引擎类 似:产生了一口新语言。
【发明内容】
[0015] 为解决W上问题，本发明旨在提供一种避免了现有虚拟D0M和差异计算的缺点的 基于虚拟D0M的网页擅染和更新方法。
[0016] 为实现上述目的，本发明采用的技术方案如下：
[0017] -种擅染和更新网页的方法，包括W下步骤：
[0018] (1)用树形数据结构(称为虚拟文档对象模型或虚拟D0M)来表示将要被擅染出来 的网页的文档对象模型(D0M)，其中D0M节点的属性用虚拟D0M的节点的属性表示，D0M节点 的子节点用虚拟D0M的节点的子节点线性表来表示；
[0019] (2)如果对应的D0M树还不存在，则递归遍历上述虚拟D0M，根据其节点创建D0M节 点，根据子节点线性表创建D0M节点的子节点，并将D0M子节点添加到其父节点中；
[0020] (3)如果对应的DOM树已经存在，则同时递归遍历虚拟DOM和DOM树，对于两者中位 置对应的节点：
[0021] A)如果两者的节点名不同，则根据虚拟D0M节点重新创建D0M节点并替换原来的 D0M节点；
[0022] B)如果对应位置上的D0M节点不存在而虚拟D0M节点存在，则根据虚拟D0M节点创 建D0M节点并插入该位置；
[0023] C)如果对应位置上的虚拟D0M节点不存在而D0M节点存在，则删除该D0M节点；
[0024] D)如果两者的节点名相同：一方面枚举两者的属性，对同名且等值的属性不做处 理;对同名不等值的属性或D0M节点缺少的属性，，将虚拟D0M节点的属性值写入D0M节点中； 对虚拟D0M节点缺少的属性，删除D0M节点的属性;另一方面，递归遍历两者的子节点，继续 做上述A-D的操作。
[0025] 进一步地，如上所述的擅染和更新网页的方法，该方法是用化vaScript语言来实 现，且虚拟D0M采用简单化vaScr ipt对象来表示。
[0026] 进一步地，如上所述的擅染和更新网页的方法，用虚拟D0M节点的属性名的前缀来 区分不同类型的属性。
[0027] 进一步地，如上所述的擅染和更新网页的方法，为每个通过虚拟D0M创建的D0M元 素节点建有一个簿记表，记录上述方法中添加的属性及其对应的值，在第（3-D)步中枚举 D0M属性和比较属性值的操作通过该簿记表来进行。
[0028] 进一步地，如上所述的擅染和更新网页的方法，根据虚拟D0M节点创建实际D0M节 点时，根据节点名和父节点的命名空间来推测其命名空间。
[0029] 本发明的有益效果在于：（1)没有单独的虚拟D0M差异计算步骤(可W认为与D0M树 的更新合一了），因此D0M的更新算法大大简化，既减少了代码量又获得了较好的性能。（2) 可W直接利用简单化vaScript对象来表示虚拟D0M结构，使代码具有较好的可读性，开发人 员的学习成本低，并减少了代码量。（3)可W方便地处理(X)HTML内嵌SVG和MathML的情形 (此时需要区分命名空间）。（4)使用前缀区分不同类型的属性，即避免了属性名冲突又简化 了代码。
【具体实施方式】
[0030] 下面结合实施例对本发明进行详细的描述。
[0031] 一、虚拟D0M的形式
[0032] 本发明中，虚拟D0M采用简单JavaScript对象（Plain JavaScript Object)来表 示，例如虚拟DOM树：
[0033]
[0035] 就对应于如下运个HTML DOM树：
[0036]
[0037] 可见虚拟DOM树就是一个简单化vaScript对象，可W用对象字面量的写法来创建。 每个对象对应一个实际D0M中的元素，子节点则通过Kids属性列出。虚拟D0M的各种属性的 意义如下：
[003引 （1 )Name:对应HTML或SVG或MathML的元素名。
[0039] (2化ids:子节点列表，是一个数组，其成员要么也是个D0M树，要么是字符串；字符 串则对应实际D0M中的文本节点。
[0040] (3)W'@'开头的属性映射到HTML/XML属性(去掉去掉首字符，下同）。
[0041] (4) W'-'开头的属性开头的属性映射到CSS属性。
[0042] (5) 开头的属性映射到HTML class属性的片段，如果其值是"真"则该class 存在，如果其值是"假"则该class不存在。
[0043] (6)其它的属性，如onclick、value，映射到同名的WeblDL属性。
[0044] 二、从虚拟D0M树擅染、更新实际D0M树的方法
[0045] "从虚拟D0M树更新实际D0M树"的方法有Ξ个输入参数：（1)虚拟D0M节点（可W是 字符串或化vaScript对象）。（2)实际D0M节点。（3)更新后的实际父节点；方法的返回值（即 输出）是更新后的实际D0M节点。第(2)、（3)个输入参数可W省略，运样就相当于初次擅染实 际D0M的情形。该方法的具体过程是：
[0046] SOI:让"当前实际父节点"的值是参数"实际D0M节点"的父节点，转到S02;
[0047] S02:如果参数"虚拟D0M节点'的类型是字符串，则转到S03，否则转到S04;
[004引S03:如果参数"实际D0M节点'存在且类型是"文本节点'，则设置"实际D0M节点'的 值为参数"虚拟D0M节点"的值，返回"实际D0M节点"，结束；否则，新建一个文本节点，名为 "新实际D0M节点"，值为参数"虚拟D0M节点"的值（JavaScript代码的例