浏览器式样兼容方法、装置、计算机设备及存储介质与流程

文档序号:18331059发布日期:2019-08-03 12:13阅读:107来源:国知局
浏览器式样兼容方法、装置、计算机设备及存储介质与流程

本发明涉及信息处理领域,尤其涉及浏览器式样兼容方法、装置、计算机设备及存储介质。



背景技术:

目前市面上的浏览器种类繁多,包括微软公司的ie浏览器、mozilla公司的火狐浏览器、google公司的chrome浏览器、苹果公司的safari浏览器、opera浏览器,以及国产的360浏览器、qq浏览器、猎豹浏览器、搜狗浏览器等等。

浏览器的核心部分是浏览器内核,又称为为渲染引擎(renderingengine)。浏览器内核大致分为三类:trident内核、gecko内核以及webkit内核。其中,使用trident内核的浏览器有ie浏览器、猎豹浏览器等;使用gecko内核的浏览器有火狐浏览器等;使用webkit内核的浏览器有chrome浏览器、safari浏览器等。浏览器内核决定了浏览器如何显示web页面的内容。由于历史原因,不同的浏览器内核对web页面的解析是基于不同的标准,因此,同一web页面可能被渲染成不同式样的显示效果。例如,对于层叠样式表(css)文件的不同解析,造成了对同一web页面显示不一致的情况,更有甚者,将造成用户使用符合自身喜好的浏览器却无法正常访问web页面的情况。

为解决这种兼容问题,开发人员不得不为不同的浏览器编写不同的代码,以实现浏览器式样兼容,但随着浏览器产品的不断增多,式样匹配的实时性差,匹配速度变慢,影响用户体验,同时,开发工作量不断加大,开发成本升高。



技术实现要素:

本发明实施例提供一种浏览器式样兼容方法、装置、计算机设备及存储介质,以解决浏览器式样兼容过程中,式样匹配实时性差,匹配速度慢的问题。

一种浏览器式样兼容方法,包括:

获取浏览器的内核信息;

接收服务端发送的浏览器页面数据,并获取所述浏览器页面数据中的脚本文件,其中,所述脚本文件用于对所述浏览器页面数据中的层叠样式表文件进行配置;

执行所述脚本文件,得到对所述层叠样式表文件进行配置后的目标层叠样式表文件;

根据所述目标层叠样式表文件渲染所述浏览器页面数据,得到目标浏览器页面数据;

加载所述目标浏览器页面数据,并在目标浏览器上布局目标浏览器页面数据。

一种浏览器式样兼容装置,包括:

采集模块,用于获取浏览器的内核信息;

接收模块,用于接收服务端发送的浏览器页面数据,并获取所述浏览器页面数据中的脚本文件,其中,所述脚本文件用于对所述浏览器页面数据中的层叠样式表文件进行配置;

执行模块,用于执行所述脚本文件,得到对所述层叠样式表文件进行配置后的目标层叠样式表文件;

渲染模块,用于根据所述目标层叠样式表文件渲染所述浏览器页面数据,得到目标浏览器页面数据;

加载模块,用于加载所述目标浏览器页面数据,并在目标浏览器上布局目标浏览器页面数据。

一种计算机设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述浏览器式样兼容方法。

一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现上述浏览器式样兼容方法。

上述浏览器式样兼容方法、装置、计算机设备及存储介质,在服务端上部署脚本文件,脚本文件用于对浏览器页面数据中的层叠样式表文件进行配置;由客户端接收服务端发送的浏览器页面数据,并获取浏览器页面数据中的脚本文件;执行脚本文件,得到对所述层叠样式表文件进行配置后的目标层叠样式表文件;即通过脚本文件,以浏览器插件的形式在客户端加载并执行,实时解析层叠样式表文件,得到目标层叠样式表文件,并根据目标层叠样式表文件渲染浏览器页面数据,得到目标浏览器页面数据;加载目标浏览器页面数据,并在目标浏览器上布局目标浏览器页面数据。即,将浏览器样式匹配过程放在客户端处理,提高了样式匹配的实时性和匹配速度,减轻了服务端的处理负担,同时,脚本文件功能独立,与浏览器页面数据充分解耦合,可以方便的被浏览器页面数据引用,便于维护,减少了在服务端的开发工作量,降低了开发成本。

附图说明

为了更清楚地说明本发明实施例的技术方案,下面将对本发明实施例的描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。

图1是本发明一实施例中浏览器式样兼容方法的一应用环境示意图;

图2是本发明一实施例中浏览器式样兼容方法的流程图;

图3是本发明一实施例中浏览器式样兼容方法中步骤s3的流程图;

图4是本发明一实施例中浏览器式样兼容方法中步骤s3的另一流程图;

图5是本发明一实施例中浏览器式样兼容方法中若网络速度小于或等于预设阈值时,得到目标层叠样式表文件的流程图;

图6是本发明一实施例中浏览器式样兼容方法中步骤s33的流程图;

图7是本发明一实施例中浏览器式样兼容方法中根据第一脚本文件和预设配置文件的大小得到目标层叠样式表文件的流程图;

图8是本发明一实施例中浏览器式样兼容装置的示意图;

图9是本发明一实施例中计算机设备的示意图。

具体实施方式

下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。

本发明提供的浏览器式样兼容方法,可应用在如图1的应用环境中,其中,用户通过客户端上的浏览器访问互联网上的web页面;服务端是提供web服务的服务器或服务器集群,客户端具体可以是各种计算机终端设备,包括但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备;客户端与服务端之间通过网络连接,网络可以是有限网络或无线网络。本发明实施例提供的浏览器式样兼容方法应用于客户端。

在一实施例中,如图2所示,提供了一种浏览器式样兼容方法,其具体实现流程包括如下步骤:

s1:获取浏览器的内核信息。

浏览器的内核信息主要包括浏览器内核的类型,浏览器内核类型是指trident内核、gecko内核以及webkit内核等。根据浏览器的技术标准,浏览器均有提供api(applicationprogramminginterface,应用程序编程接口)接口,通过api接口,可以使服务端获知来访问的浏览器的信息,包括浏览器的版本号和内核信息。

具体地,客户端通过javascript脚本调用navigator对象获取浏览器信息。其中,javascript脚本,简称js脚本,是一种直译式的、动态类型、弱类型、基于原型的脚本语言,使用javascript可以给网页带来动态交互的功能。navigator对象的useragent属性是一个只读的字符串,它声明了浏览器中用于http请求的用户代理头的值,根据这个值即可得到浏览器的内核信息。例如,通过方法navigator.useragent.indeof(string)可以检测该浏览器的名称是否为变量string代表的名称。若方法navigator.useragent.indeof(‘ie8’)的值不为-1,则代表该浏览器为基于trident内核的ie浏览器,且版本号为8,得到的浏览器的内核类型为“trident”;若navigator.useragent.indeof(‘firefox’)的值不为-1,则代表该浏览器为基于gecko内核的火狐浏览器,得到的浏览器内核信息为字符串“gecko”。

s2:接收服务端发送的浏览器页面数据,并获取浏览器页面数据中的脚本文件,其中,脚本文件用于对浏览器页面数据中的层叠样式表文件进行配置。

层叠样式表文件,即css文件,层叠样式表文件,英文全称为cascadingstylesheets,是一种用来表现html或xml等标记语言文件样式的文件。css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。css简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量。

浏览器页面数据是服务端发送的web页面,包括html文件、xml文件、css文件、图片文件、客户端脚本文件等。

脚本文件是部署在服务端,并从服务端下载到客户端的客户端脚本文件,常见的客户端脚本文件如javascript脚本。客户端通过执行脚本文件,对浏览器页面数据中的层叠样式表文件进行配置,从而得到浏览器可渲染和加载的目标层叠样式表文件。

以javascript脚本为例,javascript可以被引用在html文件的标签中,浏览器在解析html时即可对javascript脚本作出处理。其中,引用方式包括两种:

(1)内部引用,即在html文件中直接引用,将javascript语句添加到标签对<scripttype></script>下;

(2)外部引用,即在标签对<scripttype></script>下引入javascript的链接地址,链接地址指向第一脚本文件所在的服务端中的存储位置。

优选地,为了与其他浏览器页面数据充分解耦合,以实现维护方便,javascript脚本的引用以外部引用为主。

