一种网页优化方法及装置制造方法及图纸

本发明专利技术实施例公开了一种网页优化方法及装置，该方法通过接收到的URL请求，能够确定出网页内容在客户端中进行展示的最外层网页容器，并在最外层网页容器中对URL请求对应的原始网页代码进行预加载，通过预加载能够获得原始网页代码中各元素对应的布局属性值，并将上述各元素对应的布局属性值确定为对应元素的初始布局属性值，生成优化网页代码。应用本发明专利技术实施例对网页进行优化，能够对原始网页代码中各元素对应的初始布局属性值进行设定，使得客户端在加载优化网页代码时，对网页代码中各元素进行布局计算的计算量大大减少，节省了网页展示的时间，进而提高了网页展示的速度。

Method and device for optimizing Web page

The embodiment of the invention discloses a web optimization method and device, the method by URL requests received, to determine the content of page display on the client in the outermost layer of the web container, the original web page code and request corresponding to URL in the outermost container \in pre loading, by pre loading to the layout attribute of each element to obtain the original web page code corresponding to the value, and the corresponding element layout attributes to determine the value of the initial value of the corresponding elements of layout attributes, generating optimized web page code. The application of the embodiment of the invention of Web optimization, to the initial layout attributes of each element in the original web page code corresponding to the value set in the client code page loading optimization, layout calculation calculation of each element of the web page code is greatly reduced, saving the page display time, and then improve the page display speed.

【技术实现步骤摘要】
一种网页优化方法及装置
本专利技术涉及计算机软件应用领域，特别涉及一种网页优化方法及装置。
技术介绍
随着互联网应用的推广与普及，越来越多的企业通过网页的方式来宣传产品以及发布促销信息等等，由于这些信息更新比较频繁、具有很强的实时性，这对，这对展示网页的速度提出了更高的要求。通常展示网页的过程为，客户端接收用户发出的URL(UniformResourceLocator，统一资源定位符)请求之后，客户端将该URL请求发送给服务端，服务端在接收到该URL请求后，便将与该URL请求匹配的网页代码发送给客户端，然后客户端对该网页代码进行解析，完成布局计算，最终展示在对应的显示界面中。对于客户端来说，其展示网页的速度(解析网页代码的速度)与网页代码有直接的关系，网页代码中元素的数量越多，各元素对应的初始布局属性值越少，则展示该网页代码时也就越慢。但为了适应复杂的应用场景，开发人员所编写的网页代码通常比较复杂，并且在编写的网页代码中不对各元素的初始布局属性值进行设置，而客户端对这种类型的网页代码进行解析时，往往需要耗用较长的时间才能完成对各元素的布局计算，可见，如果不能对网页代码进行优化，这将进一步导致客户端在展示该网页时速度低下。
技术实现思路
本专利技术实施例的目的在于提供一种网页优化方法及装置，能够优化网页代码，进而提高网页展示的速度。为达到上述目的，本专利技术实施例公开了一种网页优化方法，该方法包括：接收客户端发送的用于展示网页内容的统一资源定位符URL请求，所述URL请求的后缀中包含所述客户端的窗口大小；根据所述URL请求，确定所述网页内容在所述客户端中展示时对应的最外层网页容器大小；在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载，获得针对所述原始网页代码中各元素的布局属性值；基于所述原始网页代码，将所述布局属性值确定为对应元素的初始布局属性值，生成优化网页代码。优选的，所述获得针对所述原始网页代码中各元素的布局属性值，包括：通过网页脚本语言JS，获取排版引擎针对所述原始网页代码中各元素在各自对应的网页容器中的布局计算值，以及每个中间层网页容器的布局计算值，所述中间层网页容器为非最外层网页容器；所述基于所述原始网页代码，将所述布局属性值确定为对应元素的初始布局属性值，生成优化网页代码，包括：基于所述原始网页代码，将原始网页代码中各元素在各自对应的网页容器中的布局计算值，以及每个中间层网页容器的布局计算值确定为对应的初始布局属性值，生成优化网页代码。优选的，所述布局计算值至少包括：宽width、高height、顶边距top以及左边距left对应的计算值；或，宽width、高height、底边距bottom以及右边距right对应的计算值。优选的，所述方法还包括：按照预设计算规则，计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值；删除所述中间层网页容器；根据所述绝对布局属性值以及所述优化网页代码，生成针对所述URL请求的最终网页代码。优选的，所述按照预设计算规则，计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值，包括：针对所述原始代码中每一元素，根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值，计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值，所述上层网页容器为包含所述中间层网页容器的非最外层网页容器。优选的，所述计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值，包括：通过如下公式计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值：|width(Ax)|＝Width(Ax)；|height(Ax)|＝height(Ax)；|top(Ax)|＝top(C1)+…+top(Cz)+top(B)+top(Ax)；|left(Ax)|＝left(C1)…+left(Cz)+left(B)+left(Ax)；或，|width(Ax)|＝Width(Ax)；|height(Ax)|＝height(Ax)；|bottom(Ax)|＝bottom(C1)+…+bottom(Cz)+bottom(B)+bottom(Ax)；|right(Ax)|＝right(C1)+…+right(Cz)+right(B)+right(Ax)；其中，|width(Ax)|、|height(Ax)|、|top(Ax)|、|left(Ax)|、|bottom(Ax)|、|right(Ax)|分别表示所述元素x对应的绝对宽、绝对高、绝对顶边距、绝对左边距、绝对底边距、绝对右边距，width(Ax)、height(Ax)、top(Ax)、left(Ax)、bottom(Ax)、right(Ax)分别表示所述元素x对应的宽、高、顶边距、左边距、底边距、右边距，top(B)、left(B)、bottom(B)、right(B)分别表示所述元素x对应的网页容器B的顶边距、左边距、底边距、右边距，top(C1)-top(Cz)、left(C1)-left(Cz)、bottom(C1)-bottom(Cz)、right(C1)-right(Cz)分别表示网页容器C1-Cz对应的的顶边距、左边距、底边距、右边距。为达到上述目的，本专利技术实施例还公开了一种网页优化装置，所述装置包括：接收模块，用于接收客户端发送的用于展示网页内容的统一资源定位符URL请求，所述URL请求的后缀中包含所述客户端的窗口大小；确定模块，用于根据所述URL请求，确定所述网页内容在所述客户端中展示时对应的最外层网页容器大小；获得模块，用于在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载，获得针对所述原始网页代码中各元素的布局属性值；第一生成模块，用于基于所述原始网页代码，将所述布局属性值确定为对应元素的初始布局属性值，生成优化网页代码。优选的，所述获得模块，具体用于：在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载，通过网页脚本语言JS，获取排版引擎针对所述原始网页代码中各元素在各自对应的网页容器中的布局计算值，以及每个中间层网页容器的布局计算值，所述中间层网页容器为非最外层网页容器；所述生成模块，具体用于：基于所述原始网页代码，将原始网页代码中各元素在各自对应的网页容器中的布局计算值，以及每个中间层网页容器的布局计算值确定为对应的初始布局属性值，生成优化网页代码。优选的，所述布局计算值至少包括：宽width、高height、顶边距top以及左边距left对应的计算值；或，宽width、高height、底边距bottom以及右边距right对应的计算值。优选的，所述装置还包括：计算模块，用于按照预设计算规则，计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值；删除模块，用于删除所述中间层网页容器；第二生成模块，用于根据所述绝对布局属性值以及所述优化网页代码，生成针对所述URL请求的最终网页代码。优选的，所述计算模块，具体用于：针对所述原本文档来自技高网...

