CN106648821A - 一种网页优化方法及装置 - Google Patents
一种网页优化方法及装置 Download PDFInfo
- Publication number
- CN106648821A CN106648821A CN201611248299.8A CN201611248299A CN106648821A CN 106648821 A CN106648821 A CN 106648821A CN 201611248299 A CN201611248299 A CN 201611248299A CN 106648821 A CN106648821 A CN 106648821A
- Authority
- CN
- China
- Prior art keywords
- web page
- container
- code
- layout
- absolute
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/443—Optimisation
- G06F8/4441—Reducing the execution time required by the program code
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例公开了一种网页优化方法及装置,该方法通过接收到的URL请求,能够确定出网页内容在客户端中进行展示的最外层网页容器,并在最外层网页容器中对URL请求对应的原始网页代码进行预加载,通过预加载能够获得原始网页代码中各元素对应的布局属性值,并将上述各元素对应的布局属性值确定为对应元素的初始布局属性值,生成优化网页代码。应用本发明实施例对网页进行优化,能够对原始网页代码中各元素对应的初始布局属性值进行设定,使得客户端在加载优化网页代码时,对网页代码中各元素进行布局计算的计算量大大减少,节省了网页展示的时间,进而提高了网页展示的速度。
Description
技术领域
本发明涉及计算机软件应用领域,特别涉及一种网页优化方法及装置。
背景技术
随着互联网应用的推广与普及,越来越多的企业通过网页的方式来宣传产品以及发布促销信息等等,由于这些信息更新比较频繁、具有很强的实时性,这对,这对展示网页的速度提出了更高的要求。
通常展示网页的过程为,客户端接收用户发出的URL(Uniform ResourceLocator,统一资源定位符)请求之后,客户端将该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请求的最终网页代码。
优选的,所述计算模块,具体用于:
针对所述原始代码中每一元素,根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,所述上层网页容器为包含所述中间层网页容器的非最外层网页容器。
优选的,所述计算模块,具体用于:
针对所述原始代码中每一元素,根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值,通过如下公式计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,所述上层网页容器为包含所述中间层网页容器的非最外层网页容器,所述公式为:
|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请求对应的原始网页代码进行预加载,通过预加载能够获得原始网页代码中各元素对应的布局属性值,并将上述各元素对应的布局属性值作为对应元素的初始布局属性值,生成优化网页代码。应用本发明实施例对网页进行优化,能够对原始网页代码中各元素对应的初始布局属性值进行设定,使得客户端在加载优化网页代码时,对网页代码中各元素进行布局计算的计算量大大减少,节省了网页展示的时间,进而提高了网页展示的速度。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明一实施例提供的网页优化方法的流程示意图;
图2为本发明实施例提供的一种具体的网页展示后的结构示意图;
图3为本发明另一实施例提供的网页优化方法的流程示意图;
图4为针对图2中各元素在绝对定位方式进行展示的示意图;
图5为本发明一实施例提供的网页优化装置的结构示意图;
图6为本发明另一实施例提供的网页优化装置的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
下面通过具体实施例,对本发明进行详细的说明。
图1为本发明一实施例提供的网页优化方法的流程示意图,该方法包括步骤:
S101:接收客户端发送的用于展示网页内容的统一资源定位符URL请求,所述URL请求的后缀中包含所述客户端的窗口大小。
本领域技术人员能够理解的是,通常情况下用户如果想访问某一具体网页时,需要输入一个URL(Uniform Resource Locator,统一资源定位符)请求给客户端,URL请求是从网络服务器上得到的资源的位置和访问方法的一种简洁表示,是标准资源的地址,URL请求可以理解为一个网址。
示例性的,假设用户想打开的网页是一个HTML5(HyperText Markup Language)类型的网页,该HTML5网页展示的内容是“爱奇艺商城”,该网页对应的网址为:http://mall.iqiyi.com/m/index,该网址就是一个URL请求,那么用户可以想客户端输入上述网址,即URL请求。客户端在接收到上述的URL请求之后,可以将客户端对应的窗口大小以参数的形式追加到上述URL请求的后缀上,得到包含窗口大小参数后缀的URL请求,然后将这个URL请求发送给网络服务器。可以知道的是,一个URL请求对应一个网络位置以及一个网页代码,而在URL请求的后缀上追加客户端窗口参数并没有改变该URL请求对应的访问路径,因此,包含窗口参数后缀的URL请求在网络服务器上对应的网页代码与用户输入的URL请求对应的网页代码相同;示例性的,假设客户端对应的窗口大小为:width=320,height=568,那么,得到的包含窗口大小参数后缀的URL请求可以为http://mall.iqiyi.com/m/index?viewWidth=320&viewHeight=568,然后客户端将包含窗口大小参数后缀的URL请求发送给网络服务器,对于网络服务器来说,能够接收到客户端发送的上述包含窗口参数后缀的URL请求。
S102:根据所述URL请求,确定所述网页内容在所述客户端中展示时对应的最外层网页容器大小。
由上可知,网络服务器接收到的URL请求的后缀中包含有发送该URL请求对应客户端的窗口大小参数,那么,网络服务器可以根据接收到的URL请求,能够确定出客户端对应的加载网页的窗口大小,例如,假设网络服务器接收到的URL请求为http://mall.iqiyi.com/m/index?viewWidth=320&viewHeight=568,那么可以根据该URL请求中的后缀viewWidth=320&viewHeight=568确定出加载网页的窗口大小为:width=320,height=568,而通常情况下,在对原始网页代码中各元素进行布局计算时,最外层网页容器与窗口大小相同,因此,可以确定最外层网页容器的大小为:width=320,height=568,如图2所示,图2为本发明实施例提供的一种具体的网页展示后的结构示意图,图2中最外面的矩形块C0表示的是最外层网页容器,即网页容器C0,可见,网页容器C0对应的宽为width(C0)=320,高为height(C0)=568。
S103:在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载,获得针对所述原始网页代码中各元素的布局属性值。
由上可知,网络服务器能够通过接收到的URL请求确定出加载该URL对应网页代码的最外层网页容器大小,网络服务器在接收到上述URL请求之后,根据上述URL中的访问路径/mall.iqiyi.com/m/index能够找到该路径下的网络资源,也就是网页代码,在发明实施例提供的方案中,称网页优化前的网页代码为原始网页代码。
对于客户端来说,其展示网页的速度(解析网页代码的速度)事实上与网页代码有直接的关系,网页代码中元素的数量越多,各元素对应的初始布局属性值越少,对应的网页展示速度也就越慢。这里所说的元素是指图片、文字、标签等用于展示信息的矩形块。而上述URL请求对应的原始网页代码中并没有对各元素的初始布局属性值进行设置,因此,如果网络服务器直接将该原始网页代码直接发送给客户端的话,需要客户端对原始网页代码中各元素进行布局计算,耗时较长,进而导致客户端展示页面的速度低下。
为了使得客户端能够更快的展示网页,本发明实施例提供的方案中,网络服务器将URL请求对应的原始网页代码在上述确定出的最外层网页容器中进行预加载,预加载是指将原始网页代码在网页容器中对原始网页代码中的各元素进行一次布局计算,如图2所述,图2中所示的矩形块1和矩形块2分别表示原始网页代码中的元素1和元素2。通过在最外层网页容器C0中对原始网页代码中各元素进行布局计算之后,能够获得各元素的布局属性值。
需要说明的是,在进行布局计算的过程中,需要参考该元素对应的网页容器来进行相对定位的,而网页容器对应的位置,通常是根据布局计算采用的定位方式来确定的,例如,图2中的矩形块B为元素1对应的网页容器,同时,矩形块B也是元素2对应的网页容器。上述图2中所示的内容仅为本发明实施例的一种示例,本发明实施例并不对原始网页代码中元素的数量进行限定。
在本发明实施例提供的一种实现方式中,上述获得针对所述原始网页代码中各元素的布局属性值,可以包括:
通过网页脚本语言JS,获取排版引擎针对所述原始网页代码中各元素在各自对应的网页容器中的布局计算值,以及每个中间层网页容器的布局计算值,所述中间层网页容器为非最外层网页容器。
本领域技术人员能够理解的是,在最外层网页容器中对原始网页代码中的各元素进行预加载时,会相应的启动排版引擎来对原始网页代码中的各元素进行布局计算,能够将各元素在对应网页容器中的位置、尺寸计算出来,得到个元素在各自对应的网页容器中的布局计算值。
例如,在CSS2.1规范中,排版引擎对元素进行布局计算时规定了三种布局定位方式,分别为:常规流、浮动以及绝对定位;其中,常规流是按照原始网页代码中各元素出现的顺序,从左上角开始,从上往下逐个换行展示,正是这种定位规则,如果对较为复杂的网页代码进行布局计算时需要借助较多的网页容器。浮动是一种实现元素在水平方向上并排展示的定位方式,元素首先在常规流中定位,然后在水平方向上向左或向右进行偏移,其他元素需要依赖当前元素进行定位,浮动的定位规则其实很复杂,这也导致布局计算的成本比较高。而绝对定位则是一种非常高效的定位方式,通过设置上、下、左、右四个方向偏移量来直接确定元素在最外层网页容器中的位置,绝对定位的元素脱离常规流,其位置不受常规流中其他元素的影响,也不会影响其他元素的位置。
不过排版引擎对元素进行布局计算时多采用常规流的布局定位方式,因此,排版引擎在对原始网页代码中的某元素进行布局计算时,需要先加载该元素对应的网页容器,然后将该元素排布到与其对应且已加载的网页容器中,那么在对该元素布局计算之前,排版引擎就已经对其对应的网页容器进行布局计算并得到该网页容器对应的布局计算值了,那么,在排版引擎完成对原始网页代码网中各元素的布局计算之后,网络服务器通过网页脚本语言JS(JavaScript,简称JS)能够读取各元素对应的布局计算值,以及每个中间层网页容器的布局计算值,这里所说的中间层网页容器是指非最外层网页容器,如图2所示的矩形块B、矩形块C1均是中间层网页容器。
在本发明实施例提供的方案中,所述布局计算值至少包括:
宽width、高height、顶边距top以及左边距left对应的计算值;
或,宽width、高height、底边距bottom以及右边距right对应的计算值。
可以理解的是,由于排版引擎在进行布局计算时是按照各元素的层级顺序进行的,那么,在对当前的元素进行布局计算时,其对应的网页容器的布局属性值已经被计算出来,例如,图2中的元素1,其对应的网页容器为矩形块B,在对元素1进行布局计算之前,矩形块B对应的布局属性值已经确定了,因此,只要确定原始网页代码中各元素在其对应网页容器中的相对位置以及各元素自身的大小,便能够确定该元素在最外层网页容器中显示的位置以及大小,也就能够在客户端的窗口中确定显示的位置以及大小。元素的大小一般通过元素的宽width、高height就能够确定,而元素在其对应网页容器中的相对位置则可以通过元素的左上顶点分别到其对应网页容器的上边以及左边的距离,即顶边距top以及左边距left来确定;也可以通过元素的右下顶点分别到其对应网页容器的底边以及右边的距离,即底边距bottom以及右边距right来确定。
示例性的,如图2所示,元素1和元素2对应的网页容器均为网页容器B(即,矩形块B),在对元素1或元素2进行布局计算之前,矩形块B的布局属性值已经被计算出来,如图2中所示的矩形块B对应的布局计算值分别为:top(B)、left(B)、width(B)和height(B),而此时矩形块B对应的上一层网页容器C1(即,矩形块C1)在最外层网页容器中的布局计算值也已经确定,布局计算值分别为:top(C1)、left(C1)、width(C1)和height(C1),也就是说,此时矩形块B在最外层网页容器中的位置是可以确定的,那么,只要计算出元素1或元素2对应的布局计算值,就能够在最外层网页容器中确定元素1或元素2的位置;如图2所示,在排版引擎对元素1和元素2进行布局计算之后,元素1的左上顶点到矩形块B的上边的距离(即顶边距)表示为top(A1),元素1的左上顶点到矩形块B的左边的距离(即左边距)表示为left(A1),由上能够确定元素1左上顶点的位置,如图2中所示元素1的width(A1)、height(A1)分别表示元素1的宽和高,综上能够确定元素1在最外层网页容器中的展示位置和大小。
以图2为例,在排版引擎完成对原网页代码中各元素的布局计算之后,网络服务器通过网页脚本语言JS(JavaScript,简称JS)能够读取图2中各元素以及中间层网页容器对应的布局计算值,假设网络服务器通过JS读取到最外层网页容器C0对应的布局计算值为:width(C0)=320、height(C0)=568,网页容器C1在最外层网页容器C0中对应的布局计算值为:top(C1)=40、left(C1)=25、width(C1)=290、height(C1)=400,网页容器B在网页容器C1中对应的布局计算值为:top(B)=50、left(B)=25、width(B)=260、height(B)=200,元素1在网页容器B中应的布局计算值为:top(A1)=100、left(A1)=25、width(A1)=110、height(A1)=90,元素2对应的布局计算值为:top(A2)=40、left(A2)=140、width(A2)=110、height(A2)=90。
需要说明的是,上述所说的顶边距top、左边距left、底边距bottom以及右边距right的含义仅为本发明实施例提供的一种具体形式,除此之外,顶边距top还可以为元素的中心点到其对应网页容器的上边的距离,或者还可以为元素的左下顶点到其对应网页容器的上边的距离,当然还可以为元素的其他顶点到其对应网页容器的上边的距离;类似的,左边距left、底边距bottom以及右边距right也可以为元素的中心或其他顶点到其网页容器对应边的距离,因此,本发明实施例不对顶边距top、左边距left、底边距bottom以及右边距right的具体含义进行明确的限定。
S104:基于所述原始网页代码,将所述布局属性值确定为对应元素的初始布局属性值,生成优化网页代码。
由上可知,网络服务器能够获得原网页代码中各元素在各自对应的网页容器中的布局计算值,以及每个中间层网页容器的布局计算值,基于上述情况,本发明实施例提供的方案中,基于所述原始网页代码,将所述布局属性值确定为对应元素的初始布局属性值,生成优化网页代码,可以包括:
基于所述原始网页代码,将原始网页代码中各元素在各自对应的网页容器中的布局计算值,以及每个中间层网页容器的布局计算值确定为对应的初始布局属性值,生成优化网页代码。
具体的,可以针对原始网页代码中的各元素以及各中间层网页容器,将其对应的布局计算值设置为其初始布局属性值,生成包含各元素的初始布局属性值的优化网页代码,以使得在网络服务器将优化网页代码发送给客户端之后,客户端能够减少对各元素的布局计算量,进而提高网页展示的速度。
综上可见,应用图1提供的实施例,能够对原始网页代码中各元素对应的初始布局属性值进行设定,使得客户端在加载优化网页代码时,对网页代码中各元素进行布局计算的计算量大大减少,节省了网页展示的时间,进而提高了网页展示的速度。
图3为本发明另一实施例提供的网页优化方法的流程示意图,该方法除包含图1提供实施例中的步骤S101-S104外,还包括步骤:
S105:按照预设计算规则,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值。
由上述实施例可知,排版引擎在对原始网页代码中的某元素进行布局计算时是先加载其对应的网页容器,然后将该元素排布到与其对应且已加载的网页容器中,而通常情况下,网页代码中会包含大量的元素以及对层网页容器,还已图2为例,如排版引擎对元素1进行布局计算,那么排版引擎需要先加载网页容器C1,完成对网页容器C1的布局计算并获得其对应的布局计算值,然后再加载网页容器B,完成对网页容器B的布局计算并获得其对应的布局计算值,最后才能够在网页容器B中对元素1进行排布,即进行布局计算,获得元素1对应的布局计算值,可见,上述对元素1进行布局计算需要等包含元素1的所有网页容器均完成布局计算之后才能够进行,如果网页代码中包含有元素1的网页容器很多的话,那么对应的布局计算量将会很大,并且对元素1进行布局计算需要依赖网页容器,这也将造成时间的浪费,从而导致网页展示的速度下降。
为了进一步的提高网页展示的速度,本发明实施例提供的方案中,按照预设计算规则,计算原始代码中每一元素在最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,使得对网页中各元素进行布局计算时不需要再依赖网页容器。
在本发明实施例提供的一具体实现方式中,按照预设计算规则,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,可以:
针对所述原始代码中每一元素,根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,所述上层网页容器为包含所述中间层网页容器的非最外层网页容器。
进一步的,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,可以:
通过如下公式计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值:
|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对应的的顶边距、左边距、底边距、右边距。
示例性的,以图2为例,由上可知网络服务器通过JS能够读取图2中各元素以及中间层网页容器对应的布局计算值,假设网络服务器通过JS读取到最外层网页容器C0对应的布局计算值为:width(C0)=320、height(C0)=568,网页容器C1在最外层网页容器C0中对应的布局计算值为:top(C1)=40、left(C1)=25、width(C1)=290、height(C1)=400,网页容器B在网页容器C1中对应的布局计算值为:top(B)=50、left(B)=25、width(B)=260、height(B)=200,元素1在网页容器B中应的布局计算值为:top(A1)=100、left(A1)=25、width(A1)=110、height(A1)=90,元素2对应的布局计算值为:top(A2)=40、left(A2)=140、width(A2)=110、height(A2)=90。
如图4所示,为针对图2中各元素在绝对定位方式进行展示的示意图;按照上述的公式可以计算出元素1在最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值为:
|width(A1)|=Width(A1)=110;
|height(A1)|=height(A1)=90;
|top(A1)|=top(C1)+top(B)+top(A1)=40+50+100=190;
|left(A1)|=left(C1)+left(B)+left(A1)=25+25+25=75;
可以计算出元素2在最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值为:
|width(A2)|=Width(A2)=110;
|height(A2)|=height(A2)=90;
|top(A2)|=top(C1)+top(B)+top(A2)=40+50+40=130;
|left(A2)|=left(C1)+left(B)+left(A2)=25+25+140=190;
由于前述示例中是以宽width、高height、顶边距top以及左边距left来确定元素的位置以及大小的,为了与前述部分对应,该处在计算元素1对应的绝对布局属性值时,也仅以绝对宽|width(Ax)|、绝对高|height(Ax)|、绝对顶边距|top(Ax)|以及绝对左边距|left(Ax)|进行说明的,但这里并不对确定元素的位置和大小的具体形式做明确限定,需要说明的是,计算元素在最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值所采用的公式需与前述确定元素的位置和大小的形式统一。由于计算元素1对应的绝对底边距|bottom(A1)|以及绝对右边距|right(A1)|的形式与上述计算其绝对顶边距|top(A1)|、绝对左边距|left(A1)|的过程无异,因此,本发明实施例就不再赘述。
S106:删除所述中间层网页容器。
通过上述的过程能够计算出原始网页代码中各元素对应在最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,由于绝对布局属性值时相对最外层网页容器而言的,绝对布局属性值能够一次性确定出在最外层网页容器中的位置,不需要在依赖中间层网页容器,因此,在本发明实施例提供的方案中,删除上述所有的中间容器,参见图2以及图4,可见图4中已将网页容器B和网页容器C1删除,而对于元素1和元素2来说,它们在最外层网页容器C0中的位置并没有发生变化。网页容器是一个虚拟的容器,在进行网页展示时,网页容器虽然不会真实的显现,但是展示过程中依然需要对其进行布局计算,因此,为了减少布局计算量,可以原始网页代码中所有的中间层网页容器。
S107:根据所述绝对布局属性值以及所述优化网页代码,生成针对所述URL请求的最终网页代码。
通过上述计算出的各元素在最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,来调整上述生成的优化网页代码中对应元素的代码段,同时将优化网页代码中的中间层网页容器对应的代码段删除,进而生成最终网页代码,网络服务器将这个最终网页代码作为上述URL请求的响应,发送给客户端,以使得客户端在对各元素进行布局计算时不再依赖中间层网页容器,也不需要对中间层网页容器进行布局计算,进而提高网页展示的速度。
应用图3提供的实施例,能够将原始网页代码中各元素对应的布局计算值转化为在最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,并生成最终网页代码,使得客户端在加载最终网页代码时,对网页代码中各元素进行布局计算的计算量大大减少,并且对各元素进行布局计算不再依赖中间层网页容器,同时由于没有了中间层网页容器,各元素能够同时在最外层网页容器中进行展示,节省了网页展示的时间,因此能够提高网页展示的速度。
图5为本发明一实施例提供的网页优化装置的结构示意图,所述装置包括:接收模块201、确定模块202、获得模块203以及第一生成模块204。
接收模块201,用于接收客户端发送的用于展示网页内容的统一资源定位符URL请求,所述URL请求的后缀中包含所述客户端的窗口大小。
确定模块202,用于根据所述URL请求,确定所述网页内容在所述客户端中展示时对应的最外层网页容器大小。
获得模块203,用于在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载,获得针对所述原始网页代码中各元素的布局属性值。
进一步的,获得模块203,具体用于:
在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载,通过网页脚本语言JS,获取排版引擎针对所述原始网页代码中各元素在各自对应的网页容器中的布局计算值,以及每个中间层网页容器的布局计算值,所述中间层网页容器为非最外层网页容器。
实际应用中,布局计算值至少包括:
宽width、高height、顶边距top以及左边距left对应的计算值;
或,宽width、高height、底边距bottom以及右边距right对应的计算值。
第一生成模块204,用于基于所述原始网页代码,将所述布局属性值确定为对应元素的初始布局属性值,生成优化网页代码。
进一步的,在所述获得模块203具体用于在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载,通过网页脚本语言JS,获取排版引擎针对所述原始网页代码中各元素在各自对应的网页容器中的布局计算值,以及每个中间层网页容器的布局计算值的情况下,生成模块204,具体用于:
基于所述原始网页代码,将原始网页代码中各元素在各自对应的网页容器中的布局计算值,以及每个中间层网页容器的布局计算值确定为对应的初始布局属性值,生成优化网页代码。
综上可见,应用图5提供的实施例,能够对原始网页代码中各元素对应的初始布局属性值进行设定,使得客户端在加载优化网页代码时,对网页代码中各元素进行布局计算的计算量大大减少,节省了网页展示的时间,进而提高了网页展示的速度。
图6为本发明另一实施例提供的网页优化装置的结构示意图,该装置除包含图5提供实施例中的接收模块201、确定模块202、获得模块203以及第一生成模块204外,还包括:计算模块205、删除模块206以及第二生成模块207。
计算模块205,用于按照预设计算规则,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值。
进一步的,上述的计算模块205,具体用于:
针对所述原始代码中每一元素,根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,所述上层网页容器为包含所述中间层网页容器的非最外层网页容器。
更进一步的,上述的计算模块205,具体用于:
针对所述原始代码中每一元素,根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值,通过如下公式计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,所述上层网页容器为包含所述中间层网页容器的非最外层网页容器,所述公式为:
|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对应的的顶边距、左边距、底边距、右边距。
删除模块206,用于删除所述中间层网页容器;
第二生成模块207,用于根据所述绝对布局属性值以及所述优化网页代码,生成针对所述URL请求的最终网页代码。
应用图6提供的实施例,能够将原始网页代码中各元素对应的布局计算值转化为在最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,并生成最终网页代码,使得客户端在加载最终网页代码时,对网页代码中各元素进行布局计算的计算量大大减少,并且对各元素进行布局计算不再依赖中间层网页容器,同时由于没有了中间层网页容器,各元素能够同时在最外层网页容器中进行展示,节省了网页展示的时间,因此能够提高网页展示的速度。
需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于装置实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本领域普通技术人员可以理解实现上述方法实施方式中的全部或部分步骤是可以通过程序来指令相关的硬件来完成,所述的程序可以存储于计算机可读取存储介质中,这里所称得的存储介质,如:ROM/RAM、磁碟、光盘等。
以上所述仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等,均包含在本发明的保护范围内。
Claims (12)
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.一种网页优化装置,其特征在于,所述装置包括:
接收模块,用于接收客户端发送的用于展示网页内容的统一资源定位符URL请求,所述URL请求的后缀中包含所述客户端的窗口大小;
确定模块,用于根据所述URL请求,确定所述网页内容在所述客户端中展示时对应的最外层网页容器大小;
获得模块,用于在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载,获得针对所述原始网页代码中各元素的布局属性值;
第一生成模块,用于基于所述原始网页代码,将所述布局属性值确定为对应元素的初始布局属性值,生成优化网页代码。
8.根据权利要求7所述的装置,其特征在于,所述获得模块,具体用于:
在所述最外层网页容器中对所述URL请求对应的原始网页代码进行预加载,通过网页脚本语言JS,获取排版引擎针对所述原始网页代码中各元素在各自对应的网页容器中的布局计算值,以及每个中间层网页容器的布局计算值,所述中间层网页容器为非最外层网页容器;
所述生成模块,具体用于:
基于所述原始网页代码,将原始网页代码中各元素在各自对应的网页容器中的布局计算值,以及每个中间层网页容器的布局计算值确定为对应的初始布局属性值,生成优化网页代码。
9.根据权利要求8所述的装置,其特征在于,所述布局计算值至少包括:
宽width、高height、顶边距top以及左边距left对应的计算值;
或,宽width、高height、底边距bottom以及右边距right对应的计算值。
10.根据权利要求9所述的装置,其特征在于,所述装置还包括:
计算模块,用于按照预设计算规则,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值;
删除模块,用于删除所述中间层网页容器;
第二生成模块,用于根据所述绝对布局属性值以及所述优化网页代码,生成针对所述URL请求的最终网页代码。
11.根据权利要求10所述的装置,其特征在于,所述计算模块,具体用于:
针对所述原始代码中每一元素,根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值,计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,所述上层网页容器为包含所述中间层网页容器的非最外层网页容器。
12.根据权利要求11所述的装置,其特征在于,所述计算模块,具体用于:
针对所述原始代码中每一元素,根据所述元素的布局计算值、与所述元素对应的中间层网页容器的布局计算值以及所述中间层网页容器的所有上层网页容器的布局计算值,通过如下公式计算所述原始代码中每一元素在所述最外层网页容器中以绝对定位方式展示时对应的绝对布局属性值,所述上层网页容器为包含所述中间层网页容器的非最外层网页容器,所述公式为:
|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对应的的顶边距、左边距、底边距、右边距。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611248299.8A CN106648821B (zh) | 2016-12-29 | 2016-12-29 | 一种网页优化方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611248299.8A CN106648821B (zh) | 2016-12-29 | 2016-12-29 | 一种网页优化方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN106648821A true CN106648821A (zh) | 2017-05-10 |
CN106648821B CN106648821B (zh) | 2020-02-11 |
Family
ID=58836398
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201611248299.8A Active CN106648821B (zh) | 2016-12-29 | 2016-12-29 | 一种网页优化方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106648821B (zh) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109067726A (zh) * | 2018-07-24 | 2018-12-21 | 北京知道创宇信息技术有限公司 | 建站系统识别方法、装置、电子设备及存储介质 |
CN109656556A (zh) * | 2018-12-13 | 2019-04-19 | 中国银行股份有限公司 | 一种自适应页面的生成方法及装置 |
CN110489700A (zh) * | 2019-08-19 | 2019-11-22 | 北京泰和纬度网络技术有限公司 | 一种生成网页的方法及系统 |
CN111581570A (zh) * | 2020-04-01 | 2020-08-25 | 车智互联(北京)科技有限公司 | 一种页面布局方法及计算设备 |
CN111625241A (zh) * | 2020-05-22 | 2020-09-04 | 广东飞企互联科技股份有限公司 | 一种基于可视化建模网页布局代码生成方法 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101202748A (zh) * | 2007-11-27 | 2008-06-18 | 优视动景(北京)技术服务有限公司 | 一种微浏览器浏览网页的方法及微浏览器 |
CN101833586A (zh) * | 2010-05-26 | 2010-09-15 | 卓望数码技术(深圳)有限公司 | 一种html小屏幕自适应排版方法及排版服务器 |
CN102479181A (zh) * | 2010-11-22 | 2012-05-30 | 中国电信股份有限公司 | 基于div位置的网页正文抽取方法和装置 |
CN104424318A (zh) * | 2013-09-09 | 2015-03-18 | 阿里巴巴集团控股有限公司 | 页面元素的控制方法及装置 |
-
2016
- 2016-12-29 CN CN201611248299.8A patent/CN106648821B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101202748A (zh) * | 2007-11-27 | 2008-06-18 | 优视动景(北京)技术服务有限公司 | 一种微浏览器浏览网页的方法及微浏览器 |
CN101833586A (zh) * | 2010-05-26 | 2010-09-15 | 卓望数码技术(深圳)有限公司 | 一种html小屏幕自适应排版方法及排版服务器 |
CN102479181A (zh) * | 2010-11-22 | 2012-05-30 | 中国电信股份有限公司 | 基于div位置的网页正文抽取方法和装置 |
CN104424318A (zh) * | 2013-09-09 | 2015-03-18 | 阿里巴巴集团控股有限公司 | 页面元素的控制方法及装置 |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109067726A (zh) * | 2018-07-24 | 2018-12-21 | 北京知道创宇信息技术有限公司 | 建站系统识别方法、装置、电子设备及存储介质 |
CN109067726B (zh) * | 2018-07-24 | 2021-04-13 | 北京知道创宇信息技术股份有限公司 | 建站系统识别方法、装置、电子设备及存储介质 |
CN109656556A (zh) * | 2018-12-13 | 2019-04-19 | 中国银行股份有限公司 | 一种自适应页面的生成方法及装置 |
CN110489700A (zh) * | 2019-08-19 | 2019-11-22 | 北京泰和纬度网络技术有限公司 | 一种生成网页的方法及系统 |
CN111581570A (zh) * | 2020-04-01 | 2020-08-25 | 车智互联(北京)科技有限公司 | 一种页面布局方法及计算设备 |
CN111581570B (zh) * | 2020-04-01 | 2023-05-30 | 车智互联(北京)科技有限公司 | 一种页面布局方法及计算设备 |
CN111625241A (zh) * | 2020-05-22 | 2020-09-04 | 广东飞企互联科技股份有限公司 | 一种基于可视化建模网页布局代码生成方法 |
Also Published As
Publication number | Publication date |
---|---|
CN106648821B (zh) | 2020-02-11 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US20220207569A1 (en) | Universal Ad Creative | |
CN106648821A (zh) | 一种网页优化方法及装置 | |
CN109614424B (zh) | 页面布局生成方法、装置、计算设备和介质 | |
US20060294451A1 (en) | Template for rendering an electronic form | |
KR101255506B1 (ko) | 네트워크 양식들에 대한 데이터 구동 액션 | |
CN111444696B (zh) | 报表展示与编辑方法及装置 | |
CN106033471B (zh) | 一种处理表单的方法和装置 | |
CN109408764B (zh) | 页面区域划分方法、装置、计算设备和介质 | |
CN105574049A (zh) | 移动应用的页面处理方法、装置和系统 | |
US20120005187A1 (en) | Web Site Content Management Techniques | |
CN103336794B (zh) | 用于在目标页面中提供对应呈现信息的方法与设备 | |
CN104714982A (zh) | 一种网页的加载方法和系统 | |
WO2001050234A1 (en) | A method and system for modeling data | |
KR20160061351A (ko) | 웹 페이지에 대한 컨텐츠 아이템에 대한 사이즈 자동 결정 | |
US20120078961A1 (en) | Representing and Processing Inter-Slot Constraints on Component Selection for Dynamic Ads | |
US7188112B1 (en) | Method, system, and apparatus for exposing server properties to a client application | |
KR20100126782A (ko) | 상호작용 호스트 인식 광고 | |
CN111367514B (zh) | 页面卡片的开发方法和装置、计算设备和存储介质 | |
WO2010036481A2 (en) | User interface for internet advertisement | |
CN106610785A (zh) | 商品对象列表信息处理方法及装置 | |
US9367627B1 (en) | Selecting supplemental content for inclusion in a search results page | |
US10089120B2 (en) | Widgets in digital dashboards | |
US20230162242A1 (en) | Automatic generation of electronic advertising messages containing one or more automatically selected stock photography images | |
CN111274516B (zh) | 页面展示方法、页面配置方法和装置 | |
CN105095206A (zh) | 信息处理方法以及信息处理装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |