前端浏览器渲染方法技术

本公开的实施例提供了一种前端浏览器渲染方法

【技术实现步骤摘要】
前端浏览器渲染方法、装置、电子设备和存储介质


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

技术介绍

[0002]前端浏览器渲染是指将
Web
应用程序的代码转化为用户可以看到和与之交互的可视化界面的过程
。
前端浏览器渲染使得用户可以直观地与
Web
应用程序进行交互，通过将
HTML、CSS
和
JavaScript
等
Web
技术转化为界面元素
、
样式和交互效果，浏览器可以呈现出用户友好的界面，这样，用户可以通过点击
、
滚动
、
输入等动作与应用程序进行沟通，实现各种功能，提供良好的用户体验；有助于实现跨平台和跨浏览器的兼容性，不同的浏览器和设备对
Web
技术的支持程度各不相同，因此需要经过渲染引擎的处理来确保应用程序可以在各种环境中正确显示和运行，通过实施标准化的渲染流程，前端开发者可以确保应用程序在不同的浏览器和设备上保持一致的外观和功能；可以优化性能和加载速度，浏览器会对
HTML
文档进行解析和渲染，并根据
CSS
样式对元素进行布局和绘制，最终呈现给用户，通过优化渲染过程，如减少重排和重绘
、
延迟加载等手段，可以提高页面加载速度和响应性能，提升用户体验；为搜索引擎优化（
SEO<br/>）提供了支持，搜索引擎爬虫无法像用户一样解析和理解
JavaScript
代码，因此对于基于
JavaScript
的内容，浏览器渲染非常重要，通过在服务器端进行渲染，或使用服务器端渲染（
SSR
）等技术，可以提供更好的
SEO
效果，使得搜索引擎可以正确抓取和索引网页内容
。
因此，前端浏览器渲染的意义不可忽视
。
[0003]目前，在对前端浏览器进行渲染的过程中，常采用
DOM
树和
CSSOM
树生成渲染树的并执行后续的布局和绘制操作，但该方法需要遍历整个渲染树，随着渲染树节点数量的增加，该方法对前端浏览器的渲染效率受遍历整个渲染树的影响，导致对前端浏览器渲染的效率较低
。
[0004]因此，亟须一种具有较高渲染效率的前端浏览器渲染方法
、
装置
、
电子设备和存储介质
。

技术实现思路

[0005]本公开提供了一种前端浏览器渲染方法
、
装置
、
电子设备和存储介质
。
[0006]根据本公开的第一方面，提供了一种前端浏览器渲染方法
。
该方法包括：接收服务器发送的目标
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
稀疏矩阵，生成第二渲染结果
。
[0007]进一步地，所述对所述
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
稀疏矩阵
。
[0008]进一步地，所述对所述
DOM
树
、CSSOM
树进行转换，分别得到
DOM
‑
CSR
稀疏矩阵
、CSSOM
‑
CSR
稀疏矩阵；或对所述
DOM
树
、CSSOM
树进行转换，分别得到
DOM
‑
CSC
稀疏矩阵
、CSSOM
‑
CSC
稀疏矩阵，还包括：将各所述第一
ID
映射到第一预设
CSC
稀疏矩阵的行指针数组
、
将各所述第一
ID
对应节点的属性信息映射到第一预设
CSC
稀疏矩阵的索引数组
、
将各所述第一
ID
对应节点的属性值信息映射到第一预设
CSC
稀疏矩阵的值数组，得到
本文档来自技高网...

【技术保护点】

【技术特征摘要】
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
稀疏矩阵
...

【专利技术属性】
技术研发人员：丁宇，胡国超，赵三芳，徐浩楠，周静妮，马霏，
申请(专利权)人：中国电子科技集团公司第十五研究所，
类型：发明
国别省市：