CN109739500A - 一种bs架构下的浏览器前端渲染展示方法 - Google Patents
一种bs架构下的浏览器前端渲染展示方法 Download PDFInfo
- Publication number
- CN109739500A CN109739500A CN201811535869.0A CN201811535869A CN109739500A CN 109739500 A CN109739500 A CN 109739500A CN 201811535869 A CN201811535869 A CN 201811535869A CN 109739500 A CN109739500 A CN 109739500A
- Authority
- CN
- China
- Prior art keywords
- dom
- node
- exhibiting
- methods
- tree
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明一种BS架构下的浏览器前端渲染展示方法，步骤如下：第一步，构造虚拟DOM树；第二步，定义DOM树构造函数Element；第三步，在浏览器前端呈现虚拟DOM树；第四步，利用虚拟DOM与真实DOM的比对diff算法，将一个DOM中的每一级和另一个DOM中的同一级进行对比；第五步，对真实DOM树进行更新，实现浏览器前端快速渲染。本发明解决了浏览器前端的高性能渲染和快速展示的问题。
Description
技术领域
本发明属于遥感技术领域，涉及一种BS架构下的浏览器前端渲染展示方法。
背景技术
近几年随着互联网的不断发展，对于浏览器前端页面展示效率的要求越来越高，在大量互联网的系统界面设计中，不断的会加入各种多元的操作因素，已经不能简单依赖于图片、视频、动图等，而是要求前端的超高流畅度实现各种连续的流畅化的操作。在传统的模式中，浏览器的引擎工作流程基本相同，如图大致分5步：创建DOM tree–>创建StyleRules->构建Render tree->布局Layout–>绘制Painting。
当用传统的源生api或jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。比如在一次操作时，需要更新10个DOM节点，理想状态是一次性构建完DOM树，再执行后续操作。但浏览器收到第一个更新DOM请求后，无法预测后续还有9次更新操作，因此会马上执行流程，最终执行10次流程。显然例如计算DOM节点的坐标值等都是浪费计算资源。当本次计算完，紧接着的下一个DOM更新请求，这个节点的坐标值会改变，从而导致前一次计算的浪费。即使计算机硬件一直在更新迭代，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验。
虚拟DOM(Virtual DOM)是一个使用javascript模拟了DOM结构的树形结构，这个树包含整个DOM结构的信息。虚拟DOM就是为了上述的浏览器性能问题。例如前面的例子，假如一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，通知浏览器去执行绘制工作，这样可以避免大量的无谓的计算量。
虚拟DOM解决了浏览器的执行次数效率问题，而diff算法则可以在此过程中计算出真正变化的部分，只针对该部分进行实际的DOM操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染。
发明内容
本发明解决的技术问题是：克服现有技术的不足，提供了一种BS架构下的浏览器前端渲染展示方法，解决了浏览器前端的高性能渲染和快速展示的问题。
本发明的技术方案是：1、一种BS架构下的浏览器前端渲染展示方法，步骤如下：
(1)构造虚拟DOM树；
(2)定义DOM树构造函数Element；
(3)在浏览器前端呈现虚拟DOM树；
(4)利用虚拟DOM与真实DOM的比对diff算法，将一个DOM中的每一级和另一个DOM中的同一级进行对比；
(5)对真实DOM树进行更新，实现浏览器前端快速渲染。
所述步骤(1)中虚拟DOM树包括多个子节点，并且具有多层结构。
所述步骤(2)定义DOM树构造函数Element时，定义步骤(1)中构造的虚拟DOM树中每个节点的名称tagname、属性props以及子节点children，通过构造的Element构造函数描述步骤(1)中的虚拟DOM。
所述步骤(3)的具体方法为：
31)定义render函数，render函数对虚拟DOM树中每一个节点的tagname以及props中的属性名称propName以及属性值propValue进行赋值；
32)利用深度优先搜索遍历读取步骤(2)中的Element对象，通过递归调用render函数的方式逐个创建真实DOM节点。
所述步骤(4)中虚拟DOM与真实DOM的比对diff算法基于三个原则：
a)Web UI中DOM节点跨层级的移动忽略不计；
b)拥有相同类的两个组件生成相似的树形结构，拥有不同类的两个组件生成不同的树形结构；
c)对于同一层级的一组子节点，通过唯一id进行区分。
所述步骤(4)中对比的内容为节点名称tagname，节点属性名称propName以及节点属性值propValue。
所述步骤(5)的具体方法为：
对虚拟DOM和真实DOM两棵树进行深度优先遍历DFS，对每个节点进行唯一标记；在深度优先遍历的时候，每遍历到一个节点就把该节点和另外的树相应的节点进行对比；如果有差异就记录到一个对象里面；将差异应用到真实DOM树上，通过只针对变化的部分做更新实现页面的高速渲染。
所述步骤(5)中所述差异类型包括前后的增删造成的差异、前后的移动造成的差异、属性造成的差异和文本类型造成的差异。
本发明与现有技术相比的有益效果是：通过基于虚拟DOM及diff算法实现的浏览器前端快速渲染展示方法，可以实现在需要频繁变化的页面无需通过重新渲染整个页面，而是局部变化，保障的系统展示页面的流畅不卡顿。如，当成千上万条数据同时在B/S架构的数据管理系统中进行入库时，需要每条数据实时更新入库状态，该技术方法能够保障信息实时更新的情况下页面仍然流畅无卡顿。
附图说明
图1为本发明流程图。
图2为虚拟DOM树形结构。
图3为diff算法原理图。
图4为处理真实DOM树更新原理图。
具体实施方式
本发明一种BS架构下的浏览器前端渲染展示方法具体如下：
第一步，构造虚拟DOM树，利用JavaScript对象构建DOM树，并在DOM树上增加HTML语言的ul组件模版，在每一个ul组件模板下构造一个item，其树形结构如如图2所示：
第二步，定义DOM树构造函数Element，函数中需要定义第一步虚拟DOM树中每个节点的名称tagname、属性props以及子节点children，通过构造的Element函数以计算机语言来描述第一步中的虚拟DOM。
第三步，在浏览器前端呈现虚拟DOM树。首先，实现render函数，render函数的作用为给虚拟DOM树种每一个节点进行tagname以及props中的propName以及propValue进行赋值。其次，利用深度优先搜索DFS遍历读取第二步中返回的Element对象，以图2为例，读取的顺序为ul、li1、item1、item2、li2、item3，通过递归调用render函数的方式逐个创建真实DOM节点。
第四步，利用虚拟DOM与真实DOM的比对diff算法，将一个DOM中的每一级和另一个DOM中的同一级进行对比。传统的算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到O(n^3)，其中n是树中节点的总数。这种指数型的性能消耗对于前端渲染场景来说代价十分巨大，而新的diff算法将O(n^3)复杂度的问题转换成了O(n)复杂度的问题。新的diff算法基于三个原则，分别为1)Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计；2)拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构；3)对于同一层级的一组子节点，它们可以通过唯一id进行区分。基于这三个原则，DOM中的每一级只和同一级进行对比，复杂度则大大降低。如图3所示。
第五步，对真实DOM树进行更新，实现浏览器前端快速渲染。如图4所示调用第四步中的diff算法，首先对新虚拟DOM和和旧虚拟DOM两棵树进行深度优先遍历DFS，对每个节点进行唯一标记；在深度优先遍历的时候，每遍历到一个节点就把该节点和另外的树相应的节点进行对比；如果有差异就记录到一个对象里面，差异的类型有四种，增删、移动、属性、文本类型；最后将这种差异应用到真实DOM树上，通过只针对变化的部分做更新从而实现页面的高速渲染。
本发明说明书中未作详细描述的内容属于本领域专业技术人员的公知技术。
Claims (8)
1.一种BS架构下的浏览器前端渲染展示方法，其特征在于步骤如下：
(1)构造虚拟DOM树；
(2)定义DOM树构造函数Element；
(3)在浏览器前端呈现虚拟DOM树；
(4)利用虚拟DOM与真实DOM的比对diff算法，将一个DOM中的每一级和另一个DOM中的同一级进行对比；
(5)对真实DOM树进行更新，实现浏览器前端快速渲染。
2.根据权利要求1所述的一种BS架构下的浏览器前端渲染展示方法，其特征在于：所述步骤(1)中虚拟DOM树包括多个子节点，并且具有多层结构。
3.根据权利要求1所述的一种BS架构下的浏览器前端渲染展示方法，其特征在于：所述步骤(2)定义DOM树构造函数Element时，定义步骤(1)中构造的虚拟DOM树中每个节点的名称tagname、属性props以及子节点children，通过构造的Element构造函数描述步骤(1)中的虚拟DOM。
4.根据权利要求1所述的一种BS架构下的浏览器前端渲染展示方法，其特征在于：所述步骤(3)的具体方法为：
31)定义render函数，render函数对虚拟DOM树中每一个节点的tagname以及props中的属性名称propName以及属性值propValue进行赋值；
32)利用深度优先搜索遍历读取步骤(2)中的Element对象，通过递归调用render函数的方式逐个创建真实DOM节点。
5.根据权利要求1所述的一种BS架构下的浏览器前端渲染展示方法，其特征在于：所述步骤(4)中虚拟DOM与真实DOM的比对diff算法基于三个原则：
a)Web UI中DOM节点跨层级的移动忽略不计；
b)拥有相同类的两个组件生成相似的树形结构，拥有不同类的两个组件生成不同的树形结构；
c)对于同一层级的一组子节点，通过唯一id进行区分。
6.根据权利要求4所述的一种BS架构下的浏览器前端渲染展示方法，其特征在于：所述步骤(4)中对比的内容为节点名称tagname，节点属性名称propName以及节点属性值propValue。
7.根据权利要求1所述的一种BS架构下的浏览器前端渲染展示方法，其特征在于：所述步骤(5)的具体方法为：
对虚拟DOM和真实DOM两棵树进行深度优先遍历DFS，对每个节点进行唯一标记；在深度优先遍历的时候，每遍历到一个节点就把该节点和另外的树相应的节点进行对比；如果有差异就记录到一个对象里面；将差异应用到真实DOM树上，通过只针对变化的部分做更新实现页面的高速渲染。
8.根据权利要求7所述的一种BS架构下的浏览器前端渲染展示方法，其特征在于：所述步骤(5)中所述差异类型包括前后的增删造成的差异、前后的移动造成的差异、属性造成的差异和文本类型造成的差异。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811535869.0A CN109739500A (zh) | 2018-12-14 | 2018-12-14 | 一种bs架构下的浏览器前端渲染展示方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811535869.0A CN109739500A (zh) | 2018-12-14 | 2018-12-14 | 一种bs架构下的浏览器前端渲染展示方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109739500A true CN109739500A (zh) | 2019-05-10 |
Family
ID=66359459
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811535869.0A Pending CN109739500A (zh) | 2018-12-14 | 2018-12-14 | 一种bs架构下的浏览器前端渲染展示方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109739500A (zh) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110166782A (zh) * | 2019-06-05 | 2019-08-23 | 上海易点时空网络有限公司 | 适用于车载多媒体的图像压缩方法及装置 |
| CN110333864A (zh) * | 2019-06-18 | 2019-10-15 | 腾讯科技（深圳）有限公司 | 一种树形数据渲染方法、装置、设备及介质 |
| CN111078519A (zh) * | 2019-12-13 | 2020-04-28 | 杭州安恒信息技术股份有限公司 | 异常监控行为回溯的方法、装置和电子设备 |
| CN111104111A (zh) * | 2019-11-29 | 2020-05-05 | 苏宁云计算有限公司 | 一种树状Canvas画布的布局处理方法及装置 |
| CN111353113A (zh) * | 2020-02-28 | 2020-06-30 | 江苏方天电力技术有限公司 | 一种适用于无人机高频状态数据的可视化渲染方法 |
| CN111381920A (zh) * | 2020-02-17 | 2020-07-07 | 网易（杭州）网络有限公司 | 弹窗组件的显示方法、装置以及电子终端 |
| CN111459584A (zh) * | 2020-03-12 | 2020-07-28 | 支付宝(杭州)信息技术有限公司 | 页面渲染方法、装置和电子设备 |
| WO2021098242A1 (zh) * | 2020-02-27 | 2021-05-27 | 百度在线网络技术（北京）有限公司 | 页面处理方法、装置、电子设备和计算机可读介质 |
| CN113596527A (zh) * | 2020-04-30 | 2021-11-02 | 西安诺瓦星云科技股份有限公司 | 节目发布方法、装置及系统和计算机可读存储介质 |
| US11487931B1 (en) | 2021-10-18 | 2022-11-01 | International Business Machines Corporation | Replaying a webpage based on virtual document object model |
| CN115268916A (zh) * | 2022-09-29 | 2022-11-01 | 泰豪软件股份有限公司 | 一种基于低代码开发平台的动态表单实现方法及系统 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2890029A1 (en) * | 2012-12-20 | 2014-06-26 | Cable Television Laboratories, Inc. | A method for remotely controlling a video playing within a first web page at a first device from a second device using a document object model |
| CN106126645A (zh) * | 2016-06-24 | 2016-11-16 | 浪潮软件股份有限公司 | 一种提高web页面渲染性能的装置 |
| CN106599016A (zh) * | 2016-09-30 | 2017-04-26 | 浙江大学 | 一种基于虚拟dom的前端元素维护方法 |
| CN108228188A (zh) * | 2018-01-08 | 2018-06-29 | 武汉斗鱼网络科技有限公司 | 一种视图组件处理方法、电子设备及可读存储介质 |
| CN108363573A (zh) * | 2018-01-11 | 2018-08-03 | 山东浪潮通软信息科技有限公司 | 一种高效的移动表单设计与渲染方法 |
| CN108572819A (zh) * | 2017-12-21 | 2018-09-25 | 北京金山云网络技术有限公司 | 页面更新方法、装置、终端及计算机可读存储介质 |
-
2018
- 2018-12-14 CN CN201811535869.0A patent/CN109739500A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2890029A1 (en) * | 2012-12-20 | 2014-06-26 | Cable Television Laboratories, Inc. | A method for remotely controlling a video playing within a first web page at a first device from a second device using a document object model |
| CN106126645A (zh) * | 2016-06-24 | 2016-11-16 | 浪潮软件股份有限公司 | 一种提高web页面渲染性能的装置 |
| CN106599016A (zh) * | 2016-09-30 | 2017-04-26 | 浙江大学 | 一种基于虚拟dom的前端元素维护方法 |
| CN108572819A (zh) * | 2017-12-21 | 2018-09-25 | 北京金山云网络技术有限公司 | 页面更新方法、装置、终端及计算机可读存储介质 |
| CN108228188A (zh) * | 2018-01-08 | 2018-06-29 | 武汉斗鱼网络科技有限公司 | 一种视图组件处理方法、电子设备及可读存储介质 |
| CN108363573A (zh) * | 2018-01-11 | 2018-08-03 | 山东浪潮通软信息科技有限公司 | 一种高效的移动表单设计与渲染方法 |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110166782A (zh) * | 2019-06-05 | 2019-08-23 | 上海易点时空网络有限公司 | 适用于车载多媒体的图像压缩方法及装置 |
| CN110333864A (zh) * | 2019-06-18 | 2019-10-15 | 腾讯科技（深圳）有限公司 | 一种树形数据渲染方法、装置、设备及介质 |
| CN110333864B (zh) * | 2019-06-18 | 2021-09-14 | 腾讯科技（深圳）有限公司 | 一种树形数据渲染方法、装置、设备及介质 |
| CN111104111A (zh) * | 2019-11-29 | 2020-05-05 | 苏宁云计算有限公司 | 一种树状Canvas画布的布局处理方法及装置 |
| CN111078519A (zh) * | 2019-12-13 | 2020-04-28 | 杭州安恒信息技术股份有限公司 | 异常监控行为回溯的方法、装置和电子设备 |
| CN111381920A (zh) * | 2020-02-17 | 2020-07-07 | 网易（杭州）网络有限公司 | 弹窗组件的显示方法、装置以及电子终端 |
| WO2021098242A1 (zh) * | 2020-02-27 | 2021-05-27 | 百度在线网络技术（北京）有限公司 | 页面处理方法、装置、电子设备和计算机可读介质 |
| CN111353113B (zh) * | 2020-02-28 | 2022-06-03 | 江苏方天电力技术有限公司 | 一种适用于无人机高频状态数据的可视化渲染方法 |
| CN111353113A (zh) * | 2020-02-28 | 2020-06-30 | 江苏方天电力技术有限公司 | 一种适用于无人机高频状态数据的可视化渲染方法 |
| CN111459584A (zh) * | 2020-03-12 | 2020-07-28 | 支付宝(杭州)信息技术有限公司 | 页面渲染方法、装置和电子设备 |
| CN111459584B (zh) * | 2020-03-12 | 2024-04-12 | 支付宝(杭州)信息技术有限公司 | 页面渲染方法、装置和电子设备 |
| CN113596527A (zh) * | 2020-04-30 | 2021-11-02 | 西安诺瓦星云科技股份有限公司 | 节目发布方法、装置及系统和计算机可读存储介质 |
| US11487931B1 (en) | 2021-10-18 | 2022-11-01 | International Business Machines Corporation | Replaying a webpage based on virtual document object model |
| CN115268916A (zh) * | 2022-09-29 | 2022-11-01 | 泰豪软件股份有限公司 | 一种基于低代码开发平台的动态表单实现方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109739500A (zh) | 一种bs架构下的浏览器前端渲染展示方法 | |
| EP2940557A1 (en) | Method and device used for providing input candidate item corresponding to input character string | |
| US20200151923A1 (en) | Automated parametrization of floor-plan sketches for multi-objective building optimization tasks | |
| US9087296B2 (en) | Navigable semantic network that processes a specification to and uses a set of declaritive statements to produce a semantic network model | |
| WO2023045862A1 (zh) | 应用页面开发方法、装置、系统、计算设备及存储介质 | |
| CN109190094B (zh) | 基于ifc标准的建筑信息模型文件切分方法 | |
| CN104899258A (zh) | 面向海量文献信息可交互可视化分析系统架构 | |
| CN113495542A (zh) | 一种基于WebGL的工业机器人智能生产线仿真系统 | |
| CN105808244A (zh) | 一种基于工作流的动态数据可视化分析工具 | |
| CN109376153A (zh) | 一种基于NiFi的数据写入图数据库的系统及方法 | |
| Ramón et al. | A layout inference algorithm for Graphical User Interfaces | |
| Gao et al. | A data structure for studying 3D modeling design behavior based on event logs | |
| CN113535977A (zh) | 一种知识图谱融合方法和装置及设备 | |
| JP2022166215A (ja) | 文字位置決めモデルのトレーニング方法及び文字位置決め方法 | |
| CN117493427B (zh) | 基于ai大语言模型的数据大屏生成方法及系统 | |
| CN114385150B (zh) | 基于智能引擎的低代码开发方法 | |
| Lipp et al. | Local editing of procedural models | |
| CN114911893A (zh) | 基于知识图谱的自动化构建知识库的方法及系统 | |
| CN106527912A (zh) | 一种基于Voronoi树图的信息检索可视化系统及方法 | |
| CN111125451B (zh) | 数据生产加工方法、装置、电子设备及存储介质 | |
| CN115186738B (zh) | 模型训练方法、装置和存储介质 | |
| Miao et al. | ModelHUB: lifecycle management for deep learning | |
| WO2023045378A1 (zh) | 向用户推荐物品信息的方法、设备、存储介质及程序产品 | |
| US11698998B2 (en) | Computer aided design (CAD) model connection propagation | |
| Thaller et al. | Creating procedural windowbuilding blocks using the generative fact labeling method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190510 |
|
| RJ01 | Rejection of invention patent application after publication |