前端浏览器渲染方法、装置、电子设备和存储介质与流程

本公开涉及计算机，尤其涉及一种前端浏览器渲染方法、装置、电子设备和存储介质。

背景技术：

1、前端浏览器渲染是指将web应用程序的代码转化为用户可以看到和与之交互的可视化界面的过程。前端浏览器渲染使得用户可以直观地与web应用程序进行交互，通过将html、css和javascript等web技术转化为界面元素、样式和交互效果，浏览器可以呈现出用户友好的界面，这样，用户可以通过点击、滚动、输入等动作与应用程序进行沟通，实现各种功能，提供良好的用户体验；有助于实现跨平台和跨浏览器的兼容性，不同的浏览器和设备对web技术的支持程度各不相同，因此需要经过渲染引擎的处理来确保应用程序可以在各种环境中正确显示和运行，通过实施标准化的渲染流程，前端开发者可以确保应用程序在不同的浏览器和设备上保持一致的外观和功能；可以优化性能和加载速度，浏览器会对html文档进行解析和渲染，并根据css样式对元素进行布局和绘制，最终呈现给用户，通过优化渲染过程，如减少重排和重绘、延迟加载等手段，可以提高页面加载速度和响应性能，提升用户体验；为搜索引擎优化（seo）提供了支持，搜索引擎爬虫无法像用户一样解析和理解javascript代码，因此对于基于javascript的内容，浏览器渲染非常重要，通过在服务器端进行渲染，或使用服务器端渲染（ssr）等技术，可以提供更好的seo效果，使得搜索引擎可以正确抓取和索引网页内容。因此，前端浏览器渲染的意义不可忽视。

2、目前，在对前端浏览器进行渲染的过程中，常采用dom树和cssom树生成渲染树的并执行后续的布局和绘制操作，但该方法需要遍历整个渲染树，随着渲染树节点数量的增加，该方法对前端浏览器的渲染效率受遍历整个渲染树的影响，导致对前端浏览器渲染的效率较低。

3、因此，亟须一种具有较高渲染效率的前端浏览器渲染方法、装置、电子设备和存储介质。

技术实现思路

1、本公开提供了一种前端浏览器渲染方法、装置、电子设备和存储介质。

2、根据本公开的第一方面，提供了一种前端浏览器渲染方法。该方法包括：

3、接收服务器发送的目标html文件、目标css文件；

4、对所述目标html文件、目标css文件进行解析，分别得到dom树、cssom树；

5、对所述dom树、cssom树进行转换，分别得到dom-csr稀疏矩阵、cssom-csr稀疏矩阵；或对所述dom树、cssom树进行转换，分别得到dom-csc稀疏矩阵、cssom-csc稀疏矩阵；

6、根据所述dom-csr稀疏矩阵、cssom-csr稀疏矩阵，生成第一渲染结果；或根据所述dom-csc稀疏矩阵、cssom-csc稀疏矩阵，生成第二渲染结果。

7、进一步地，所述对所述dom树、cssom树进行转换，分别得到dom-csr稀疏矩阵、cssom-csr稀疏矩阵；或对所述dom树、cssom树进行转换，分别得到dom-csc稀疏矩阵、cssom-csc稀疏矩阵，包括：

8、对所述dom树中各节点进行命名，得到对应的第一id；

9、对所述cssom树中各节点进行命名，得到对应的第二id；

10、将各所述第一id映射到第一预设csr稀疏矩阵的行指针数组、将各所述第一id对应节点的属性信息映射到第一预设csr稀疏矩阵的索引数组、将各所述第一id对应节点的属性值信息映射到第一预设csr稀疏矩阵的值数组，得到dom-csr稀疏矩阵；

11、将各所述第二id映射到第二预设csr稀疏矩阵的行指针数组、将各所述第二id对应节点的属性信息映射到第二预设csr稀疏矩阵的索引数组、将各所述第二id对应节点的属性值信息映射到第二预设csr稀疏矩阵的值数组，得到cssom-csr稀疏矩阵。

12、进一步地，所述对所述dom树、cssom树进行转换，分别得到dom-csr稀疏矩阵、cssom-csr稀疏矩阵；或对所述dom树、cssom树进行转换，分别得到dom-csc稀疏矩阵、cssom-csc稀疏矩阵，还包括：

13、将各所述第一id映射到第一预设csc稀疏矩阵的行指针数组、将各所述第一id对应节点的属性信息映射到第一预设csc稀疏矩阵的索引数组、将各所述第一id对应节点的属性值信息映射到第一预设csc稀疏矩阵的值数组，得到dom-csc稀疏矩阵；

14、将各所述第二id映射到第二预设csc稀疏矩阵的行指针数组、将各所述第二id对应节点的属性信息映射到第二预设csc稀疏矩阵的索引数组、将各所述第二id对应节点的属性值信息映射到第二预设csc稀疏矩阵的值数组，得到cssom-csc稀疏矩阵。

15、进一步地，所述第一渲染结果是通过csr格式稀疏矩阵乘法算法计算得到的。

16、进一步地，所述第二渲染结果是通过csc格式稀疏矩阵乘法算法计算得到的。

17、进一步地，通过深度优先遍历算法来对所述dom树、cssom树进行转换。

18、进一步地，所述方法还包括：

19、实时获取浏览器中目标组件的状态信息；

20、若所述状态信息发生变化，则计算得到所述第一渲染结果或第二渲染结果中对应的更新部分。

21、根据本公开的第二方面，提供了一种前端浏览器渲染装置。该装置包括：

22、接收模块，用于接收服务器发送的目标html文件、目标css文件；

23、解析模块，用于对所述目标html文件、目标css文件进行解析，分别得到dom树、cssom树；

24、转换模块，用于对所述dom树、cssom树进行转换，分别得到dom-csr稀疏矩阵、cssom-csr稀疏矩阵；或对所述dom树、cssom树进行转换，分别得到dom-csc稀疏矩阵、cssom-csc稀疏矩阵；

25、渲染模块，用于根据所述dom-csr稀疏矩阵、cssom-csr稀疏矩阵，生成第一渲染结果；或根据所述dom-csc稀疏矩阵、cssom-csc稀疏矩阵，生成第二渲染结果。

26、根据本公开的第三方面，提供了一种电子设备。该电子设备包括：存储器和处理器，所述存储器上存储有计算机程序，所述处理器执行所述程序时实现所述方法。

27、根据本公开的第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现所述方法。

28、本公开通过接收服务器发送的目标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稀疏矩阵，生成第二渲染结果。实现利用稀疏矩阵来生成渲染结果，避免节点数量对前端浏览器渲染的影响，提高渲染效率。

29、应当理解，
技术实现要素：
部分中所描述的内容并非旨在限定本公开的实施例的关键或重要特征，亦非用于限制本公开的范围。本公开的其他特征将通过以下的描述变得容易理解。