CN112463152A

CN112463152A - Webpage adaptation method and device based on 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

The embodiment of the application relates to the technical field of data processing, and provides a webpage adaptation method and device based on an abstract syntax tree AST, which comprises the following steps: the method comprises the steps that a server analyzes hypertext markup language (HTML) data of a first webpage into a corresponding Document Object Model (DOM), wherein the DOM comprises tags and multilayer nodes of the HTML data; the server converting the DOM into AST; and the server generates a second webpage according to the AST, wherein the first webpage is a webpage displayed on a first terminal device, the second webpage is a webpage displayed on a second terminal device, and the first webpage and the second webpage have different sizes. According to the embodiment of the application, the webpage adaptation rate can be improved.

Description

Webpage adaptation method and device based on AST

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for adapting to a web page based on an Abstract Syntax Tree (AST).

Background

With the popularization of the internet, people can browse webpages on terminal devices of different sizes, such as notebook computers, desktop computers, tablet computers, mobile phones and the like. The display screen sizes of different terminal devices may be different, and the difference in display screen sizes may affect the display effect of the web page. Therefore, how to correctly display the contents of the web page under the screens of different sizes of displays becomes a basic requirement for web page development.

Development of web pages is usually response development, that is, page elements are adapted by a large amount of Cascading Style Sheets (CSS) codes at a Document Object Model (DOM) level. When a large amount of adaptation conversion is carried out on page elements at the DOM level, the adaptation rate of the webpage is low due to code redundancy.

Disclosure of Invention

In view of the foregoing problems, the present application provides an AST-based web page adaptation method and apparatus, which can improve a web page adaptation rate.

In a first aspect, an embodiment of the present application provides an AST-based web page adaptation method, which may include: the method comprises the steps that a server analyzes hypertext markup language (HTML) data of a first webpage into a corresponding Document Object Model (DOM), wherein the DOM comprises tags and multilayer nodes of the HTML data; the server converting the DOM into AST; and the server generates a second webpage according to the AST, wherein the first webpage is a webpage displayed on a first terminal device, the second webpage is a webpage displayed on a second terminal device, and the first webpage and the second webpage have different sizes.

In this embodiment, the server may parse the HTML data of the first web page into a corresponding DOM, where the DOM may include a tag of the HTML data and a plurality of layers of nodes, convert the DOM into an AST, and generate the second web page according to the AST. The server converts the DOM corresponding to the HTML data of the first webpage into the AST, so that adaptation can be performed on the DOM level, screen adaptation on the webpage on the js scripting language level is realized, and the rate of webpage adaptation is improved.

In one possible implementation, the converting the DOM element to an AST element includes: acquiring a corresponding relation between the CSS attribute and the DOM element; determining the AST element, the AST element comprising the correspondence.

In one possible implementation, the server converting the DOM into an AST includes: the server traverses the sub-elements of each layer of nodes in the multilayer nodes to obtain a label array corresponding to each layer of nodes, wherein the label array corresponding to each layer of nodes comprises the sub-elements of each layer of nodes, labels of the sub-elements of each layer of nodes and attributes of the sub-elements of each layer of nodes; performing regular matching on the label array corresponding to each layer of nodes to obtain an object array corresponding to each layer of nodes; and determining the object arrays corresponding to the multiple layers of nodes according to the object arrays corresponding to the nodes in each layer.

In one possible implementation, the server generating a second web page according to the AST includes: the server sets a font size attribute of a root node of the AST; and the server generates the second webpage according to the object array corresponding to the multilayer nodes and the font size attribute of the root node of the AST.

In one possible implementation, the server setting a font size attribute of a root node of the AST comprises: the server acquires the screen width of the second terminal device and the design draft width of the second webpage; and the server sets the font size attribute of the root node of the AST according to the screen width of the second terminal equipment and the design draft width of the second webpage.

In one possible implementation manner, the setting, by the server, the font size attribute of the root node of the AST according to the screen width of the second terminal device and the design draft width of the second web page includes: the server determines that the ratio of the design draft width of the second webpage to a preset attribute value is a relative width; the server determines that a ratio between a screen width of the second terminal device and the relative width is a font size attribute of a root node of the AST.

In one possible implementation manner, the root node is a root element < HTML > of the HTML data, and the font size attribute is a font-size attribute of the root element < HTML >.

In one possible implementation manner, the web page adaptation method further includes: and the server sends the second webpage to the second terminal equipment.

In a second aspect, an embodiment of the present application provides a web page adapting apparatus, where the web page adapting apparatus may be applied to a server, where the web page adapting apparatus includes:

the analysis unit is used for analyzing hypertext markup language (HTML) data of a first webpage into a corresponding Document Object Model (DOM), and the DOM comprises tags and multilayer nodes of the HTML data;

a conversion unit for converting the DOM into AST;

and the generating unit is used for generating a second webpage according to the AST, wherein the first webpage is a webpage displayed on a first terminal device, the second webpage is a webpage displayed on a second terminal device, and the first webpage and the second webpage are different in size.

In a possible implementation manner, the conversion unit converts the DOM into an AST, specifically to:

traversing the sub-elements of each layer of nodes in the multilayer nodes to obtain a label array corresponding to each layer of nodes, wherein the label array corresponding to each layer of nodes comprises the sub-elements of each layer of nodes, labels of the sub-elements of each layer of nodes and attributes of the sub-elements of each layer of nodes;

performing regular matching on the label array corresponding to each layer of nodes to obtain an object array corresponding to each layer of nodes;

and determining the object arrays corresponding to the multiple layers of nodes according to the object arrays corresponding to the nodes in each layer.

In a possible implementation manner, the generating unit generates the second web page according to the AST, and is specifically configured to:

setting a font size attribute of a root node of the AST;

and generating the second webpage according to the object array corresponding to the multi-layer nodes and the font size attribute of the root node of the AST.

In a possible implementation manner, the generating unit sets a font size attribute of a root node of the AST, specifically to:

acquiring the screen width of the second terminal device and the design draft width of the second webpage;

and setting the font size attribute of the root node of the AST according to the screen width of the second terminal equipment and the design draft width of the second webpage.

In a possible implementation manner, the generating unit sets a font size attribute of a root node of the AST according to the screen width of the second terminal device and the design draft width of the second web page, and is specifically configured to:

determining the ratio of the design draft width of the second webpage to a preset attribute value as a relative width;

determining that a ratio between a screen width of the second terminal device and the relative width is a font size attribute of a root node of the AST.

In a possible implementation manner, the web page adaptation apparatus further includes:

and the sending unit is used for sending the second webpage to the second terminal equipment.

In a third aspect, an embodiment of the present application provides a web page adaptation apparatus, which includes a processor and a memory, where the processor is coupled to the memory, where the memory is used to store computer instructions, and the processor, by executing the computer instructions stored in the memory, causes the web page adaptation apparatus to execute the web page adaptation method provided in the first aspect or any embodiment of the first aspect.

In a fourth aspect, the present application provides a computer-readable storage medium, in which a computer program or computer instructions are stored, and when the computer program or the computer instructions are executed by a computer device, the computer device is caused to implement the webpage adaptation method as provided in the first aspect or any embodiment of the first aspect.

In a fifth aspect, embodiments of the present application provide a computer program product, which when run on a computer, causes the computer to execute the method for adapting a web page provided in the first aspect or any possible implementation manner of the first aspect.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

Fig. 1 is a schematic diagram of a system architecture for web page adaptation provided in an embodiment of the present application;

FIG. 2 is a flowchart illustrating a method for adapting a web page according to an embodiment of the present disclosure;

fig. 3 is a schematic diagram of an AST tree structure according to an embodiment of the present application;

fig. 4 is a schematic structural diagram of a web page adapting apparatus according to an embodiment of the present application;

fig. 5 is a schematic structural diagram of another web page adapting device according to an embodiment of the present application.

Detailed Description

The embodiments of the present application will be described below with reference to the drawings.

The terms "first," "second," "third," and "fourth," etc. in the description and claims of this application and in the accompanying drawings are used for distinguishing between different objects and not for describing a particular order. Furthermore, the terms "include" and "have," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those steps or elements listed, but may alternatively include other steps or elements not listed, or inherent to such process, method, article, or apparatus.

Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein can be combined with other embodiments.

As used in this specification, the terms "component," "module," "system," and the like are intended to refer to a computer-related entity, either hardware, firmware, a combination of hardware and software, or software in execution. For example, a component may be, but is not limited to being, a process running on a processor, an object, an executable, a thread of execution, a program, and/or a computer. By way of illustration, both an application running on a computing device and the computing device can be a component. One or more components can reside within a process and/or thread of execution and a component can be localized on one computer and/or distributed between 2 or more computers. In addition, these components can execute from various computer readable media having various data structures stored thereon. The components may communicate by way of local and/or remote processes such as in accordance with a signal having one or more data packets (e.g., data from two components interacting with another component in a local system, distributed system, and/or across a network such as the internet with other systems by way of the signal).

First, some terms in the present application are explained so as to be easily understood by those skilled in the art.

(1)AST

In computer science, an Abstract Syntax Tree (AST), or simply syntax tree (syntax tree), is an abstract representation of the syntax structure of source code. It represents the syntactic structure of the programming language in the form of a tree, each node on the tree representing a structure in the source code. This is said to be abstract, because the abstract syntax tree does not represent every detail that the real syntax presents, for example, nesting brackets are implied in the structure of the tree and are not represented in the form of nodes. The abstract syntax tree does not depend on the syntax of the source language, i.e. the context grammar used in the parsing stage. Since grammars are often equivalently transformed (e.g., left recursion, backtracking, ambiguity, etc.) when written, this introduces extra components into the grammar analysis, adversely affects subsequent stages, and may even confuse the various stages. Because many compilers often construct parse trees independently, a clear interface is established for the front-end and back-end. Abstract syntax trees have a wide range of applications in many fields, such as browsers, intelligent editors, compilers, and so on.

(2)DOM

The Document Object Model (DOM) is a standard programming interface for the W3C organization to process extensible markup language recommendations. It is a platform and language independent Application Programming Interface (API) that can dynamically access programs and scripts to update their content, structure, and style of www documents (currently, HTML and extensible markup language (XML) documents are defined by declarative sections). The document may be further processed and the results of the processing may be added to the current page. The DOM is a tree-based API document that requires that the entire document be represented in memory during processing. Another simple API is a simple event-based application program interface (SAX) that can be used to process very large XML documents, which are not suitable for all in-memory processing due to their large size.

(3)JSON

JSON (JavaScript object notation) is a lightweight data exchange format. It stores and represents data in a text format that is completely independent of the programming language, based on a subset of the js specification (ECMA Script) set by the european computer association. The compact and clear hierarchy makes JSON an ideal data exchange language. The network transmission efficiency is effectively improved, and the machine analysis and generation are easy while the reading and the writing are easy.

(4) Web crawler

Web crawlers (also known as web spiders, web robots, in the middle of the FOAF community, more often called web chasers) are programs or scripts that automatically capture web information according to certain rules. Other less commonly used names are ants, automatic indexing, simulation programs, or worms.

The web applications are generally divided into a Personal Computer (PC) side and a mobile side, and for multi-end applications of web pages, the application is the key point of each website product, and web page adaptation is also the key point of front-end development. For web page adaptation, usually, the web page can be developed in response, dynamic media query, or a PC end and a mobile end are developed separately. However, these methods all face the problems of large development amount, difficult compatibility adaptation, repeated code development and low reusability. The main reason for these problems is that the traditional web page adaptation method is developed at the DOM level of the page element, and is adapted by a large amount of CSS code. And a large amount of adaptation conversion is carried out on page elements in the DOM layer, so that the code redundancy is complicated, the performance of the webpage is consumed, and the webpage adaptation rate is not high.

Based on the above problems, the present application provides an AST-based web page adaptation method and apparatus. The server analyzes HTML data of the first webpage into a corresponding DOM (document object model), wherein the DOM comprises a tag of the HTML data and a plurality of layers of nodes; converting the DOM into AST; and generating a second webpage according to the AST, wherein the first webpage is a webpage displayed on the first terminal device, the second webpage is a webpage displayed on the second terminal device, and the first webpage and the second webpage have different sizes. The server converts the DOM corresponding to the HTML data of the first webpage into the AST, so that adaptation can be performed on the DOM level, screen adaptation on the webpage on the js scripting language level is realized, and the rate of webpage adaptation can be improved.

In order to better understand the method for adapting a web page based on AST provided by the embodiment of the present application, a system architecture for adapting a web page based on the embodiment of the present application is described first.

Referring to fig. 1, fig. 1 is a schematic diagram of a system architecture for web page adaptation according to an embodiment of the present disclosure. The method of the embodiment of the present application may be applied to a system architecture composed of a first terminal device 101, a server 102 and a second terminal device 103 as shown in fig. 1. As shown in fig. 1, the server 102 may be connected to the first terminal device 101 and the second terminal device 103 through a network, which includes, but is not limited to, an Intranet (Internet), the Internet (Internet), a global system for mobile communication (GSM), a Wideband Code Division Multiple Access (WCDMA), a wide area network (wan), a metropolitan area network (man), a local area network (lan), a 4G network, a 5G network, Bluetooth (Bluetooth), Wi-Fi, and other wireless or wired networks.

The first terminal device 101 is provided with a web page editor and an input device, and is used for completing a first web page corresponding to a first website after a developer performs an interactive operation with the web page editor by using the input device, uploading the first web page to the server 102, and after the server 102 obtains a request of the second terminal device 103, performing web page adaptation on the first web page to obtain a second web page, so that the second web page is adapted to the width of the second terminal device 103, and the second web page is sent to the second terminal device 103, so that the second terminal device 103 can correctly display the second web page.

The second terminal device 103 may display a web page using world wide web (web) front-end technology, where the web front-end technology may include: HTML, CSS, and JavaScript (an interpreted scripting language that is primarily used to add interactive behavior to HTML pages). The efficient utilization of the CSS to restore the design draft is always an important link, and different CSSs are added to webpages using the same HTML technology and JavaScript technology, so that the webpages displayed by the client are different. Illustratively, a developed product using web front-end technology may be the H5 web page of any website. Among them, the H5 page refers to a web page developed using HTML 5. It should be noted that the style sheet for presenting the web page style of the web page in the embodiment of the present application includes, but is not limited to, CSS, such as CSS3, and is not specifically limited to the embodiment of the present application. First terminal device 101 and second terminal device103 may include, but is not limited to, any intelligent operating system based electronic product that can interact with a user through input devices such as a keyboard, a virtual keyboard, a touch PAD, a touch screen, and a voice control device, a mobile device such as a mobile phone, a smart phone, a notebook computer, a digital broadcast receiver, a Personal Digital Assistant (PDA), a tablet computer (PAD), a Portable Multimedia Player (PMP), a navigation device, and the like, and a fixed terminal such as a digital TV, a desktop computer, a notebook, a server, and the like. The intelligent operating system includes, but is not limited to, any operating system that enriches device functions by providing various mobile applications to the mobile device, for example, the intelligent operating system in the embodiment of the present application may be an Android device, that is, the terminal device in the embodiment of the present application may be an Android device. Optionally, the risk assessment method provided by the present application may also be applied to iOS^TMAnd Windows Phone^TMAnd other terminal devices of the intelligent operating system, which is not specifically limited in this embodiment of the present application.

The server 102 may include, but is not limited to, a backend server, a component server, a data processing server, a processing plug-in, and the like, and the server 102 may communicate with a plurality of terminal devices through the internet, and a corresponding server-side program is also required to be run on the server to provide a corresponding data processing service. For example, the server may parse the HTML data of the first web page into a corresponding DOM, convert the DOM into an AST, generate a web page from the AST, and so on.

It should be understood that the web page adaptation system architecture of fig. 1 is only a partial exemplary implementation manner in the embodiment of the present application, and the web page adaptation system architecture in the embodiment of the present application includes, but is not limited to, the above web page adaptation system architecture.

Referring to fig. 2, fig. 2 is a schematic flowchart of a web page adaptation method according to an embodiment of the present disclosure. Wherein, the webpage adaptation method is described from the interaction point of the server and the second terminal device. As shown in fig. 2, the web page adaptation method may include the following steps.

201. The server parses the HTML data of the first webpage into a corresponding DOM.

The server may parse the HTML data of the first web page into a corresponding DOM. First, the server may crawl the HTML data of the first web page: the second terminal device can receive an instruction of the first website information input by the user, and then sends the first website information to the server, and the server can crawl HTML data of the first webpage according to the first website information.

Optionally, the server may receive a request message from the second terminal device, where the request message is used to request to acquire the second webpage corresponding to the first website, and the server may obtain the first website information after analyzing the request message, and then crawl the HTML data of the first webpage according to the first website information. The first website corresponds to a first webpage and a second webpage, the first webpage is a webpage displayed by the first terminal device, the second webpage is a webpage displayed by the second terminal device, and the first webpage and the second webpage are different in size.

