[发明专利]页面组件加载方法、装置、介质及终端设备

说明书

技术领域

本发明涉及信息处理技术领域，尤其涉及一种页面组件加载方法、装置、介质及终端设备。

背景技术

组件化开发，是指Web(World Wide Web，互联网网页)前端的一种开发方式。采用组件化开发，可将一个组件的HTML(Hyper Text Markup Language，超文本标记语言)、CSS(Cascading Style Sheets，层叠样式表)样式、JS(javascript，直译式脚本语言)独立编写出来，便于复用。目前，组件化开发主要基于React、AngularJS、Vue等框架进行开发。上述三者均为基于javascript的框架。不同的框架，处理CSS样式的方法不同。方法1：将CSS样式作为行内样式进行编写，但是该方法随着页面内容的增多，对应的HTML和CSS样式就越多，会产生页面冗余的情况；方法2：将页面中全部用到的组件中的CSS样式进行提取，然后合并压缩，但是，有的页面只需要加载一部分CSS样式，不需要加载全部的CSS样式，因此该方法会导致加载页面速度变慢，以及浪费更多流量。

发明内容

本发明提供一种页面组件加载方法、装置、介质及终端设备，以解决上述技术问题中的至少一个。

本发明实施例提供一种页面组件加载方法，包括：装载页面中的待加载组件，并增加所述待加载组件对应的引用计数；根据所述引用计数判断所述待加载组件是否为首次加载；如果所述待加载组件为首次加载，则创建所述待加载组件对应的CSS样式代码；以及加载所述CSS样式代码完成组件渲染。

可选的，如果所述待加载组件不为首次加载，则从全局组件样式引用技术变量中获取所述待加载组件对应的CSS样式代码；加载所述CSS样式代码完成页面渲染。

可选的，装载页面中的待加载组件，包括：调用CSS收集器中的装载CSS方法，以装载所述待加载组件。

可选的，在装载页面中的待加载组件之前，还包括：执行组件渲染OnRender方法开启组件渲染。

可选的，创建所述待加载组件对应的CSS样式代码，包括：利用JS脚本语言通过文档对象模型DOM接口创建所述待加载组件对应的CSS样式代码。

可选的，在检测到页面中的组件被移除时，执行组件释放OnRelease方法；调用所述CSS收集器中的卸载CSS方法，以减少所述被移除的组件的引用计数。

可选的，当所述被移除的组件的引用计数减少到0时，利用所述JS脚本语言通过所述DOM接口删除所述被移除的组件对应的CSS样式代码。

本发明另一实施例提供一种页面组件加载装置，包括：装载模块，用于装载页面中的待加载组件，并增加所述待加载组件对应的引用计数；判断模块，用于根据所述引用计数判断所述待加载组件是否为首次加载；创建模块，用于如果所述待加载组件为首次加载，则创建所述待加载组件对应的CSS样式代码；以及渲染模块，用于加载所述CSS样式代码完成组件渲染。

可选的，所述装置还包括：获取模块，用于如果所述待加载组件不为首次加载，则从全局组件样式引用技术变量中获取所述待加载组件对应的CSS样式代码；所述渲染模块，用于加载所述CSS样式代码完成页面渲染。

可选的，所述装载模块，用于：调用CSS收集器中的装载CSS方法，以装载所述待加载组件。

可选的，所述装置还包括：开启模块，用于在装载页面中的待加载组件之前，执行组件渲染OnRender方法开启组件渲染。

可选的，所述创建模块，用于：利用JS脚本语言通过文档对象模型DOM接口创建所述待加载组件对应的CSS样式代码。

可选的，所述装置还包括：释放模块，用于在检测到页面中的组件被移除时，执行组件释放OnRelease方法，并调用所述CSS收集器中的卸载CSS方法，以减少所述被移除的组件的引用计数。

可选的，所述释放模块，还用于：当所述被移除的组件的引用计数减少到0时，利用所述JS脚本语言通过所述DOM接口删除所述被移除的组件对应的CSS样式代码。

本发明还一实施例提供一种非易失性计算机存储介质，其特征在于，所述非易失性计算机存储介质存储有计算机可执行命令，所述计算机可执行命令用于使计算机执行如本发明第一方面实施例所述的页面组件加载方法。

本发明又一实施例提供一种终端设备，包括至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，