具体地,客户端接收到服务端发送的浏览器页面数据后,从html文件开始解析,获取html文件中标签对<scripttype></script>中的脚本文件,若标签对中包括脚本文件的链接地址,则从链接地址指向的位置下载脚本文件。

可以理解地,html中包括至少一个javascript脚本,则脚本文件可以由若干个javascript脚本组成,共同用于对浏览器页面数据中的层叠样式表文件进行配置。

s3:执行脚本文件,得到对层叠样式表文件进行配置后的目标层叠样式表文件。

客户端执行脚本文件,得到对层叠样式表文件进行配置后的目标层叠样式表文件。

具体地,由于脚本文件可以由若干个子脚本组成,则客户端可以通过执行不同的子脚本,采用不同的方式对层叠样式表文件进行配置,从而得到浏览器能渲染和加载的目标层叠样式表文件。例如,客户端可以直接对浏览器页面数据中的层叠样式表文件进行解析;或者,客户端可以通过预设统一资源地址获取与浏览器的内核信息相匹配的目标层叠样式表文件。

s4:根据目标层叠样式表文件渲染浏览器页面数据,得到目标浏览器页面数据。

其中,客户端根据目标层叠样式表文件对浏览器页面数据的渲染包括对html文件进行解析,得到文件对象树;然后文件对象树构建渲染树,即得到待显示在浏览器上的目标浏览器页面数据。其具体过程,可以包括如下步骤:

(1)解析html文件,并构建dom树;

文档对象树,是w3c组织推荐的处理可扩展标志语言的标准编程接口。dom可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,它是表示和处理一个html或xml文档的常用方法。

具体地,客户端通过逐层解析html文件,得到html文件中每一层标签,由得到的标签构成内外层关系形成树形结构的文档对象树,即dom树。

(2)结合dom树构建渲染树;

渲染树,即rendertree,是dom树与css规则树结合的产物。其中,css规则树,即cssruletree,是将层叠样式表文件解析后得到的树形数据结构。

具体地,若一个css文件表示为:

doc{display:block;text-indent:1em;}

title{display:block;font-size:3em;}

para{display:block;}

其中,doc、title、para分别对应了dom树中三个节点的名称,符号“{}”中的代表dom节点对应的css规则。

经过解析,将三条css规则与dom节点对应并以树形结构的方式进行关联存储,得到渲染树,即目标浏览器页面数据。

s5:加载目标浏览器页面数据,并在目标浏览器上布局目标浏览器页面数据。

客户端加载目标浏览器页面数据,即对目标浏览器页面数据进行布局,以适用于各种不同的浏览器,并且对布局后的目标浏览器页面数据进行绘制,使得用户在屏幕上看到的显示效果。其具体过程包括如下步骤:

(1)布局渲染树;

客户端从渲染树的顶部标签开始往下递归,计算出每个节点在屏幕中的位置,称之为布局(layout)。其中,若dom树中某个节点发生了变化,需要重新渲染,则这个回退的过程称之为回流(reflow)。reflow的过程又分为异步和同步两种。例如,若修改了节点的样式,浏览器内核并不会立刻reflow,而是会把这样的操作积攒一批,然后做一次reflow,这叫异步reflow或增量异步reflow。若只是重新定义窗口大小、改变了页面默认的字体等,则对于这些操作,客户端可以马上进行reflow,这叫同步reflow,以提高浏览器加载页面的速度。

具体地,客户端从渲染树的顶端标签开始,如<htm>标签,遍历渲染树中的每个节点,以此完成布局。其中,遍历过程又分为广度遍历和深度遍历。遍历中采用广度或深度遍历算法将影响渲染速度,即加载web页面的速度,可以根据实际页面的显示内容进行定制。

(2)对布局后的渲染树进行绘制;

客户端对布局后的渲染树的绘制可以调用nativegui接口。其中,nativegui接口是指本地操作系统的gui接口,gui即图形用户接口,即graphicaluserinterface,是指采用图形方式显示的计算机操作用户界面。不同操作系统有不同的gui接口,例如windows系统与macos、linux系统之间的gui接口均不相同。

具体地,客户端将要绘制的渲染树作为输入,通过调用操作系统的gui接口,可以将要显示的web页面绘制到显示器屏幕上。

在本实施例中,在服务端上部署脚本文件,脚本文件用于对浏览器页面数据中的层叠样式表文件进行配置;由客户端接收服务端发送的浏览器页面数据,并获取浏览器页面数据中的脚本文件;执行脚本文件,得到对所述层叠样式表文件进行配置后的目标层叠样式表文件;即通过脚本文件,以浏览器插件的形式在客户端加载并执行,实时解析层叠样式表文件,得到目标层叠样式表文件,并根据目标层叠样式表文件渲染浏览器页面数据,得到目标浏览器页面数据;加载目标浏览器页面数据,并在目标浏览器上布局目标浏览器页面数据。即,将浏览器样式匹配过程放在客户端处理,提高了样式匹配的实时性和匹配速度,减轻了服务端的处理负担,同时,脚本文件功能独立,与浏览器页面数据充分解耦合,可以方便的被浏览器页面数据引用,便于维护,减少了在服务端的开发工作量,降低了开发成本。

进一步地,在一实施例中,如图3所示,针对步骤s3,即执行脚本文件,得到对层叠样式表文件进行配置后的目标层叠样式表文件,其中,脚本文件包括第一脚本文件,第一脚本文件用于解析浏览器页面数据中的层叠样式表文件;对层叠样式表文件进行配置的过程具体包括如下步骤:

s31:执行第一脚本文件,得到层叠样式表文件中的样式属性信息。

第一脚本文件部署在服务端,具体可以是javascript脚本。

样式属性信息包括样式属性名和样式属性值。例如,在一个层叠样式表文件中,一段css语句可以表示为:

div{transform:rotate(7deg)}

body{background-color:yellow}

h1{background-color:red}

h2{background-color:transparent}

其中,div、body、h1、h2分别是html文件中的标签,div代表一个段落,body代表整个html文件的文档内容,h1代表html文件的标题1,h2代表html文件的标题2;transform:rotate、background-color是样式属性名,7deg、yellow、red和transparent代表样式属性值,transform:rotate代表可对元素div进行旋转,background-color代表元素body、h1、h2的背景颜色,分别是黄色、红色和透明色。

对层叠样式表文件的解析是由css解析器完成。目前的浏览器都内置了css解析器。不同的浏览器内核所内置的css解析器也略有不同。例如,css标准样式属性“transform”,在chrome浏览器中将被解析成“-webkit-transform”,在ie浏览器中将被解析成“-ms-transform”。正是由于这些差异,根据同一个css文件布局的html文件,在chrome浏览和ie浏览器中可能呈现不同的页面。

具体地,客户端执行第一脚本,对层叠样式表文件进行解析,得到样式属性名和样式属性值。如上例所示,解析得到的样式属性名为transform:rotate和background-color,样式属性值为7deg、yellow、red和transparent

s32:将层叠样式表文件中的样式属性信息修改成与浏览器内核信息匹配的值,得到目标层叠样式表文件。

第一脚本文件中包括了与浏览器内核信息匹配的样式属性信息。例如,针对样式属性名“transform”,基于trident内核的浏览器对应的样式属性名为“-ms-transform”;基于webkit内核的浏览器对应的样式属性名为“-webkit-transform”;基于gecko内核的浏览器对应的样式属性名为“-moz-transform”。

具体地,若层叠样式表文件中的样式属性名为“transform”,则若检测到是chrome浏览器,则将样式属性名“transform”替换成“-webkit-transform”,若检测到是ie浏览器,则样式属性名“transform”替换成“-ms-transform”等,以此类推。经过修改后的层叠样式表文件中即为目标层叠样式表文件。

在本实施例中,客户端通过对层叠样式表文件进行解析的方式,获取其中的样式属性信息,然后将层叠样式表文件中的样式属性信息修改成与浏览器内核信息匹配的值,得到目标层叠样式表文件,实现了在客户端实时解析,实时兼容的功能,提高了样式匹配的实时性和匹配速度。

进一步地,在一实施例中,如图4所示,针对步骤s3,即执行所述脚本文件,得到对所述层叠样式表文件进行配置后的目标层叠样式表文件,其中,脚本文件还包括第二脚本文件,第二脚本用于获取浏览器与服务端之间的网络速度;对层叠样式表文件进行配置的过程具体包括如下步骤:

s33:执行第二脚本文件,得到浏览器与服务端之间的网络速度。

第二脚本与第一脚本一样,是部署在服务端并从服务端下载到客户端的客户端脚本文件。与第一脚本的不同在于,第二脚本用于获取浏览器与服务端之间的网络速度。浏览器与服务端之间的网络速度也即客户端与服务端之间的网络速度。

具体地,客户端执行第二脚本,计算浏览器从服务端获取一张图片文件的时间,并根据图片文件的大小计算出浏览器与服务端之间的网络速度。例如,若服务端的图片文件大小为50k,浏览器从服务端获取该图片的时间为0.5秒,则可以计算出浏览器与服务端之间的网络速度为100k。

s34:若网络速度大于预设的速度阈值,则从预设统一资源地址获取与浏览器的内核信息相匹配的目标层叠样式表文件。

预设的速度阈值用于判断浏览器与服务端之间的网络速度的临界值。优选地,预设的速度阈值设为100m。

预设统一资源地址,即预设的网络地址,用于存储与浏览器的内核信息相匹配的目标层叠样式表文件。其中,预设统一资源地址也可以是服务端的地址。

与浏览器的内核信息相匹配的目标层叠样式表文件,即根据不同浏览器内核分类的目标层叠样式表文件。例如,针对服务端提供的层叠样式表文件,预设统一资源地址上有与之对应的适用于各类浏览器内核的目标层叠样式表文件。

具体地,客户端检测到网络速度大于预设的速度阈值,则从预设统一资源地址下载与浏览器的内核信息相匹配的目标层叠样式表文件,并替换原层叠样式表文件。

在本实施例中,客户端执行第二脚本文件,获取当前浏览器与服务端之间的网络速度;若网络速度大于预设速度阈值,则从预设统一资源地址下载与浏览器的内核信息相匹配的目标层叠样式表文件,并替换原层叠样式表文件;实现了在网速允许的情况下,直接从预设统一资源地址获取与浏览器的内核信息相匹配的目标层叠样式表文件,从而跳过客户端解析层叠样式表文件的步骤,既提高页面的处理速度,又减轻客户端的处理压力。

进一步地,在一实施例中,客户端可以结合第一脚本文件和第二脚本文件对浏览器页面数据中的层叠样式表文件进行配置,得到对层叠样式表文件进行配置后的目标层叠样式表文件。

具体地,客户端从浏览器页面数据中获取网速检测脚本,并执行网速检测脚本。

其中,网速检测脚本用于获取浏览器与服务端之间的网络速度;若网络速度大于预设的速度阈值,则从预设统一资源地址获取与浏览器的内核信息相匹配的目标层叠样式表文件;若网络速度小于或等于预设阈值,则执行第一脚本文件,得到层叠样式表文件中的样式属性信息;并将层叠样式表文件中的样式属性信息修改成与浏览器内核信息匹配的值,得到目标层叠样式表文件。

或者,当网络速度小于或等于预设阈值时,客户端也可以通过以下实施例得到目标层叠样式表文件。

进一步地,在一实施例中,如图5所示,在步骤s33之后,即在执行第二脚本文件,得到浏览器与服务端之间的网络速度之后,还可以包括如下步骤:

s35:若网络速度小于或等于预设阈值,则从预设统一资源地址获取预设配置文件。

预设配置文件中包括与样式属性信息匹配的值的文本文件。

预设配置文件可以以json格式的形式存储。其中,json(javascriptobjectnotation,js对象简谱)是一种轻量级的数据交换格式。json文件是以ascii编码方式存储的,不依赖于操作系统,能被计算机程序快速的读取或生成,是一种流行的数据交换格式。

例如,一个预设配置文件可以表示为:

其中,trident内核、webkit内核、gecko内核对应的值分别适用于各自内核类型的样式属性名。

s36:使用预设配置文件中与样式属性信息匹配的值,对层叠样式表文件中的样式属性信息进行替换,得到目标层叠样式表文件。

预设配置文件中与样式属性信息匹配的值即步骤s10中,不同浏览器内核类型对应的值。

具体地,客户端在遍历层叠样式表文件时,根据样式属性信息从预设配置文件中找到与之匹配的样式属性名,并进行替换,从而得到目标层叠样式表文件。

在本实施例中,由于不兼容的样式属性名的数量有限,因此预设配置文件的大小通常要小于目标层叠样式表文件的大小,所以当网络速度小于或等于预设阈值时,客户端从预设统一资源地址获取预设配置文件,并使用预设配置文件中与样式属性信息匹配的值,对层叠样式表文件中的样式属性信息进行替换,使得对页面的处理也能获得与网速快时同样的处理速度。

进一步地,在一实施例中,如图6所示,针对步骤s33,即执行第二脚本文件,得到浏览器与服务端之间的网络速度,具体可以包括如下步骤:

s331:以预设时间间隔执行第二脚本文件,得到一组包括浏览器与服务端之间的网络速度的向量。

其中,预设时间间隔用于客户端以固定时间间隔获取浏览器与服务端之间的网络速度,得到一段时间内的网络速度。不同时间点获取到的网络速度构成一组向量。向量具体可以由临时数组表示。

具体地,客户端可以每隔1秒执行第二脚本文件,得到的网络速度向量可以表示为[85,80,25,81,83,79,80,82...],由此可见,网络速度大部分在80左右,以此可以代表当前浏览器与服务端之间的网络状态。

s332:计算向量的平均值,并将平均值作为浏览器与服务端之间的网络速度。

具体地,客户端可以计算向量的加权平均值或算术平均值,并以平均值作为浏览器与服务端之间的网络速度。

在本实施例中,客户端以预设时间间隔执行第二脚本,对获取到的网络速度进行平均计算,可以避免网络瞬时速度不一致造成的误差,提高从预设统一资源地址获取文件的稳定性。

进一步地,在一实施例中,如图7所示,在步骤s33之后,即在执行第二脚本文件,得到浏览器与服务端之间的网络速度之后,具体还包括如下步骤:

s37:分别获取第一脚本文件的文件大小与预设配置文件的文件大小。

第一脚本文件和预设配置文件的链接地址均可以包括在浏览器页面数据中,即浏览器页面数据中可以包括第一脚本文件、第二脚本文件和预设配置文件的链接地址。

具体地,客户端可以从html文件中获取第一脚本文件和预设配置文件的链接地址,然后跟链接地址获取第一脚本文件的文件大小与预设配置文件的文件大小;也可以从预先约定的html文件的标签中获取。

s38:若第一脚本文件的文件大小大于预设配置文件的文件大小,并且网络速度小于或等于预设阈值,则从预设统一资源地址获取预设配置文件,并使用预设配置文件中与样式属性信息匹配的值,对层叠样式表文件中的样式属性信息进行替换,得到目标层叠样式表文件。

若第一脚本文件的文件大小大于预设配置文件的文件大小,则代表客户端下载第一脚本文件花费的时间要多于下载预设配置文件花费的时间,因此,客户端从预设统一资源地址获取预设配置文件,并使用预设配置文件中与样式属性信息匹配的值,对层叠样式表文件中的样式属性信息进行替换,得到目标层叠样式表文件。

s39:若第一脚本文件的文件大小小于或等于预设配置文件的文件大小,并且网络速度小于或等于预设阈值,则从浏览器页面数据中获取第一脚本文件,执行第一脚本文件,得到层叠样式表文件中的样式属性信息,并将层叠样式表文件中的样式属性信息修改成与浏览器内核信息匹配的值,得到目标层叠样式表文件。

若第一脚本文件的文件大小小于或等于预设配置文件的文件大小,则代表客户端下载第一脚本文件花费的时间要小于下载预设配置文件花费的时间,因此,客户端则从浏览器页面数据中获取第一脚本文件,执行第一脚本文件,得到层叠样式表文件中的样式属性信息,并将层叠样式表文件中的样式属性信息修改成与浏览器内核信息匹配的值,得到目标层叠样式表文件。

在本实施例中,针对网络速度小于或等于预设阈值的情况,客户端对第一脚本文件和预设配置文件的文件大小进行比较,使得客户端可以根据大小关系在通过网络下载预设配置文件、本地解析层叠样式表文件之间做出更优选择,进一步提高web页面处理速度。

应理解,上述实施例中各步骤的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本发明实施例的实施过程构成任何限定。

在一实施例中,提供一种浏览器式样兼容装置,该浏览器式样兼容装置与上述实施例中浏览器式样兼容方法一一对应。如图8所示,该浏览器式样兼容装置包括采集模块81、接收模块82、执行模块83、渲染模块84和加载模块85。各功能模块详细说明如下:

