CN112463152A

CN112463152A - 一种基于ast的网页适配方法及装置

Info

Publication number: CN112463152A
Application number: CN202011426538.0A
Authority: CN
Inventors: 张淼
Original assignee: Shenzhen Saiante Technology Service Co Ltd
Current assignee: Shenzhen Saiante Technology Service Co Ltd
Priority date: 2020-12-09
Filing date: 2020-12-09
Publication date: 2021-03-09

Abstract

本申请实施例涉及数据处理技术领域，提供了一种基于抽象语法树AST的网页适配方法及装置，包括：服务器将第一网页的超文本标记语言HTML数据解析为对应的文档对象模型DOM，所述DOM包括所述HTML数据的标签和多层节点；所述服务器将所述DOM转换为AST；所述服务器根据所述AST生成第二网页，所述第一网页为在第一终端设备显示的网页，所述第二网页为在第二终端设备显示的网页，所述第一网页与所述第二网页的尺寸不同。本申请实施例，可以提高网页适配速率。

Description

一种基于AST的网页适配方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种基于抽象语法树(abstract syntaxtree，AST)的网页适配方法及装置。

背景技术

随着互联网的普及，人们可以在各种不同尺寸的终端设备浏览网页，例如，笔记本电脑、台式机电脑、平板电脑、手机等。不同终端设备的显示器屏幕大小可能是不同的，显示器屏幕大小的不同可能会影响网页的显示效果。因此，如何在不同尺寸显示器屏幕下都能正确展示网页内容成为了对网页开发的基本要求。

对网页的开发，通常是做响应式开发，即在文档对象模型(document objectmodel，DOM)层面，通过大量的层叠样式表(cascading style sheets，CSS)代码对页面元素做适配。在DOM层面去对页面元素进行大量的适配转换时，由于代码冗余，致使网页适配速率较低。

发明内容

鉴于上述问题，本申请提出了一种基于AST的网页适配方法及装置，可以提高网页适配速率。

第一方面，本申请实施例提供了一种基于AST的网页适配方法，可以包括：服务器将第一网页的超文本标记语言HTML数据解析为对应的文档对象模型DOM，所述DOM包括所述HTML数据的标签和多层节点；所述服务器将所述DOM转换为AST；所述服务器根据所述AST生成第二网页，所述第一网页为在第一终端设备显示的网页，所述第二网页为在第二终端设备显示的网页，所述第一网页与所述第二网页的尺寸不同。

在本申请实施例中，服务器可以将第一网页的HTML数据解析为对应的DOM，该DOM可以包括HTML数据的标签和多层节点，将DOM转换为AST，再根据AST生成第二网页。服务器通过将第一网页的HTML数据对应的DOM转换为AST，从而可以不在DOM层面做适配，实现在js脚本语言层面对网页的屏幕适配，提高网页适配的速率。

在一种可能实现的方式中，所述将所述DOM元素转换为AST元素包括：获取CSS属性与DOM元素之间的对应关系；确定所述AST元素，所述AST元素包括所述对应关系。

在一种可能实现的方式中，所述服务器将所述DOM转换为AST包括：所述服务器遍历所述多层节点中每层节点的子元素，得到所述每层节点对应的标签数组，所述每层节点对应的标签数组包括所述每层节点的子元素、所述每层节点的子元素的标签和所述每层节点的子元素的属性；对所述每层节点对应的标签数组进行正则匹配得到所述每层节点对应的对象数组；根据所述每层节点对应的对象数组确定多层节点对应的对象数组。

在一种可能实现的方式中，所述服务器根据所述AST生成第二网页包括：所述服务器设置所述AST的根节点的字体尺寸属性；所述服务器根据所述多层节点对应的对象数组和所述AST的根节点的字体尺寸属性生成所述第二网页。

在一种可能实现的方式中，所述服务器设置所述AST的根节点的字体尺寸属性包括：所述服务器获取所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度；所述服务器根据所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度设置所述AST的根节点的字体尺寸属性。

在一种可能实现的方式中，所述服务器根据所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度设置所述AST的根节点的字体尺寸属性包括：所述服务器确定所述第二网页的设计稿宽度与预设属性值之间的比值为相对宽度；所述服务器确定所述第二终端设备的屏幕宽度与所述相对宽度之间的比值为所述AST的根节点的字体尺寸属性。

在一种可能实现的方式中，所述根节点为所述HTML数据的根元素<html>，所述字体尺寸属性为所述根元素<html>的font-size属性。

在一种可能实现的方式中，该网页适配方法还包括：所述服务器向所述第二终端设备发送所述第二网页。

第二方面，本申请实施例提供了一种网页适配装置，该网页适配装置可以应用于服务器，其中，该网页适配装置包括：

解析单元，用于将第一网页的超文本标记语言HTML数据解析为对应的文档对象模型DOM，所述DOM包括所述HTML数据的标签和多层节点；

转换单元，用于将所述DOM转换为AST；

生成单元，用于根据所述AST生成第二网页，所述第一网页为在第一终端设备显示的网页，所述第二网页为在第二终端设备显示的网页，所述第一网页与所述第二网页的尺寸不同。

在一种可能实现的方式中，所述转换单元将所述DOM转换为AST，具体用于：

遍历所述多层节点中每层节点的子元素，得到所述每层节点对应的标签数组，所述每层节点对应的标签数组包括所述每层节点的子元素、所述每层节点的子元素的标签和所述每层节点的子元素的属性；

对所述每层节点对应的标签数组进行正则匹配得到所述每层节点对应的对象数组；

根据所述每层节点对应的对象数组确定多层节点对应的对象数组。

在一种可能实现的方式中，所述生成单元根据所述AST生成第二网页，具体用于：

设置所述AST的根节点的字体尺寸属性；

根据所述多层节点对应的对象数组和所述AST的根节点的字体尺寸属性生成所述第二网页。

在一种可能实现的方式中，所述生成单元设置所述AST的根节点的字体尺寸属性，具体用于：

获取所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度；

根据所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度设置所述AST的根节点的字体尺寸属性。

在一种可能实现的方式中，所述生成单元根据所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度设置所述AST的根节点的字体尺寸属性，具体用于：

确定所述第二网页的设计稿宽度与预设属性值之间的比值为相对宽度；

确定所述第二终端设备的屏幕宽度与所述相对宽度之间的比值为所述AST的根节点的字体尺寸属性。

在一种可能实现的方式中，该网页适配装置还包括：

发送单元，用于向所述第二终端设备发送所述第二网页。

第三方面，本申请实施例提供了一种网页适配装置，该网页适配装置包括处理器和存储器，所述处理器和存储器耦合，其中，所述存储器用于存储计算机指令，所述处理器通过执行所述存储器存储的计算机指令，使得该网页适配装置执行第一方面或第一方面的任一种实施例所提供的网页适配方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质中存储有计算机程序或计算机指令，当该计算机程序或该计算机指令被计算机设备运行时，使得该计算机设备实现如第一方面或第一方面的任一种实施例所提供的网页适配方法。

第五方面，本申请实施例提供了一种计算机程序产品，当其在计算机上运行时，使得计算机执行第一方面或第一方面的任一可能实现方式所提供的网页适配方法。

附图说明

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

图1是本申请实施例提供的一种网页适配的***架构的示意图；

图2是本申请实施例提供的一种网页适配的方法流程示意图；

图3是本申请实施例提供的一种AST树状结构的示意图；

图4是本申请实施例提供的一种网页适配装置的结构示意图；

图5是本申请实施例提供的另一种网页适配装置的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例进行描述。

本申请的说明书和权利要求书及所述附图中的术语“第一”、“第二”、“第三”和“第四”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、***、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

在本说明书中使用的术语“部件”、“模块”、“***”等用于表示计算机相关的实体、硬件、固件、硬件和软件的组合、软件、或执行中的软件。例如，部件可以是但不限于，在处理器上运行的进程、处理器、对象、可执行文件、执行线程、程序和/或计算机。通过图示，在计算设备上运行的应用和计算设备都可以是部件。一个或多个部件可驻留在进程和/或执行线程中，部件可位于一个计算机上和/或分布在2个或更多个计算机之间。此外，这些部件可从在上面存储有各种数据结构的各种计算机可读介质执行。部件可例如根据具有一个或多个数据分组(例如来自与本地***、分布式***和/或网络间的另一部件交互的二个部件的数据，例如通过信号与其它***交互的互联网)的信号通过本地和/或远程进程来通信。

首先，对本申请中的部分用语进行解释说明，以便于本领域技术人员理解。

(1)AST

在计算机科学中，抽象语法树(abstract syntax tree，AST)，或简称语法树(syntax tree)，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。这所以说是抽象的，是因为抽象语法树并不会表示出真实语法出现的每一个细节，比如说，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现。抽象语法树并不依赖于源语言的语法，也就是说语法分析阶段所采用的上下文无文法。因为在写文法时，经常会对文法进行等价的转换(例如消除左递归、回溯、二义性等)，这样会给文法分析引入一些多余的成分，对后续阶段造成不利影响，甚至会使各个阶段变得混乱。因为，很多编译器经常要独立地构造语法分析树，为前端和后端建立一个清晰的接口。抽象语法树在很多领域有广泛的应用，例如浏览器、智能编辑器和编译器等。

(2)DOM

文档对象模型(document object model，简称DOM)，是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(applicationprogramming interface，API)，它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML和可扩展标记语言(extensible markup language，XML)文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的简单应用程序接口(simple API for XML，SAX)，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

(3)JSON

JSON(JavaScript object notation，JS对象简谱)是一种轻量级的数据交换格式。它基于欧洲计算机协会制定的js规范(ECMA Script)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。在易于人阅读和编写的同时，也易于机器解析和生成，并有效地提升网络传输效率。

(4)网络爬虫

网络爬虫(又称为网页蜘蛛，网络机器人，在FOAF社区中间，更经常的称为网页追逐者)，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟程序或者蠕虫。

网页应用一般分为个人计算机(personal computer，PC)端和移动端，对于网页的多端应用，则是各个网站产品的重点，网页适配也是前端开发的重中之重。对于网页适配，通常可以对网页做响应式开发，动态媒体查询，或者是PC端和移动端各做一套开发。但是，这几种方式都面临着开发量大、兼容性适配难、代码重复开发以及复用性不高的问题。导致这些问题的主要原因是由于传统的网页适配方法是在页面元素DOM层面开发，通过大量的CSS代码做适配。而在DOM层面去对页面元素进行大量的适配转换，不仅会使代码冗余繁琐，还会消耗网页的性能，从而导致网页适配的速率不高。

基于上述问题，本申请提供了一种基于AST的网页适配方法及装置。服务器通过将第一网页的HTML数据解析为对应的DOM，DOM包括HTML数据的标签和多层节点；将DOM转换为AST；再根据AST生成第二网页，其中，第一网页为在第一终端设备显示的网页，第二网页为在第二终端设备显示的网页，第一网页与第二网页的尺寸不同。服务器通过将第一网页的HTML数据对应的DOM转换为AST，从而可以不在DOM层面做适配，实现在js脚本语言层面对网页的屏幕适配，可以提高网页适配的速率。

为了更好地理解本申请实施例提供的一种基于AST的网页适配方法，先对本申请实施例所基于的其中一种网页适配的***架构进行描述。

请参考图1，图1是本申请实施例提供的一种网页适配的***架构的示意图。本申请实施例的方法可以应用于如图1所示的由第一终端设备101、服务器102和第二终端设备103所构成的***架构中。如图1所示，服务器102可以通过网络与第一终端设备101和第二终端设备103进行连接，所述网络包括但不限于企业内部网(Intranet)、互联网(Internet)、全球移动通讯***(global system of mobile communication，GSM)、宽带码分多址(wideband code division multiple access，WCDMA)、广域网、城域网、局域网、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

第一终端设备101，设置有网页编辑器和输入设备，用于开发人员利用输入设备与网页编辑器进行交互操作后完成第一网址对应的第一网页，上传第一网页至服务器102，服务器102获取到第二终端设备103的请求后，对第一网页做网页适配得到第二网页，使其适配于第二终端设备103的宽度，将该第二网页发送给第二终端设备103，从而第二终端设备103可以正确显示第二网页。

其中，第二终端设备103可以使用全球广域网(world wide web，web)前端技术显示网页，web前端技术可以包括：HTML、CSS以及JavaScript(一种解释性脚本语言，主要用于向HTML页面添加交互行为)。其中高效利用CSS还原设计稿一直是比较重要的环节，在使用相同HTML技术以及JavaScript技术的网页中添加不同CSS，则客户端展示的该网页是不相同的。示例性的，使用web前端技术的开发产品可以为任一网站的H5网页页面。其中，H5页面指的是使用HTML5开发的网页。需要说明的是，本申请实施例中用于展现网页的网页样式的样式表包含但不限定于CSS，例如CSS3等，具体不受本申请实施例的限制。第一终端设备101和第二终端设备103可以包括但不限于任何一种基于智能操作***的电子产品，其可与用户通过键盘、虚拟键盘、触摸板、触摸屏以及声控设备等输入设备来进行人机交互，诸如移动电话、智能手机、笔记本电脑、数字广播接收器、个人数字助理(personal digitalassistant，PDA)、平板电脑(portable android device，PAD)、便携式多媒体播放器(portable media player，PMP)、导航装置等的可移动设备，以及诸如数字TV、台式计算机、笔记本、服务器等等的固定终端。其中，智能操作***包括但不限于任何通过向移动设备提供各种移动应用来丰富设备功能的操作***，例如本申请实施例中的智能操作***可以为Android，也即本申请实施例中的终端设备可以为Android设备。可选地，本申请提供的风险评估方法还可以应用于iOS^TM和Windows Phone^TM等其他智能操作***的终端设备，本申请实施例对此不作具体限定。

服务器102可以包括但不限于后台服务器、组件服务器、数据处理服务器、处理插件等，服务器102可以通过互联网与多个终端设备进行通信，服务器上也需要运行有相应的服务器端程序来提供相应数据处理服务。例如，服务器可以将第一网页的HTML数据解析为对应的DOM，将DOM转换为AST，根据AST生成网页等。

应理解，图1的网页适配***架构只是本申请实施例中的部分示例性的实施方式，本申请实施例中的网页适配***架构包括但不仅限于以上网页适配***架构。

基于图1所示的网页适配的***架构，请参阅图2，图2是本申请实施例提供的一种网页适配方法的流程示意图。其中，该网页适配方法是从服务器和第二终端设备交互的角度来描述的。如图2所示，该网页适配方法可以包括以下步骤。

201、服务器将第一网页的HTML数据解析为对应的DOM。

服务器可以将第一网页的HTML数据解析为对应的DOM。首先，服务器可以先爬取第一网页的HTML数据：第二终端设备可以接收用户输入的第一网址信息的指令后，将第一网址信息发送给服务器，服务器可以根据该第一网址信息爬取到第一网页的HTML数据。

可选的，服务器可以接收来自第二终端设备的请求消息，该请求消息用于请求获取第一网址对应的第二网页，服务器可以对该请求消息进行解析之后获取到第一网址信息，再根据第一网址信息爬取到第一网页的HTML数据。其中，第一网址对应第一网页和第二网页，第一网页为第一终端设备显示的网页，第二网页为第二终端设备显示的网页，第一网页和第二网页的尺寸不同。

服务器爬取到第一网页的HTML数据之后，将第一网页的HTML数据解析为对应的DOM。具体的：HTML数据是由很多标签组成的，标签可以包括<html>、<head>、<body>、<div>、<span>等。这些标签是嵌套的，一层套一层，例如<html>套<body>、<body>套<div>、<div>套<span>等。解析的时候，可以一层一层进行解析，把每个标签抽象成代码里的对象，按照这种层次分明的组织结构解析就可以得到对应的DOM。其中，DOM包括第一网页的HTML数据的标签和多层节点，例如，HTML数据中标签<html>为DOM的根节点，HTML数据中的标签<body>为DOM的子节点，即<body>为<html>的子节点。

202、服务器将DOM转换为AST。

服务器将第一网页的HTML数据解析为对应的DOM之后，可以将DOM转换为AST。DOM转换为AST，可以理解为，把DOM多层节点进行逐层逐层的拆分，把一个DOM结构按属性拆分为一个个小的模块，并把各个模块用js对象表述出来。其中，AST包括HTML数据的对象和多层节点。具体的：

服务器可以遍历DOM中多层节点中的每层节点的子元素，得到每层节点对应的标签数组，每层节点对应的标签数组可以包括每层节点的子元素、每层节点的子元素的标签和每层节点的子元素的属性。例如：可以对传入的HTML数据字符串按标签进行循环遍历，以‘<xxx’进行字符串分割，再用正则匹配当前的结束标签是否为‘</xxx>’，得到各个子元素的标签数组，该标签数组例如[‘<div class＝‘xxx’>xxx</div>’,‘<span style＝‘xxx’>xxx</span>’…]。

可以对每层节点的标签数组进行语义分析，具体的：对每层节点的标签数组进行正则匹配得到每层节点的对象数组，该对象数组可以包括标签名(tagName)、标签id、标签样式类(class)、标签行内样式(style)、标签属性(attr)等。例如，{‘tagName’：‘xxx’,‘id’:‘xxx’,‘className’:‘xxx’,‘style’:‘xxx’,‘attr’:‘xxx’…}。

根据每层节点对应的对象数组确定多层节点的对应的对象数组，这样就可以将DOM转换成为AST。

可选的，服务器还可以对某些标签做特殊处理。例如，对于标签<input>，由于该标签自带的属性，每个浏览器对该标签的实现方式是不一样的，可以对该标签加一个兼容前缀，使得该标签可以兼容各个浏览器。服务器还可以兼容双端标签之间的初始化差异，例如<img><input>等，达到动态计算像素，实现一个类响应式的网页。

可选的，服务器还可以获取DOM的CSS属性，CSS属性可以包括内链CSS属性和外链CSS属性，将各个图层的CSS属性与DOM中每个节点关联在一起。将DOM转换为AST时，可以根据各个图层的CSS属性与DOM中每个节点的关联关系也转换为将各个图层的CSS属性与AST中每个节点关联在一起。

203、服务器根据AST生成第二网页。

服务器将DOM转换成AST之后，可以根据AST生成第二网页。服务器可以先设置AST的根节点的字体尺寸属性，再根据多层节点对应的对象数组和AST的根节点的字体尺寸属性生成第二网页。

服务器可以获取第二终端设备的屏幕宽度和第二网页的设计稿宽度，例如，终端设备的屏幕宽度为320px，第二网页的设计稿宽度为640px。

服务器设置AST中的根节点的字体尺寸属性，具体的：

可以获取第二网页的设计稿宽度值与预设属性值之间的比值作为相对宽度，获取第二终端设备的屏幕宽度值与相对宽度之间的比值作为AST的元素内容中的根节点的字体尺寸属性。其中，元素内容可以为第一网页的HTML数据，根节点可以为HTML数据中根元素<html>，字体尺寸属性可以为根元素<html>的font-size属性。

例如，第二网页的设计稿宽度为640px，预设属性值为100px，第二终端设备的屏幕宽度为320px，则相对宽度为640px/100px＝6.4rem，将AST元素内容中的根节点的字体尺寸属性设置为320px/6.4rem＝50px。

可选的，在HTML5开发过程中，为了让网页能适配不同尺寸的移动终端设备，让设计稿在不同尺寸的移动设备上展示效果一致，一般使用rem自适应布局，rem是CSS3的一个相对单位，就是相对于根元素<html>的font-size来做计算，例如根元素<html>设置的font-size＝12px，非根元素设置width＝2rem，则2rem换算成px单位就是24px。利用rem的特性，在移动端HTML5的开发过程中，用javascript按照一定的规则容易动态设置<html>的font-size，从而可以看出，能够以rem为单位实现适配效果。

服务器AST中的根节点的字体尺寸属性之后，可以根据多层节点对应的对象数组和AST的根节点的字体尺寸属性生成第二网页。

可选的，服务器可以对转换后的AST的数据做重渲染处理。

具体的，可以采用前序深度遍历的方式遍历AST，提取AST中的基本节点，若在基本节点出现连续短文本的链接节点或文本节点，则将短文本的链接节点横向排列，中间以空格隔开，<table>标签对应的节点有其固定的格式，可以不对<table>标签对应的节点进行切割，直接将<table>标签对应的节点作为一个基本节点，在第二终端设备的页面中展示。服务器遍历AST的顺序可以从上到下，渲染的顺序也可以从上到下，遍历和渲染可以同时进行。渲染即为构建渲染树的过程，将AST可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。不可见的AST的对象不会被***渲染树中，还有一些节点的位置为绝对或浮动定位，这些节点会在文本流之外，因此会在渲染树的不同位置，渲染是为了找到其真实的位置，并用一个占位结构标识出他们原来的位置，渲染每一个AST节点，计算符合每个节点的最终样式，为每一个元素查找到匹配的样式规则，需要遍历整个规则表，为了提高遍历的效率，可以采用共享样式数据从而避免无用遍历。

204、服务器向第二终端设备发送第二网页。

相应的，第二终端设备接收来自服务器的第二网页。

服务器生成第二网页之后，可以向第二终端设备发送该第二网页，第二终端设备将第二网页展现给用户。

在上述步骤203中，服务器还可以直接将第一网页的HTML数据，从纯文本直接转换成AST树形结构的数据，每个条目和AST中的节点可以是一一对应的。具体的，纯文本转换AST的实现可以包括：

步骤1：词法分析。读取HTML代码，把读取到的HTML代码按照预定的规则合并成一个个的标识(tokens)。同时，可以移除空白符、注释等。整个HTML代码被分割进一个标识列表(或者一维数组)。当词法分析源代码的时候，可以一个一个字母地读取代码，也可以称之为扫描过程。当扫描遇到空格、操作符或者特殊符号时，可以认为一个话已经完成。

步骤2：语法分析。将词法分析出来的数组转换成AST树形的形式，同时，可以验证语法。语法如果有错的话，可以抛出语法错误。当生成AST的时候，解析器可以删除一些没必要的标识(例如不完整的括号)。所以AST可以不是100％与源码匹配的。例如：编译器(babel)是一个JavaScript编译器，可以分3个阶段运行代码：解析(parsing)、转译(transforming)和生成(generation)，其中，解析是将代码字符串转换成抽象语法树，转译是对抽象语法树进行变换操作，生成是根据变换后的抽象语法树生成新的代码字符串。

请参阅图3，图3是本申请实施例提供的一种AST树状结构的示意图。假设表达式为1+3*(4-1)+2，那么可以用如图3所示的AST树状图来进行表示该表达式。

本申请涉及的AST是源代码的抽象语法结构的树状表示，树的每个节点都表示源代码中的一种结构，并不会表示出真实语法出现的每一个细节。AST不依赖于源语言的语法，为前端、后端建立一个清晰的接口。由于AST不依赖于具体的文法，不依赖于语言的细节，可以将源代码转化为AST，将源代码转化为AST后，还可以对AST做很多的操作。

实施本申请实施例，服务器通过将第一网页的HTML数据解析为对应的DOM，DOM包括HTML数据的标签和多层节点；将DOM转换为AST；再根据AST生成第二网页，其中，第一网页为在第一终端设备显示的网页，第二网页为在第二终端设备显示的网页，第一网页与第二网页的尺寸不同。服务器通过将第一网页的HTML数据对应的DOM转换为AST，从而可以不在DOM层面做适配，实现在js脚本语言层面对网页的屏幕适配，可以提高网页适配的速率。

请参阅图4，图4是本申请实施例提供的一种网页适配装置的结构示意图。如图4所示，该网页适配装置，至少包括：解析单元401、转换单元402、生成单元403和发送单元404；其中：

解析单元401，用于将第一网页的超文本标记语言HTML数据解析为对应的文档对象模型DOM，所述DOM包括所述HTML数据的标签和多层节点；

转换单元402，用于将所述DOM转换为AST；

生成单元403，用于根据所述AST生成第二网页，所述第一网页为在第一终端设备显示的网页，所述第二网页为在第二终端设备显示的网页，所述第一网页与所述第二网页的尺寸不同。

在一个实施例中，所述转换单元402将所述DOM转换为AST，具体用于：

在一个实施例中，生成单元403根据所述AST生成第二网页，具体用于：

设置所述AST的根节点的字体尺寸属性；

在一个实施例中，生成单元403设置所述AST的根节点的字体尺寸属性，具体用于：

在一个实施例中，生成单元403根据所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度设置所述AST的根节点的字体尺寸属性，具体用于：

在一个实施例中，所述根节点为所述HTML数据的根元素<html>，所述字体尺寸属性为所述根元素<html>的font-size属性。

在一个实施例中，该网页适配装置还包括：

发送单元404，用于向所述第二终端设备发送所述第二网页。

需要说明的是，有关解析单元401、转换单元402、生成单元403和发送单元404更详细的描述可以直接参考图2所示的方法实施例中的相应描述，此处不再赘述。

请参阅图5，图5是本申请实施例提供的另一种网页适配装置的结构示意图。如图5所示，该网页适配装置可以包括：存储器501、收发器502及与所述存储器501和收发器502耦合的处理器503。此外，该设备还可以包括天线等通用部件，在此不再详述。

存储器501可以是只读存储器(read-only memory，ROM)或可存储静态信息和指令的其他类型的静态存储设备，随机存取存储器(random access memory，RAM)或者可存储信息和指令的其他类型的动态存储设备，也可以是电可擦可编程只读存储器(ElectricallyErasable Programmable Read-Only Memory，EEPROM)、只读光盘(Compact Disc Read-Only Memory，CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器可以是独立存在，通过总线与处理器相连接。存储器也可以和处理器集成在一起。

收发器502可以是通信接口、收发电路等，其中，通信接口是统称，可以包括一个或多个接口，例如网页适配装置与终端之间的接口。通信接口用于与其他设备或通信网络通信，如以太网，无线接入网(RAN)，核心网，无线局域网(Wireless Local Area Networks，WLAN)等。

处理器503可以是中央处理器(central processing unit，CPU)、通用处理器、数据信号处理器(digital signal processor，DSP)、专用集成电路(application-specificintegrated circuit，ASIC)、现场可编程门阵列(field programmable gate array，FPGA)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其他任意组合。其可以实现或执行结合本发明提供内容所描述的各种示例性的逻辑方框、模板和电路。处理器503也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合得到。

其中，存储器501用于存储计算机程序，所述计算机程序包括程序指令，处理器503用于执行存储器501存储的程序指令，收发器502用于在处理器503的控制下与其他设备进行通信。当处理器503在执行指令时可根据程序指令执行网页适配方法。

可选的，网页适配装置还可以包括总线504，其中，存储器501、收发器502以及处理器503可以通过总线504相互连接。总线504可以是外设部件互联标准(peripheralcomponent interconnect，PCI)总线或扩展工业标准结构(extended industry standardarchitecture，EISA)总线等。总线504可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

除了图5所示的存储器501、收发器502、处理器503以及上述总线504之外，实施例中网页适配装置还可以包括其他硬件，对此不再赘述。

本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机程序或计算机指令，当所述计算机程序或计算机指令被计算机设备运行时，可以实现如图2所示的网页适配方法。

本申请实施例还提供一种计算机程序产品，当其在计算机上运行时，使得计算机实现如图2所示的网页适配方法。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可能可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性或其它的形式。

上述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

上述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以为个人计算机、服务端或者网络设备等，具体可以是计算机设备中的处理器)执行本申请各个实施例上述方法的全部或部分步骤。其中，而前述的存储介质可包括：U盘、移动硬盘、磁碟、光盘、只读存储器(Read-OnlyMemory，缩写：ROM)或者随机存取存储器(RandomAccessMemory，缩写：RAM)等各种可以存储程序代码的介质。

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

Claims

1.一种基于抽象语法树AST的网页适配方法，其特征在于，包括：

服务器将第一网页的超文本标记语言HTML数据解析为对应的文档对象模型DOM，所述DOM包括所述HTML数据的标签和多层节点；

所述服务器将所述DOM转换为AST；

所述服务器根据所述AST生成第二网页，其中，所述第一网页为在第一终端设备显示的网页，所述第二网页为在第二终端设备显示的网页，所述第一网页与所述第二网页的尺寸不同。

2.根据权利要求1所述的方法，其特征在于，所述服务器将所述DOM转换为AST包括：

所述服务器遍历所述多层节点中每层节点的子元素，得到所述每层节点对应的标签数组，所述每层节点对应的标签数组包括所述每层节点的子元素、所述每层节点的子元素的标签和所述每层节点的子元素的属性；

所述服务器对所述每层节点对应的标签数组进行正则匹配得到所述每层节点对应的对象数组；

所述服务器根据所述每层节点对应的对象数组确定多层节点对应的对象数组。

3.根据权利要求2所述的方法，其特征在于，所述服务器根据所述AST生成第二网页包括：

所述服务器设置所述AST的根节点的字体尺寸属性；

所述服务器根据所述多层节点对应的对象数组和所述AST的根节点的字体尺寸属性生成所述第二网页。

4.根据权利要求1所述的方法，其特征在于，所述服务器设置所述AST的根节点的字体尺寸属性包括：

所述服务器获取所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度；

所述服务器根据所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度设置所述AST的根节点的字体尺寸属性。

5.根据权利要求4所述的方法，其特征在于，所述服务器根据所述第二终端设备的屏幕宽度和所述第二网页的设计稿宽度设置所述AST的根节点的字体尺寸属性包括：

所述服务器确定所述第二网页的设计稿宽度与预设属性值之间的比值为相对宽度；

所述服务器确定所述第二终端设备的屏幕宽度与所述相对宽度之间的比值为所述AST的根节点的字体尺寸属性。

6.根据权利要求1-4任一项所述的方法，其特征在于，所述根节点为所述HTML数据的根元素<html>，所述字体尺寸属性为所述根元素<html>的font-size属性。

7.根据权利要求1-4任一项所述的方法，其特征在于，所述方法还包括：

所述服务器向所述第二终端设备发送所述第二网页。

8.一种网页适配装置，其特征在于，所述装置应用于服务器，包括：

转换单元，用于将所述DOM转换为AST；

9.一种网页适配装置，其特征在于，包括处理器和存储器，所述处理器和存储器耦合，其中，所述存储器用于存储计算机指令，所述处理器通过执行所述存储器存储的计算机指令实现如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序或计算机指令，当所述计算机程序或计算机指令被计算机设备运行时，实现如权利要求1-7任一项所述的方法。