一种网页展示优化方法、装置、电子设备及存储介质制造方法及图纸

本申请涉及一种网页展示优化方法、装置、电子设备及存储介质，其涉及网页优化技术领域，其中方法通过启动OS内核检验引擎校验系统及系统自带浏览器内核的状态，并进行初步的系统环境适配；在系统环境适配的状态下，启动ECMAScript标准检查引擎检测客户端浏览器，以完成浏览器脚本执行环境的检查，确定web网页执行和渲染环境适配；在web网页执行和渲染环境适配的状态下，推动web网页加载，启动Flex布局适配引擎，通过Flex布局适配算法对网页进行渲染并实施优化，本发明专利技术方案具备基于Flex布局方式的一套布局方案，可以完美应对各分辨率、尺寸的屏幕。本发明专利技术方案整合现有主流操作系统特点，个性化应对系统及系统自带浏览器内核的变化所可能引发的兼容性问题。变化所可能引发的兼容性问题。变化所可能引发的兼容性问题。

A web page display optimization method, device, electronic device and storage medium

【技术实现步骤摘要】
一种网页展示优化方法、装置、电子设备及存储介质


[0001]本申请涉及数据传输的
，尤其是涉及一种网页展示优化方法、装置、电子设备及存储介质。

技术介绍

[0002]目前一般企业内部大多配套设置有全覆盖的信息系统，这些信息系统规模大、功能全、数量多。各系统对浏览器兼容能力不同，浏览器种类繁多，运维困难，且兼容性问题会影响业务系统运行和用户使用。由于现在客户端产品更新换代快，屏幕分辨率、尺寸多样化，甚至现在出现的曲面屏、刘海屏，由于现在移动端OS、各个APP(如：微信、支付宝、头条)自带浏览器内核不统一，现有技术方案难以很好的应对兼容问题的处理；
[0003]并且，每个项目需要两套甚至多套站点适配客户端，增加开发成本。每次需要针对浏览器的升级、客户端的升级做脚本的优化更改，增加维护成本。

技术实现思路

