CN117076813A - 前端浏览器渲染方法、装置、电子设备和存储介质 - Google Patents
前端浏览器渲染方法、装置、电子设备和存储介质 Download PDFInfo
- Publication number
- CN117076813A CN117076813A CN202311344316.8A CN202311344316A CN117076813A CN 117076813 A CN117076813 A CN 117076813A CN 202311344316 A CN202311344316 A CN 202311344316A CN 117076813 A CN117076813 A CN 117076813A
- Authority
- CN
- China
- Prior art keywords
- sparse matrix
- cssom
- dom
- tree
- csc
- 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.)
- Granted
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 92
- 238000000034 method Methods 0.000 title claims abstract description 61
- 239000011159 matrix material Substances 0.000 claims abstract description 166
- 238000013507 mapping Methods 0.000 claims description 50
- 238000004422 calculation algorithm Methods 0.000 claims description 14
- 238000004458 analytical method Methods 0.000 claims description 4
- 238000006243 chemical reaction Methods 0.000 claims description 4
- 230000008901 benefit Effects 0.000 abstract description 5
- 238000004891 communication Methods 0.000 description 9
- 238000004590 computer program Methods 0.000 description 9
- 230000008569 process Effects 0.000 description 8
- 238000012545 processing Methods 0.000 description 7
- 238000004364 calculation method Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 238000012544 monitoring process Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本公开的实施例提供了一种前端浏览器渲染方法、装置、电子设备和存储介质，应用于计算机技术领域。所述方法包括接收服务器发送的目标HTML文件、目标CSS文件；对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树；对所述DOM树、CSSOM树进行转换，分别得到DOM‑CSR稀疏矩阵、CSSOM‑CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM‑CSC稀疏矩阵、CSSOM‑CSC稀疏矩阵；根据所述DOM‑CSR稀疏矩阵、CSSOM‑CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM‑CSC稀疏矩阵、CSSOM‑CSC稀疏矩阵，生成第二渲染结果。实现利用稀疏矩阵来生成渲染结果，避免节点数量对前端浏览器渲染的影响，提高渲染效率。
Description
技术领域
本公开涉及计算机技术领域，尤其涉及一种前端浏览器渲染方法、装置、电子设备和存储介质。
背景技术
前端浏览器渲染是指将Web应用程序的代码转化为用户可以看到和与之交互的可视化界面的过程。前端浏览器渲染使得用户可以直观地与Web应用程序进行交互，通过将HTML、CSS和JavaScript等Web技术转化为界面元素、样式和交互效果，浏览器可以呈现出用户友好的界面，这样，用户可以通过点击、滚动、输入等动作与应用程序进行沟通，实现各种功能，提供良好的用户体验；有助于实现跨平台和跨浏览器的兼容性，不同的浏览器和设备对Web技术的支持程度各不相同，因此需要经过渲染引擎的处理来确保应用程序可以在各种环境中正确显示和运行，通过实施标准化的渲染流程，前端开发者可以确保应用程序在不同的浏览器和设备上保持一致的外观和功能；可以优化性能和加载速度，浏览器会对HTML文档进行解析和渲染，并根据CSS样式对元素进行布局和绘制，最终呈现给用户，通过优化渲染过程，如减少重排和重绘、延迟加载等手段，可以提高页面加载速度和响应性能，提升用户体验；为搜索引擎优化（SEO）提供了支持，搜索引擎爬虫无法像用户一样解析和理解JavaScript代码，因此对于基于JavaScript的内容，浏览器渲染非常重要，通过在服务器端进行渲染，或使用服务器端渲染（SSR）等技术，可以提供更好的SEO效果，使得搜索引擎可以正确抓取和索引网页内容。因此，前端浏览器渲染的意义不可忽视。
目前，在对前端浏览器进行渲染的过程中，常采用DOM树和CSSOM树生成渲染树的并执行后续的布局和绘制操作，但该方法需要遍历整个渲染树，随着渲染树节点数量的增加，该方法对前端浏览器的渲染效率受遍历整个渲染树的影响，导致对前端浏览器渲染的效率较低。
因此，亟须一种具有较高渲染效率的前端浏览器渲染方法、装置、电子设备和存储介质。
发明内容
本公开提供了一种前端浏览器渲染方法、装置、电子设备和存储介质。
根据本公开的第一方面，提供了一种前端浏览器渲染方法。该方法包括：
接收服务器发送的目标HTML文件、目标CSS文件；
对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树；
对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵；
根据所述DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，生成第二渲染结果。
进一步地，所述对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，包括：
对所述DOM树中各节点进行命名，得到对应的第一ID；
对所述CSSOM树中各节点进行命名，得到对应的第二ID；
将各所述第一ID映射到第一预设CSR稀疏矩阵的行指针数组、将各所述第一ID对应节点的属性信息映射到第一预设CSR稀疏矩阵的索引数组、将各所述第一ID对应节点的属性值信息映射到第一预设CSR稀疏矩阵的值数组，得到DOM-CSR稀疏矩阵；
将各所述第二ID映射到第二预设CSR稀疏矩阵的行指针数组、将各所述第二ID对应节点的属性信息映射到第二预设CSR稀疏矩阵的索引数组、将各所述第二ID对应节点的属性值信息映射到第二预设CSR稀疏矩阵的值数组，得到CSSOM-CSR稀疏矩阵。
进一步地，所述对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，还包括：
将各所述第一ID映射到第一预设CSC稀疏矩阵的行指针数组、将各所述第一ID对应节点的属性信息映射到第一预设CSC稀疏矩阵的索引数组、将各所述第一ID对应节点的属性值信息映射到第一预设CSC稀疏矩阵的值数组，得到DOM-CSC稀疏矩阵；
将各所述第二ID映射到第二预设CSC稀疏矩阵的行指针数组、将各所述第二ID对应节点的属性信息映射到第二预设CSC稀疏矩阵的索引数组、将各所述第二ID对应节点的属性值信息映射到第二预设CSC稀疏矩阵的值数组，得到CSSOM-CSC稀疏矩阵。
进一步地，所述第一渲染结果是通过CSR格式稀疏矩阵乘法算法计算得到的。
进一步地，所述第二渲染结果是通过CSC格式稀疏矩阵乘法算法计算得到的。
进一步地，通过深度优先遍历算法来对所述DOM树、CSSOM树进行转换。
进一步地，所述方法还包括：
实时获取浏览器中目标组件的状态信息；
若所述状态信息发生变化，则计算得到所述第一渲染结果或第二渲染结果中对应的更新部分。
根据本公开的第二方面，提供了一种前端浏览器渲染装置。该装置包括：
接收模块，用于接收服务器发送的目标HTML文件、目标CSS文件；
解析模块，用于对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树；
转换模块，用于对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵；
渲染模块，用于根据所述DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，生成第二渲染结果。
根据本公开的第三方面，提供了一种电子设备。该电子设备包括：存储器和处理器，所述存储器上存储有计算机程序，所述处理器执行所述程序时实现所述方法。
根据本公开的第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现所述方法。
本公开通过接收服务器发送的目标HTML文件、目标CSS文件；对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树；对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵；根据所述DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，生成第二渲染结果。实现利用稀疏矩阵来生成渲染结果，避免节点数量对前端浏览器渲染的影响，提高渲染效率。
应当理解，发明内容部分中所描述的内容并非旨在限定本公开的实施例的关键或重要特征，亦非用于限制本公开的范围。本公开的其他特征将通过以下的描述变得容易理解。
附图说明
结合附图并参考以下详细说明，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。附图用于更好地理解本方案，不构成对本公开的限定。在附图中，相同或相似的附图标记表示相同或相似的元素，其中：
图1示出了根据本公开实施例的前端浏览器渲染方法的流程图；
图2示出了根据本公开实施例的前端浏览器渲染装置的框图；
图3示出了能够实施本公开实施例的示例性电子设备的方框图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的全部其他实施例，都属于本公开保护的范围。
另外，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
图1示出了根据本公开实施例的前端浏览器渲染方法100的流程图，该方法100包括：
S101，接收服务器发送的目标HTML文件、目标CSS文件。
在一些实施例中，所述接收服务器发送的目标HTML文件、目标CSS文件可以通过以下步骤进行：建立与服务器的HTTP连接，HTTP协议定义了浏览器和服务器之间的通信规则；通过HTTP请求和响应来传输数据，前端开发者可以使用浏览器提供的API（如Fetch API或XMLHttpRequest）来发送HTTP请求；接收服务器响应的目标HTML文件和目标CSS文件。
S102，对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树。
在一些实施例中，对所述目标HTML文件进行解析，得到DOM树，可以通过下列步骤进行：将所述目标HTML文件分解为一系列的词（tokens），词是构成HTML文件语法的最小单位，如标签、属性、文本等；根据所述目标HTML文件的语法规则，将词序列转化为一个语法正确的树状结构；在构建DOM树的过程中，会将识别出来的标签、属性和文本等内容添加为DOM节点，并建立它们之间的关系；根据语法分析阶段生成的树状结构，构建DOM树，DOM树是一个表示HTML文件结构的树形结构，每个节点代表一个HTML元素、文本或注释等。
在一些实施例中，对所述目标CSS文件进行解析，得到CSSOM树，可以通过下列步骤进行：将所述目标CSS文件分解为一系列的词；根据所述目标CSS文件的语法规则，将词序列转化为一种语法正确的树状结构；在构建CSSOM树的过程中，会识别出选择器、属性和值等内容，并建立它们之间的关系；根据语法分析阶段生成的树状结构，构建CSSOM树，CSSOM树是一个表示CSS样式规则和元素之间关联的树形结构，每个节点代表一个CSS样式规则。
S103，对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵。
在一些实施例中，所述对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，包括：对所述DOM树中各节点进行命名，得到对应的第一ID；对所述CSSOM树中各节点进行命名，得到对应的第二ID；将各所述第一ID映射到第一预设CSR稀疏矩阵的行指针数组、将各所述第一ID对应节点的属性信息映射到第一预设CSR稀疏矩阵的索引数组、将各所述第一ID对应节点的属性值信息映射到第一预设CSR稀疏矩阵的值数组，得到DOM-CSR稀疏矩阵；将各所述第二ID映射到第二预设CSR稀疏矩阵的行指针数组、将各所述第二ID对应节点的属性信息映射到第二预设CSR稀疏矩阵的索引数组、将各所述第二ID对应节点的属性值信息映射到第二预设CSR稀疏矩阵的值数组，得到CSSOM-CSR稀疏矩阵。
在一些实施例中，所述对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，还包括：将各所述第一ID映射到第一预设CSC稀疏矩阵的行指针数组、将各所述第一ID对应节点的属性信息映射到第一预设CSC稀疏矩阵的索引数组、将各所述第一ID对应节点的属性值信息映射到第一预设CSC稀疏矩阵的值数组，得到DOM-CSC稀疏矩阵；将各所述第二ID映射到第二预设CSC稀疏矩阵的行指针数组、将各所述第二ID对应节点的属性信息映射到第二预设CSC稀疏矩阵的索引数组、将各所述第二ID对应节点的属性值信息映射到第二预设CSC稀疏矩阵的值数组，得到CSSOM-CSC稀疏矩阵。
在一些实施例中，通过深度优先遍历算法来对所述DOM树、CSSOM树进行转换。例如，通过深度优先遍历算法来对所述DOM树进行转换可以通过以下步骤进行：
构建节点栈，所述节点栈用于存储所述DOM树中的各节点；
将所述DOM树中的根节点存储于所述节点栈；
将所述节点栈中的各当前节点进行遍历映射到第一预设CSR稀疏矩阵；且在映射时，每次只对各所述当前节点中的一个节点进行映射；
在各所述当前节点全部完成映射后，将各所述当前节点的子节点按照从左到右的顺序存储至所述节点栈；
将所述节点栈中的各子节点进行遍历映射到第一预设CSR稀疏矩阵；且在映射时，每次只对各所述子节点中的一个子节点进行映射；
若所述节点栈中为空，则遍历映射结束，即可得到最终的DOM-CSR稀疏矩阵。
在一些实施例中，通过深度优先遍历算法来对所述CSSOM树进行转换可以通过以下步骤进行：
构建节点栈，所述节点栈用于存储所述CSSOM树中的各节点；
将所述CSSOM树中的根节点存储于所述节点栈；
将所述节点栈中的各当前节点进行遍历映射到第二预设CSR稀疏矩阵；且在映射时，每次只对各所述当前节点中的一个节点进行映射；
在各所述当前节点全部完成映射后，将各所述当前节点的子节点按照样式继承的顺序存储至所述节点栈；
将所述节点栈中的各子节点进行遍历映射到第二预设CSR稀疏矩阵；且在映射时，每次只对各所述子节点中的一个子节点进行映射；
若所述节点栈中为空，则遍历映射结束，即可得到最终的CSSOM-CSR稀疏矩阵。
根据本公开的实施例，通过将DOM树、CSSOM树转换为稀疏矩阵，减少渲染树的节点数量，提高对前端浏览器的渲染效率。
S104，根据所述DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，生成第二渲染结果。
在一些实施例中，所述第一渲染结果可以通过CSR格式稀疏矩阵乘法算法计算得到。例如，对DOM树、CSSOM树进行转换为CSR格式的稀疏矩阵，转换后得到稀疏矩阵A和向量x，其中，稀疏矩阵A的维度为m×n，向量x的维度为n；将预设向量y的各元素的值设为0，所述向量y的长度为m；对于所述稀疏矩阵A的每一行i，根据行指针数组、索引数组、值数组，计算出第i行的非零元素在所述稀疏矩阵A中的位置；将所述非零元素的值与向量x的对应元素相乘，得到对应乘积值；将各所述乘积值相加，得到yi的值，并将yi的值保存到向量y的第i元素中，即可得到最终的渲染结果y。
在一些实施例中，所述第二渲染结果是通过CSC格式稀疏矩阵乘法算法计算得到的。
根据本公开的实施例，通过利用稀疏矩阵乘法算法生成渲染结果，减少了计算量，提高渲染速度，同时，该方法还可以使用并行计算来加速计算过程，进一步提高对渲染结果的渲染效率。
在一些实施例中，所述方法还包括：实时获取浏览器中目标组件的状态信息；若所述状态信息发生变化，则计算得到所述第一渲染结果或第二渲染结果中对应的更新部分。例如，监听获取需要更新的数据时，采用在Vue的框架结构中进行监听算法的编程与实现，该编程语言可以实现对大数据时前端Web响应式数据特性来实现自动化监听，特别是可以使用Vue的计算属性和侦听器来监听数据的变化，从而自动更新页面的部分内容；在计算需要更新的部分时，可以使用Vue的计算属性来实现，计算属性是一种依赖于其他属性的属性，当其他属性发生变化时，计算属性会自动更新。
在一些实施例中，可以使用计算属性来计算需要更新的部分。例如，在一个列表组件中，可以使用计算属性来计算需要更新的部分，即列表中发生变化的部分。具体来说，可以使用Vue的v-for指令来渲染列表，然后使用计算属性来计算需要更新的部分。计算属性可以根据其他属性进行计算，并返回需要更新的部分。最后，使用Vue的计算属性updatedItems来计算需要更新的部分，即前三个条目。然后使用Vue的侦听器来监听updatedItems的变化，从而在数据变化时自动更新页面。在实际应用中，
可以根据需要进行修改和扩展，以实现更复杂的增量更新功能。
在一些实施例中，对渲染结果中需要更新的部分进行更新可以通过下列代码进行：
<template>
<div>
<ul>
<liv-for=”item updateItems”:key=”item.id”>｛｛item.name｝｝</li>
</ul>
<button @click=”addItem>Add Item</button>
<div>
</template>
<script>
export default｛
data()｛
return｛
items:[
｛id: 1, name: `Item 1`｝,
｛id: 2, name: `Item 2`｝,
｛id: 3, name: `Item 3`｝,
],
｝;
｝,
methods:｛
addItem()｛
this.items.push(｛id: 4,name: `Item 4` ｝);
｝,
｝,
computed:｛
updatedItems()｛
//这里可以根据需要更新的部分进行计算
return this.items.slice(0,3);
｝,
｝,
watch:｛
updatedItems()｛
//这里可以更新需要更新的部分
//例如，可以使用jQuery或原生JavaScript来更新DOM
//例如，可以使用Vue的$forceUpdate方法来强制更新组件
｝,
｝,
｝;
</script>。
根据本公开的实施例，通过接收服务器发送的目标HTML文件、目标CSS文件；对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树；对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵；根据所述DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，生成第二渲染结果。实现利用稀疏矩阵来生成渲染结果，避免节点数量对前端浏览器渲染的影响，提高渲染效率。
需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本公开并不受所描述的动作顺序的限制，因为依据本公开，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于可选实施例，所涉及的动作和模块并不一定是本公开所必须的。
以上是关于方法实施例的介绍，以下通过装置实施例，对本公开所述方案进行进一步说明。
图2示出了根据本公开实施例的前端浏览器渲染装置200的方框图，该装置200包括：
接收模块201，用于接收服务器发送的目标HTML文件、目标CSS文件；
解析模块202，用于对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树；
转换模块203，用于对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵；
渲染模块204，用于根据所述DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，生成第二渲染结果。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，所述描述的模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
本公开的技术方案中，所涉及的用户个人信息的获取、存储和应用等，均符合相关法律法规的规定，且不违背公序良俗。
根据本公开的实施例，本公开还提供了一种电子设备和一种可读存储介质。
图3示出了可以用来实施本公开实施例的电子设备300的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或要求的本公开的实现。
电子设备300包括计算单元301，其可以根据存储在ROM302中的计算机程序或者从存储单元308加载到RAM303中的计算机程序，来执行各种适当的动作和处理。在RAM303中，还可存储电子设备300操作所需的各种程序和数据。计算单元301、ROM302以及RAM303通过总线304彼此相连。I/O接口305也连接至总线304。
电子设备300中的多个部件连接至I/O接口305，包括：输入单元306，例如键盘、鼠标等；输出单元307，例如各种类型的显示器、扬声器等；存储单元308，例如磁盘、光盘等；以及通信单元309，例如网卡、调制解调器、无线通信收发机等。通信单元309允许电子设备300通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
计算单元301可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元301的一些示例包括但不限于中央处理单元（CPU）、图形处理单元（GPU）、各种专用的人工智能（AI）计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器（DSP）、以及任何适当的处理器、控制器、微控制器等。计算单元301执行上文所描述的各个方法和处理，例如前端浏览器渲染方法。例如，在一些实施例中，前端浏览器渲染方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元308。在一些实施例中，计算机程序的部分或者全部可以经由ROM302和/或通信单元309而被载入和/或安装到电子设备300上。当计算机程序加载到RAM303并由计算单元301执行时，可以执行上文描述的前端浏览器渲染方法的一个或多个步骤。备选地，在其他实施例中，计算单元301可以通过其他任何适当的方式（例如，借助于固件）而被配置为执行前端浏览器渲染方法。
本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、现场可编程门阵列（FPGA）、专用集成电路（ASIC）、专用标准产品（ASSP）、芯片上系统（SOC）、负载可编程逻辑设备（CPLD）、计算机硬件、固件、软件和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置和该至少一个输出装置。
用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
在本公开的上下文中，可读存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合使用的程序。可读存储介质可以是机器可读信号介质或机器可读储存介质。可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦除可编程只读存储器（EPROM或快闪存储器）、光纤、便捷式紧凑盘只读存储器（CD-ROM）、光学储存设备、磁储存设备或上述内容的任何合适组合。
为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置；以及键盘和指向装置（例如，鼠标或者轨迹球），用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈（例如，视觉反馈、听觉反馈或者触觉反馈）；并且可以用任何形式（包括声输入、语音输入或者触觉输入）来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统（例如，作为数据服务器）、或者包括中间件部件的计算系统（例如，应用服务器）、或者包括前端部件的计算系统（例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互）、或者包括这种后台部件、中间件部件或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信（例如，通信网络）来将系统的部件相互连接。通信网络的示例包括：局域网（LAN）、广域网（WAN）和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。
应该理解，可以使用上述的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开的技术方案所期望的结果，本文在此不进行限制。
上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。
Claims (10)
1.一种前端浏览器渲染方法，应用于浏览器，其特征在于，包括：
接收服务器发送的目标HTML文件、目标CSS文件；
对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树；
对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵；
根据所述DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，生成第二渲染结果。
2.根据权利要求1所述的前端浏览器渲染方法，其特征在于，所述对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，包括：
对所述DOM树中各节点进行命名，得到对应的第一ID；
对所述CSSOM树中各节点进行命名，得到对应的第二ID；
将各所述第一ID映射到第一预设CSR稀疏矩阵的行指针数组、将各所述第一ID对应节点的属性信息映射到第一预设CSR稀疏矩阵的索引数组、将各所述第一ID对应节点的属性值信息映射到第一预设CSR稀疏矩阵的值数组，得到DOM-CSR稀疏矩阵；
将各所述第二ID映射到第二预设CSR稀疏矩阵的行指针数组、将各所述第二ID对应节点的属性信息映射到第二预设CSR稀疏矩阵的索引数组、将各所述第二ID对应节点的属性值信息映射到第二预设CSR稀疏矩阵的值数组，得到CSSOM-CSR稀疏矩阵。
3.根据权利要求2所述的前端浏览器渲染方法，其特征在于，所述对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，还包括：
将各所述第一ID映射到第一预设CSC稀疏矩阵的行指针数组、将各所述第一ID对应节点的属性信息映射到第一预设CSC稀疏矩阵的索引数组、将各所述第一ID对应节点的属性值信息映射到第一预设CSC稀疏矩阵的值数组，得到DOM-CSC稀疏矩阵；
将各所述第二ID映射到第二预设CSC稀疏矩阵的行指针数组、将各所述第二ID对应节点的属性信息映射到第二预设CSC稀疏矩阵的索引数组、将各所述第二ID对应节点的属性值信息映射到第二预设CSC稀疏矩阵的值数组，得到CSSOM-CSC稀疏矩阵。
4.根据权利要求1所述的前端浏览器渲染方法，其特征在于，所述第一渲染结果是通过CSR格式稀疏矩阵乘法算法计算得到的。
5.根据权利要求1所述的前端浏览器渲染方法，其特征在于，所述第二渲染结果是通过CSC格式稀疏矩阵乘法算法计算得到的。
6.根据权利要求1所述的前端浏览器渲染方法，其特征在于，通过深度优先遍历算法来对所述DOM树、CSSOM树进行转换。
7.根据权利要求1所述的前端浏览器渲染方法，其特征在于，所述方法还包括：
实时获取浏览器中目标组件的状态信息；
若所述状态信息发生变化，则计算得到所述第一渲染结果或第二渲染结果中对应的更新部分。
8.一种前端浏览器渲染装置，其特征在于，包括：
接收模块，用于接收服务器发送的目标HTML文件、目标CSS文件；
解析模块，用于对所述目标HTML文件、目标CSS文件进行解析，分别得到DOM树、CSSOM树；
转换模块，用于对所述DOM树、CSSOM树进行转换，分别得到DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵；或对所述DOM树、CSSOM树进行转换，分别得到DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵；
渲染模块，用于根据所述DOM-CSR稀疏矩阵、CSSOM-CSR稀疏矩阵，生成第一渲染结果；或根据所述DOM-CSC稀疏矩阵、CSSOM-CSC稀疏矩阵，生成第二渲染结果。
9.一种电子设备，其特征在于，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一权利要求所述的方法。
10.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行根据权利要求1-7中任一权利要求所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311344316.8A CN117076813B (zh) | 2023-10-18 | 2023-10-18 | 前端浏览器渲染方法、装置、电子设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311344316.8A CN117076813B (zh) | 2023-10-18 | 2023-10-18 | 前端浏览器渲染方法、装置、电子设备和存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117076813A true CN117076813A (zh) | 2023-11-17 |
| CN117076813B CN117076813B (zh) | 2024-01-23 |
Family
ID=88704735
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311344316.8A Active CN117076813B (zh) | 2023-10-18 | 2023-10-18 | 前端浏览器渲染方法、装置、电子设备和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117076813B (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103324521A (zh) * | 2013-06-20 | 2013-09-25 | 张家港保税区润桐电子技术研发有限公司 | 一种测量网页首屏时间的方法 |
| US20130268843A1 (en) * | 2010-12-03 | 2013-10-10 | Tencent Technology (Shenzhen) Company Limited | Method, Apparatus And System For Rendering Web Page |
| CN103777939A (zh) * | 2013-03-18 | 2014-05-07 | 北京基调网络系统有限公司 | 一种测量网页首屏时间的方法 |
| CN113900647A (zh) * | 2021-09-29 | 2022-01-07 | 稿定（厦门）科技有限公司 | 一种网页截图的方法和装置以及设备 |
| CN114996619A (zh) * | 2022-06-27 | 2022-09-02 | 平安科技（深圳）有限公司 | 一种页面显示的方法、装置、计算机设备及存储介质 |
-
2023
- 2023-10-18 CN CN202311344316.8A patent/CN117076813B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130268843A1 (en) * | 2010-12-03 | 2013-10-10 | Tencent Technology (Shenzhen) Company Limited | Method, Apparatus And System For Rendering Web Page |
| CN103777939A (zh) * | 2013-03-18 | 2014-05-07 | 北京基调网络系统有限公司 | 一种测量网页首屏时间的方法 |
| CN103324521A (zh) * | 2013-06-20 | 2013-09-25 | 张家港保税区润桐电子技术研发有限公司 | 一种测量网页首屏时间的方法 |
| CN113900647A (zh) * | 2021-09-29 | 2022-01-07 | 稿定（厦门）科技有限公司 | 一种网页截图的方法和装置以及设备 |
| CN114996619A (zh) * | 2022-06-27 | 2022-09-02 | 平安科技（深圳）有限公司 | 一种页面显示的方法、装置、计算机设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117076813B (zh) | 2024-01-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20150128110A1 (en) | Mobile application development and deployment | |
| CN114357276A (zh) | 数据查询方法、装置、电子设备以及存储介质 | |
| CN116028028B (zh) | 请求函数生成方法、装置、设备及存储介质 | |
| CN112506602A (zh) | 页面生成方法及装置、电子设备、计算机可读介质 | |
| CN113836877A (zh) | 一种文本标注方法、装置、设备以及存储介质 | |
| CN113392346A (zh) | 资源文件的路径处理方法、装置、电子设备及存储介质 | |
| CN114398138B (zh) | 界面生成方法、装置、计算机设备和存储介质 | |
| CN112784588B (zh) | 用于标注文本的方法、装置、设备以及存储介质 | |
| CN114398023A (zh) | 生成文件的方法、配置页面的方法和装置 | |
| CN113869042A (zh) | 文本标题生成方法、装置、电子设备以及存储介质 | |
| CN112925522A (zh) | 依赖图生成方法、装置、设备、存储介质和程序产品 | |
| US9990343B2 (en) | System and method for in-browser editing | |
| CN117076813B (zh) | 前端浏览器渲染方法、装置、电子设备和存储介质 | |
| EP4187404A1 (en) | Method and apparatus for question answering based on table, and electronic device | |
| CN113642295B (zh) | 页面排版方法、装置及计算机程序产品 | |
| CN113886482B (zh) | 面向图数据库的数据自动入库方法、装置和设备 | |
| CN115687717A (zh) | Grok表达式获取方法、装置、设备及计算机可读存储介质 | |
| CN114579120A (zh) | 一种应用代码处理方法、装置、电子设备及存储介质 | |
| CN113849164A (zh) | 数据处理方法、装置、电子设备和存储器 | |
| CN112632293A (zh) | 行业图谱的构建方法、装置、电子设备及存储介质 | |
| CN117270838B (zh) | 一种通用公式脚本的生成方法、装置、设备及介质 | |
| CN112527290A (zh) | 基于生物特征信息搭建页面的方法和装置 | |
| CN118394835B (zh) | 一种电网数据的分析方法、装置、设备及存储介质 | |
| CN113343636B (zh) | 一种设置标注线宽度的方法、装置、电子设备及存储介质 | |
| CN113254826B (zh) | 转储文件的处理方法及装置 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |