一种基于浏览器CSS样式优化DOM性能方法、装置与流程

本发明涉及css，尤其涉及基于浏览器css样式优化dom性能方法、装置、计算机设备及存储介质。背景技术：：：1、目前基于tob领域(即面向企业的业务或服务)的前端项目在浏览器渲染性能方面，dom的结构数量极大地影响了浏览器渲染的效率。基于tob领域的前端项目，其核心在于为企业提供稳定、高效且用户友好的界面交互体验。这些项目通常涵盖从需求分析、设计规划、编码实现到测试上线的完整流程，旨在为企业提供量身定制的解决方案。具体来说，基于tob领域的前端项目包括但不限于企业门户网站、内部管理系统、数据可视化平台以及定制化业务应用等。这些项目需要充分考虑到企业的实际需求，从业务流程、数据展示到用户操作习惯等方面进行深入分析，确保最终交付的产品能够满足企业的实际需求。2、庞大的dom节点渲染时会出现页面卡顿甚至卡死的情况，严重影响了用户体验，具体包括：首屏加载、多表数据展示、文章列表展示、评论列表展示、快速滚动等复杂dom操作场景。技术实现思路1、本发明实施例的目的在于提出一种基于浏览器css样式优化dom性能方法、装置、计算机设备及存储介质，以解决现有技术中庞大的dom节点渲染时会出现页面卡顿甚至卡死的情况，严重影响了用户体验的问题。2、为了解决上述技术问题，本发明提供一种基于浏览器css样式优化dom性能方法，采用了如下所述的技术方案，包括：3、s1、根据设计稿分析ui构造和业务逻辑，设计dom结构；4、s2、获取dom结构类型，判断dom结构类型为单列展示且数量≤3的dom结构进入步骤s3，判断dom结构类型为文本列表展示型的dom结构进入步骤s4，判断dom结构类型为单业务模块组件的dom结构进入步骤s5，判断dom结构类型为以h5动画交互页类的dom结构进入步骤s6；5、s3、使用伪元素样式与事件冒泡事件实现dom节点业务ui交互，进入步骤s7；6、s4、使用section和article标签和伪元素渲染文本列表，进入步骤s7；7、s5、使用web component实现dom模块业务，进入步骤s7；8、s6、使用硬件加速、渲染回流、canvas标签实现dom动画交互，进入步骤s7；9、s7、利用浏览器css3标准协议之一的will-change对动画效果进行针对性的优化重绘流程。10、优选地，所述s1、根据设计稿分析ui构造和业务逻辑，设计dom结构的步骤具体还包括：11、获取设计稿，分析ui构造和业务逻辑；12、将设计稿分为封面区块、账号密码输入区块、登录按钮区块三大类，再根据封面区块、账号密码输入区块、登录按钮区块，设计dom结构；13、存储设计好的dom结构，并且存储所述dom结构所属的dom结构类型、dom节点信息、设计稿上的元素例如点、线、图片、按钮、视频、箭头、图表信息。14、优选地，所述s2、获取dom结构类型，判断dom结构类型为单列展示且数量≤3的dom结构进入步骤s3，判断dom结构类型为文本列表展示型的dom结构进入步骤s4，判断dom结构类型为单业务模块组件的dom结构进入步骤s5，判断dom结构类型为以h5动画交互页类的dom结构进入步骤s6的步骤具体包括：15、获取存储dom结构信息的文件，解析文件信息，获取dom结构类型；16、根据dom结构类型，判断dom结构类型为单列展示且数量≤3的dom结构进入步骤s3，判断dom结构类型为文本列表展示型的dom结构进入步骤s4，判断dom结构类型为单业务模块组件的dom结构进入步骤s5，判断dom结构类型为以h5动画交互页类的dom结构进入步骤s6。17、优选地，所述s3、使用伪元素样式与事件冒泡事件实现dom节点业务ui交互，进入步骤s7的步骤具体包括：18、伪元素::before、::after、::file-selector-button属于浏览器中css3的标准协议文档之一，使用before、after的内容时，输入content属性表明开启了伪元素的内容占位；将此属性挂载到具体的dom节点即可完成dom的模拟实现；19、父节点的事件挂载onclick＝””启动dom节点的事件绑定，子节点dom的点击事件通过冒泡方式逐步渗透传播到父节点。20、优选地，所述s4、使用section和article标签和伪元素渲染文本列表，进入步骤s7的步骤具体还包括：21、section自带浏览器排版间距边框样式，通过输入padding-block属性和border-style属性可替换浏览器自带样式；22、article标签自带浏览器的搜索引擎功能和内间距样式，通过输入padding-top、padding-bottom、contentable属性替换浏览器的默认样式搜索引擎用功能。23、优选地，所述s5、使用web component实现dom模块业务，进入步骤s7的步骤具体还包括：24、基于浏览器原生提供的web component api属性功能，实现一个单独域的内置组件库；25、基于web component提供的内置api:template模板和slot插槽功能，内置外置组件库引入该单独域中。26、优选地，所述s6、使用硬件加速、渲染回流、canvas标签实现dom动画交互，进入步骤s7的步骤具体还包括：27、使用css属性包括transform、translation、perspective、opacity属性时，系统自动开启硬件加速功能，专门为此css属性解析渲染；28、使用javascript语法操作html的动画类交互时，借助classlist api的能力可批量式地更新动画节点。29、为了解决上述技术问题，本发明还提供一种基于浏览器css样式优化dom性能装置，采用了如下所述的技术方案，包括：30、设计模块，用于根据设计稿分析ui构造和业务逻辑，设计dom结构；31、判断模块，用于获取dom结构类型，判断dom结构类型是否为单列展示且数量≤3的dom结构、文本列表展示型的dom结构、单业务模块组件的dom结构及以h5动画交互页类的dom结构；32、交互模块，用于使用伪元素样式与事件冒泡事件实现dom节点业务ui交互；33、渲染模块，用于使用section和article标签和伪元素渲染文本列表；34、业务模块，用于使用web component实现dom模块业务；35、动画模块，用于使用硬件加速、渲染回流、canvas标签实现dom动画交互；36、重绘模块，用于利用浏览器css3标准协议之一的will-change对动画效果进行针对性的优化重绘流程。37、为了解决上述技术问题，本发明还提供一种计算机设备，采用了如下所述的技术方案，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现上述的基于浏览器css样式优化dom性能方法的步骤。38、为了解决上述技术问题，本发明还提供一种计算机可读存储介质，采用了如下所述的技术方案，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现上述的基于浏览器css样式优化dom性能方法的步骤。39、与现有技术相比，本发明主要有以下有益效果：利用了浏览器内置的webcomponent自定义html标签隔离css-tree特性减少了生成css render tree的时间；高频率使用重绘属性降低浏览器回流重新计算html排版的性能损耗；充分利用了客户端的硬件加速gpu功能，减少与html竞争cpu的render tree计算资源；极大地减少了dom数量导致浏览器解析dom过程的redner tree嵌套层级过深而引发页面卡顿的问题。当前第1页12当前第1页12