[0004]为了优化网页展示效果，以最优用户体验呈现给用户，本申请提供一种网页展示优化方法、装置、电子设备及存储介质。
[0005]第一方面，本申请提供了一种网页展示优化方法，所述优化方法包括以下步骤：
[0006]启动OS内核检验引擎校验系统及系统自带浏览器内核的状态，并进行初步的系统环境适配；
[0007]在系统环境适配的状态下，启动ECMAScript标准检查引擎检测客户端浏览器，以完成浏览器脚本执行环境的检查，确定web网页执行和渲染环境适配；
[0008]在web网页执行和渲染环境适配的状态下，推动web网页加载，启动Flex 布局适配引擎，通过Flex布局适配算法对网页进行渲染并实施优化，以完成web 网页最终适配。
[0009]作为一种可能实现的实施方式，所述启动OS内核检验引擎校验系统及系统自带浏览器内核的状态，并进行初步的系统环境适配包括以下步骤：
[0010]检查系统内核版本，针对内核版本，按需启用功能进行系统适配；
[0011]检查浏览器内核版本，根据内核版本启用对应的兼容模式。
[0012]作为一种可能实现的实施方式，所述在系统环境适配的状态下，启动 ECMAScript标准检查引擎检测客户端浏览器，以完成浏览器脚本执行环境的检查，确定web网页执行和渲染环境适配包括以下步骤：
[0013]在系统环境适配的状态下，启动ECMAScript标准检查引擎检测客户端浏览器检查浏览器脚本执行环境是否适配；
[0014]若浏览器脚本执行环境不适配，启用低版本内核模式适配网页，以保证脚本语言可以正常执行。
[0015]作为一种可能实现的实施方式，所述通过Flex布局适配算法对网页进行渲染并实施优化包括以下步骤：
[0016]确定Flex容器和Flex项目，确定网页标签元素占位状态；
[0017]根据网页标签元素占位状态，确定水平的主轴和垂直的交叉轴，以便确认元素间空隙布局情况；
[0018]对所述网页标签元素的位置和网页标签元素间隙适配渲染，根据浏览器当前可视窗口尺寸，动态配置容器属性值以适合当前可视窗口的展示形态。
[0019]作为一种可能实现的实施方式，所述容器属性值包括：flex
‑
direction、 flex
‑
wrap、flex
‑
flow、justify
‑
content、align
‑
items、align
‑
content和项目属性：order、flex
‑
grow、flex
‑
shrink、flex
‑
basis、flex、align
‑
self的值。
[0020]作为一种可能实现的实施方式，所述启动ECMAScript标准检查引擎检测客户端浏览器检查浏览器脚本执行环境是否适配，包括，开发框架是否适配，脚本语言是否适配。
[0021]第二方面，本申请提供了一种网页展示优化装置，所述优化装置包括：
[0022]OS内核校验引擎启动模块，用于启动OS内核检验引擎校验系统及系统自带浏览器内核的状态，并进行初步的系统环境适配；
[0023]ECMAScript标准检查引擎启动模块，用于在系统环境适配的状态下，启动 ECMAScript标准检查引擎检测客户端浏览器，以完成浏览器脚本执行环境的检查，确定web网页执行和渲染环境适配；
[0024]Flex布局模块，用于在web网页执行和渲染环境适配的状态下，推动web 网页加载，启动Flex布局适配引擎，通过Flex布局适配算法对网页进行渲染并实施优化，以完成web网页最终适配。
[0025]作为一种可能实现的实施方式，包括：
[0026]元素确定单元，用于确定Flex容器和Flex项目，确定网页标签元素占位状态；
[0027]布局确定单元，根据网页标签元素占位状态，确定水平的主轴和垂直的交叉轴，以便确认元素间空隙布局情况；
[0028]展示单元，网页标签元素的位置和网页标签元素间隙适配渲染后，根据浏览器当前可视窗口尺寸，动态配置容器属性值以适合当前可视窗口的展示形态。
[0029]第三方面，本申请提供一种电子设备，采用如下的技术方案：
[0030]可选的，所述电子设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如第一方面所述的一种网页展示优化方法。
[0031]第四方面，本申请提供一种计算机可读存储介质，采用如下的技术方案：
[0032]可选的，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如第一方面所述的一种网页展示优化方法。
[0033]综上所述，本申请包括以下至少一种有益技术效果：
[0034]本申请通过启动OS内核检验引擎校验系统及系统自带浏览器内核的状态，并进行初步的系统环境适配；在系统环境适配的状态下，启动ECMAScript标准检查引擎检测客户端浏览器，以完成浏览器脚本执行环境的检查，确定web网页执行和渲染环境适配；在web网页执行和渲染环境适配的状态下，推动web 网页加载，启动Flex布局适配引擎，通过Flex布局适配算法对网页进行渲染并实施优化，以完成web网页最终适配，与浏览器统一基于最新
的ECMAScript 标准(ISO/IEC 16262:2011)实时兼容最新浏览器。本专利技术方案具备基于Flex 布局方式的一套布局方案，可以完美应对各分辨率、尺寸的屏幕。本专利技术方案整合现有主流操作系统特点，个性化应对系统及系统自带浏览器内核的变化所可能引发的兼容性问题。
附图说明
[0035]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页展示优化方法，其特征在于，所述优化方法包括以下步骤：启动OS内核检验引擎校验系统及系统自带浏览器内核的状态，并进行初步的系统环境适配；在系统环境适配的状态下，启动ECMAScript标准检查引擎检测客户端浏览器，以完成浏览器脚本执行环境的检查，确定web网页执行和渲染环境适配；在web网页执行和渲染环境适配的状态下，推动web网页加载，启动Flex布局适配引擎，通过Flex布局适配算法对网页进行渲染并实施优化，以完成web网页最终适配。2.根据权利要求1所述的优化方法，其特征在于，所述启动OS内核检验引擎校验系统及系统自带浏览器内核的状态，并进行初步的系统环境适配包括以下步骤：检查系统内核版本，针对内核版本，按需启用功能进行系统适配；检查浏览器内核版本，根据内核版本启用对应的兼容模式。3.根据权利要求1所述的优化方法，其特征在于，所述在系统环境适配的状态下，启动ECMAScript标准检查引擎检测客户端浏览器，以完成浏览器脚本执行环境的检查，确定web网页执行和渲染环境适配包括以下步骤：在系统环境适配的状态下，启动ECMAScript标准检查引擎检测客户端浏览器检查浏览器脚本执行环境是否适配；若浏览器脚本执行环境不适配，启用低版本内核模式适配网页，以保证脚本语言可以正常执行。4.根据权利要求1所述的优化方法，其特征在于，所述通过Flex布局适配算法对网页进行渲染并实施优化包括以下步骤：确定Flex容器和Flex项目，确定网页标签元素占位状态；根据网页标签元素占位状态，确定水平的主轴和垂直的交叉轴，以便确认元素间空隙布局情况；对所述网页标签元素的位置和网页标签元素间隙适配渲染，根据浏览器当前可视窗口尺寸，动态配置容器属性值以适合当前可视窗口的展示形态。5.根据权利要求1所述的优化方法，其特征在于，所述容器属性值包括：flex
‑
direction、flex
‑
wrap、flex
‑
flow、justify
...

【专利技术属性】
技术研发人员：武战峰，高会芳，吴研冰，
申请(专利权)人：北京汇元网科技股份有限公司，
类型：发明
国别省市：