CN104133844A - 加载网页的方法及装置 - Google Patents

加载网页的方法及装置 Download PDF

Info

Publication number
CN104133844A
CN104133844A CN201410302936.XA CN201410302936A CN104133844A CN 104133844 A CN104133844 A CN 104133844A CN 201410302936 A CN201410302936 A CN 201410302936A CN 104133844 A CN104133844 A CN 104133844A
Authority
CN
China
Prior art keywords
pattern
css
file
html
script
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.)
Pending
Application number
CN201410302936.XA
Other languages
English (en)
Inventor
江岱霖
潘俊
任远
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Xiaomi Technology Co Ltd
Xiaomi Inc
Original Assignee
Xiaomi Inc
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Xiaomi Inc filed Critical Xiaomi Inc
Priority to CN201410302936.XA priority Critical patent/CN104133844A/zh
Publication of CN104133844A publication Critical patent/CN104133844A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Stored Programmes (AREA)

Abstract

本发明是关于一种加载网页的方法及装置,包括:获取预先定义的脚本样式文件;根据所述脚本样式文件自动生成级联样式表CSS样式;通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。本公开中通过采用较少脚本语言代码定义的脚本样式文件就可以编译出不同的CSS样式,因此可以提高CSS样式的生成效率,相应降低了浏览器加载网页时对HTML元素的描述繁琐度,提高了网页加载速度。

Description

