页面加载方法及装置制造方法及图纸

本申请提供一种页面加载方法及装置。一种页面加载方法包括：获取待展现页面需要响应的设备环境信息；获取与设备环境信息相匹配的目标HTML正文及目标CSS文件；根据目标CSS文件和目标HTML正文进行页面渲染处理，以获得待展现页面。本申请针对不同设备环境信息有与之匹配的HTML正文，只需加载与设备环境信息匹配的HTML正文即可，其数据量相对较小，有利于减少在页面加载过程中消耗的网络流量，提升加载速度。

【技术实现步骤摘要】

本申请涉及互联网
，尤其涉及一种页面加载方法及装置。
技术介绍
响应式设计的理念是：页面的设计与开发应当根据用户行为以及设备环境信息(操作系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。目前，响应式页面的实现是通过在超文本标记语言(HyperTextMark-upLanguage，HTML)文件中设置meta属性media，用来为不同的设备环境信息定义不同的层叠样式表(CascadingStyleSheets，CSS)样式。在上述实现方式中，所有设备类型共用一套HTML文件，在该HTML文件中需要包括多套CSS样式的适配代码。浏览器加载页面时需要下载整个HTML文件，根据HTML文件中设置的meta属性media，监听屏幕尺寸，进而从服务器获取与屏幕尺寸相适应的CSS样式；由该CSS样式决定HTML文件中的哪些HTML内容块需要展示哪些HTML内容块需要隐藏，最终向用户展现与屏幕尺寸相适应的页面。由于需要下载整个HTML文件，导致耗费较多网络流量，拖慢加载速度。
技术实现思路
本申请的多个方面提供一种页面加载方法及装置，用以减少页面加载过程消耗的网络流量，提高加本文档来自技高网...

【技术保护点】
一种页面加载方法，其特征在于，包括：获取待展现页面需要响应的设备环境信息；获取与所述设备环境信息相匹配的目标HTML正文及目标CSS文件；根据所述目标CSS文件和所述目标HTML正文进行页面渲染处理，以获得所述待展现页面。

【技术特征摘要】
1.一种页面加载方法，其特征在于，包括：获取待展现页面需要响应的设备环境信息；获取与所述设备环境信息相匹配的目标HTML正文及目标CSS文件；根据所述目标CSS文件和所述目标HTML正文进行页面渲染处理，以获得所述待展现页面。2.根据权利要求1所述的方法，其特征在于，所述获取待展现页面需要响应的设备环境信息，包括：运行响应式监测脚本，以访问浏览器的窗口对象；从所述窗口对象中，读取所述设备环境信息。3.根据权利要求2所述的方法，其特征在于，所述运行响应式监测脚本，以访问浏览器的窗口对象之前，包括：向服务器发送页面访问请求，以请求所述待展现页面的HTML头部信息；接收所述服务器返回的所述HTML头部信息，所述HTML头部信息包括所述响应式监测脚本的标识；向所述服务器发送脚本获取请求，所述脚本获取请求携带有所述响应式监测脚本的标识；接收所述服务器根据所述响应式监测脚本的标识返回的所述响应式监测脚本。4.根据权利要求3所述的方法，其特征在于，所述HTML头部信息还包括：第一响应式配置文件的标识，所述第一响应式配置文件包括HTML正文标识、CSS文件标识及设备环境信息之间的对应关系；所述方法还包括：向所述服务器发送第一文件获取请求，所述第一文件获取请求包括所述第一响应式配置文件的标识，以请求获取所述第一响应式配置文件；接收所述服务器返回的所述第一响应式配置文件；所述获取与所述设备环境信息相匹配的目标HTML正文及目标CSS文件，包括：根据所述设备环境信息在所述第一响应式配置文件包括的对应关系中进行匹配，以获取与所述设备环境信息对应的HTML正文标识及CSS文件标识；从所述服务器获取所述HTML正文标识所标识的HTML正文作为所述目标HTML文件，以及从所述服务器获取所述CSS文件标识所标识的CSS文件作为所述目标CSS文件。5.根据权利要求3所述的方法，其特征在于，所述HTML头部信息还包括：第二响应式配置文件的标识，所述第二响应式配置文件包括HTML正文标识及设备环境信息之间的对应关系；所述方法还包括：向所述服务器发送第二文件获取请求，所述第二文件获取请求包括所述第二响应式配置文件的标识，以请求获取所述第二响应式配置文件；接收所述服务器返回的所述第二响应式配置文件；所述获取与所述设备环境信息相匹配的目标HTML正文及目标CSS文件，包括：根据所述设备环境信息在所述第二响应式配置文件包括的对应关系中进行匹配，以获取与所述设备环境信息对应的HTML正文标识；从所述服务器获取所述HTML正文标识所标识的HTML正文作为所述目标HTML正文；获取所述目标HTML正文中携带的CSS文件标识；从所述服务器获取所述CSS文件标识所标识的CSS文件作为所述目标CSS文件。6.根据权利要求1所述的方法，其特征在于，所述获取与所述设备环境信息相匹配的目标HTML正文及目标CSS文件，包括：将所述设备环境信息发送给服务器，以供所述服务器根据所述设备环境信息获取所述目标HTML正文及所述目标CSS文件；接收所述服务器返回的所述目标HTML正文及所述目标CSS文件。7.根据权利要求1所述的方法，其特征在于，所述获取与所述设备环境信息相匹配的目标HTML正文及目标CSS文件，包括：将所述设备环境信息发送给服务器，以供所述服务器根据所述设备环境信息获取所述目标获取HTML正文；接收所述服务器返回的所述目标HTML正文；获取所述目标HTML正文中携带的CSS文件标识；从所述服务器获取所述CSS文件标识所标识的CSS文件作为所述目标CSS文件。8.一种页面加载方法，其特征在于，包括：接收浏览器发送的待展现页面需要响应的设备环境信息对应的HTML正文标识及CSS文件标识；获取所述HTML正文标识所标识的HTML正文作为与所述设备环境信息相匹配的目标HTML正文，并获取所述CSS文件标识所标识的CSS文件作为与所述设备环境信息相匹配的目标CSS文件；向所述浏览器返回所述目标HTML正文及所述目标CSS文件，以供所述浏览器渲染出所述待展现页面。9.根据权利要求8所述的方法，其特征在于，所述接收浏览器发送的待展现页面需要响应的设备环境信息对应的HTML正文标识及CSS文件标识之前，还包括：接收所述浏览器发送的页面访问请求；根据所述页面访问请求向所述浏览器返回所述待展现页面的HTML头部信息，所述HTML头部信息包括响应式监测脚本的标识；接收所述浏览器的脚本获取请求，所述脚本获取请求携带有所述响应式监测脚本的标识；根据所述响应式监测脚本的标识，向所述浏览器返回所述响应式监测脚本，以供所述浏览器通过所述响应式监测脚本获取所述设备环境信息。10.根据权利要求9所述的方法，其特征在于，所述HTML头部信息还包括：第一响应式配置文件的标识，所述第一响应式配置文件包括HTML正文标识、CSS文件标识及设备环境信息之间的对应关系；所述方法还包括：接收所述浏览器发送的第一文件获取请求，所述第一文件获取请求包括所述第一响应式配置文件的标识；根据所述第一响应式配置文件的标识，向所述浏览器返回所述第一响应式配置文件，以供所述浏览器确定所述设备环境信息对应的HTML文件标识及CSS文件标识。11.根据权利要求9所述的方法，其特征在于，所述HTML头部信息还包括：第二响应式配置文件的标识，所述第二响应式配置文件包括HTML正文标识及设备环境信息之间的对应关系；所述方法还包括：接收所述浏览器发送的第二文件获取请求，所述第二文件获取请求包括所述第二响应式配置文件的标识；根据所述第二响应式配置文件的标识，向所述浏览器返回所述第二响应式配置文件，以供所述浏览器确定所述设备环境信息对应的HTML文件标识及CSS文件标识。12.一种页面加载方法，其特征在于，包括：接收浏览器发送的待展现页面需要响应的设备环境信息；获取与所述设备环境信息相匹配的目标HTML正文及目标CSS文件；将所述目标HTML正文及所述目标CSS文件返回给所述浏览器，以供所述浏览器渲染出所述待展现页面。13.根据权利要求12所述的方法，其特征在于，所述获取与所述设备环境信息相匹配的目标HTML正文及目标CSS文件，包括：根据所述设备环境信息在第一响应式配置文件包括的对应关系中进行匹配，以获取与所述设备环境信息对应的HTML正文标识及CSS文件标识，所述
\t第一响应式配置文件包括HTML正文标识、CSS文件标识及设备环境信息之间的对应关系；获取所述HTML正文标识所标识的HTML正文作为所述目标HTML正文，并获取所述CSS文件标识所标识的CSS文件作为所述目标CSS文件。14.根据权利要求12所述的方法，其特征在于，所述获取与所述设备环境信息相匹配的目标HTML正文，包括：根据所述设备环境信息在第二响应式配置文件包括的对应关系中进行匹配，以获取与所述设备环境信息对应的HTML正文标识，所述第二响应式配置文件包括HTML正文标识及设备环境信息之间的对应关系；获取所述HTML正文标识所标识的HTML正文作为所述目标HTML正文；所述获取与所述设备环境信息相匹配的目标CSS文件，包括：接收所述浏览器发送的从所述目标HTML正文中获取的CSS文件标识；获取所述CSS文件标识所标识的CS...

【专利技术属性】
技术研发人员：陈颖豪，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY