页面渲染方法和页面渲染系统.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN105808237A(43)申请公布日2016.07.27(21)申请号201610105312.8(22)申请日2016.02.25(71)申请人北京京东尚科信息技术有限公司地址100080北京市海淀区杏石口路65号西杉创意园西区11C楼东段1-4层西段1-4层申请人北京京东世纪贸易有限公司(72)发明人赵振阳(74)专利代理机构北京成创同维知识产权代理有限公司11449代理人蔡纯张靖琳(51)Int.Cl.G06F9/44(2006.01)权利要求书1页说明书6页附图4页(54)发明名称页面渲染方法和页面渲染系统(57)摘要本实施例提供的页面渲染方法，包括创建高阶组件，在所述高阶组件中执行以下步骤：获取数据，所述数据和页面元素相关；计算所述数据的嵌套层级；比较所述嵌套层级和预设阈值；根据比较结果选择比对方式，进行数据差异比对；以及根据比对结果渲染所述组件。该方法针对获取到的数据进行智能判断，并针对不同的数据采用不同的差异比对方法，以此提高差异比对的效率，提高系统整体性能。CN105808237ACN105808237A权利要求书1/1页1.一种页面渲染方法，包括创建高阶组件，在所述高阶组件中执行以下步骤：获取数据，所述数据和页面元素相关；计算所述数据的嵌套层级；比较所述嵌套层级和预设阈值；根据比较结果选择比对方式，进行数据差异比对；以及根据比对结果渲染所述组件。2.根据权利要求1所述的页面渲染方法，其中，所述根据比较结果选择比对方式进行差异数据差异比对包括：如果所述嵌套层级不大于预设阈值，通过第一插件进行数据差异比对；如果所述嵌套层级大于预设阈值，通过第二插件进行数据差异比对，其中，所述第一插件和第二插件分别在所述嵌套层级中具有优化的执行效率。3.根据权利要求1所述的页面渲染方法，其中，所述根据比对结果渲染所述组件包括：如果所述比对结果为所述数据发生变化，则执行所述组件的渲染方法；以及如果所述比对结果为所述数据未变化，则不执行所述组件的渲染方法。4.根据权利要求1所述的页面渲染方法，还包括：根据多个所述高阶组件更新渲染树。5.一种页面渲染系统，包括：多个高阶组件容器，所述高阶组件容器中包含数据获取单元、组件判断单元和渲染单元，所述数据获取单元用于获取用户数据，所述组件判断单元通过计算所述数据的嵌套层级，比较所述嵌套层级和预设阈值，根据比较结果进行数据差异化比对，所述渲染单元根据比对结果渲染高阶组件。6.根据权利要求5所述的页面渲染方法，其中，所述组件判断单元包括：如果所述嵌套层级不大于预设阈值，通过第一插件进行数据差异比对；如果所述嵌套层级大于预设阈值，通过第二插件进行数据差异比对，其中，所述第一插件和第二插件分别在所述嵌套层级中具有优化的执行效率。7.根据权利要求5所述的页面渲染方法，其中，所述渲染单元包括：如果所述比对结果为所述数据发生变化，则执行所述组件的渲染方法；以及如果所述比对结果为所述数据未变化，则不执行所述组件的渲染方法。8.根据权利要求5所述的页面渲染方法，还包括：DOM更新单元，用于根据多个所述高阶组件更新渲染树。2CN105808237A说明书1/6页页面渲染方法和页面渲染系统技术领域[0001]本发明涉及计算机技术领域，具体涉及一种页面渲染方法和页面渲染系统。背景技术[0002]在传统的WEB项目中，前端渲染技术多数采用传统的渲染机制，而这种机制带来的弊端是每当用户与网页交互或者通过脚本程序修改网页时，渲染树包括(DOM文档对象)渲染模型和(CSS层叠样式)渲染模型都会进行Repaint(重绘)或者Reflow(重排)，产生这种现象是因为网页的内部结构已经发生了改变，这种改变带给浏览器的是性能损耗，资源占用，带给用户的是响应时长的延长。[0003]基于此，Facebook推出的用于构建用户界面的React工具集。通过React工具集，系统能够构建和网页元素对应的组件，根据用户在网页元素上的操作或网页元素的属性变化更新组件，然后根据组件更新渲染树，以完成整个真实页面的渲染。React脚本库和Flux单项数据流架构结合能有效地提高渲染效率，降低浏览器的响应时间。[0004]但React渲染技术中有其缺点。由于React技术采用脏检测机制，如果虚拟组件里的某个节点数据发生变化时，如果不能确定节点数据所造成的影响范围，则默认该节点和其所有的子节点都发生了变化。如图1所示，节点B的数据发生变化，则默认子节点D、E、H、I、K都可能发生变化,当更新节点B的时候，默认更新节点D、E、H、I、K，由此带来许多不必要的渲染(即，更新没有变化的数据)，导致渲染效率的降低。发明内容[0005]有鉴于此，本发明提供一种页面渲染方法和页面渲染系统，提