加载网页的方法及装置
技术领域
本公开涉及计算机网络技术领域,尤其涉及加载网页的方法及装置。
背景技术
浏览器通过显示网页服务器或档案***内的文件,包括文字、图像、视频影像等,实现用户与这些文件的互动。上述文件格式通常为HTML(Hyper TextMarkup Language,超文本标记语言)文件,浏览器加载网页的过程,实际上是加载HTML文件的过程,HTML文件由若干嵌套的HTML元素组成,每个HTML元素可以通过若干(Cascading Style Sheets,级联样式表)样式进行描述。
相关技术中,通常采用CSS语言编写CSS样式,CSS样式可以包括字体、颜色、间距等,以便通过CSS样式描述HTML元素的不同属性,但是由于CSS语言是一种低级语言,其不支持集成、变量、条件判断等功能,因此,通过CSS样式对HTML元素进行描述时,可能需要将多个CSS样式进行组合,才能对某个HTML元素进行描述,而对于不同HTML元素,即使其具有相同属性,也要分别编写CSS样式。因此,为了描述不同HTML元素,需要预先生成大量的CSS样式,这些CSS样式均通过开发者手动编写,导致CSS样式的生成效率不高,相应的,浏览器加载网页时对HTML元素的描述过程繁琐,使得网页加载速度变慢。
发明内容
本公开提供加载网页的方法及装置,以解决相关技术中生成CSS样式的效率较低,导致HTML元素描述过程繁琐的问题。
根据本公开实施例的第一方面,提供一种加载网页的方法,包括:
获取预先定义的脚本样式文件;
根据所述脚本样式文件自动生成级联样式表CSS样式;
通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。
可选的,所述根据所述脚本样式文件自动生成CSS样式包括:
对所述脚本样式文件进行本地编译生成若干CSS样式;
将所述CSS样式保存到CSS样式列表中。
可选的,所述通过所述CSS样式描述所加载网页中的HTML元素包括:
在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
根据所述样式类型从所述CSS样式列表中查找目标CSS样式;
将查找到的目标CSS样式应用到所述HTML元素上。
可选的,所述根据所述脚本样式文件自动生成CSS样式包括:
将所述脚本样式文件嵌入到浏览器库中;
在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
根据所述样式类型,实时编译所述浏览器库中的脚本样式文件生成目标CSS样式。
可选的,所述通过所述CSS样式描述所述网页中的HTML元素包括:
将编译生成的目标CSS样式应用到所述HTML元素上。
可选的,所述脚本样式文件包括:通过JavaScript生成的JS样式文件。
根据本公开实施例的第二方面,提供一种加载网页的装置,包括:
获取单元,用于获取预先定义的脚本样式文件;
生成单元,用于根据所述脚本样式文件自动生成级联样式表CSS样式;
加载单元,用于通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。
可选的,所述生成单元包括:
本地编译子单元,用于对所述脚本样式文件进行本地编译生成若干CSS样式;
样式保存子单元,用于将所述CSS样式保存到CSS样式列表中。
可选的,所述加载单元包括:
第一类型获取子单元,用于在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
样式查找子单元,用于根据所述样式类型从所述CSS样式列表中查找目标CSS样式;
第一样式应用子单元,用于将查找到的目标CSS样式应用到所述HTML元素上。
可选的,所述生成单元包括:
样式嵌入子单元,用于将所述脚本样式文件嵌入到浏览器库中;
第二类型获取子单元,用于在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
实时编译子单元,用于根据所述样式类型,实时编译所述浏览器库中的脚本样式文件生成目标CSS样式。
可选的,所述加载单元包括:
第二样式应用子单元,用于将编译生成的目标CSS样式应用到所述HTML元素上。
可选的,所述脚本样式文件包括:通过JavaScript生成的JS样式文件。
根据本公开实施例的第三方面,提供一种加载网页的装置,包括:
处理器;
用于存储处理器可执行指令的存储器;
其中,所述处理器被配置为:
获取预先定义的脚本样式文件;
根据所述脚本样式文件自动生成级联样式表CSS样式;
通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。
本公开的实施例提供的技术方案可以包括以下有益效果:
与相关技术中直接采用CSS语言生成CSS样式不同,本公开实施例利用高级脚本语言具有的高级功能预先定义脚本样式文件,并根据这些脚本样式文件自动生成CSS样式,由于脚本样式文件采用高级脚本语言定义,因此可以充分利用高级语言的继承、判断、变量声明等功能,因此在描述不同HTML元素时,无需预先生成大量的CSS样式,而是通过采用较少脚本语言代码定义的脚本样式文件就可以编译出不同的CSS样式,因此可以提高CSS样式的生成效率,相应降低了浏览器加载网页时对HTML元素的描述繁琐度,提高了网页加载速度。
本公开实施例基于预先定义的脚本样式文件,可以先在本地编译成若干CSS样式,以便浏览器在加载网页时,可以直接调用这些CSS样式对HTML元素进行描述,进一步提高网页加载速度。
本公开实施例基于预先定义的脚本样式文件,浏览器也可以在网页加载过程中,实时编译脚本样式文件,以对HTML元素进行描述,虽然相关技术中有通过对CSS语言进行扩展的特定语言编写CSS样式,例如,less语言,sass语言等,但是采用上述语言定义的CSS样式无法由浏览器直接运行,而由于浏览器上提供了脚本样式文件的运行,因此本公开定义的脚本样式文件可以应用在不同浏览器加载网页的过程中,编译方式灵活。
本公开实施例中的脚本样式文件可以是通过JavaScript生成的JS样式文件,JavaScript是一种解释性脚本语言,其可以直接由浏览器调用,且广泛应用在HTML网页上,因此JS样式文件便于定义,通过JS样式文件生成各种CSS样式,可以有效提高CSS样式的生成效率。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理。
图1是本公开根据一示例性实施例示出的一种加载网页的方法流程图。
图2是本公开根据一示例性实施例示出的另一种加载网页的方法流程图。
图3是本公开根据一示例性实施例示出的另一种加载网页的方法流程图。
图4是本公开根据一示例性实施例示出的一种加载网页的装置框图。
图5是本公开根据一示例性实施例示出的另一种加载网页的装置框图。
图6是本公开根据一示例性实施例示出的另一种加载网页的装置框图。
图7是本公开根据一示例性实施例示出的另一种加载网页的装置框图。
图8是本公开根据一示例性实施例示出的另一种加载网页的装置框图。
图9是本公开根据一示例性实施例示出的一种用于加载网页的装置的一结构示意图。
具体实施方式
这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
在本公开使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。还应当理解,本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解,尽管在本公开可能采用术语第一、第二、第三等来描述各种信息,但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如,在不脱离本公开范围的情况下,第一信息也可以被称为第二信息,类似地,第二信息也可以被称为第一信息。取决于语境,如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
浏览器加载网页的过程,实际上是加载HTML文件的过程,HTML文件由若干嵌套的HTML元素组成,HTML元素可以包括网页标题、网页段落等,每个HTML元素通过若干CSS样式进行描述,CSS样式的描述对象即为HTML元素,CSS样式包括属性和值,例如,color表示属性为“颜色”,而black表示颜色的属性值为“黑色”。在加载网页过程中,浏览器需要找到HTML元素声明的CSS样式应用到该HTML元素上,以便使HTML元素呈现出预设效果。
CSS语言是一种常用的样式设计语言,相关技术中,通过CSS语言编写CSS样式,由于CSS语言是一种低级语言,因此采用该语言生成CSS样式的效率不高,本公开实施例可以采用高级脚本语言,高级脚本语言可以由浏览器由直接解释运行,例如,高级脚本语言可以是JavaScript,JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,本公开可以通过JavaScript定义CSS样式,从而可以有效提高CSS样式的生成效率。
如图1所示,图1是根据一示例性实施例示出的一种加载网页的方法流程图,该方法可以用于终端浏览器中,包括以下步骤:
在步骤101中,获取预先定义的脚本样式文件。
本实施例中的脚本样式文件可以具体为通过JavaScript生成的JS样式文件。JavaScript作为一种面向对象的高级语言,可以通过其预先定义用于生成CSS样式文件的JS样式文件,由于JavaScript具有继承、条件判断、变量声明等功能,因此可以通过较少的代码量生成JS样式文件,相应提高CSS样式的生成效率。
在步骤102中,根据脚本样式文件自动生成级联样式表CSS样式。
本公开可以预先在本地编译CSS样式,可以包括:对脚本样式文件进行本地编译生成若干CSS样式,将CSS样式保存到CSS样式列表中。
本公开也可以在浏览器加载网页过程中实时编译CSS样式,可以包括:将脚本样式文件嵌入到浏览器库中,在加载网页的HTML文件时,获取HTML文件中的HTML元素声明的样式类型,根据样式类型,实时编译浏览器库中的脚本样式文件生成目标CSS样式。
在步骤103中,通过CSS样式描述所加载网页中的超文本标记语言HTML元素。
如果步骤102中在本地编译CSS样式,则本步骤中可以在加载网页的HTML文件时,获取HTML文件中的HTML元素声明的样式类型,根据样式类型从CSS样式列表中查找目标CSS样式,将查找到的目标CSS样式应用到HTML元素上。
如果步骤102中在浏览器加载网页过程中实时编译CSS样式,则本步骤中可以将编译生成的目标CSS样式直接应用到所述HTML元素上。
由上述实施例可见,与相关技术中直接采用CSS语言生成CSS样式不同,本公开实施例利用高级脚本语言具有的高级功能预先定义脚本样式文件,并根据这些脚本样式文件自动生成CSS样式,由于脚本样式文件采用高级脚本语言定义,因此可以充分利用高级语言的继承、判断、变量声明等功能,因此在描述不同HTML元素时,无需预先生成大量的CSS样式,而是通过采用较少脚本语言代码定义的脚本样式文件就可以编译出不同的CSS样式,因此可以提高CSS样式的生成效率,相应降低了浏览器加载网页时对HTML元素的描述繁琐度,提高了网页加载速度。
如图2所示,图2是根据一示例性实施例示出的一种加载网页的方法流程图,该方法可以用于终端浏览器中,包括以下步骤:
在步骤201中,获取预先定义的JS样式文件。
本实施例中采用JavaScript预先定义用于生成CSS样式文件的JS样式文件,例如,style.js。由于JavaScript具有继承、条件判断、变量声明等功能,因此可以通过较少的代码量生成JS样式文件,相应提高CSS样式的生成效率。
在第一个示例中,采用JavaScript的继承功能字义JS样式文件:
可以先定义一个父类的JS样式文件:
上述JS样式文件中,定义了对象的颜色属性“color”的值为黑色“black”,文本位置属性“text-align”的值为居中“center”。
后续,定义子类的JS样式文件:
上述JS样式文件中,定义了对象的宽度属性“width”的值为100个像素“100px”,高度属性“height”的值为100个像素“100px”。
利用JavaScript的继承功能,使前述子类样式可以继承父类样式的属性:
//声明继承关系,ChildStyleSheet是ParentStyleSheet的一个子类
ChildStyleSheet.prototype=new ParentStyleSheet();
//生成一个子类样式的实例
var c=new ChildStyleSheet();
在第二个示例中,采用JavaScript的变量声明和判断功能定义JS样式文件:
var backgroundColor="black";
在步骤202中,对JS样式文件进行本地编译生成若干CSS样式。
虽然浏览器支持对JS样式文件的直接运行,但是本实施例在浏览器加载网页前,可以在本地对JS样式文件进行编译,即可以运行style.js文件,得到若干CSS样式文件style.css。
针对步骤201中的第一个示例,运行该第一个示例中的JS样式文件,可以生成如下CSS样式文件:
应用上述第一个示例中的JS文件,根据继承关系,如果若干CSS样式的颜色属性和文本位置属性均相同,而只有宽度属性和高度属性不同时,则无需为每个CSS样式重复定义相同的属性,而是通过定义一次JS文件,利用继承关系,生成上述CSS样式。
针对步骤201中的第二个示例,运行该第二个示例中的JS样式文件,可以生成如下CSS样式文件:
应用上述第二个示例中的JS文件,根据变量声明和条件判断功能,如果若干CSS样式均具有背景属性和颜色属性,但属性值不相同,则应用上述第二个示例中的JS文件,定义背景属性和颜色属性之间的关联关系,在生成具体的CSS样式时,为背景属性和颜色属性分别赋上不同的属性值,从而生成不同的CSS样式。
在步骤203中,将CSS样式保存到CSS样式列表中。
在步骤204中,在加载网页的HTML文件时,获取HTML文件中的HTML元素声明的样式类型。
在步骤205中,根据样式类型从CSS样式列表中查找目标CSS样式。
在步骤206中,将查找到的目标CSS样式应用到HTML元素上。
浏览器在加载网页时,通常解析HTML文件以重建DOM(Document ObjectModel,文档对象模型)树,即通过解析HTML文档,转换DOM树中的标签到DOM节点,每个DOM节点对应一个HTML元素,当一个新元素加入到DOM树中时,浏览器可以通过CSS引擎查遍CSS样式列表,找到符合该HTML元素所声明样式类型对应的CSS样式,并将找到的CSS样式应用到这个HTML元素上。
由上述实施例可见,与相关技术中直接采用CSS语言生成CSS样式不同,本实施例利用高级脚本语言具有的高级功能预先定义脚本样式文件,并根据这些脚本样式文件自动生成CSS样式。由于脚本样式文件采用高级脚本语言定义,可以充分利用高级语言的继承、判断、变量声明等功能,因此在描述不同HTML元素时,无需预先生成大量的CSS样式,而是通过采用较少脚本语言代码定义的脚本样式文件就可以编译出不同的CSS样式,提高CSS样式的生成效率,相应降低了浏览器加载网页时对HTML元素的描述繁琐度,提高了网页加载速度。本实施例基于预先定义的脚本样式文件,可以先在本地编译成若干CSS样式,以便浏览器在加载网页时,可以直接调用这些CSS样式对HTML元素进行描述,进一步提高网页加载速度。并且,本实施例中通过JavaScript生成JS样式文件,JavaScript是一种解释性脚本语言,其可以直接由浏览器调用,且广泛应用在HTML网页上,因此JS样式文件便于定义,通过JS样式文件生成各种CSS样式,可以有效提高CSS样式的生成效率。
如图3所示,图3是根据一示例性实施例示出的一种加载网页的方法的流程图,该方法可以用于终端浏览器中,包括以下步骤:
在步骤301中,获取预先定义的JS样式文件。
本实施例中采用JavaScript预先定义用于生成CSS样式文件的JS样式文件,例如,style.js。由于JavaScript具有继承、条件判断、变量声明等功能,因此可以通过较少的代码量生成JS样式文件,相应提高CSS样式的生成效率。
在步骤302中,将JS样式文件嵌入到浏览器库中。
浏览器库中通常保存可以由浏览器直接运行的代码资源,本实施例中,可以将步骤301中获取的JS样式文件直接嵌入到浏览器库中。
在步骤303中,在加载网页的HTML文件时,获取HTML文件中的HTML元素声明的样式类型。
在步骤304中,根据样式类型,实时编译浏览器库中的JS样式文件生成目标CSS样式。
在步骤305中,将编译生成的目标CSS样式应用到HTML元素上。
本实施例中基于浏览器库中已经嵌入的JS样式文件,在加载网页的过程中,解析HTML文件以重建DOM树,即通过解析HTML文档,转换DOM树中的标签到DOM节点,每个DOM节点对应一个HTML元素,当一个新元素加入到DOM树中时,浏览器可以找到符合该HTML元素所声明样式类型对应的JS样式文件,编译该JS样式文件即可得到对应的CSS样式,并将该CSS样式应用到这个HTML元素上。
例如,假设有一个HTML元素为a,在加载元素a时,在浏览器库中查找元素a声明的样式类型得到对应的JS样式文件的名称为“sample-a”,那么浏览器会将JS样式文件“sample-a”编译成CSS样式。由于元素a可能动态生成,而JS样式文件“sample-a”除了元素a,可能没有其他HTML元素引用,所以本实施例中无需预先在本地将JS样式文件编译成CSS样式,而是在元素a出现时,再实时根据JS样式文件生成CSS样式即可。
由上述实施例可见,与相关技术中直接采用CSS语言生成CSS样式不同,本实施例利用高级脚本语言具有的高级功能预先定义脚本样式文件,并根据这些脚本样式文件自动生成CSS样式,由于脚本样式文件采用高级脚本语言定义,因此可以充分利用高级语言的继承、判断、变量声明等功能,因此在描述不同HTML元素时,无需预先生成大量的CSS样式,而是通过采用较少脚本语言代码定义的脚本样式文件就可以编译出不同的CSS样式,因此可以提高CSS样式的生成效率,相应降低了浏览器加载网页时对HTML元素的描述繁琐度,提高了网页加载速度;本实施例基于预先定义的脚本样式文件,浏览器也可以在网页加载过程中,实时编译脚本样式文件,以对HTML元素进行描述,虽然相关技术中有通过对CSS语言进行扩展的特定语言编写CSS样式,例如,less语言,sass语言等,但是采用上述语言定义的CSS样式无法由浏览器直接运行,而由于浏览器上提供了脚本样式文件的运行,因此本公开定义的脚本样式文件可以应用在不同浏览器加载网页的过程中,编译方式灵活;并且,本实施例可以是通过JavaScript生成的JS样式文件,JavaScript是一种解释性脚本语言,其可以直接由浏览器调用,且广泛应用在HTML网页上,因此JS样式文件便于定义,通过JS样式文件生成各种CSS样式,可以有效提高CSS样式的生成效率。
与前述加载网页的方法实施例相对应,本公开还提供了加载网页的装置实施例。
如图4所示,图4是本公开根据一示例性实施例示出的一种加载网页的装置框图,所述装置包括:获取单元41、生成单元42和加载单元43。
其中,获取单元41,被配置为获取预先定义的脚本样式文件;
生成单元42,被配置为根据所述脚本样式文件自动生成级联样式表CSS样式;
加载单元43,被配置为通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。
由上述实施例可见,与相关技术中直接采用CSS语言生成CSS样式不同,本实施例利用高级脚本语言具有的高级功能预先定义脚本样式文件,并根据这些脚本样式文件自动生成CSS样式,由于脚本样式文件采用高级脚本语言定义,因此可以充分利用高级语言的继承、判断、变量声明等功能,因此在描述不同HTML元素时,无需预先生成大量的CSS样式,而是通过采用较少脚本语言代码定义的脚本样式文件就可以编译出不同的CSS样式,因此可以提高CSS样式的生成效率,相应降低了浏览器加载网页时对HTML元素的描述繁琐度,提高了网页加载速度。
如图5所示,图5是本公开根据一示例性实施例示出的另一种加载网页的装置框图,该实施例在前述图4所示实施例的基础上,所述生成单元42可以包括:本地编译子单元421和样式保存子单元422。
其中,本地编译子单元421,被配置为对所述脚本样式文件进行本地编译生成若干CSS样式;
样式保存子单元422,被配置为将所述CSS样式保存到CSS样式列表中。
如图6所示,图6是本公开根据一示例性实施例示出的另一种加载网页的装置框图,该实施例在前述图5所示实施例的基础上,所述加载单元43可以包括:第一类型获取子单元431、样式查找子单元432和第一样式应用子单元433。
其中,第一类型获取子单元431,被配置为在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
样式查找子单元432,被配置为根据所述样式类型从所述CSS样式列表中查找目标CSS样式;
第一样式应用子单元433,被配置为将查找到的目标CSS样式应用到所述HTML元素上。
上述图5和图6示出的实施例中,基于预先定义的脚本样式文件,可以先在本地编译成若干CSS样式,以便浏览器在加载网页时,可以直接调用这些CSS样式对HTML元素进行描述,进一步提高网页加载速度。
如图7所示,图7是本公开根据一示例性实施例示出的另一种加载网页的装置框图,该实施例在前述图4所示实施例的基础上,所述生成元42可以包括:样式嵌入子单元423、第二类型获取子单元424和实时编译子单元425。
其中,样式嵌入子单元423,被配置为将所述脚本样式文件嵌入到浏览器库中;
第二类型获取子单元424,被配置为在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
实时编译子单元425,被配置为根据所述样式类型,实时编译所述浏览器库中的脚本样式文件生成目标CSS样式。
如图8所示,图8是本公开根据一示例性实施例示出的另一种加载网页的装置框图,该实施例在前述图7所示实施例的基础上,所述生成单元43可以包括:第二样式应用子单元434。
其中,第二样式应用子单元434,被配置为将编译生成的目标CSS样式应用到所述HTML元素上。
上述图7和图8示出的实施例中,基于预先定义的脚本样式文件,浏览器也可以在网页加载过程中,实时编译脚本样式文件,以对HTML元素进行描述,虽然相关技术中有通过对CSS语言进行扩展的特定语言编写CSS样式,例如,less语言,sass语言等,但是采用上述语言定义的CSS样式无法由浏览器直接运行,而由于浏览器上提供了脚本样式文件的运行,因此本公开定义的脚本样式文件可以应用在不同浏览器加载网页的过程中,编译方式灵活。
可选的,上述图4至图9示出的装置实施例中,获取单元41获取的脚本样式文件可以包括:通过JavaScript生成的JS样式文件。JavaScript是一种解释性脚本语言,其可以直接由浏览器调用,且广泛应用在HTML网页上,因此JS样式文件便于定义,通过JS样式文件生成各种CSS样式,可以有效提高CSS样式的生成效率。
上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程,在此不再赘述。
对于装置实施例而言,由于其基本对应于方法实施例,所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
如图9所示,图9是本公开根据一示例性实施例示出的一种用于加载网页的装置900的另一结构示意图。例如,装置900可以是具有路由功能的移动电话,计算机,数字广播终端,消息收发设备,游戏控制台,平板设备,医疗设备,健身设备,个人数字助理等。
参照图9,装置900可以包括以下一个或多个组件:处理组件902,存储器904,电源组件906,多媒体组件908,音频组件910,输入/输出(I/O)的接口912,传感器组件914,以及通信组件916。
处理组件902通常控制装置900的整体操作,诸如与显示,电话呼叫,数据通信,相机操作和记录操作相关联的操作。处理组件902可以包括一个或多个处理器920来执行指令,以完成上述的方法的全部或部分步骤。此外,处理组件902可以包括一个或多个模块,便于处理组件902和其他组件之间的交互。例如,处理组件902可以包括多媒体模块,以方便多媒体组件908和处理组件902之间的交互。
存储器904被配置为存储各种类型的数据以支持在装置900的操作。这些数据的示例包括用于在装置900上操作的任何应用程序或方法的指令,联系人数据,电话簿数据,消息,图片,视频等。存储器904可以由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。
电源组件906为装置900的各种组件提供电力。电源组件906可以包括电源管理***,一个或多个电源,及其他与为装置900生成、管理和分配电力相关联的组件。
多媒体组件908包括在所述装置900和用户之间的提供一个输出接口的屏幕。在一些实施例中,屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板,屏幕可以被实现为触摸屏,以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界,而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中,多媒体组件908包括一个前置摄像头和/或后置摄像头。当装置900处于操作模式,如拍摄模式或视频模式时,前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。
音频组件910被配置为输出和/或输入音频信号。例如,音频组件910包括一个麦克风(MIC),当装置900处于操作模式,如呼叫模式、记录模式和语音识别模式时,麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器904或经由通信组件916发送。在一些实施例中,音频组件910还包括一个扬声器,用于输出音频信号。
I/O接口912为处理组件902和***接口模块之间提供接口,上述***接口模块可以是键盘,点击轮,按钮等。这些按钮可包括但不限于:主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件914包括一个或多个传感器,用于为装置900提供各个方面的状态评估。例如,传感器组件914可以检测到装置900的打开/关闭状态,组件的相对定位,例如所述组件为装置900的显示器和小键盘,传感器组件914还可以检测装置900或装置900一个组件的位置改变,用户与装置900接触的存在或不存在,装置900方位或加速/减速和装置900的温度变化。传感器组件914可以包括接近传感器,被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件914还可以包括光传感器,如CMOS或CCD图像传感器,用于在成像应用中使用。在一些实施例中,该传感器组件914还可以包括加速度传感器,陀螺仪传感器,磁传感器,压力传感器,微波传感器或温度传感器。
通信组件916被配置为便于装置900和其他设备之间有线或无线方式的通信。装置900可以接入基于通信标准的无线网络,如WiFi,2G或3G,或它们的组合。在一个示例性实施例中,通信组件916经由广播信道接收来自外部广播管理***的广播信号或广播相关信息。在一个示例性实施例中,所述通信组件916还包括近场通信(NFC)模块,以促进短程通信。例如,在NFC模块可基于射频识别(RFID)技术,红外数据协会(IrDA)技术,超宽带(UWB)技术,蓝牙(BT)技术和其他技术来实现。
在示例性实施例中,装置900可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现,用于执行上述方法。
在示例性实施例中,还提供了一种包括指令的非临时性计算机可读存储介质,例如包括指令的存储器904,上述指令可由装置900的处理器920执行以完成上述方法。例如,所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
一种非临时性计算机可读存储介质,当所述存储介质中的指令由终端的处理器执行时,使得终端能够执行一种加载网页的方法,所述方法包括:获取预先定义的脚本样式文件;根据所述脚本样式文件自动生成级联样式表CSS样式;通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (13)