【技术保护点】
一种网页优化方法，其特征在于，所述方法包括：接收客户端发送的用于展示网页内容的统一资源定位符URL请求，所述URL请求的后缀中包含所述客户端的窗口大小；根据所述URL请求，确定所述网页内容在所述客户端中展示时对应的最外层网页容器大小；在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载，获得针对所述原始网页代码中各元素的布局属性值；基于所述原始网页代码，将所述布局属性值确定为对应元素的初始布局属性值，生成优化网页代码。

【技术特征摘要】
1.一种网页优化方法，其特征在于，所述方法包括：接收客户端发送的用于展示网页内容的统一资源定位符URL请求，所述URL请求的后缀中包含所述客户端的窗口大小；根据所述URL请求，确定所述网页内容在所述客户端中展示时对应的最外层网页容器大小；在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载，获得针对所述原始网页代码中各元素的布局属性值；基于所述原始网页代码，将所述布局属性值确定为对应元素的初始布局属性值，生成优化网页代码。2.根据权利要求1所述的方法，其特征在于，所述获得针对所述原始网页代码中各元素的布局属性值，包括：通过网页脚本语言JS，获取排版引擎针对所述原始网页代码中各元素在各自对应的网页容器中的布局计算值，以及每个中间层网页容器的布局计算值，所述中间层网页容器为非最外层网页容器；所述基于所述原始网页代码，将所述布局属性值确定为对应元素的初始布局属性值，生成优化网页代码，包括：基于所述原始网页代码，将原始网页代码中各元素在各自对应的网页容器中的布局计算值，以及每个中间层网页容器的布局计算值确定为对应的初始布局属性值，生成优化网页代码。3.根据权利要求2所述的方法，其特征在于，所述布局计算值至少包括：宽width、高height、顶边距top以及左边距left对应的计算值；或，宽width、高height、底边距bottom以及右边距right对应的计算值。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：按照预设计算规则，计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值；删除所述中间层网页容器；根据所述绝对布局属性值以及所述优化网页代码，生成针对所述URL请求的最终网页代码。5.根据权利要求4所述的方法，其特征在于，所述按照预设计算规则，计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值，包括：针对所述原始代码中每一元素，根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值，计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值，所述上层网页容器为包含所述中间层网页容器的非最外层网页容器。6.根据权利要求5所述的方法，其特征在于，所述计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值，包括：通过如下公式计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值：|width(Ax)|＝Width(Ax)；|height(Ax)|＝height(Ax)；|top(Ax)|＝top(C1)+…+top(Cz)+top(B)+top(Ax)；|left(Ax)|＝left(C1)…+left(Cz)+left(B)+left(Ax)；或，|width(Ax)|＝Width(Ax)；|height(Ax)|＝height(Ax)；|bottom(Ax)|＝bottom(C1)+…+bottom(Cz)+bottom(B)+bottom(Ax)；|right(Ax)|＝right(C1)+…+right(Cz)+right(B)+right(Ax)；其中，|width(Ax)|、|height(Ax)|、|top(Ax)|、|left(Ax)|、|bottom(Ax)|、|right(Ax)|分别表示所述元素x对应的绝对宽、绝对高、绝对顶边距、绝对左边距、绝对底边距、绝对右边距，width(Ax)、height(Ax)、top(Ax)、left(Ax)、bottom(Ax)、right(Ax)分别表示所述元素x对应的宽、高、顶边距、左边距、底边距、右边距，top(B)、left(B)、bottom(B)、right(B)分别表示所述元素x对应的网页容器B的顶边距、左边距、底边距、右边距，top(C1)-top(Cz)、left(C1)-left(Cz)、bottom(C1)-bottom(Cz)、right(C1)-right(Cz)分别表示网页容器C1-Cz对应的的顶边距、左边距、底边距、右边距。7.一种网页优化装置，其特征在于，所述装置包括：接收模块，用于接...

【专利技术属性】
技术研发人员：刘永生，
申请(专利权)人：北京奇艺世纪科技有限公司，
类型：发明
国别省市：北京,11