After the server crawls the HTML data of the first webpage, the HTML data of the first webpage is analyzed into a corresponding DOM. Specifically, the method comprises the following steps: HTML data is made up of many tags, which may include < HTML >, < head >, < body >, < div >, < span >, etc. These tags are nested, one layer in another, e.g., < html > set < body >, < body > set < div >, < div > set < span >, etc. When analyzing, the label can be analyzed layer by layer, each label is abstracted into an object in the code, and the corresponding DOM can be obtained by analyzing according to the well-defined organizational structure. The DOM includes a tag of HTML data of the first web page and multiple layers of nodes, for example, a tag < HTML > in the HTML data is a root node of the DOM, and a tag < body > in the HTML data is a child node of the DOM, that is, the < body > is a child node of < HTML >.

202. The server converts the DOM into an AST.

After the server parses the HTML data of the first web page into a corresponding DOM, the DOM may be converted to an AST. The DOM is converted into the AST, and the DOM can be understood as splitting multiple DOM nodes layer by layer, splitting a DOM structure into small modules according to attributes, and expressing the modules by js objects. Wherein the AST includes an object of HTML data and a plurality of layers of nodes. Specifically, the method comprises the following steps:

the server may traverse the sub-elements of each layer of nodes in the DOM to obtain a tag array corresponding to each layer of nodes, where the tag array corresponding to each layer of nodes may include the sub-elements of each layer of nodes, tags of the sub-elements of each layer of nodes, and attributes of the sub-elements of each layer of nodes. For example: the incoming HTML data string may be traversed in a tag-wise loop, string segmentation is performed with '< xxx', and then a regularization matching is performed to determine whether the current end tag is '</xxx >, resulting in a tag array for each sub-element, for example [' < div class ═ xxx '> xxx </div >,' < span style ═ xxx '> xxx </scan' … ].

Semantic analysis can be performed on the label array of each layer of nodes, specifically: and performing regular matching on the label array of each layer of nodes to obtain an object array of each layer of nodes, wherein the object array can comprise a label name (tagName), a label id, a label style class (class), a label inline style (style), a label attribute (attr) and the like. For example, { 'tagName': ' xxx ', ' id ': xxx ', ' className ', ' xxx ', ' style ', ' xxx ', ' attr ', ' xxx ' … }.

And determining the corresponding object array of the multi-layer nodes according to the object array corresponding to each layer of nodes, so that the DOM can be converted into the AST.

Optionally, the server may also perform special processing on certain tags. For example, for the tab < input >, due to the self-contained attribute of the tab, the implementation manner of the tab by each browser is different, and a compatible prefix may be added to the tab, so that the tab can be compatible with each browser. The server can also be compatible with the initialization difference between the double-ended tags, such as < img > < input >, and the like, so as to dynamically calculate the pixels and realize a response-like webpage.

Optionally, the server may further obtain CSS attributes of the DOM, where the CSS attributes may include an in-link CSS attribute and an out-link CSS attribute, and associate the CSS attributes of each layer with each node in the DOM. When the DOM is converted into the AST, the CSS attribute of each layer may also be converted to be associated with each node in the AST according to the association relationship between the CSS attribute of each layer and each node in the DOM.

203. The server generates a second web page based on the AST.

After the server converts the DOM into an AST, a second web page may be generated from the AST. The server may set a font size attribute of a root node of the AST, and then generate the second web page according to the object array corresponding to the multi-layer nodes and the font size attribute of the root node of the AST.

The server may obtain a screen width of the second terminal device and a design width of the second webpage, for example, the screen width of the terminal device is 320px, and the design width of the second webpage is 640 px.

The server sets a font size attribute of a root node in the AST, specifically:

a ratio between the design draft width value and the preset attribute value of the second web page may be obtained as a relative width, and a ratio between the screen width value and the relative width of the second terminal device may be obtained as a font size attribute of a root node in the element content of the AST. The element content may be HTML data of the first web page, the root node may be a root element < HTML > in the HTML data, and the font size attribute may be a font-size attribute of the root element < HTML >.

For example, if the design draft width of the second web page is 640px, the preset attribute value is 100px, and the screen width of the second terminal device is 320px, the relative width is 640px/100px ═ 6.4rem, and the font size attribute of the root node in the content of the AST element is set to 320px/6.4rem ═ 50 px.

Optionally, in the process of developing HTML5, in order to make the web page adaptable to mobile terminal devices of different sizes and make the design show effects consistent on mobile devices of different sizes, a rem adaptive layout is generally used, rem is a relative unit of CSS3, that is, calculation is performed with respect to the font-size of the root element < HTML >, for example, the font-size set by the root element < HTML > is 12px, the width set by the non-root element is 2rem, and 2rem is converted into px unit of 24 px. By utilizing the characteristics of rem, in the development process of the HTML5 of the mobile terminal, font-size of < HTML > is easily and dynamically set by using javascript according to a certain rule, so that the adaptation effect can be realized by taking rem as a unit.

After the font size attribute of the root node in the server AST, a second web page may be generated based on the object array corresponding to the multi-tier nodes and the font size attribute of the root node of the AST.

Alternatively, the server may perform re-rendering processing on the converted data of the AST.

Specifically, the AST may be traversed in a manner of preamble deep traversal to extract a basic node in the AST, and if a link node or a text node of a continuous short text appears at the basic node, the link node of the short text is arranged laterally, the middle is separated by a space, the node corresponding to the < table > tag has a fixed format, and the node corresponding to the < table > tag may not be cut, and the node corresponding to the < table > tag is directly displayed in a page of the second terminal device as a basic node. The AST is traversed by the server from top to bottom, the rendering sequence is also from top to bottom, and the traversing and the rendering can be carried out simultaneously. Rendering is a process of building a rendering tree, and the AST is visually represented, and the building of the tree is to draw the document contents in a correct order. Invisible AST objects cannot be inserted into a rendering tree, the positions of some nodes are absolute or floating positions, the nodes are out of a text stream and are located at different positions of the rendering tree, rendering is performed to find the real positions of the nodes, the original positions of the nodes are identified by using an occupying structure, each AST node is rendered, the final style which accords with each node is calculated, a matched style rule is found for each element, the whole rule table needs to be traversed, and in order to improve the traversing efficiency, shared style data can be adopted so as to avoid useless traversing.

204. And the server sends the second webpage to the second terminal equipment.

Correspondingly, the second terminal device receives the second webpage from the server.

After the server generates the second webpage, the server may send the second webpage to the second terminal device, and the second terminal device displays the second webpage to the user.

In step 203, the server may also directly convert the HTML data of the first web page from plain text to data of the AST tree structure, and each entry may be in one-to-one correspondence with a node in the AST. Specifically, the implementation of the plain text conversion AST may include:

step 1: and (4) lexical analysis. Reading HTML codes, and combining the read HTML codes into individual identifications (tokens) according to a preset rule. Meanwhile, whitespace, comments, and the like may be removed. The entire HTML code is partitioned into a list of identifications (or a one-dimensional array). When the source code is lexically analyzed, the code can be read letter by letter, which can also be referred to as a scanning process. When a scan encounters a space, operator, or special symbol, a session may be considered complete.

Step 2: and (5) analyzing the syntax. The array analyzed by the lexical method is converted into an AST tree form, and meanwhile, grammar can be verified. Syntax errors, if any, can be thrown. When generating an AST, the parser may delete some unnecessary identifications (e.g., incomplete brackets). The AST may not be 100% matched to the source code. For example: the compiler (babel) is a JavaScript compiler, which can run the code in 3 stages: parsing (parsing) for converting the code string into an abstract syntax tree, translating (translating) for transforming the abstract syntax tree, and generating (generating) for generating a new code string from the transformed abstract syntax tree.

Please refer to fig. 3, fig. 3 is a schematic diagram of an AST tree structure according to an embodiment of the present application. Assuming that the expression is 1+3 (4-1) +2, the expression can be represented by an AST tree as shown in fig. 3.

The AST involved in the present application is a tree representation of the abstract syntax structure of the source code, where each node of the tree represents a structure in the source code and does not represent every detail of the true syntax. AST does not depend on the grammar of the source language, and a clear interface is established for a front end and a back end. Because AST does not depend on specific grammar and language details, the source code can be converted into AST, and after the source code is converted into AST, a plurality of operations can be performed on the AST.

According to the method, the server analyzes the HTML data of the first webpage into the corresponding DOM, and the DOM comprises the tags and the multilayer nodes of the HTML data; converting the DOM into AST; and generating a second webpage according to the AST, wherein the first webpage is a webpage displayed on the first terminal device, the second webpage is a webpage displayed on the second terminal device, and the first webpage and the second webpage have different sizes. The server converts the DOM corresponding to the HTML data of the first webpage into the AST, so that adaptation can be performed on the DOM level, screen adaptation on the webpage on the js scripting language level is realized, and the rate of webpage adaptation can be improved.

Referring to fig. 4, fig. 4 is a schematic structural diagram of a web page adapting device according to an embodiment of the present application. As shown in fig. 4, the web page adapting apparatus at least includes: analysis section 401, conversion section 402, generation section 403, and transmission section 404; wherein:

an analyzing unit 401, configured to analyze hypertext markup language (HTML) data of a first web page into a corresponding Document Object Model (DOM), where the DOM includes tags and multiple layers of nodes of the HTML data;

a conversion unit 402 for converting the DOM into an AST;

a generating unit 403, configured to generate a second webpage according to the AST, where the first webpage is a webpage displayed on a first terminal device, the second webpage is a webpage displayed on a second terminal device, and the first webpage and the second webpage have different sizes.

In an embodiment, the conversion unit 402 converts the DOM into an AST, specifically configured to:

In an embodiment, the generating unit 403 generates a second web page according to the AST, specifically to:

setting a font size attribute of a root node of the AST;

In an embodiment, the generating unit 403 sets a font size attribute of a root node of the AST, specifically to:

In an embodiment, the generating unit 403 sets a font size attribute of a root node of the AST according to the screen width of the second terminal device and the design draft width of the second web page, and is specifically configured to:

In one embodiment, the root node is a root element < HTML > of the HTML data, and the font size attribute is a font-size attribute of the root element < HTML >.

In one embodiment, the web page adapting apparatus further includes:

a sending unit 404, configured to send the second webpage to the second terminal device.

It should be noted that, for a more detailed description about parsing unit 401, converting unit 402, generating unit 403, and sending unit 404, reference may be directly made to the corresponding description in the method embodiment shown in fig. 2, and details are not repeated here.

Referring to fig. 5, fig. 5 is a schematic structural diagram of another web page adapting device according to an embodiment of the present application. As shown in fig. 5, the web page adapting apparatus may include: a memory 501, a transceiver 502, and a processor 503 coupled to the memory 501 and the transceiver 502. In addition, the device may also include common components such as an antenna, which will not be described in detail herein.

The Memory 501 may be a Read-Only Memory (ROM) or other type of static storage device that can store static information and instructions, a Random Access Memory (RAM) or other type of dynamic storage device that can store information and instructions, an Electrically Erasable Programmable Read-Only Memory (EEPROM), a Compact Disc Read-Only Memory (CD-ROM) or other optical Disc storage, optical Disc storage (including Compact Disc, laser Disc, optical Disc, digital versatile Disc, blu-ray Disc, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, but is not limited to these. The memory may be self-contained and coupled to the processor via a bus. The memory may also be integral to the processor.

The transceiver 502 may be a communication interface, a transceiver circuit, etc., wherein the communication interface is a generic term and may include one or more interfaces, such as an interface between a web page adaptation device and a terminal. The communication interface is used for communicating with other devices or communication Networks, such as ethernet, Radio Access Network (RAN), core network, Wireless Local Area Network (WLAN), and the like.

The processor 503 may be a Central Processing Unit (CPU), a general purpose processor, a Digital Signal Processor (DSP), an application-specific integrated circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, transistor logic, hardware components, or any combination thereof. Which may implement or perform the various illustrative logical blocks, templates, and circuits described in connection with the disclosure provided herein. The processor 503 may also be a combination of computing functions, e.g., comprising one or more microprocessors, DSPs, and microprocessors.

Wherein the memory 501 is adapted to store a computer program comprising program instructions, the processor 503 is adapted to execute the program instructions stored by the memory 501, and the transceiver 502 is adapted to communicate with other devices under the control of the processor 503. The web page adaptation method may be performed according to program instructions when the processor 503 executes the instructions.

Optionally, the web page adapting apparatus may further include a bus 504, wherein the memory 501, the transceiver 502 and the processor 503 may be connected to each other through the bus 504. The bus 504 may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The bus 504 may be divided into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in FIG. 5, but this is not intended to represent only one bus or type of bus.

In addition to the memory 501, the transceiver 502, the processor 503 and the bus 504 shown in fig. 5, the web page adapting apparatus in the embodiment may further include other hardware, which is not described again.

An embodiment of the present application further provides a computer-readable storage medium, in which a computer program or a computer instruction is stored, and when the computer program or the computer instruction is executed by a computer device, the method for adapting a web page as shown in fig. 2 may be implemented.

Embodiments of the present application also provide a computer program product, which when run on a computer, causes the computer to implement the web page adaptation method shown in fig. 2.

It should be noted that, for simplicity of description, the above-mentioned method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present application is not limited by the order of acts described, as some steps may occur in other orders or concurrently depending on the application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.

In the embodiments provided in the present application, it should be understood that the disclosed apparatus may be implemented in other manners. For example, the above-described embodiments of the apparatus are merely illustrative, and for example, the above-described division of the units is only one type of division of logical functions, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of some interfaces, devices or units, and may be an electric or other form.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.

The integrated unit may be stored in a computer-readable storage medium if it is implemented in the form of a software functional unit and sold or used as a separate product. Based on such understanding, the technical solution of the present application may be substantially implemented or a part of or all or part of the technical solution contributing to the prior art may be embodied in the form of a software product stored in a storage medium, and including several instructions for enabling a computer device (which may be a personal computer, a server, or a network device, and may specifically be a processor in the computer device) to execute all or part of the steps of the above-mentioned method of the embodiments of the present application. The storage medium may include: various media capable of storing program codes, such as a usb disk, a removable hard disk, a magnetic disk, an optical disk, a Read-only memory (ROM) or a Random Access Memory (RAM).

The above embodiments are only used for illustrating the technical solutions of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions in the embodiments of the present application.

Claims

1. A webpage adaptation method based on the AST (abstract syntax tree) is characterized by comprising the following steps:

the method comprises the steps that a server analyzes hypertext markup language (HTML) data of a first webpage into a corresponding Document Object Model (DOM), wherein the DOM comprises tags and multilayer nodes of the HTML data;

the server converting the DOM into AST;

and the server generates a second webpage according to the AST, wherein the first webpage is a webpage displayed on a first terminal device, the second webpage is a webpage displayed on a second terminal device, and the first webpage and the second webpage are different in size.

2. The method of claim 1, wherein the server converting the DOM into an AST comprises:

the server traverses the sub-elements of each layer of nodes in the multilayer nodes to obtain a label array corresponding to each layer of nodes, wherein the label array corresponding to each layer of nodes comprises the sub-elements of each layer of nodes, labels of the sub-elements of each layer of nodes and attributes of the sub-elements of each layer of nodes;

the server carries out regular matching on the label array corresponding to each layer of nodes to obtain an object array corresponding to each layer of nodes;

and the server determines the object arrays corresponding to the multiple layers of nodes according to the object arrays corresponding to the nodes in each layer.

3. The method of claim 2, wherein the server generating a second web page based on the AST comprises:

the server sets a font size attribute of a root node of the AST;

and the server generates the second webpage according to the object array corresponding to the multilayer nodes and the font size attribute of the root node of the AST.

4. The method of claim 1, wherein the server setting a font size attribute of a root node of the AST comprises:

the server acquires the screen width of the second terminal device and the design draft width of the second webpage;

and the server sets the font size attribute of the root node of the AST according to the screen width of the second terminal equipment and the design draft width of the second webpage.

5. The method of claim 4, wherein the server setting the font size attribute of the root node of the AST according to the screen width of the second terminal device and the design draft width of the second webpage comprises:

the server determines that the ratio of the design draft width of the second webpage to a preset attribute value is a relative width;

the server determines that a ratio between a screen width of the second terminal device and the relative width is a font size attribute of a root node of the AST.

6. The method of any of claims 1-4, wherein the root node is a root element < HTML > of the HTML data, and wherein the font size attribute is a font-size attribute of the root element < HTML >.

7. The method according to any one of claims 1-4, further comprising:

and the server sends the second webpage to the second terminal equipment.

8. A web page adapting apparatus, applied to a server, comprising:

a conversion unit for converting the DOM into AST;

9. A web page adaptation apparatus comprising a processor and a memory, the processor and the memory being coupled, wherein the memory is configured to store computer instructions and the processor implements the method of any one of claims 1-7 by executing the computer instructions stored by the memory.

10. A computer-readable storage medium, in which a computer program or computer instructions is stored which, when executed by a computer device, implements the method of any one of claims 1-7.