1.一种加载网页的方法,其特征在于,包括:
获取预先定义的脚本样式文件;
根据所述脚本样式文件自动生成级联样式表CSS样式;
通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。
2.根据权利要求1所述的方法,其特征在于,所述根据所述脚本样式文件自动生成CSS样式包括:
对所述脚本样式文件进行本地编译生成若干CSS样式;
将所述CSS样式保存到CSS样式列表中。
3.根据权利要求2所述的方法,其特征在于,所述通过所述CSS样式描述所加载网页中的HTML元素包括:
在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
根据所述样式类型从所述CSS样式列表中查找目标CSS样式;
将查找到的目标CSS样式应用到所述HTML元素上。
4.根据权利要求1所述的方法,其特征在于,所述根据所述脚本样式文件自动生成CSS样式包括:
将所述脚本样式文件嵌入到浏览器库中;
在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
根据所述样式类型,实时编译所述浏览器库中的脚本样式文件生成目标CSS样式。
5.根据权利要求4所述的方法,其特征在于,所述通过所述CSS样式描述所述网页中的HTML元素包括:
将编译生成的目标CSS样式应用到所述HTML元素上。
6.根据权利要求1至5任意一项所述的方法,其特征在于,所述脚本样式文件包括:通过JavaScript生成的JS样式文件。
7.一种加载网页的装置,其特征在于,包括:
获取单元,用于获取预先定义的脚本样式文件;
生成单元,用于根据所述脚本样式文件自动生成级联样式表CSS样式;
加载单元,用于通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。
8.根据权利要求7所述的装置,其特征在于,所述生成单元包括:
本地编译子单元,用于对所述脚本样式文件进行本地编译生成若干CSS样式;
样式保存子单元,用于将所述CSS样式保存到CSS样式列表中。
9.根据权利要求8所述的装置,其特征在于,所述加载单元包括:
第一类型获取子单元,用于在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
样式查找子单元,用于根据所述样式类型从所述CSS样式列表中查找目标CSS样式;
第一样式应用子单元,用于将查找到的目标CSS样式应用到所述HTML元素上。
10.根据权利要求7所述的装置,其特征在于,所述生成单元包括:
样式嵌入子单元,用于将所述脚本样式文件嵌入到浏览器库中;
第二类型获取子单元,用于在加载网页的HTML文件时,获取所述HTML文件中的HTML元素声明的样式类型;
实时编译子单元,用于根据所述样式类型,实时编译所述浏览器库中的脚本样式文件生成目标CSS样式。
11.根据权利要求10所述的装置,其特征在于,所述加载单元包括:
第二样式应用子单元,用于将编译生成的目标CSS样式应用到所述HTML元素上。
12.根据权利要求7至11任意一项所述的装置,其特征在于,所述脚本样式文件包括:通过JavaScript生成的JS样式文件。
13.一种加载网页的装置,其特征在于,包括:
处理器;
用于存储处理器可执行指令的存储器;
其中,所述处理器被配置为:
获取预先定义的脚本样式文件;
根据所述脚本样式文件自动生成级联样式表CSS样式;
通过所述CSS样式描述所加载网页中的超文本标记语言HTML元素。
CN201410302936.XA 2014-06-27 2014-06-27 加载网页的方法及装置 Pending CN104133844A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410302936.XA CN104133844A (zh) 2014-06-27 2014-06-27 加载网页的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410302936.XA CN104133844A (zh) 2014-06-27 2014-06-27 加载网页的方法及装置

