一种跨屏Web页面自适应渲染系统及方法

一种跨屏web页面自适应渲染系统及方法
技术领域
1.本发明属于计算机领域，特别是涉及一种跨屏web页面自适应渲染系统及方法。


背景技术：

2.随着技术的不断进步，移动设备已成为日常生活中不可或缺的一部分。由于移动设备具有搭载独立操作系统并可以无线接入互联网等特质，人们经常使用移动设备来访问网络信息，以及解决饮食起居等各种业务。
3.步入现代市场的移动设备相继而至，产品的功能和外观瞬息万变。然而，因为屏幕大小以及分辨率复杂化，相较于电脑设备，在移动设备显示网站的问题将会随之产生。若仅仅完成从桌面网站迁移到智能设备上，可能会导致ui失真和变形。因此，适应每个设备的不同屏幕和分辨率，优化最终用户体验变得至关重要。实现此目标的常见办法就是为各种设备设计各自独立的布局设计，但是这将会引起生产率低下以及错误率上升的现象：一个组件样式的更新需要将多处文件同时进行修改。相同的，开发人员需要在新设备引入的情况下，耗费高额的成本设计其设备的样式，以及服务端的配置增加对应的策略，导致网页开发复杂度的跃升。为了改善这种情况，一次开发多端适配，如同tan，h。z。的“编写一次，到处运行”(wora)的概念，即交互式网站通常能够显示在不同尺寸的设备上，将会是未来网页开发的新趋势。
4.对于现有技术中的单独制作移动端页面方案，这种方案最早出自2007年iphone的移动网站。这种方法主要的原理就是针对移动端设备重新开发一套页面，也因此该方案的兼容性十分强。新的移动端页面虽然与电脑端的布局样式可能很像，但是两者是相互独立的，移动端页面会有自己的url。单独制作移动端页面由于是重新制作一个新的布局样式，因此布局设计能够更加贴切使得移动端的使用者的心，极大程度地提高人们的满意度。不同设备之间相互独立，所以能够直接针对设备进行管理，便于维护。但是，这种做法也十分耗费资源，开发团队需要针对不同的设备去制作网页系统，也会增加后续维护的工作量，而且考虑到未来可能会有源源不断的移动端设备诞生，维护团队的负担也会随之不断加重。除此之外，因为每一个设备都有自己的一个url，所以系统需要耗费额外的资源去根据访问的机型进行url的重定向。
5.对于现有技术中的响应式设计方案，响应式设计的核心思想是“移动优先和渐进增强”。“移动优先”指的是优先设计、考虑移动设备的样式。“渐进增强”则是意味着以移动设备为基础，在尺寸逐步增大时补充设计。该方案核心技术就是css3的媒体查询，主要原理就是基于屏幕的尺寸进行页面样式的动态的变化。在系统判断当前尺寸为电脑时对移动端元素的隐藏，在判断为移动端的尺寸时就对电脑端元素的隐藏和页面的重排。这个做法的好处是只要写出一套页面布局即可，不需要对资源的重定向。然而这种方案也有它的缺点，那就是靠着一套页面系统兼容所有的设备。这不仅会导致代码累赘，还会加重开发人员的负担。当完成所有设备的兼容时，页面布局元素将会十分复杂。此外，若有新的设备需要增加适配，则需要在一个页面布局上面修改，维护成本高。
6.对于现有技术中的适配系统方案，适配系统这种做法是将内容网页针对目标设备的直接转换，使得网页在目标设别上有个良好的展示效果。这种技术最大的特点是它将原本适配的功能从网页中抽离出来，实现网页展示与适配的解耦。一般适配系统是建立在服务端和客户端之间。因为适配系统独立于页面展示，因此实现方法不唯一，像基于微信公众平台作为中间层，也有像部署云端进行网络请求响应的劫持完成转换等等。这种方法最大的好处在于它的转换过程是全自动的，节省大量资源。此外，网页展示与适配的解耦，适配服务的实现手段相对自由和多样，即使未来有新的移动设备问世也容易针对它进行扩展支持，便于后续维护。但是，由于适配过程是无人工干涉的，因此最后转换完成的页面在展示和美感上比单独制作移动端页面和响应式设计这两种技术要差。


技术实现要素：

7.本发明的目的是提供一种跨屏web页面自适应渲染系统及方法，以解决上述现有技术存在的问题。
8.一方面为实现上述目的，本发明提供了一种跨屏web页面自适应渲染系统，包括：结构分割模块，所述结构分割模块用于获取用户的web页面数据并对所述web页面数据进行分割，得到页面分块分类数据；web服务器模块，所述web服务器模块用于数据传输；内容分类模块，所述内容分类模块用于对所述页面分块分类数据进行分类预测，得到预测结果；页面适配模块，所述页面适配模块通过对所述预测结果进行分析进行页面适配调整，得到适配页面数据并发送给用户。
9.可选的，所述结构分割模块包括：页面分块子模块、交互子模块和评估子模块；通过所述页面分块子模块获取所述web页面数据的dom树数据，并对所述dom树数据进行计算分析，得到页面分块数据；通过所述交互子模块对所述页面分块数据进行修改和类别判断，得到页面分块类别数据；所述评估子模块用于对页面分块数据和所述页面分块类别数据进行对比分析，得到对比数据，基于所述对比数据对所述结构分割模块进行优化。
10.可选的，所述web服务器模块包括：nginx服务器，uwsgi服务器和flask-application初始化工具；其中，所述nginx服务器用于接受所述页面分块类别数据并发送请求值到所述uwsgi服务器中，所述uwsgi服务器用于向所述flask-application初始化工具发送应用请求服务，所述flask-application初始化工具用于将所述分块类别数据发送到所述内容分类模块中。
11.可选的，所述内容分类模块包括：数据预处理子模块，模型训练子模块和模型评估子模块；其中，所述数据预处理子模块用于对所述页面分块类别数据进行清洗、去除空白和标准化操作，得到预处理后的页面分块类别数据；所述模型训练子模块用于构建若干分类预测模型，并基于所述预处理后的页面分块类别数据对若干所述分类预测模型进行训练，得到若干训练后的分类预测；所述模型评估子模块用于对若干训练后的分类预测模型进行评估，得到最优分类预测模型，基于所述最优分类预测模型获取所述预测结果。
12.可选的，所述页面适配模块包括：适配策略选择子模块、基于定义css规则的适配策略子模块和基于模板设计和内容提取的适配策略子模块；其中，所述适配策略选择子模块用于对所述预测结果进行分析并基于分析结果进行策略选择；所述基于定义css规则的适配策略子模块用于对所述web页面数据进行css规则重建覆盖处理，得到适配页面数据；
所述基于模板设计和内容提取的适配策略子模块用于对所述web页面数据进行类型分类和内容提取，得到适配页面数据。
13.另一方面为实现上述目的，本发明提供了一种跨屏web页面自适应渲染方法，包括：获取用户的web页面数据并对所述web页面数据进行分割，得到页面分块分类数据；对所述页面分块分类数据进行分类预测，得到预测结果；对所述预测结果进行分析进行页面适配调整，得到适配页面数据并发送给用户。
14.可选的，所述获取页面分块分类数据的过程包括：获取所述web页面数据的dom树数据，并对所述dom树数据进行节点过滤，并根据所述dom树数据的几何性质进行对应简单分块构建，得到分块树状结构，对所述分块树状结构进行初始化，得到复合分块树结构，获取粒度阈值数据，基于所述粒度阈值数据对所述复合分块树结构进行分析并进行层描，得到页面分块数据；对所述页面分块数据进行修改和类别判断，得到页面分块类别数据；对页面分块数据和所述页面分块类别数据进行对比分析，得到对比数据，基于所述对比数据对所述结构分割模块进行优化。
15.可选的，获取所述预测结果的过程包括：对所述页面分块类别数据进行清洗、去除空白和标准化操作，得到预处理后的页面分块类别数据；构建若干分类预测模型，并基于所述预处理后的页面分块类别数据对若干所述分类预测模型进行训练，得到若干训练后的分类预测模型；对若干训练后的分类预测模型进行评估，得到最优分类预测模型，基于所述最优分类预测模型获取所述预测结果。
16.可选的，所述分类预测模型为机器学习模型，其中，所述机器学习模型的算法包括但不限于神经网络、随机森林、gradientboosting、xgboost和lightgbm。
17.可选的，获取所述适配页面数据的过程包括：对所述预测结果进行分析并基于分析结果进行策略选择，得到适配策略；其中，所述适配策略包括：基于定义css规则的适配策略和基于模板设计和内容提取的适配策略；所述基于定义css规则的适配策略包括：对所述web页面数据进行css规则重建覆盖处理，得到适配页面数据；所述基于模板设计和内容提取的适配策略子包括：对所述web页面数据进行类型分类和内容提取，得到适配页面数据。
18.本发明的技术效果为：
19.本发明提供的一种跨屏web页面自适应渲染系统及方法容许访问者在无开发人员提供协助的情形下，从具备相异屏幕尺寸和分辨率的设备访问同一个网站，且网站会识别每个屏幕尺寸的变化优化页面，有效地传递内容信息。因此，用户在使用该系统时取得了相同的用户体验，满意度和工作的生产效率也有所提高。可以显着降低构建和维护网站的成本，同时保持网站在不同尺寸的移动设备上的呈现。适配界面能够保留原始页面的风格，兼顾了可用性、美观性、效率三个因素，给予了用户良好的体验。
附图说明
20.构成本技术的一部分的附图用来提供对本技术的进一步理解，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
21.图1为本发明实施例中的跨屏web页面自适应渲染系统流程图；
22.图2为本发明实施例中的结构分割模块的流程图；
23.图3为本发明实施例中的页面分块子模块的流程图；
24.图4为本发明实施例中的交互子模块的流程图；
25.图5为本发明实施例中的评估子模块的流程图；
26.图6为本发明实施例中的分块数据保存流程图；
27.图7为本发明实施例中的内容分类模块的流程图；
28.图8为本发明实施例中的数据预处理子模块的流程图；
29.图9为本发明实施例中的模型训练子模块的流程图；
30.图10为本发明实施例中的模型训练流程图；
31.图11为本发明实施例中的网络架构示意图；
32.图12为本发明实施例中的页面适配模块的流程图；
33.图13为本发明实施例中的适配策略选择子模块的流程图；
34.图14为本发明实施例中的基于定义css规则的适配策略子模块的流程图；
35.图15为本发明实施例中的基于模板设计和内容提取的适配策略子模块的流程图。
具体实施方式
36.需要说明的是，在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本技术。
37.实施例一
38.如图1-15所示，本实施例中提供了一种跨屏web页面自适应渲染系统及方法，包括：结构分割模块，所述结构分割模块用于获取用户的web页面数据并对所述web页面数据进行分割，得到页面分块分类数据；web服务器模块，所述web服务器模块用于数据传输；内容分类模块，所述内容分类模块用于对所述页面分块分类数据进行分类预测，得到预测结果；页面适配模块，所述页面适配模块通过对所述预测结果进行分析进行页面适配调整，得到适配页面数据并发送给用户。获取用户的web页面数据并对所述web页面数据进行分割，得到页面分块分类数据；对所述页面分块分类数据进行分类预测，得到预测结果；对所述预测结果进行分析进行页面适配调整，得到适配页面数据并发送给用户。
39.首先，用户选择对当前页面进行适配，然后chrome扩展程序中结构分割模块对页面进行分割形成分块结果，然后向nginx发送页面分块结果。nginx将请求值uwsgi服务器当中，而uwsgi服务器向flask应用请求服务，其后内容结构内容分类模块中使用预测模型对页面分块进行分类，再将预测的结果逐步返回到chrome扩展程序中的页面适配模块当中，其后该模块进行页面适配调整工作，最终将适配完成的页面返回给用户。
40.页面分块子模块主要使用的页面分块算法为block-o-matic算法，该子模块从web页面当中获得dom树，能够对其正确有效的对于页面结构进行识别，通过块的切割和粒度判断上达到了颇高的精准性，同时该算法也结合了dom树以及视觉信息等方面的技术，此模块的输出为根据粒度默认阈值形成自动化的页面分块结果。
41.结构分割模块若提供开发工具功能则会继续进入交互子模块和评估子模块的结果进行进一步的操作与准确值计算，否则若为最终产品则直接将页面分块结果传递到内容分类模块当中。其中，交互子模块能够根据原先自动化切割结果的基础上，根据自身的需求对其进行修改操作(删除、分解、融合页面分块)，对页面分块进行17中分块类别标签的分类与分类后页面分块的数据存储；而评估子模块的功能为辅助开发人员在交互子模块当中对
页面分块执行修改操作后，快速得知操作后与自动化分块结果的准确性，因此，开发人员能够对于不断优化bom算法的过程能够提供帮助。
42.页面分块子模块会从web页面获得dom树，而在最终会形成自动化的页面分块结果：
43.步骤一，在步骤一当中依照dom树中各节点(html元素)的标签特性对不要的节点进行过滤。在过滤的过程当中(过滤掉空元素、表示内容文本为空格、或者该节点为注释的元素)。
44.步骤二，在步骤二当中根据几何性质为被过滤后的dom树节点构建对应简单分块，形成简单分块的树结构。创建过程当中再次过滤掉没有高度或者宽度的dom树节点，避免该dom树节点产生无用分块。每个简单分块里同时记录了该分块高度、宽度、位置等相关属性，在遍历分块树结构的时候能便利的将其取出执行计算。
45.步骤三，在步骤三当中对复合分块的树结构进行初始化，构建过程中复合分块和简单分块一一对应，前者包裹着后者，由此产生了复合分块树结构，初始化时每个复合分块只包含着一个的简单分块。
46.步骤四，在步骤四中由下而上遍历复合分块树结构，以粒度阈值进行判断不断执行复合分块融合。融合后的复合分块内部可能包含着一至多个简单分块。在算法当中设置了对于融合时候考虑的粒度阈值(数值为0～10之间)。步骤三对每个分块的粒度值计算方式如下方的公式。公式中w代表了该分块所占整个html文档的宽度比例，h代表了该分块所占html文档的高度比例，dh和dv是整个计算过程中的中间产物，而最终的d即为粒度的最终计算值，其值将会位于0～10中间。
[0047][0048][0049]
步骤五，在步骤五当中，复合分块的结果在网站覆盖在网站上层描绘出来，可视化地呈现了最终的自动化分块结果。自动化的分块结果就是透过前面四个步骤后最终产生，对web页面有效进行了分块操作。
[0050]
可视化的分块效果中可以发现当设置不同的默认阈值时，页面分块也会产生截然不同的结果。交互子模块是作为当结构分割模块被用做开发工具的时候，针对开发人员进行设计的部分。该模块分为三个步骤对自动化的页面分块结果执行操作：
[0051]
(一)步骤一为经由页面分块子模块产生的结果进行修改操作(内部包含了融合、分解、删除)。
[0052]
(二)步骤二为针对操作完成后的页面分块执行17种标签类别的人工分类，17中类别的标签的目的即为参考众多网站过后所产生的类别结果，其能够妥善传递的页面当中的相关理念，如表1所示：
[0053]
表1
[0054][0055][0056]
(三)步骤三当中将最终具有类别的页面分块结果数据转为文件执行下载。(下载同时触发评估子模块的分块准确度计算。)
[0057]
开发人员可以透过选取分块将其进行分割，开发人员可以对于所选的两个分块执行合并操作；开发人员可以对分块结果进行操作，开发人员能够针对开发结果进行17种分块的类别进行归类。选取分块在该子模块当中选取对应类别进行分类。开发人员能够针对具有类别的页面分块进行数据保存，
[0058]
评估子模块是作为用作当结构分割模块被用作开发工具时，针对开发人员需求进行设计的部分。此部分的目的为方便开发人员依照自身意愿手动更改页面分块前后的精确值分析，快速得知自动化分块结果和开发人员理想结果的准确度偏差大小。该部分分为三个步骤完成赋予修改后的分块结果评估计算：
[0059]
(一)在步骤一当中会对于自动化分块之后对当下的页面分块结果执行存储，存储的数据为对应分块的内部的属性，包含宽高、位置。存储内部属性使用深拷贝的方式存储于分块列表当中，避免了因为浅拷贝对操作时并非对于数值操作，而是单纯在新构造的对象中将其指向了原对象，同时对复制的变量更改会引起原变量的数据更动，引起意想不到的麻烦。方法单中这些属性都一一赋值，而不是单纯的指向对象。
[0060]
(二)在步骤二当中会在开发人员执行修改操作(删除、分裂、融合等操作)的分块结果和步骤一的分块列表一一进行比对判断是否为相同的分块。若得到分块的数值皆相同则代表其没有经过修改操作，换句话说，这块自动化分块得到的分块是精确的，符合开发人员预期的。最终能够透过统计得到有多少没有经过修改的页面分块数量的值。
[0061]
(三)在步骤三则将没有经过修改的分块数量值和分块列表所存储的分块数量计算百分比值，该计算得到的数值能够针对分块效果基于开发人越精确值的反馈，方便接下
来对算法进行调整与优化。
[0062]
内容分类模块主要负责对页面分块的内容预测，为后续页面适配模块提供内容信息支持完成页面的适配。考虑机器学习无需人工干预，能够识别数据的趋势和规律，以及准确率随着数据量增大而提高，所以内容分类模块主要使用机器学习技术完成。参考机器学习的流程，本实施例中将内容分类模块划分为数据预处理子模块、模型训练子模块和模型评估子模块。
[0063]
数据预处理子模块是对页面分块进行清洗、去除空白、以及标准化的过程，为后续机器学习算法训练的训练样本提供正确的、合适的规范。对页面分块清洗主要是因为页面分块的数值存在格式不同但所表达的意义相同的数据。因此需要清除数据的格式。页面分块的去除空白是因为浏览器对于部分属性是允许取空值，所以为了保证最后模型的准确性，需要对其填充浏览器对应的页面分块相关属性的缺省值。页面分块标准化是因为浏览器能够解析多种数值单位，所以还需对页面分块的数值单位统一页面分块的数值单位。此外，标准化还要将页面分块存在一些分类标签数据需要转化为数值类型，即机器学习算法能理解的格式。
[0064]
由于内容分类模块使用的核心技术为机器学习，故在数据预处理后需要将内容分类模块分为训练和预测两大方向。在训练的流程中，处理后的页面分块将传输到模型训练子模块。模型训练子模块主要是基于这些处理后的页面分块，对选择的算法进行训练，并训练出来的多个模型交给评估子模块评估。在评估子模块结束工作后，模型训练子模块就会收到这些模型中效果最好的模型，最后将其保存下来。内容分类模块的预测方向便是调用这个模型，预测页面分块的内容，将预测结果提供给页面适配模型。
[0065]
模型评估子模块主要职责是接受模型训练子模块输入的模型，对模型评估，根据约定的评估标准选出成绩最好的模型并返回给模型训练子模块。为了综合度量模型的优劣，本项目将选择多种度量指标，并基于密切值法公式计算结果来判断模型优劣。最后将接受模型中效果最好的模型算法交由模型训练子模块训练与保存。
[0066]
考虑跨屏web页面自适应渲染系统最终运行在浏览器上，运行环境与内容分类模块的内容分类模型兼容较差。所以最终内容分类模块将部署成网络服务，前端chrome将通过http请求完成页面分块数据的内容分类功能。
[0067]
虽然页面分块数据来自浏览器页面的原因保证了数据的正确性，但是仍然需要对其数据预处理，而这也是数据预处理子模块的主要功能核心。页面分块数据的部分数据无法直接投入机器学习算法中使用，其问题具体体现在none值、单位不统一、数值不标准、空值和分类型数据。
[0068]
首先流程的一开始对页面分块数据检查，看是否含数据型数据。如果页面分块不含有数据型数据代表其全部为分类型数据，而分类型数据指的是对某种属性按照特定逻辑进行分类，反映其事件特性的数据。这意味none值和单位不统一问题就不存在，即可以节省在这两方面的开销，直接进行数据清洗。如果是数值型数据则开始对none值和单位不统一问题的处理。none值问题的出现是因为浏览器页面的css样式部分属性值能够取none值，且none值的css样式对页面展示效果影响不大。但是，机器学习算法不理解none值，即便在部分算法中能够使用none值也会造成不可控的影响。因此，需要根据none值本身的内容意义进行转换。一般而言，none值代表没有，可以使用-1代替。所以页面分块数据中所有的none
值都需转换为-1。如果不含有none值可直接进入单位转换。
[0069]
单位不统一问题主要是因为前端页面编写相对自由，在数值型的css样式的单位选择上，允许开发人员使用em、rem、vh、vw、％等等一系列单位，这些单位浏览器都是能够正常解析显示的。所以，为了保证模型的准确性，本模块需要处理单位不统一问题。具体通过浏览器提供的api实现。因为跨屏web页面自适应渲染系统主要是运行在浏览器上，生命周期是在页面完全展示后。而em、rem、vh、vw、％等等单位都是相对单位，在页面展示后这些单位都经由浏览器解析转换完成，只需要通过调用合适的浏览器api获取即可。
[0070]
随后的数据清洗工作是对部分页面分块数据的重写。在前端网页css样式编写的时候，通常为了兼容所有版本浏览器，都需要在css的属性增加-moz-、-ms-、-webkit-、以及-o-的前缀，对应目前市场的四大浏览内核。但是，从实际展示上看它们的效果是一样的，所以数据标准化需要将带有-moz-、-ms-、-webkit-和-o-前缀的css样式全部替换成空字符串，以保证数据的一致性。
[0071]
之后的去除空白是对空白的页面分块数据填充合适的数值。产生空白的原因是因为浏览器允许开发人员对css属性留空，而留空的css属性会自动补充缺省值。这时，调用浏览器api获取的属性值将会是空字符串。对于这些空字符串，分类型数据可以直接查阅w3c的文档的对应属性的默认值，并将其填充在对应的空值内。数值型数据则只有部分属性能通过查找w3c的文档进行填补。在本模块中，剩下的不同通过查阅文档解决空白问题的数值型数据会使用计算平均值的方式进行填充。
[0072]
剩下的分类型数据由于其独特的性质，需要对其编码转换成机器学习算法能够理解的数据。在查阅相关文献后，本人发现了广义混合线性模型(glmm)编码对分类型数据的编码效果相比其他编码能够取得较好的结果。glmm编码的主要原理是通过分类型数据与数据集的结果拟合出一个混合线性模型，以此获取一个全局固定的截距，然后通过不同类别生成不同的随机截距，最后的编码结果就是全局截距和对应分类数据生成的局部截距的结合。文献的实验结果指出，glmm编码在回归、二分类、多分类三种机器学习结果中的综合效果最好，尤其是经过5折交叉检验的glmm编码。因此，数据预处理的分类型变量编码将使用经过5折交叉检验的glmm编码方式完成。
[0073]
综上，在数据预处理子模块处理完none值、单位不统一、数值不标准、空值和分类型数据等问题后，就能得到就能够得到合适、标准的页面分块数据，投入后续的模型训练子模块。
[0074]
模型训练子模块，本模块的职责是根据数据预处理模块的数据训练出合适的模型，传入模型评估模块获取效果最好的模型并保存下来。所以本模块的实现重点在于选择合适的算法和训练调参技术。本实施例中在算法上选择了神经网络、随机森林、gradientboosting、xgboost和lightgbm种算法。前三种算法是参考做页面内容分类的前人工作，其选择的算法就是神经网络、随机森林和gradientboosting。而xgboost和lightgbm是现如今流行的机器学习算法，也是gradientboosting的衍生算法，其具备十分强大的优势。xgboost相较于gradientboosting在损失函数上加入正则化，即约束或者惩罚特征变量，以避免模型过拟合和控制模型的复杂性。lightgbm是gradientboosting及变体算法在面对特征维度过高和数据过多情况产生的效率底下的问题。具体是通过减少梯度样本的抽取来缩减样本数量，以及捆绑互斥、或者很少同时为0的特征的方式来降低特征维度，最后
使得模型在保留原本效果的同时提高了20倍的效率。对这5种算法分别调参训练，在经由评估模型评估获取里面最好的模型，以此增加模块的准确性和可靠性。为了提高模型的准确率，本人在模型训练过程中追加了随机搜索调参和网格搜索调参。这两种调参方式都是在给定的参数的范围内，对每种参数进行排列组合，最后基于某项评评估标准取出最好的参数结果和模型。两者的区别在于随机搜索调参是在规定次数内的参数排列组合，而网格搜索是穷举给定范围的所有组合方式。虽然随机搜索调参和网格搜索调参能够对模型起到一定的改进作用，但是这类调参改进一般会导致模型的过拟合，即针对样本数据拥有十分优秀的效果但实际投入使用糟糕。针对过拟合问题，本人认为可以在调参过程中使用交叉验证的手段评估。交叉验证是将数据集分开k块，并针对模型进行k次评估。每一次评估都会从k块数据集取出k-1块训练，1块测试评。k次评估需要保证每一块数据都曾作为测试集评估，最终将评估结果平均。一旦模型出现过拟合，所有评估结果的标准差就会偏高，就能根据该结果将其剔除出去。考虑时间和机器性能的条件约束，在本次模型训练当中将先对所有算法使用随机搜索调参，对训练完的模型进行评估，决定5种算法中效果最好的算法，最终对筛选出的算法进行网格搜索调参，生成最后的模型。
[0075]
模型评估子模块的是接收模型训练子模块训练好的的模型的模块，并基于度量返回最好效果模型的模块，里面具体实现了对模型评估，并根据确定好的评估标准选透过密切值法反映出成绩最好的算法模型给模型训练子模块。因此，模型评估模块的设计与实现较为简单，只需确定评估标准并复现即可。本实施例中共选取了7种评估度量。
[0076]
accuracy是最直接的评估度量，计算过程是用预测正确的样本数除以总样本数，具体公式如下。该公式计算结果取值范围是[0,1]，是正向指标即数值越大代表效果越好。
[0077][0078]
logloss是基于概率的分类度量。公式中m是样本总数，n是类别总数，y_{i,j}的含义是第i个样本属于分类j时为为1，否则为0，p_{i,j}第i个样本被划分为第j类的概率。该公式的含义是样本被正确划分概率的对数损失，范围是[0,+∞)，数值是负向指标即越小越好。
[0079][0080]
meanperclassaccuracy是每种类别准确率的算术平均值，具体过程见公式，其中n是类别总数。其取值范围与accuracy一样，也是正向指标。
[0081][0082]
maxperclasserror是所有类别中最高的错误率，具体过程见公式，其中n是类别总数。其取值范围与accuracy一样，是负向指标。
[0083][0084]
macro-f1是多分类问题中基于混淆矩阵的度量指标，数值与精确率precision和召回率recall有关，是所有分类精确率和召回率的调和平均数再算术平均的结果，取值范围是(0,1)，是正向指标。计算过程见下式，其中n是类别本数，tp_i代表i类的预测正确数目，fp_i代表将别的类错划分为i类的数目，fn_i代表遗漏划分为i类的数目，precision_i
代表被划分i类有多少是正确，recall_i代表所有i类样本成功找出的占比。
[0085]
其中
[0086][0087]
micro-f1是多分类问题中基于混淆矩阵的度量指标，数值是微观精确率precision_{micro}和微观召回率recall_{micro}的调和平均值，取值范围是(0,1)，是正向指标。计算过程见下式，其中n是总样本数，tp_i代表i类的预测正确数目，fp_i代表将别的类错划分为i类的数目，fn_i代表遗漏划分为i类的数目，precision_{micro}代表总的准确率，recall_{micro}代表代表总的召回率。
[0088]
其中
[0089][0090][0091]
kappa是基于混淆矩阵的分类度量指标，取值范围[-1,1]，是正向指标。具体计算过程见下式，其中m是总样本数，n是类别总数，tp_i代表i类的预测正确数目，fp_i代表将别的类错划分为i类的数目，fn_i代表遗漏划分为i类的数目，p_o是正确被预测数目在总样本的占比，p_e是每种类别的预测总数和样本总数的积在总样本平方的占比。
[0092]
其中
[0093][0094]
在对每个模型进行完7种指标的度量后，模块将会综合这写数据得出最后的结果，具体使用的方法是密切值法。
[0095]
这种方法能够同时处理正向指标和负向指标，原理是找出理论的最优点和最劣点，计算对象与最优点、最劣点，最后与两点的欧式距离透过公式计算密切值来判断。整个过程简单，故十分适合评价选出最好效果的模型。具体公式过程如下：以行为评估对象，列为评估度量建立矩阵。其中，对负向评估指标取负，正向指标评估取正。下列公式代表有m个对象，n种评估指标。
[0096][0097]
根据下列公式对矩阵标准化。
[0098]
其中
[0099]
将标准矩阵中每一个的最好和最差评估度量作为最优点和最劣点。具体计算如下
所示。
[0100]
最优点其中
[0101]
最劣点其中
[0102]
根据下列公式计算评估对象到最优点和最劣点之间的欧式距离。
[0103]
最优点距离其中i＝1，
…
，m
[0104]
最劣点距离其中i＝1，
…
，m
[0105]
通过下列公式计算密密切值。密切值越小，代表越接近最优点和越远离最劣点。
[0106]
当密切值＝0时代表该密切值对应的对象位于最优点，即它的效果最佳。
[0107]
密切值其中i＝1，
…
，m
[0108][0109]
跨屏web页面自适应渲染系统主要运作在移动端的浏览器，机器学习模型直接在手机上运行对内存要求较大，且浏览器对机器学习的兼容较差。因此，最终模型是直接部署在远端服务器上，作为一个网络服务处理插件透过http协议发出的网页元素分类的请求。
[0110]
本系统的内容分类模块主要在python环境上开发，故部署网络服务需考虑python的wsgi协议进行。在本系统中，将使用flask框架作为web应用。由于本模块的实际网络服务仅有网页元素分类，所以选择轻量级的flask更加符合内容分类模块的体量。在web服务器的选择上，本实施例中使用的是uwsgi。虽然uwsgi+flask的组合已经支持网络服务的部署。但是考虑网络请求的效率和并发，uwsgi作为一个web服务器虽然兼容http服务器的功能，但面对较大数量级的网络请求是不如专业的服务器。针对这点，本实施例中在uwsgi前增添nginx提供网络请求转发。nginx的多进程和异步事件驱动模型能够很好满足高并发的需求。关于设计上增加多一层nginx从而导致的传输性能降低，能够通过uwsgi实现的uwsgi协议缓解。nginx支持uwsgi通信协议，所以它与uwsgi通信可以直接使用用更快的uwsgi协议。
[0111]
页面适配模块的适配目标是可用性、美观性、效率三者兼顾，因此页面适配模块包含了两种适配策略，分别是基于定义css规则的适配调整策略，以及基于模板设计和内容提取的适配调整策略。其中前者的优势在于能够保证web页面的可用性和美观性，后者的优势在于高效率。系统根据了不同web页面的特性以及内容分类模块的结果，选择不同的适配策略，充分发挥每一种适配策略的优势。
[0112]
页面适配模块的工作流程中，整个模块可以分成三个子模块：适配策略选择子模块、基于定义css规则的适配策略子模块、基于模板设计和内容提取适配策略子模块。页面适配模块的输入为内容分类模块对分块的预测结果，子模块的基本原理以及子模块之间的交互如下：
[0113]
适配策略选择子模块将会删除掉一些不需要的分块，同时根据分块的预测结果，选择合适的适配策略。当预测结果包含comment、postcomment、content类型的分块时，选择基于定义css规则的适配策略，反之选择基于模板设计和内容提取的适配策略。这是因为comment、postcomment分块使用到了原始web界面的javascript文件，而基于模板设计和内
容提取的适配策略无法保留javascript文件。同时，当一个web中存在content类型的分块，可以认为该页面为内容型页面，而基于定义css规则的适配策略处理内容型网页的效果和效率都较好。
[0114]
基于定义css规则的适配策略子模块，它的基本原理是在原始的web页面元素当中定义新的css规则，这些规则会覆盖原始的css属性，从而达到调整原始大小、样式的目的，最终将页面适配成能够适应用户设备的页面。这种适配策略的优点在于能够最大限度地保留原始web页面的样式，完整的保留其交互功能。但这种适配策略的缺点在于，需要频繁地触发浏览器渲染时的“重排”、“重绘”阶段，效率比较低。由于内容型页面主要由内容文字组成，页面元素相对较少，使用该适配策略的效率尚可接受，因此内容型页面优先选择该适配策略。
[0115]
基于模板设计和内容提取的适配策略子模块，它将适配页面分成了四种类型，分别是新闻类网页、视频类网页、论坛类网页、电商类网页。该子模块会根据不同的页面类型，预制定页面模板，然后再通过内容提取方法，提取出每一种类型分块中的内容，放入到指定模板内部。这种适配策略的优点在于只需要遍历一次dom树，效率非常高，时间复杂度与dom树节点成正比。这种适配策略的缺点在于丢弃了原始web页面的css文件和javascript文件，导致了页面部分组件无法正常交互。因此当页面存在例如comment类型的，需要进行交互的分块类型时，该适配策略不适用。
[0116]
页面适配模块采用了基于定义css规则的页面适配策略以及基于模板设计和内容提取的页面适配策略两种策略，综合考虑两种策略的优缺点对打上标签的分块进行重新布局。经过重新布局的页面能够适应各种页面宽度，系统将兼顾一个页面的可用性、美观性以及适配效率来进行页面适配。本部分接下来将会对适配策略选择子模块和页面适配的两种策略子模块分别展开阐述。
[0117]
首先该子模块会做一些预处理工作，具体是删除一些不需要的分块。由于本实施例中所进行适配的移动端设备尺寸都比一般的电脑设备要小，如何在有限的空间展示对用户有用的内容是一个重要问题。系统所采取的做法是，删除一些重要性较低的页面分块，对此本实施例中选择了三种可删除的分块类型，分别是：aside、footer、noise。aside即页面侧边栏，通常不属于一个页面的主要内容，可以删除。footer即页面的底部，通常包含了该页面相关的联系方式等内容，属于不重要内容，可以删除。noise即页面噪音，通常表示广告内容，可以删除。
[0118]
删除完重要程度低的页面分块之后，适配策略选择子模块将会根据余下的分块类型，选择合适的适配策略。当包含comment、postcomment类型的分块时，由于基于模板设计和内容提取的适配策略难以实现该分块内部交互功能，因此使用基于定义css规则的适配策略。当包括content类型的分块时，系统认定该页面为内容型页面，选择使用基于定义css规则的适配策略，因为这种策略处理内容型网页效果较好。除了以上两种情况，均使用基于模板设计和内容提取的适配策略，因为在其他情况下这种策略能在高效率适配的前提下，兼顾该页面的可用性。
[0119]
基于定义css规则的适配策略又可以细分为三个阶段：宽度约束、可用性问题侦测、可用性问题处理。其中，后两者在实际运行中是同步进行的，涉及到的技术细节将会在下一部分进行详细阐述。
[0120]
约束宽度阶段，系统将垂直方向上的滚动作为了用户浏览web页面的主要方式，应当避免水平滚动条。因此系统更加关注设备的宽度。而为电脑端设计的web页面一般元素宽度都比较大，如果想要让这些元素也能适应宽度较小的设备，如ipad、手机等，就需要约束这些元素的宽度。在此阶段，系统以分块为最小粒度进行宽度约束，将宽度压缩至设备的宽度。为了方便处理，系统将每一个分块外部都套了一层《div》容器。限制分块的宽度就转换成了限制这些《div》容器及其祖先元素的宽度。在理想的情况下，溢出设备宽度的元素将会自动换行。然而在很多时候，约束分块及其祖先容器的宽度会产生许多可用性问题，因此接下来将对这些可用性问题的侦测预处理做出阐述。
[0121]
系统将可用性问题划分为三种：元素溢出设备宽度、元素溢出父元素、元素之间产生覆盖。可用性问题侦测阶段将会发现每个分块当中存在的这三种可用性问题，可用性问题处理阶段将会对每一个分块分别处理三种可用性问题。首先侦测元素溢出设备宽度可用性问题，然后进行处理，调整web页面。然后侦测元素溢出父元素可用性问题并处理，调整web页面。最后侦测元素之间产生覆盖的可用性问题并处理，再调整web页面。使用该顺序进行可用性问题的侦测与处理，是因为处理元素溢出设备宽度的可用性问题，可能会导致更多的元素溢出父元素可用性问题的出现，而处理元素溢出父元素可用性问题，可能会导致更多的元素之间产生覆盖可用性问题的出现，处理元素之间产生覆盖的可用性问题则不会导致其他可用性问题的出现。接下来将对三种可用性问题、问题的侦测及其处理方式进行详细阐述。
[0122]
可用性问题侦测阶段，元素溢出设备宽度，即分块当中存在部分元素，它的一部分或者全部出现在了用户可见区域之外的位置，这将导致这些元素不完全可见，直接影响了整个页面的可用性。侦测这种可用性问题的方式为，遍历分块内部的元素，将其横坐标与设备宽度进行对比。如果元素的右边缘大于设备宽度，或者元素左边缘小于零，则认定该元素溢出设备宽度。
[0123]
元素溢出父元素的可用性，其中元素溢出父元素在本实施例中的系统中特指垂直方向上的溢出。垂直方向上的溢出，即子元素的高度比父元素高度还大，这将会导致比父元素高出的那一部分不可见。这直接造成了整个页面的可用性问题。侦测这种可用性问题的方式为，遍历分块内部的一个元素和它的子元素，依次对比子元素坐标与该元素的坐标。如果子元素的下边缘大于该元素的下边缘，或者子元素的上边缘小于该元素的上边缘，则认定子元素溢出其父元素。
[0124]
关于元素之间产生覆盖的可用性。在这之前需要先阐述清楚一个问题，元素之间产生覆盖不总是产生可用性问题。有些时候，元素之间的覆盖是能够接受的。轮播图的图片和按钮是互相覆盖的，但它是没有问题的。
[0125]
元素之间产生覆盖，即一个元素遮挡了另一个元素的部分内容，这将会造成被覆盖元素不可见，直接影响了整个页面的可用性。侦测这种可用性问题的方式为，首先遍历分块内部所有的元素，依次挑选出两个元素进行检查是否产生覆盖，如果两个元素产生了覆盖，则继续进行下一步骤，检查这两个元素在原始的页面是否也相互覆盖。如果不是，才认为这两个元素产生了这一种可用性问题。
[0126]
可用性问题处理阶段，处理元素溢出设备宽度的可用性问题，需要先分析其出现的原因。一种情况是元素的一个或多个子孙节点当中，在css属性里面定义了宽度width。而
在宽度约束模块当中，只对分块以及分块的祖先约束了宽度，并没有关注分块内部的元素。因此产生了这样一种问题。也是这个原因，在溢出设备宽度的可用性问题侦测模块当中，只输出自顶向下第一个溢出设备宽度的节点，因为无法知道当前节点溢出设备宽度的的问题是出自该节点，还是它的某个子孙节点。处理这种问题的方式为，使用广度优先遍历的方式遍历问题节点的子孙节点，如果该节点溢出设备宽度，则修改其宽度。
[0127]
另一种情况是，元素的宽度小于设备宽度，但是它的右边缘还是溢出了设备，原因是这个元素没有被正确的换行。在一般情况下，溢出设备宽度的元素会自动换行。而没有换行的原因是web页面的开发者定义了某些css属性，导致了这些元素无法换行，例如该元素的父元素使用了flex布局，而flex布局默认其子元素不换行。修复这种问题的方法是，设置其flex允许换行。
[0128]
一个元素溢出它的父元素，原因是它的父元素的css属性当中被定义了一个固定的高度，因此当一个元素的宽度被压缩以后，由于需要呈现原本的内容，高度理应该会增加。然而由于这个元素的父元素高度被固定了，因此子元素的高度在这个时候就比父元素大，产生了溢出的问题。
[0129]
而且这种溢出的问题很可能是嵌套的，例如一个元素溢出了它的父元素，而它的父元素又溢出了祖先元素。面对这种问题，针对问题出现的原因，本实施例中的做法是重新计算父元素的高度，然后对父元素的高度属性进行重写。重新计算父元素高度的方式为，获取所有子元素的最下边缘b，所有子元素的最上边缘y，然后计算它们的差值，获取父元素的新高度。然而由于这样的溢出很有可能是嵌套的，因此计算并重写父元素高度的顺序也有讲究。
[0130]
重写父元素的高度属性会触发浏览器的页面适配，浏览器将会重新计算所有元素的位置，因此在每一轮循环当中，算法都会调用update()方法，去更新rrlg与edge中的属性。如果使用先序遍历的方式去重写这些元素的高度，很可能会无法彻底解决元素溢出的问题。因为计算父元素新高度只关注了这个元素的子元素，然而由于是先序遍历，这些子元素的子孙元素也可能溢出了这个元素，而且没有被进行处理，因此这些子元素的高度也可能是错误的，所以最终计算出来的新高度也是错误的。正确的做法应该是后序遍历，先处理子元素的高度，在处理父元素的高度。
[0131]
处理元素之间产生覆盖的可用性问题比较简单。产生覆盖的原因是文字节点没有换行，或者是元素通过绝对定位而脱离文档流，导致了覆盖。处理方法是让元素换行，和取消绝对定位。
[0132]
基于内容提取和模板设计的页面适配策略，其基本做法为根据分块的不同标签种类，采取不同的内容提取方式。然后将提取出来的内容再放入到预先制定好的html与css模板。本实施例中将网页分成四种类型，分别是论坛类网页、电商类网页、新闻类网页以及视频类网页，同时也针对这四种不同的网页类型制定了不同的html和css模板，在进行适配调整时，会首先让用户选择网页类型。首先用户选择页面类型，然后适配调整模块选择使用基于模板设计和内容提取的适配调整策略进行页面适配，在这个阶段，会根据页面类型，选择合适的模板。然后内容提取子模块将提取分块的内容，返回给模板设计子模块，进行适配。最终适配的结果逐步返回给用户。
[0133]
以上所述，仅为本技术较佳的具体实施方式，但本技术的保护范围并不局限于此，
任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应该以权利要求的保护范围为准。

技术特征：
1.一种跨屏web页面自适应渲染系统，其特征在于，包括：结构分割模块，所述结构分割模块用于获取用户的web页面数据并对所述web页面数据进行分割，得到页面分块分类数据；web服务器模块，所述web服务器模块用于数据传输；内容分类模块，所述内容分类模块用于对所述页面分块分类数据进行分类预测，得到预测结果；页面适配模块，所述页面适配模块通过对所述预测结果进行分析进行页面适配调整，得到适配页面数据并发送给用户。2.根据权利要求1所述的一种跨屏web页面自适应渲染系统，其特征在于，所述结构分割模块包括：页面分块子模块、交互子模块和评估子模块；通过所述页面分块子模块获取所述web页面数据的dom树数据，并对所述dom树数据进行计算分析，得到页面分块数据；通过所述交互子模块对所述页面分块数据进行修改和类别判断，得到页面分块类别数据；所述评估子模块用于对页面分块数据和所述页面分块类别数据进行对比分析，得到对比数据，基于所述对比数据对所述结构分割模块进行优化。3.根据权利要求1所述的一种跨屏web页面自适应渲染系统，其特征在于，所述web服务器模块包括：nginx服务器，uwsgi服务器和flask-application初始化工具；其中，所述nginx服务器用于接受所述页面分块类别数据并发送请求值到所述uwsgi服务器中，所述uwsgi服务器用于向所述flask-application初始化工具发送应用请求服务，所述flask-application初始化工具用于将所述分块类别数据发送到所述内容分类模块中。4.根据权利要求1所述的一种跨屏web页面自适应渲染系统，其特征在于，所述内容分类模块包括：数据预处理子模块，模型训练子模块和模型评估子模块；其中，所述数据预处理子模块用于对所述页面分块类别数据进行清洗、去除空白和标准化操作，得到预处理后的页面分块类别数据；所述模型训练子模块用于构建若干分类预测模型，并基于所述预处理后的页面分块类别数据对若干所述分类预测模型进行训练，得到若干训练后的分类预测模型；所述模型评估子模块用于对若干训练后的分类预测模型进行评估，得到最优分类预测模型，基于所述最优分类预测模型获取所述预测结果。5.根据权利要求1所述的一种跨屏web页面自适应渲染系统，其特征在于，所述页面适配模块包括：适配策略选择子模块、基于定义css规则的适配策略子模块和基于模板设计和内容提取的适配策略子模块；其中，所述适配策略选择子模块用于对所述预测结果进行分析并基于分析结果进行策略选择；所述基于定义css规则的适配策略子模块用于对所述web页面数据进行css规则重建覆盖处理，得到适配页面数据；所述基于模板设计和内容提取的适配策略子模块用于对所述web页面数据进行类型分
类和内容提取，得到适配页面数据。6.一种跨屏web页面自适应渲染方法，其特征在于，包括：获取用户的web页面数据并对所述web页面数据进行分割，得到页面分块分类数据；对所述页面分块分类数据进行分类预测，得到预测结果；对所述预测结果进行分析进行页面适配调整，得到适配页面数据并发送给用户。7.根据权利要求6所述的一种跨屏web页面自适应渲染方法，其特征在于，所述获取页面分块分类数据的过程包括：获取所述web页面数据的dom树数据，并对所述dom树数据进行节点过滤，并根据所述dom树数据的几何性质进行对应简单分块构建，得到分块树状结构，对所述分块树状结构进行初始化，得到复合分块树结构，获取粒度阈值数据，基于所述粒度阈值数据对所述复合分块树结构进行分析并进行层描，得到页面分块数据；对所述页面分块数据进行修改和类别判断，得到页面分块类别数据；对页面分块数据和所述页面分块类别数据进行对比分析，得到对比数据，基于所述对比数据对所述结构分割模块进行优化。8.根据权利要求6所述的一种跨屏web页面自适应渲染方法，其特征在于，获取所述预测结果的过程包括：对所述页面分块类别数据进行清洗、去除空白和标准化操作，得到预处理后的页面分块类别数据；构建若干分类预测模型，并基于所述预处理后的页面分块类别数据对若干所述分类预测模型进行训练，得到若干训练后的分类预测；对若干训练后的分类预测模型进行评估，得到最优分类预测模型，基于所述最优分类预测模型获取所述预测结果。9.根据权利要求8所述的一种跨屏web页面自适应渲染方法，其特征在于，所述分类预测模型为机器学习模型，其中，所述机器学习模型的算法包括但不限于神经网络、随机森林、gradientboosting、xgboost和lightgbm。10.根据权利要求6所述的一种跨屏web页面自适应渲染方法，其特征在于，获取所述适配页面数据的过程包括：对所述预测结果进行分析并基于分析结果进行策略选择，得到适配策略；其中，所述适配策略包括：基于定义css规则的适配策略和基于模板设计和内容提取的适配策略；所述基于定义css规则的适配策略包括：对所述web页面数据进行css规则重建覆盖处理，得到适配页面数据；所述基于模板设计和内容提取的适配策略子包括：对所述web页面数据进行类型分类和内容提取，得到适配页面数据。

技术总结
本发明属于计算机领域，并公开了一种跨屏Web页面自适应渲染系统及方法，包括：结构分割模块，所述结构分割模块用于获取用户的Web页面数据并对所述Web页面数据进行分割，得到页面分块分类数据；Web服务器模块，所述Web服务器模块用于数据传输；内容分类模块，所述内容分类模块用于对所述页面分块分类数据进行分类预测，得到预测结果；页面适配模块，所述页面适配模块通过对所述预测结果进行分析进行页面适配调整，得到适配页面数据并发送给用户。本发明所述技术方案能够同时保持网站在不同尺寸的移动设备上的呈现，且适配界面能够保留原始页面的风格，兼顾了可用性、美观性、效率三个因素，给予了用户良好的体验。给予了用户良好的体验。给予了用户良好的体验。


技术研发人员：冯桂焕 李泳霆 陈文楷 叶俊濠 曹英瑞 吴雨晴
受保护的技术使用者：南京大学
技术研发日：2023.05.16
技术公布日：2023/8/1