采集模块81,用于获取浏览器的内核信息;

接收模块82,用于接收服务端发送的浏览器页面数据,并获取浏览器页面数据中的脚本文件,其中,脚本文件用于对浏览器页面数据中的层叠样式表文件进行配置;

执行模块83,用于执行脚本文件,得到对层叠样式表文件进行配置后的目标层叠样式表文件;

渲染模块84,用于根据目标层叠样式表文件渲染浏览器页面数据,得到目标浏览器页面数据;

加载模块85,用于加载目标浏览器页面数据,并在目标浏览器上布局目标浏览器页面数据。

进一步地,执行模块83,包括:

第一执行子模块831,用于执行第一脚本文件,得到层叠样式表文件中的样式属性信息;

更新子模块832,用于将层叠样式表文件中的样式属性信息修改成与浏览器内核信息匹配的值,得到目标层叠样式表文件;

进一步地,执行模块83,还包括:

第二执行子模块833,用于执行第二脚本文件,得到浏览器与服务端之间的网络速度;

第一替换子模块834,用于若网络速度大于预设的速度阈值,则从预设统一资源地址获取与浏览器的内核信息相匹配的目标层叠样式表文件。

进一步地,执行模块83,还包括:

第一文件获取子模块835,用于若网络速度小于或等于预设阈值,则从预设统一资源地址获取预设配置文件;

第一匹配子模块836,用于使用预设配置文件中与样式属性信息匹配的值,对层叠样式表文件中的样式属性信息进行替换,得到目标层叠样式表文件。

进一步地,第二执行子模块833,包括:

定时单元8331,用于以预设时间间隔执行所述第二脚本文件,得到一组包括所述浏览器与所述服务端之间的网络速度的向量;

计算单元8332,用于计算所述向量的平均值,并将所述平均值作为所述浏览器与所述服务端之间的网络速度。

进一步地,执行模块83,还包括:

第二文件获取子模块837,用于分别获取第一脚本文件的文件大小与预设配置文件的文件大小;

第二替换子模块838,用于若第一脚本文件的文件大小大于预设配置文件的文件大小,并且网络速度小于或等于预设阈值,则从预设统一资源地址获取预设配置文件,并使用预设配置文件中与样式属性信息匹配的值,对层叠样式表文件中的样式属性信息进行替换,得到目标层叠样式表文件;

第二匹配子模块839,用于若第一脚本文件的文件大小小于或等于预设配置文件的文件大小,并且网络速度小于或等于预设阈值,则从浏览器页面数据中获取第一脚本文件,执行第一脚本文件,得到层叠样式表文件中的样式属性信息,并将层叠样式表文件中的样式属性信息修改成与浏览器内核信息匹配的值,得到目标层叠样式表文件。

关于浏览器式样兼容装置的具体限定可以参见上文中对于浏览器式样兼容方法的限定,在此不再赘述。上述浏览器式样兼容装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中,提供了一种计算机设备,该计算机设备可以是终端,其内部结构图可以如图9所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部服务器通过网络连接通信。该计算机程序被处理器执行时以实现一种浏览器式样兼容方法中客户端的步骤。

在一个实施例中,提供了一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行计算机程序时实现上述实施例中浏览器式样兼容方法的步骤,例如图2所示的步骤s1至步骤s5。或者,处理器执行计算机程序时实现上述实施例中浏览器式样兼容装置的各模块/单元的功能,例如图8所示模块81至模块85的功能。为避免重复,这里不再赘述。

在一实施例中,提供一计算机可读存储介质,其上存储有计算机程序,计算机程序被处理器执行时实现上述方法实施例中浏览器式样兼容方法,或者,该计算机程序被处理器执行时实现上述装置实施例中浏览器式样兼容装置中各模块/单元的功能。为避免重复,这里不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本发明所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限,ram以多种形式可得,诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。

所属领域的技术人员可以清楚地了解到,为了描述的方便和简洁,仅以上述各功能单元、模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能单元、模块完成,即将所述装置的内部结构划分成不同的功能单元或模块,以完成以上描述的全部或者部分功能。

以上所述实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围,均应包含在本发明的保护范围之内。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1