Publications (1)

Publication Number Publication Date
CN104133844A true CN104133844A (zh) 2014-11-05

Family

ID=51806522

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410302936.XA Pending CN104133844A (zh) 2014-06-27 2014-06-27 加载网页的方法及装置

Country Status (1)

Country Link
CN (1) CN104133844A (zh)

Cited By (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104462249A (zh) * 2014-11-19 2015-03-25 北京奇虎科技有限公司 网页加载方法和装置
CN105677654A (zh) * 2014-11-18 2016-06-15 广州市动景计算机科技有限公司 广告过滤方法及装置
CN105989126A (zh) * 2015-02-15 2016-10-05 阿里巴巴集团控股有限公司 一种网页显示方法及装置
CN106293552A (zh) * 2016-07-28 2017-01-04 上海爱数信息技术股份有限公司 一种浏览器防打印方法及***
CN106375188A (zh) * 2016-08-30 2017-02-01 腾讯科技(深圳)有限公司 一种呈现互动表情的方法、装置以及***
CN106407279A (zh) * 2016-08-26 2017-02-15 乐视控股(北京)有限公司 网页样式设置处理方法及装置
CN106598616A (zh) * 2016-12-21 2017-04-26 福建中金在线信息科技有限公司 一种Less库的封装方法及装置
CN107329747A (zh) * 2017-06-20 2017-11-07 福建中金在线信息科技有限公司 一种生成多主题样式的方法及装置
CN109189388A (zh) * 2018-08-15 2019-01-11 深圳市轱辘汽车维修技术有限公司 页面配置方法、服务器及计算机可读介质
CN109190069A (zh) * 2018-08-01 2019-01-11 北京空中优宜信息技术有限公司 一种网页元素样式管理方法、装置及电子设备
CN109445780A (zh) * 2018-09-19 2019-03-08 平安科技(深圳)有限公司 一种样式编辑方法及设备
CN110020316A (zh) * 2017-12-22 2019-07-16 航天信息股份有限公司 一种列表的显示方法及装置
CN110275713A (zh) * 2019-07-02 2019-09-24 四川长虹电器股份有限公司 一种Java虚拟机后端编译的改进方法
CN112231619A (zh) * 2020-10-15 2021-01-15 北京三快在线科技有限公司 转换方法、装置、电子设备及存储介质
CN114154092A (zh) * 2021-11-18 2022-03-08 网易有道信息技术(江苏)有限公司 用于对网页进行翻译的方法及其相关产品

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030192026A1 (en) * 2000-12-22 2003-10-09 Attila Szepesvary Methods and apparatus for grammar-based recognition of user-interface objects in HTML applications
CN102662672A (zh) * 2012-04-05 2012-09-12 广州市动景计算机科技有限公司 对网页进行换肤处理的方法和装置以及移动终端

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030192026A1 (en) * 2000-12-22 2003-10-09 Attila Szepesvary Methods and apparatus for grammar-based recognition of user-interface objects in HTML applications
CN102662672A (zh) * 2012-04-05 2012-09-12 广州市动景计算机科技有限公司 对网页进行换肤处理的方法和装置以及移动终端

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
赵春红 等: "LESS CSS框架简介", 《HTTP://WWW.IBM.COM/DEVELOPERWORKS/CN/WEB/1207_ZHAOCH_LESSCSS/#ICOMMENTS》 *

Cited By (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105677654A (zh) * 2014-11-18 2016-06-15 广州市动景计算机科技有限公司 广告过滤方法及装置
CN105677654B (zh) * 2014-11-18 2020-07-03 阿里巴巴(中国)有限公司 广告过滤方法及装置
CN104462249A (zh) * 2014-11-19 2015-03-25 北京奇虎科技有限公司 网页加载方法和装置
CN104462249B (zh) * 2014-11-19 2019-02-12 北京奇虎科技有限公司 网页加载方法和装置
CN105989126A (zh) * 2015-02-15 2016-10-05 阿里巴巴集团控股有限公司 一种网页显示方法及装置
CN105989126B (zh) * 2015-02-15 2019-10-01 阿里巴巴集团控股有限公司 一种网页显示方法及装置
CN106293552A (zh) * 2016-07-28 2017-01-04 上海爱数信息技术股份有限公司 一种浏览器防打印方法及***
CN106407279A (zh) * 2016-08-26 2017-02-15 乐视控股(北京)有限公司 网页样式设置处理方法及装置
CN106375188A (zh) * 2016-08-30 2017-02-01 腾讯科技(深圳)有限公司 一种呈现互动表情的方法、装置以及***
CN106375188B (zh) * 2016-08-30 2020-11-17 腾讯科技(深圳)有限公司 一种呈现互动表情的方法、装置以及***
CN106598616A (zh) * 2016-12-21 2017-04-26 福建中金在线信息科技有限公司 一种Less库的封装方法及装置
CN107329747A (zh) * 2017-06-20 2017-11-07 福建中金在线信息科技有限公司 一种生成多主题样式的方法及装置
CN110020316A (zh) * 2017-12-22 2019-07-16 航天信息股份有限公司 一种列表的显示方法及装置
CN109190069A (zh) * 2018-08-01 2019-01-11 北京空中优宜信息技术有限公司 一种网页元素样式管理方法、装置及电子设备
CN109189388A (zh) * 2018-08-15 2019-01-11 深圳市轱辘汽车维修技术有限公司 页面配置方法、服务器及计算机可读介质
CN109445780A (zh) * 2018-09-19 2019-03-08 平安科技(深圳)有限公司 一种样式编辑方法及设备
CN110275713A (zh) * 2019-07-02 2019-09-24 四川长虹电器股份有限公司 一种Java虚拟机后端编译的改进方法
CN112231619A (zh) * 2020-10-15 2021-01-15 北京三快在线科技有限公司 转换方法、装置、电子设备及存储介质
CN114154092A (zh) * 2021-11-18 2022-03-08 网易有道信息技术(江苏)有限公司 用于对网页进行翻译的方法及其相关产品

Similar Documents

Publication Publication Date Title
CN104133844A (zh) 加载网页的方法及装置
CN107153541B (zh) 浏览交互处理方法及装置
JP5956725B2 (ja) コンテキスト認識型ヘルプ・コンテンツを提供する方法、デバイス、及びコンピュータ・プログラム製品
CN106155517B (zh) 移动终端及其控制方法
CN103914523A (zh) 页面回退控制方法及装置
CN109032606A (zh) 原生应用程序的编译处理方法、装置及终端
CN104303181B (zh) 相机导引的网络浏览
CN108287918B (zh) 基于应用页面的音乐播放方法、装置、存储介质和电子设备
KR101855147B1 (ko) 사용자 선호도 분석 방법 및 그를 위한 디바이스
CN104246659A (zh) 可实例化的手势对象
US20200258517A1 (en) Electronic device for providing graphic data based on voice and operating method thereof
CN108287919B (zh) 网页应用的访问方法、装置、存储介质及电子设备
US20130036196A1 (en) Method and system for publishing template-based content
US20130080891A1 (en) Recording events generated for performing a task through user equipment
CN111191176B (zh) 网站内容更新方法、装置、终端及存储介质
CN110262904B (zh) 数据采集方法及装置
US20180024976A1 (en) Annotation providing method and device
CN104111979A (zh) 搜索推荐方法和装置
CN104361021A (zh) 网页编码识别方法及装置
CN104182505B (zh) 网页重排方法和装置
CN104636170A (zh) 应用程序的获取方法及装置、电子设备
KR102519637B1 (ko) 문자를 입력하기 위한 전자 장치 및 그의 동작 방법
CN105786944A (zh) 浏览器自动翻页的处理方法和装置
CN102937963A (zh) 使用协议处理程序的模板和服务器内容下载
CN104035977A (zh) 网页加载方法及装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20141105

RJ01 Rejection of invention patent application after publication