CN106547806B - Page loading method and device - Google Patents

Page loading method and device Download PDF

Info

Publication number
CN106547806B
CN106547806B CN201510621240.8A CN201510621240A CN106547806B CN 106547806 B CN106547806 B CN 106547806B CN 201510621240 A CN201510621240 A CN 201510621240A CN 106547806 B CN106547806 B CN 106547806B
Authority
CN
China
Prior art keywords
file
html
target
environment information
css
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.)
Active
Application number
CN201510621240.8A
Other languages
Chinese (zh)
Other versions
CN106547806A (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.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
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 Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201510621240.8A priority Critical patent/CN106547806B/en
Publication of CN106547806A publication Critical patent/CN106547806A/en
Application granted granted Critical
Publication of CN106547806B publication Critical patent/CN106547806B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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
    • 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

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)

Abstract

The application provides a page loading method and device. The page loading method comprises the following steps: acquiring equipment environment information to be responded by a page to be displayed; acquiring a target HTML text and a target CSS file matched with the equipment environment information; and performing page rendering processing according to the target CSS file and the target HTML text to obtain a page to be displayed. The method and the device have the advantages that the HTML texts matched with the different equipment environment information exist according to the different equipment environment information, only the HTML texts matched with the equipment environment information need to be loaded, the data volume is relatively small, the network flow consumed in the page loading process is reduced, and the loading speed is increased.

Description

Page loading method and device
[ technical field ] A method for producing a semiconductor device
The present application relates to the field of internet technologies, and in particular, to a page loading method and apparatus.
[ background of the invention ]
The idea of the responsive design is: the design and development of the page should respond and adjust accordingly according to the user behavior and the device environment information (operating system platform, screen size, screen orientation, etc.). Currently, a responsive page is implemented by setting a meta attribute media in a hypertext markup Language (HTML) file to define different Cascading Style Sheets (CSSs) styles for different device environment information.
In the above implementation, all device types share a set of HTML files in which adaptation code for multiple sets of CSS styles need to be included. When a browser loads a page, a whole HTML file needs to be downloaded, the screen size is monitored according to meta attribute media set in the HTML file, and a CSS style which is adaptive to the screen size is further acquired from a server; and determining which HTML content blocks in the HTML file need to be shown and which HTML content blocks need to be hidden according to the CSS style, and finally showing a page which is adaptive to the screen size to a user. The need to download the entire HTML file results in more network traffic being consumed and slower loading speed.
[ summary of the invention ]
Various aspects of the present application provide a page loading method and apparatus, so as to reduce network traffic consumed in a page loading process and improve a loading speed.
One aspect of the present application provides a page loading method, including:
acquiring equipment environment information to be responded by a page to be displayed;
acquiring a target HTML text and a target CSS file matched with the equipment environment information;
and performing page rendering processing according to the target CSS file and the target HTML text to obtain the page to be displayed.
In another aspect of the present application, a page loading method is provided, including:
receiving HTML text identification and CSS file identification which are sent by a browser and correspond to equipment environment information to be responded by a page to be displayed;
acquiring an HTML text identified by the HTML text identification as a target HTML text matched with the equipment environment information, and acquiring a CSS file identified by the CSS file identification as a target CSS file matched with the equipment environment information;
and returning the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed.
In another aspect of the present application, a page loading method is provided, including:
receiving equipment environment information which is sent by a browser and needs to be responded by a page to be displayed;
acquiring a target HTML text and a target CSS file matched with the equipment environment information;
and returning the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed.
In another aspect of the present application, a page loading apparatus implemented in a browser is provided, where the page loading apparatus includes:
the information acquisition module is used for acquiring the equipment environment information to be responded by the page to be displayed;
the file acquisition module is used for acquiring a target HTML text and a target CSS file which are matched with the equipment environment information;
and the rendering module is used for performing page rendering processing according to the target CSS file and the target HTML text so as to obtain the page to be displayed.
In another aspect of the present application, a page loading apparatus is implemented in a server, and the page loading apparatus includes:
the receiving module is used for receiving HTML text identification and CSS file identification which are sent by the browser and correspond to the equipment environment information to be responded by the page to be displayed;
the file acquisition module is used for acquiring an HTML text identified by the HTML text identification as a target HTML text matched with the equipment environment information and acquiring a CSS file identified by the CSS file identification as a target CSS file matched with the equipment environment information;
and the sending module is used for returning the target HTML text and the target CSS file to the browser so as to render the page to be displayed by the browser.
In another aspect of the present application, a page loading apparatus is implemented in a server, and the page loading apparatus includes:
the receiving module is used for receiving equipment environment information which is sent by a browser and needs to be responded by a page to be displayed;
the file acquisition module is used for acquiring a target HTML text and a target CSS file which are matched with the equipment environment information;
and the sending module is used for returning the target HTML text and the target CSS file to the browser so as to render the page to be displayed by the browser.
In the method and the device, the equipment environment information to be responded to the page to be displayed is acquired, the target HTML text and the target CSS file matched with the equipment environment information are acquired, page rendering processing is carried out according to the target HTML text and the target CSS file matched with the equipment ring information, the page to be displayed is acquired, and loading of the response type page is achieved. In the application, the HTML texts matched with the different equipment environment information exist, and only the HTML texts matched with the equipment environment information need to be loaded, the HTML texts in the application are different from HTML files which are shared by all the equipment environment information in the prior art and can be suitable for various equipment environments, the data volume is relatively small, the network flow consumed in the page loading process is reduced, and the loading speed is increased.
[ description of the drawings ]
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the embodiments or the prior art descriptions will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present application, and those skilled in the art can also obtain other drawings according to the drawings without inventive labor.
Fig. 1 is a schematic flowchart of a page loading method according to an embodiment of the present application;
fig. 2 is a schematic flowchart of a page loading method according to another embodiment of the present application;
fig. 3 is a schematic flowchart of a page loading method according to another embodiment of the present application;
fig. 4 is a schematic structural diagram of a page loading apparatus according to another embodiment of the present application;
fig. 5 is a schematic structural diagram of a page loading apparatus according to another embodiment of the present application;
fig. 6 is a schematic structural diagram of a page loading apparatus according to another embodiment of the present application.
[ detailed description ] embodiments
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
Aiming at the problems of more network flow consumption, lower loading speed and the like in a response type page loading scheme in the prior art, the application provides a solution, and the main principle is as follows: and configuring HTML texts and CSS files matched with different equipment environments at one end of the server, wherein the HTML texts and the CSS files have one-to-one correspondence. Compared with the prior art, different equipment environments not only have the corresponding CSS files, but also have the corresponding HTML files, and all the equipment environments do not share one set of HTML files like the prior art. Therefore, the HTML file of the application only needs to include the content required by the matched equipment environment, does not need to embed multiple sets of CSS-style adaptive codes like the HTML file in the prior art, does not need to include the content required by other equipment environments, and has relatively small data volume. Based on the method, in the responsive page loading process, the consumed network flow can be reduced, and the loading speed is increased.
The device environment information of the present application mainly includes: at least one of device type (media type) information and device feature (media feature) information. Wherein, the device type information mainly includes: at least one of an operating system platform of the device and an engine kernel of the browser. The operating system platform can be linux, unix, mac or windows and the like; the engine kernel of the browser can be a Trident kernel, a Gecko kernel or a Webkit kernel and the like. The device characteristic information mainly includes: a browser window size (including a window width and/or a window height), an orientation of the browser window (e.g., portrait or landscape), an aspect ratio of the browser window, a width value of the device screen resolution, a height value of the device screen resolution, and an aspect ratio of the device screen.
Considering that information such as an operating system platform, an engine kernel of a browser, a device type, and an aspect ratio of a device screen generally have various forms, the combination of the various forms of the plurality of information results in various kinds of device environments. It is certainly the best response if matching HTML body and CSS files are configured separately for each equipment environment, but the cost of developing and maintaining the HTML body and CSS files is high. Therefore, a more preferred embodiment is: the equipment environments are classified into several categories, and matched HTML texts and CSS files are configured for each category of equipment environments. The present embodiment does not limit the classification manner of the device environment, and for example, the device environment may be classified according to the terminal type, such as mobile phone device environment information, personal computer device environment information, tablet computer device environment information, and the like; or, the device environment information with the same size of the operating system platform and the screen can be divided into a class according to the size of the operating system platform and the screen; and so on.
The scheme for maintaining the set of HTML text and CSS files for each equipment environment or each type of equipment environment has the advantages of relatively flexible later maintenance and relatively low cost. For example, it is relatively flexible to change CSS files at a later stage, and changing one set of CSS files does not affect other CSS files. Similarly, when the HTML text is changed at the later stage, only the CSS file corresponding to the HTML text needs to be tested, and other CSS files do not need to be tested. In addition, multiple sets of HTML texts and CSS files correspond to the same page in fact, and a user can access the same URL link, so that dotting of user data can be guaranteed. Moreover, multiple sets of HTML texts can use the same HTML header information, so that SEO unification can be ensured for some Search Engine Optimization (SEO) realized based on the HTML header information. Of course, different sets of HTML header information may be used for the HTML texts of the present application, so that the browser can request the server to obtain the corresponding HTML header information.
The following examples of the present application present several process flows that can implement the above principles. In addition, since it can be understood by those skilled in the art that the HTML header information needs to be acquired in addition to the HTML body to complete page rendering, in the following embodiments of the present application, too much description is not made on acquiring the HTML header information.
Fig. 1 is a schematic flowchart of a page loading method according to an embodiment of the present application. As shown in fig. 1, the method includes:
101. and acquiring the equipment environment information to be responded by the page to be displayed.
102. And acquiring a target HTML text and a target CSS file which are matched with the equipment environment information.
103. And performing page rendering processing according to the target CSS file and the target HTML text to obtain a page to be displayed.
The present embodiment provides a page loading method, which is used to implement loading of a responsive page, and at the same time, reduce consumed network traffic and increase loading speed. The method can be executed by a browser, which can be a browser applied to various device environments, such as a browser used on a personal computer, a browser used on a mobile phone, a browser used on a tablet computer, and the like.
In practical applications, when a user needs to access a page to which a URL link points, for example, the user manually enters a URL in an address bar of a browser, or the user clicks a link on a page, an access request is sent to the browser. And the browser determines that the corresponding page needs to be loaded according to the access request of the user. The page that the user needs to access is called a page to be presented.
In this embodiment, after determining that the page to be presented needs to be loaded, the browser acquires the device environment information to which the page to be presented needs to respond, so that the page content and layout can adapt to the device environment.
For a page to be rendered, the HTML file has the content that the page needs to be rendered, mainly the body part of the HTML file. The HTML file includes HTML header (head) information in addition to the HTML body. And the CSS file is mainly used to define the style of the page to be presented. Based on the above, after acquiring the equipment environment information to be responded by the page to be displayed, the browser acquires the target HTML text and the target CSS file matched with the equipment environment information; and then, performing page rendering processing according to the target CSS file and the target HTML text to obtain a page to be displayed. Specifically, the browser renders the target HTML file by using the target CSS file to obtain the page to be displayed. The target HTML text refers to a text part in an HTML file forming a page to be displayed.
Because the target HTML file in this embodiment only needs to include the content required by the device environment matched with the target HTML file, it is not necessary to embed multiple sets of CSS-style adaptation codes as the HTML file in the prior art, and it is also not necessary to include the content required by other device environments, and the data volume is relatively small, therefore, in the responsive page loading process, the consumed network traffic can be reduced, and the loading speed is increased.
Since the present embodiment needs to acquire the device environment information to which the page to be displayed needs to respond first, and then acquires the matched target HTML text and target CSS file according to the device environment information, it is not possible to acquire the device environment information by setting the meta attribute in the HTML file as in the prior art. To address this problem, this embodiment provides an implementation manner of obtaining device environment information through a responsive monitoring script.
Specifically, the browser may run a responsive monitoring script to access a window object of the browser; from the window object, device environment information is read. The main purpose of the responsive monitoring script is to enable access to the browser window object and to read the required device context information therefrom. All script codes capable of realizing the function are suitable for the embodiment, for example, the responsive monitoring script can be written by a javascript language.
Alternatively, the browser may maintain the responsive monitoring script locally. By adopting the mode, the browser can obtain the responsive monitoring script locally, the obtaining speed is high, and the efficiency of obtaining the equipment environment information is improved.
Optionally, each browser needs to use the responsive monitoring script, so that the responsive monitoring script can be maintained at the server, and thus, the code cost and the local storage space of the browser can be saved. Based on this, the browser may request the responsive monitoring script from the server before running the responsive monitoring script. The specific process is as follows:
the browser sends a page access request to a server to request HTML head information of a page to be displayed; the method comprises the steps that a server receives a page access request sent by a browser and returns HTML head information to the browser according to the request; the HTML header information includes an identification of the responsive monitoring script;
the browser receives HTML head information returned by the server, and acquires the identification of the responsive monitoring script from the HTML head information;
the browser sends a script obtaining request to the server, wherein the script obtaining request carries an identifier of the responsive monitoring script to request to obtain the responsive monitoring script; the server receives a script acquisition request sent by the browser, acquires an identifier of a responsive monitoring script from the script acquisition request, and returns the responsive monitoring script to the browser according to the identifier of the responsive monitoring script;
and the browser receives the responsive monitoring script returned by the server according to the identification of the responsive monitoring script.
In an embodiment of the above method for obtaining a responsive monitoring script from a server, the HTML header information further includes: and the first responsive configuration file comprises a corresponding relation among an HTML text mark, a CSS file mark and equipment environment information. The HTML text mark is used for marking the HTML text, and different HTML texts have different HTML text marks; the CSS file identification is used to identify a CSS file, with different CSS files having different CSS file identifications. The storage form of the correspondence relationship may be as shown in table 1 below, that is, the HTML text identifier, the CSS file identifier, and the device environment information directly correspond to each other.
TABLE 1
HTML text identification CSS file identification Device environment information
html_1 css_1 Context information _1
The storage form of the correspondence may be as shown in table 2 and table 3 below, that is, the correspondence is established between the HTML text identifier and the device environment information, and the correspondence is established between the CSS file identifier and the device environment information. Because the HTML text mark and the CSS file mark have a corresponding relation, the equipment environment information corresponding to the HTML text mark is the same as the equipment environment information corresponding to the CSS file mark by the HTML text mark, and on the basis, the corresponding relation between the HTML text mark and the CSS file mark is also established.
TABLE 2
HTML text identification Device environment information
html_1 Context information _1
TABLE 3
CSS file identification Device environment information
css_1 Context information _1
Based on the above, the browser may request the first responsive configuration file from the server in addition to requesting the responsive monitoring script from the server. Specifically, the browser sends a first file acquisition request to the server, where the first file acquisition request includes an identifier of a first responsive configuration file to request acquisition of the first responsive configuration file; the method comprises the steps that a server receives a first file acquisition request sent by a browser, acquires an identifier of a first responsive configuration file from the request, acquires the first responsive configuration file according to the identifier and returns the first responsive configuration file to the browser; the browser receives a first responsive configuration file returned by the server.
Based on the first responsive configuration file, an embodiment of obtaining a target HTML text and a target CSS file that match the device environment information includes:
matching in the corresponding relation included in the first response type configuration file according to the equipment environment information to acquire an HTML text mark and a CSS file mark corresponding to the equipment environment information;
and acquiring the HTML text identified by the HTML text identification from the server as a target HTML file, and acquiring the CSS file identified by the CSS file identification from the server as a target CSS file.
Alternatively, the process of the browser obtaining the target HTML text from the server may be the same process as the process of obtaining the target CSS file from the server. Specifically, the browser can send an information acquisition request to the server, wherein the information acquisition request carries an HTML text identifier and a CSS file identifier to request to acquire a target HTML text and a target CSS file; the method comprises the steps that a server receives an information acquisition request sent by a browser, acquires an HTML text mark and a CSS file mark from the information acquisition request, acquires an HTML text (namely a target HTML text) marked by the HTML text mark, acquires a CSS file (namely a target CSS file) marked by the CSS file mark, packages the target HTML text and the target CSS file and returns the target CSS file to the browser; and the browser receives the encapsulated target HTML text and the target CSS file returned by the server and analyzes the target HTML text and the target CSS file from the encapsulated target HTML text and the encapsulated target CSS file.
Alternatively, the process of the browser obtaining the target HTML text from the server and the process of obtaining the target CSS file from the server may be two different processes. Specifically, the browser can send an HTML acquisition request to the server, where the HTML acquisition request carries an HTML text identifier to request to acquire a target HTML text; the method comprises the steps that a server receives an HTML (hypertext markup language) acquisition request sent by a browser, acquires an HTML text identifier from the HTML text, acquires an HTML text (namely a target HTML text) identified by the HTML text identifier, packages the target HTML text and then returns the target HTML text to the browser; and the browser receives the encapsulated target HTML text returned by the server and analyzes the target HTML text from the encapsulated target HTML text. Similarly, the browser can send a CSS acquisition request to the server, wherein the CSS acquisition request carries a CSS file identifier to request to acquire a target CSS file; the server receives a CSS acquisition request sent by the browser, acquires a CSS file identifier from the CSS acquisition request, acquires a CSS file (namely a target CSS file) identified by the CSS file identifier, encapsulates the target CSS file and returns the encapsulated target CSS file to the browser; and the browser receives the encapsulated target CSS file returned by the server and analyzes the target CSS file from the encapsulated target CSS file.
It should be noted that the process of the browser requesting the server for the responsive monitoring script may be the same process as the process of requesting the server for the first responsive configuration file, or may be a different process.
In another embodiment based on the obtaining of the responsive monitoring script from the server, the HTML header information further includes: and the second responsive configuration file comprises a corresponding relation between the HTML text identification and the equipment environment information. The HTML text mark is used for marking the HTML text, and different HTML texts have different HTML text marks. The storage form of the correspondence may be as shown in table 2. The HTML text and the equipment environment information have a corresponding relation, the HTML text and the CSS file have a corresponding relation, the CSS file and the equipment environment information have a corresponding relation, and the CSS file corresponding to the target HTML text is the target CSS file matched with the equipment environment information. In this embodiment, the HTML body may carry the CSS file identifier of the CSS file corresponding thereto, thereby embodying the correspondence between the HTML body identifier and the CSS file identifier.
Based on the above, the browser may request a second responsive configuration file from the server in addition to requesting the responsive monitoring script from the server. Specifically, the browser sends a second file acquisition request to the server, where the second file acquisition request includes an identifier of a second responsive configuration file to request acquisition of the second responsive configuration file; the server receives a second file acquisition request sent by the browser, acquires an identifier of a second responsive configuration file from the request, acquires the second responsive configuration file according to the identifier and returns the second responsive configuration file to the browser; the browser receives the second responsive configuration file returned by the server.
Based on the second responsive configuration file, an embodiment of obtaining a target HTML text and a target CSS file that match the device environment information includes the following procedures:
matching in the corresponding relation included in the second response type configuration file according to the equipment environment information to acquire an HTML text mark corresponding to the equipment environment information;
acquiring the HTML text identified by the HTML text identification from a server as a target HTML file;
acquiring a CSS file identifier carried in a target HTML text;
and acquiring the CSS file identified by the CSS file identification from the server as a target CSS file.
The process of obtaining the HTML body identified by the HTML body identifier from the server as the target HTML file includes: the browser can send an HTML (hypertext markup language) acquisition request to the server, wherein the HTML acquisition request carries an HTML text mark to request to acquire a target HTML text; the method comprises the steps that a server receives an HTML (hypertext markup language) acquisition request sent by a browser, acquires an HTML text identifier from the HTML text, acquires an HTML text (namely a target HTML text) identified by the HTML text identifier, packages the target HTML text and then returns the target HTML text to the browser; and the browser receives the encapsulated target HTML text returned by the server and analyzes the target HTML text from the encapsulated target HTML text.
Similarly, the process of obtaining the CSS file identified by the CSS file identifier from the server as the target CSS file includes: the browser can send a CSS acquisition request to the server, and the CSS acquisition request carries a CSS file identifier to request to acquire a target CSS file; the server receives a CSS acquisition request sent by the browser, acquires a CSS file identifier from the CSS acquisition request, acquires a CSS file (namely a target CSS file) identified by the CSS file identifier, encapsulates the target CSS file and returns the encapsulated target CSS file to the browser; and the browser receives the encapsulated target CSS file returned by the server and analyzes the target CSS file from the encapsulated target CSS file.
It should be noted that the process of the browser requesting the server for the responsive monitoring script may be the same process as the process of requesting the server for the second responsive configuration file, or may be a different process.
It should be noted that the above two embodiments for obtaining the target HTML text and the target CSS file can be regarded as asynchronous response schemes. In the asynchronous response scheme, the browser can monitor the environmental information of the equipment and perform matching in the response configuration file to determine the corresponding HTML text identification and the CSS file identification in real time, and acquire the target HTML text and the target CSS file through interaction with the server, so that the method is suitable for loading the page with relatively complex interaction process, and the loading perception of the user in the using process can be reduced in a screen-by-screen loading mode.
In another optional implementation, the implementation process of obtaining the target HTML text and the target CSS file that are matched with the device environment information includes: the browser sends the equipment environment information to the server so that the server can obtain a target HTML text and a target CSS file according to the equipment environment information; and receiving a target HTML text and a target CSS file returned by the server.
Specifically, the browser only needs to send the device environment information to the server, and the server obtains the target HTML text and the target CSS file. For a server, receiving equipment environment information sent by a browser, and matching in a corresponding relation included in a first response configuration file maintained locally according to the equipment environment information to acquire an HTML text identifier and a CSS file identifier corresponding to the equipment environment information; acquiring an HTML text identified by the HTML text identification as a target HTML text, and acquiring a CSS file identified by the CSS file identification as a target CSS file; and returning the target HTML text and the target CSS file to the browser. The first responsive configuration file comprises a corresponding relation among an HTML text mark, a CSS file mark and equipment environment information. The storage formalization of the correspondence relationship may be as shown in table 1, or as shown in tables 2 and 3.
The process of returning the target HTML text to the browser by the server and the process of returning the target CSS file to the browser can be the same process or different processes. In addition, the server can package the target HTML text and the target CSS file and return the packaged target HTML text and the packaged target CSS file to the browser. Moreover, the server can also obtain HTML head information of the page to be displayed, and after the target HTML text is obtained, the HTML head information and the target HTML text can be assembled to form an HTML file, and the HTML file is returned to the browser; correspondingly, the browser specifically receives the HTML file returned by the server.
In another optional implementation, the implementation process of obtaining the target HTML text and the target CSS file that are matched with the device environment information includes: the browser sends the equipment environment information to the server so that the server can obtain a target HTML text according to the equipment environment information; receiving a target HTML text returned by the server; acquiring a CSS file identifier carried in a target HTML text; and acquiring the CSS file identified by the CSS file identification from the server as a target CSS file.
Specifically, the browser sends the device environment information to the server. For the server, receiving equipment environment information sent by the browser, and according to the equipment environment information, matching in a corresponding relation included in a second response type configuration file maintained locally to acquire an HTML text mark corresponding to the equipment environment information; acquiring the HTML text identified by the HTML text identification as a target HTML text; and returning the target HTML text to the browser. The browser receives a target HTML text returned by the server, and acquires a CSS file identifier from the target HTML text, wherein the target HTML text carries the identifier of the CSS file corresponding to the target HTML text; and sending a CSS acquisition request to the server, wherein the request carries a CSS file identifier to request acquisition of a target CSS file. And the server receives a CSS acquisition request sent by the browser, acquires a CSS file identifier from the CSS acquisition request, acquires a CSS file identified by the CSS file identifier as a target CSS file and returns the target CSS file to the browser. And the browser receives the target CSS file returned by the server. And the second responsive configuration file comprises the corresponding relation between the HTML text mark and the equipment environment information. The storage formalization of the correspondence relationship can be as shown in table 2.
The server can package the target HTML text and the target CSS file and return the packaged target HTML text and the packaged target CSS file to the browser. In addition, the server can also obtain HTML head information of a page to be displayed, and after the target HTML text is obtained, the HTML head information and the target HTML text can be assembled to form an HTML file, and the HTML file is returned to the browser; correspondingly, the browser specifically receives the HTML file returned by the server.
It should be noted that the above two embodiments for obtaining the target HTML text and the target CSS file can be regarded as synchronous response schemes. In the synchronous response scheme, the acquired equipment environment information is arranged on the browser side, and the response type configuration file is arranged on the server side, so that the corresponding HTML text identification and the CSS file identification cannot be determined in real time, and the method is suitable for loading the page with less complex interaction process and does not need to frequently monitor the page with the influence of user operation on the page layout.
Fig. 2 is a schematic flowchart of a page loading method according to another embodiment of the present application. As shown in fig. 2, the method includes:
201. and receiving an HTML text mark and a CSS file mark which are sent by the browser and correspond to the equipment environment information to be responded by the page to be displayed.
202. And acquiring the HTML text identified by the HTML text identification as a target HTML text matched with the equipment environment information, and acquiring the CSS file identified by the CSS file identification as a target CSS file matched with the equipment environment information.
203. And returning the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed.
The present embodiment provides a page loading method, which is used to implement loading of a responsive page, and at the same time, reduce network traffic consumed in a loading process and increase a loading speed. The method may be performed by a server.
Specifically, the browser acquires the equipment environment information to which the page to be displayed needs to respond, and acquires an HTML text identifier and a CSS file identifier corresponding to the equipment environment information. The process may specifically refer to the description in the above embodiments, and is not described herein again.
The browser sends the acquired HTML text identification and the acquired CSS file identification to a server; the method comprises the steps that a server receives an HTML text mark and a CSS file mark sent by a browser; acquiring an HTML text identified by an HTML text identifier as a target HTML text matched with the equipment environment information, and acquiring a CSS file identified by a CSS file identifier as a target CSS file matched with the equipment environment information; and returning the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed. The server can package the target HTML text and the target CSS file and then return the target HTML text and the target CSS file to the browser. In addition, the process of returning the target HTML text to the browser by the server and the process of returning the target CSS file to the browser can be the same process or different processes.
In an optional embodiment, the browser sends a page access request to the server; the method comprises the steps that a server receives a page access request sent by a browser, and returns HTML head information of a page to be displayed to the browser according to the page access request, wherein the HTML head information comprises an identifier of a response type monitoring script; the method comprises the steps that a browser receives HTML head information sent by a server, obtains an identifier of a response type monitoring script from the HTML head information, and sends a script obtaining request to the server, wherein the script obtaining request carries the identifier of the response type monitoring script; the server receives a script obtaining request sent by the browser, obtains the identification of the responsive monitoring script from the script obtaining request, and returns the responsive monitoring script to the browser according to the identification of the responsive monitoring script so that the browser can obtain the equipment environment information through the responsive monitoring script.
In an optional embodiment, the HTML header information further includes: and the first responsive configuration file comprises a corresponding relation among an HTML text mark, a CSS file mark and equipment environment information.
Based on this, after receiving the HTML header information, the browser may further obtain an identifier of a first responsive configuration file from the HTML header information, and send a first file obtaining request to the server, where the first file obtaining request includes the identifier of the first responsive configuration file; the server receives a first file acquisition request sent by the browser, acquires an identifier of a first responsive configuration file from the first file acquisition request, and returns the first responsive configuration file to the browser according to the identifier of the first responsive configuration file, so that the browser can determine an HTML file identifier and a CSS file identifier corresponding to the equipment environment information. The process of the browser determining the HTML file identifier and the CSS file identifier corresponding to the device environment information based on the first responsive configuration file may be referred to in the foregoing embodiments, and is not described herein again.
In an optional embodiment, the HTML header information further includes: and the second responsive configuration file comprises a corresponding relation between the HTML text identification and the equipment environment information.
Based on this, after receiving the HTML header information, the browser may further obtain an identifier of a second responsive configuration file from the HTML header information, and send a second file obtaining request to the server, where the second file obtaining request includes the identifier of the second responsive configuration file; and the server receives a second file acquisition request sent by the browser, acquires the identifier of a second responsive configuration file from the second file acquisition request, and returns the second responsive configuration file to the browser according to the identifier of the second responsive configuration file, so that the browser can determine the HTML file identifier and the CSS file identifier corresponding to the equipment environment information. The process of the browser determining the HTML file identifier and the CSS file identifier corresponding to the device environment information based on the second responsive configuration file may be referred to in the foregoing embodiments, and is not described herein again.
In this embodiment, the server and the browser are mutually matched, and the target HTML text and the target CSS file matched with the device environment information are acquired for the browser according to the HTML text identifier and the CSS file identifier provided by the browser, so that the browser can implement loading of a responsive page, and meanwhile, the consumed network traffic is reduced, and the loading speed is increased. In addition, the embodiment is suitable for loading the page with relatively complex interaction process, and the loading perception of the user in the using process can be reduced in a screen-by-screen loading mode.
Fig. 3 is a schematic flowchart of a page loading method according to another embodiment of the present application. As shown in fig. 3, the method includes:
301. and receiving equipment environment information which is sent by the browser and needs to be responded by the page to be displayed.
302. And acquiring a target HTML text and a target CSS file which are matched with the equipment environment information.
303. And returning the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed.
The present embodiment provides a page loading method, which is used to implement loading of a responsive page, and at the same time, reduce network traffic consumed in a loading process and increase a loading speed. The method may be performed by a server.
Specifically, the browser acquires the device environment information to which the page to be displayed needs to respond. The process may specifically refer to the description in the above embodiments, and is not described herein again.
The browser sends the acquired device environment information to the server, for example, the device environment information can be carried in a request and sent to the server; the server receives equipment environment information sent by the browser; then, acquiring a target HTML text and a target CSS file which are matched with the equipment environment information; and returning the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed.
The server can package the target HTML text and the target CSS file and then return the target HTML text and the target CSS file to the browser. In addition, the process of returning the target HTML text to the browser by the server and the process of returning the target CSS file to the browser can be the same process or different processes. And the server can also acquire the HTML head information of the page to be displayed, assemble the HTML head information and the target HTML text to form an HTML file, and return the HTML file to the browser. For the browser, the HTML file returned by the server is specifically received.
In an optional embodiment, the server locally maintains a first responsive configuration file, where the first responsive configuration file includes a correspondence between an HTML text identifier, a CSS file identifier, and device environment information. Based on this, the server can perform matching in the corresponding relation included in the first responsive configuration file according to the equipment environment information to acquire an HTML text identifier and a CSS file identifier corresponding to the equipment environment information; and then, acquiring the HTML text identified by the HTML text identification as a target HTML text, and acquiring the CSS file identified by the CSS file identification as a target CSS file.
In another alternative embodiment, the server maintains a second responsive profile locally, the second responsive profile including a correspondence between the HTML body identifier and the device environment information. Based on the above, the server can perform matching in the corresponding relationship included in the second responsive configuration file according to the above device environment information to obtain the HTML text identifier corresponding to the above device environment information; and acquiring the HTML text identified by the HTML text identification as a target HTML text, and returning the target HTML text to the browser.
In the above embodiment, each HTML body carries a CSS file identifier of its corresponding CSS file. That is, the target HTML text carries the CSS file id of the CSS file corresponding thereto. As the target HTML text corresponds to the equipment environment information, the CSS file corresponding to the target HTML text is the target CSS file matched with the equipment environment information. Based on the method, after receiving the target HTML text returned by the server, the browser can acquire the CSS file identifier from the target HTML text and send the CSS file identifier to the server; the method comprises the steps that a server receives a CSS file identifier which is sent by a browser and acquired from a target HTML text; and the server acquires the CSS file identified by the CSS file identification as a target CSS file and returns the target CSS file to the browser.
In this embodiment, the server and the browser are mutually matched, and the target HTML text and the target CSS file matched with the device environment information are acquired for the browser according to the device environment information provided by the browser, so that the browser can realize loading of a response-type page, and meanwhile, consumed network traffic is reduced, and the loading speed is increased. In addition, the embodiment is suitable for loading the pages with less complex interactive process and without frequently monitoring the influence of user operation on the page layout.
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 foregoing embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
Fig. 4 is a schematic structural diagram of a page loading apparatus according to another embodiment of the present application. The page loading apparatus may be implemented in a browser, as shown in fig. 4, and includes: an information acquisition module 41, a file acquisition module 42, and a rendering module 43.
The information obtaining module 41 is configured to obtain device environment information to which a page to be displayed needs to respond.
And a file obtaining module 42, configured to obtain a target HTML text and a target CSS file that are matched with the device environment information obtained by the information obtaining module 41.
And the rendering module 43 is configured to perform page rendering processing according to the target CSS file and the target HTML text acquired by the file acquisition module 42, so as to obtain a page to be displayed.
In an optional embodiment, the information obtaining module 41 is specifically configured to:
running a responsive monitoring script to access a window object of a browser;
and reading the equipment environment information which needs to respond to the page to be displayed from the window object.
In an optional embodiment, the information obtaining module 41 is further configured to: the responsive monitoring script is obtained from the server prior to running the responsive monitoring script. Specifically, the information obtaining module 41 is configured to:
sending a page access request to a server to request HTML head information of a page to be displayed;
receiving HTML header information returned by the server, wherein the HTML header information comprises an identifier of the responsive monitoring script;
sending a script acquisition request to a server, wherein the script acquisition request carries an identifier of a responsive monitoring script;
and receiving the responsive monitoring script returned by the server according to the identification of the responsive monitoring script.
In an optional embodiment, the HTML header information further includes: and the first responsive configuration file comprises a corresponding relation among an HTML text mark, a CSS file mark and equipment environment information.
Based on the above, the information obtaining module 41 is further configured to: a first responsive profile is obtained from a server. Specifically, the information obtaining module 41 is configured to:
sending a first file acquisition request to a server, wherein the first file acquisition request comprises an identifier of a first responsive configuration file so as to request to acquire the first responsive configuration file;
and receiving a first responsive configuration file returned by the server.
Correspondingly, the file obtaining module 42 is specifically configured to, when the target HTML text and the target CSS file are executed:
matching in the corresponding relation included in the first responsive configuration file according to the equipment environment information to acquire an HTML text mark and a CSS file mark corresponding to the equipment environment information;
and acquiring the HTML text identified by the HTML text identification from the server as a target HTML file, and acquiring the CSS file identified by the CSS file identification from the server as a target CSS file.
In another optional embodiment, the HTML header information further includes: and the second responsive configuration file comprises a corresponding relation between the HTML text identification and the equipment environment information.
Based on the above, the information obtaining module 41 is further configured to: a second responsive profile is obtained from the server. Specifically, the information obtaining module 41 is configured to:
sending a second file acquisition request to the server, wherein the second file acquisition request comprises an identifier of a second responsive configuration file so as to request to acquire the second responsive configuration file;
and receiving a second responsive configuration file returned by the server.
Correspondingly, the file obtaining module 42 is specifically configured to, when the target HTML text and the target CSS file are executed:
matching in the corresponding relation included in the second responsive configuration file according to the equipment environment information to acquire an HTML text mark corresponding to the equipment environment information;
acquiring an HTML text identified by an HTML text identifier from a server as a target HTML text;
acquiring a CSS file identifier carried in a target HTML text;
and acquiring the CSS file identified by the CSS file identification from the server as a target CSS file.
In another optional embodiment, when the target HTML text and the target CSS file are executed by the file obtaining module 42, specifically:
sending the equipment environment information to a server so that the server can acquire a target HTML text and a target CSS file according to the equipment environment information;
and receiving a target HTML text and a target CSS file returned by the server.
In another optional embodiment, when the target HTML text and the target CSS file are executed by the file obtaining module 42, specifically:
sending the equipment environment information to a server so that the server can acquire an HTML text according to an equipment environment information acquisition target;
receiving a target HTML text returned by the server;
acquiring a CSS file identifier carried in a target HTML text;
and acquiring the CSS file identified by the CSS file identification from the server as a target CSS file.
The page loading device provided by the embodiment supports the configuration of the HTML texts matched with the different equipment environment information, and only the HTML texts matched with the equipment environment information need to be loaded in the page loading process.
Fig. 5 is a schematic structural diagram of a page loading apparatus according to another embodiment of the present application. The apparatus may be implemented in a server, as shown in fig. 5, and includes: a receiving module 51, a file acquiring module 52 and a transmitting module 53.
The receiving module 51 is configured to receive an HTML text identifier and a CSS file identifier corresponding to the device environment information to be responded to by the page to be displayed, where the HTML text identifier and the CSS file identifier are sent by the browser.
The file obtaining module 52 is configured to obtain the HTML text identified by the HTML text identifier received by the receiving module 51 as a target HTML text matched with the device environment information, and obtain the CSS file identified by the CSS file identifier received by the receiving module 51 as a target CSS file matched with the device environment information.
And the sending module 53 is configured to return the target HTML text and the target CSS file acquired by the file acquiring module 52 to the browser, so that the browser renders a page to be displayed.
Optionally, the receiving module 51 is further configured to:
the method comprises the steps of receiving a page access request sent by a browser and receiving a script obtaining request of the browser, wherein the script obtaining request carries an identification of a response type monitoring script.
Correspondingly, the sending module 53 is further configured to:
returning HTML head information of a page to be displayed to the browser according to the page access request, wherein the HTML head information comprises an identifier of a responsive monitoring script; and returning the responsive monitoring script to the browser according to the identification of the responsive monitoring script so that the browser can acquire the equipment environment information through the responsive monitoring script.
Further, the HTML header information further includes: and the first responsive configuration file comprises a corresponding relation among an HTML text mark, a CSS file mark and equipment environment information.
Based on the above, the receiving module 51 is further configured to:
and receiving a first file acquisition request sent by the browser, wherein the first file acquisition request comprises an identifier of a first responsive configuration file.
Correspondingly, the sending module 53 is further configured to:
and returning the first responsive configuration file to the browser according to the identifier of the first responsive configuration file, so that the browser can determine the HTML file identifier and the CSS file identifier corresponding to the equipment environment information.
Further, the HTML header information further includes: and the second responsive configuration file comprises a corresponding relation between the HTML text identification and the equipment environment information.
Based on the above, the receiving module 51 is further configured to:
and receiving a second file acquisition request sent by the browser, wherein the second file acquisition request comprises an identifier of a second responsive configuration file.
Correspondingly, the sending module 53 is further configured to:
and returning the second responsive configuration file to the browser according to the identifier of the second responsive configuration file, so that the browser can determine the HTML file identifier and the CSS file identifier corresponding to the equipment environment information.
The page loading device provided by this embodiment is implemented in a server, and is matched with a browser, and obtains a target HTML text and a target CSS file matched with device environment information for the browser according to an HTML text identifier and a CSS file identifier provided by the browser, so that the browser can implement loading of a responsive page, and at the same time, network traffic consumed is reduced, and loading speed is increased. In addition, the page loading device provided by the embodiment is suitable for loading the page with relatively complex interaction process, and can reduce the loading perception of the user in the using process in a screen-by-screen loading mode.
Fig. 6 is a schematic structural diagram of a page loading apparatus according to another embodiment of the present application. The apparatus may be implemented in a server, as shown in fig. 6, and includes: a receiving module 61, a file acquiring module 62 and a sending module 63.
The receiving module 61 is configured to receive device environment information sent by the browser and to which a page to be displayed needs to respond.
The file acquisition module 62 is configured to acquire a target HTML text and a target CSS file that are matched with the device environment information received by the receiving module 61;
and the sending module 63 is configured to return the target HTML text and the target CSS file acquired by the file acquiring module 62 to the browser, so that the browser renders a page to be displayed.
In an optional embodiment, the file obtaining module 62 is specifically configured to:
matching in the corresponding relation included in the first responsive configuration file according to the equipment environment information to acquire an HTML text mark and a CSS file mark corresponding to the equipment environment information, wherein the first responsive configuration file includes the corresponding relation among the HTML text mark, the CSS file mark and the equipment environment information;
and acquiring the HTML text identified by the HTML text identification as a target HTML text, and acquiring the CSS file identified by the CSS file identification as a target CSS file.
In another optional embodiment, the file obtaining module 62 is specifically configured to:
matching in the corresponding relation included in the second responsive configuration file according to the equipment environment information to acquire an HTML text mark corresponding to the equipment environment information, wherein the second responsive configuration file includes the corresponding relation between the HTML text mark and the equipment environment information;
acquiring an HTML text identified by an HTML text identifier as a target HTML text;
receiving a CSS file identifier which is sent by a browser and acquired from a target HTML text;
and acquiring the CSS file identified by the CSS file identification as a target CSS file.
The page loading device provided by this embodiment is implemented in a server, and is matched with a browser, and obtains a target HTML text and a target CSS file matched with device environment information of the browser according to the device environment information provided by the browser, so that the browser can implement loading of a responsive page, and at the same time, reduce consumed network traffic and improve loading speed. In addition, the page loading device provided by the embodiment is suitable for loading the pages which are not complicated in the interaction process and do not need to frequently monitor the influence of user operation on the page layout.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the several embodiments provided in the present application, it should be understood that the disclosed system, apparatus and method may be implemented in other manners. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the units is only one logical division, 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 through some interfaces, devices or units, and may be in an electrical, mechanical 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, or in a form of hardware plus a software functional unit.
The integrated unit implemented in the form of a software functional unit may be stored in a computer readable storage medium. The software functional unit is stored in a storage medium and includes several instructions to enable a computer device (which may be a personal computer, a server, or a network device) or a processor (processor) to execute some steps of the methods according to the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
Finally, it should be noted that: the above embodiments are only used to illustrate the technical solutions of the present application, and not to limit 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 (28)

1. A page loading method is characterized by comprising the following steps:
the server is configured with a plurality of HTML texts and a plurality of CSS files which are respectively matched with different equipment environments, and the HTML texts and the CSS files have one-to-one correspondence;
the browser acquires equipment environment information to be responded by a page to be displayed;
the browser acquires a target HTML text and a target CSS file which are matched with the equipment environment information from the server;
the browser carries out page rendering processing according to the target CSS file and the target HTML text to obtain the page to be displayed;
and the target HTML text is a text part in an HTML file forming the page to be displayed.
2. The method according to claim 1, wherein the obtaining of the device environment information to which the page to be presented needs to respond comprises:
running a responsive monitoring script to access a window object of a browser;
and reading the equipment environment information from the window object.
3. The method of claim 2, wherein prior to running the responsive monitoring script to access the browser window object, comprising:
sending a page access request to a server to request HTML head information of the page to be displayed;
receiving the HTML header information returned by the server, wherein the HTML header information comprises an identifier of the responsive monitoring script;
sending a script obtaining request to the server, wherein the script obtaining request carries the identification of the responsive monitoring script;
and receiving the responsive monitoring script returned by the server according to the identification of the responsive monitoring script.
4. The method of claim 3, wherein the HTML header information further comprises: the identification of a first responsive configuration file, wherein the first responsive configuration file comprises a corresponding relation among an HTML text identification, a CSS file identification and equipment environment information;
the method further comprises the following steps:
sending a first file acquisition request to the server, wherein the first file acquisition request comprises an identifier of the first responsive configuration file so as to request to acquire the first responsive configuration file;
receiving the first responsive configuration file returned by the server;
the acquiring of the target HTML text and the target CSS file matched with the equipment environment information comprises the following steps:
matching in the corresponding relation included in the first responsive configuration file according to the equipment environment information to acquire an HTML text mark and a CSS file mark corresponding to the equipment environment information;
and acquiring the HTML text identified by the HTML text identification from the server as the target HTML file, and acquiring the CSS file identified by the CSS file identification from the server as the target CSS file.
5. The method of claim 3, wherein the HTML header information further comprises: the identification of a second responsive configuration file, wherein the second responsive configuration file comprises the corresponding relation between the HTML text identification and the equipment environment information;
the method further comprises the following steps:
sending a second file acquisition request to the server, wherein the second file acquisition request comprises an identifier of the second responsive configuration file so as to request to acquire the second responsive configuration file;
receiving the second responsive configuration file returned by the server;
the acquiring of the target HTML text and the target CSS file matched with the equipment environment information comprises the following steps:
matching in the corresponding relation included in the second responsive configuration file according to the equipment environment information to acquire an HTML text mark corresponding to the equipment environment information;
acquiring the HTML text identified by the HTML text identification from the server as the target HTML text;
acquiring a CSS file identifier carried in the target HTML text;
and acquiring the CSS file identified by the CSS file identification from the server as the target CSS file.
6. The method of claim 1, wherein obtaining the target HTML body and the target CSS file that match the device environment information comprises:
sending the equipment environment information to a server so that the server can acquire the target HTML text and the target CSS file according to the equipment environment information;
and receiving the target HTML text and the target CSS file returned by the server.
7. The method of claim 1, wherein obtaining the target HTML body and the target CSS file that match the device environment information comprises:
sending the equipment environment information to a server so that the server can obtain the target HTML text according to the equipment environment information;
receiving the target HTML text returned by the server;
acquiring a CSS file identifier carried in the target HTML text;
and acquiring the CSS file identified by the CSS file identification from the server as the target CSS file.
8. A page loading method is characterized by comprising the following steps:
the server is configured with a plurality of HTML texts and a plurality of CSS files which are respectively matched with different equipment environments, and the HTML texts and the CSS files have one-to-one correspondence;
the method comprises the steps that a server receives an HTML text mark and a CSS file mark which are sent by a browser and correspond to equipment environment information to be responded by a page to be displayed;
the server acquires the HTML text identified by the HTML text identification as a target HTML text matched with the equipment environment information, and acquires the CSS file identified by the CSS file identification as a target CSS file matched with the equipment environment information;
the server returns the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed;
and the target HTML text is a text part in an HTML file forming the page to be displayed.
9. The method of claim 8, wherein before receiving the HTML text identifier and the CSS file identifier corresponding to the device environment information to be presented, where the page to be presented needs to respond, sent by the browser, further comprising:
receiving a page access request sent by the browser;
returning HTML head information of the page to be displayed to the browser according to the page access request, wherein the HTML head information comprises an identifier of a responsive monitoring script;
receiving a script obtaining request of the browser, wherein the script obtaining request carries an identifier of the responsive monitoring script;
and returning the responsive monitoring script to the browser according to the identification of the responsive monitoring script, so that the browser can acquire the equipment environment information through the responsive monitoring script.
10. The method of claim 9, wherein the HTML header information further comprises: the identification of a first responsive configuration file, wherein the first responsive configuration file comprises a corresponding relation among an HTML text identification, a CSS file identification and equipment environment information;
the method further comprises the following steps:
receiving a first file acquisition request sent by the browser, wherein the first file acquisition request comprises an identifier of the first responsive configuration file;
and returning the first responsive configuration file to the browser according to the identifier of the first responsive configuration file, so that the browser can determine the HTML file identifier and the CSS file identifier corresponding to the equipment environment information.
11. The method of claim 9, wherein the HTML header information further comprises: the identification of a second responsive configuration file, wherein the second responsive configuration file comprises the corresponding relation between the HTML text identification and the equipment environment information;
the method further comprises the following steps:
receiving a second file acquisition request sent by the browser, wherein the second file acquisition request comprises an identifier of the second responsive configuration file;
and returning the second responsive configuration file to the browser according to the identifier of the second responsive configuration file, so that the browser can determine the HTML file identifier and the CSS file identifier corresponding to the equipment environment information.
12. A page loading method is characterized by comprising the following steps:
the server is configured with a plurality of HTML texts and a plurality of CSS files which are respectively matched with different equipment environments, and the HTML texts and the CSS files have one-to-one correspondence;
the method comprises the steps that a server receives equipment environment information which is sent by a browser and needs to be responded by a page to be displayed;
the server acquires a target HTML text and a target CSS file which are matched with the equipment environment information;
the server returns the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed;
and the target HTML text is a text part in an HTML file forming the page to be displayed.
13. The method of claim 12, wherein obtaining the target HTML body and the target CSS file that match the device environment information comprises:
matching in the corresponding relation included in a first responsive configuration file according to the equipment environment information to acquire an HTML text mark and a CSS file mark corresponding to the equipment environment information, wherein the first responsive configuration file includes the corresponding relation among the HTML text mark, the CSS file mark and the equipment environment information;
and acquiring the HTML text identified by the HTML text identification as the target HTML text, and acquiring the CSS file identified by the CSS file identification as the target CSS file.
14. The method of claim 12, wherein obtaining the target HTML body matching the device environment information comprises:
matching in a corresponding relation included in a second responsive configuration file according to the equipment environment information to acquire an HTML text mark corresponding to the equipment environment information, wherein the second responsive configuration file includes the corresponding relation between the HTML text mark and the equipment environment information;
acquiring the HTML text identified by the HTML text identification as the target HTML text;
the acquiring of the target CSS file matched with the equipment environment information includes:
receiving CSS file identification which is sent by the browser and acquired from the target HTML text;
and acquiring the CSS file identified by the CSS file identification as the target CSS file.
15. A page loading apparatus implemented in a browser, the page loading apparatus comprising:
the information acquisition module is used for acquiring the equipment environment information to be responded by the page to be displayed;
the file acquisition module is used for acquiring a target HTML text and a target CSS file which are matched with the equipment environment information from a server; the server is configured with a plurality of HTML texts and a plurality of CSS files which are respectively matched with different equipment environments, and the HTML texts and the CSS files have one-to-one correspondence;
the rendering module is used for performing page rendering processing according to the target CSS file and the target HTML text to obtain the page to be displayed;
and the target HTML text is a text part in an HTML file forming the page to be displayed.
16. The apparatus of claim 15, wherein the information acquisition module is specifically configured to:
running a responsive monitoring script to access a window object of a browser;
and reading the equipment environment information from the window object.
17. The apparatus of claim 16, wherein the information obtaining module is further configured to:
sending a page access request to a server to request HTML head information of the page to be displayed;
receiving the HTML header information returned by the server, wherein the HTML header information comprises an identifier of the responsive monitoring script;
sending a script obtaining request to the server, wherein the script obtaining request carries the identification of the responsive monitoring script;
and receiving the responsive monitoring script returned by the server according to the identification of the responsive monitoring script.
18. The apparatus of claim 17, wherein the HTML header information further comprises: the identification of a first responsive configuration file, wherein the first responsive configuration file comprises a corresponding relation among an HTML text identification, a CSS file identification and equipment environment information;
the information acquisition module is further configured to:
sending a first file acquisition request to the server, wherein the first file acquisition request comprises an identifier of the first responsive configuration file so as to request to acquire the first responsive configuration file;
receiving the first responsive configuration file returned by the server;
the file acquisition module is specifically configured to:
matching in the corresponding relation included in the first responsive configuration file according to the equipment environment information to acquire an HTML text mark and a CSS file mark corresponding to the equipment environment information;
and acquiring the HTML text identified by the HTML text identification from the server as the target HTML file, and acquiring the CSS file identified by the CSS file identification from the server as the target CSS file.
19. The apparatus of claim 16, wherein the HTML header information further comprises: the identification of a second responsive configuration file, wherein the second responsive configuration file comprises the corresponding relation between the HTML text identification and the equipment environment information;
the information acquisition module is further configured to:
sending a second file acquisition request to the server, wherein the second file acquisition request comprises an identifier of the second responsive configuration file so as to request to acquire the second responsive configuration file;
receiving the second responsive configuration file returned by the server;
the file acquisition module is specifically configured to:
matching in the corresponding relation included in the second responsive configuration file according to the equipment environment information to acquire an HTML text mark corresponding to the equipment environment information;
acquiring the HTML text identified by the HTML text identification from the server as the target HTML text;
acquiring a CSS file identifier carried in the target HTML text;
and acquiring the CSS file identified by the CSS file identification from the server as the target CSS file.
20. The apparatus of claim 15, wherein the file acquisition module is specifically configured to:
sending the equipment environment information to a server so that the server can acquire the target HTML text and the target CSS file according to the equipment environment information;
and receiving the target HTML text and the target CSS file returned by the server.
21. The apparatus of claim 15, wherein the file acquisition module is specifically configured to:
sending the equipment environment information to a server so that the server can obtain the target HTML text according to the equipment environment information;
receiving the target HTML text returned by the server;
acquiring a CSS file identifier carried in the target HTML text;
and acquiring the CSS file identified by the CSS file identification from the server as the target CSS file.
22. A page loading device is realized in a server and is characterized in that the server is provided with a plurality of HTML texts and a plurality of CSS files which are respectively matched with different equipment environments, and the HTML texts and the CSS files have one-to-one correspondence;
the page loading device comprises:
the receiving module is used for receiving HTML text identification and CSS file identification which are sent by the browser and correspond to the equipment environment information to be responded by the page to be displayed;
the file acquisition module is used for acquiring an HTML text identified by the HTML text identification as a target HTML text matched with the equipment environment information and acquiring a CSS file identified by the CSS file identification as a target CSS file matched with the equipment environment information;
the sending module is used for returning the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed;
and the target HTML text is a text part in an HTML file forming the page to be displayed.
23. The apparatus of claim 22, wherein the receiving module is further configured to:
receiving a page access request sent by the browser and receiving a script acquisition request of the browser, wherein the script acquisition request carries an identifier of a responsive monitoring script;
the sending module is further configured to:
returning HTML head information of the page to be displayed to the browser according to the page access request, wherein the HTML head information comprises an identifier of the responsive monitoring script; and returning the responsive monitoring script to the browser according to the identification of the responsive monitoring script, so that the browser can acquire the equipment environment information through the responsive monitoring script.
24. The apparatus of claim 23, wherein the HTML header information further comprises: the identification of a first responsive configuration file, wherein the first responsive configuration file comprises a corresponding relation among an HTML text identification, a CSS file identification and equipment environment information;
the receiving module is further configured to:
receiving a first file acquisition request sent by the browser, wherein the first file acquisition request comprises an identifier of the first responsive configuration file;
the sending module is further configured to:
and returning the first responsive configuration file to the browser according to the identifier of the first responsive configuration file, so that the browser can determine the HTML file identifier and the CSS file identifier corresponding to the equipment environment information.
25. The apparatus of claim 23, wherein the HTML header information further comprises: the identification of a second responsive configuration file, wherein the second responsive configuration file comprises the corresponding relation between the HTML text identification and the equipment environment information;
the receiving module is further configured to:
receiving a second file acquisition request sent by the browser, wherein the second file acquisition request comprises an identifier of the second responsive configuration file;
the sending module is further configured to:
and returning the second responsive configuration file to the browser according to the identifier of the second responsive configuration file, so that the browser can determine the HTML file identifier and the CSS file identifier corresponding to the equipment environment information.
26. A page loading device is realized in a server and is characterized in that the server is provided with a plurality of HTML texts and a plurality of CSS files which are respectively matched with different equipment environments, and the HTML texts and the CSS files have one-to-one correspondence;
the page loading device comprises:
the receiving module is used for receiving equipment environment information which is sent by a browser and needs to be responded by a page to be displayed;
the file acquisition module is used for acquiring a target HTML text and a target CSS file which are matched with the equipment environment information;
the sending module is used for returning the target HTML text and the target CSS file to the browser so that the browser renders the page to be displayed;
and the target HTML text is a text part in an HTML file forming the page to be displayed.
27. The apparatus of claim 26, wherein the file acquisition module is specifically configured to:
matching in the corresponding relation included in a first responsive configuration file according to the equipment environment information to acquire an HTML text mark and a CSS file mark corresponding to the equipment environment information, wherein the first responsive configuration file includes the corresponding relation among the HTML text mark, the CSS file mark and the equipment environment information;
and acquiring the HTML text identified by the HTML text identification as the target HTML text, and acquiring the CSS file identified by the CSS file identification as the target CSS file.
28. The apparatus of claim 26, wherein the file acquisition module is specifically configured to:
matching in a corresponding relation included in a second responsive configuration file according to the equipment environment information to acquire an HTML text mark corresponding to the equipment environment information, wherein the second responsive configuration file includes the corresponding relation between the HTML text mark and the equipment environment information;
acquiring the HTML text identified by the HTML text identification as the target HTML text;
receiving CSS file identification which is sent by the browser and acquired from the target HTML text;
and acquiring the CSS file identified by the CSS file identification as the target CSS file.
CN201510621240.8A 2015-09-23 2015-09-23 Page loading method and device Active CN106547806B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510621240.8A CN106547806B (en) 2015-09-23 2015-09-23 Page loading method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510621240.8A CN106547806B (en) 2015-09-23 2015-09-23 Page loading method and device

Publications (2)

Publication Number Publication Date
CN106547806A CN106547806A (en) 2017-03-29
CN106547806B true CN106547806B (en) 2020-12-18

Family

ID=58365337

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510621240.8A Active CN106547806B (en) 2015-09-23 2015-09-23 Page loading method and device

Country Status (1)

Country Link
CN (1) CN106547806B (en)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107729074B (en) * 2017-09-25 2021-02-23 百富计算机技术(深圳)有限公司 Method and device for loading user interface of POS application
CN109857473A (en) * 2017-11-29 2019-06-07 北京京东尚科信息技术有限公司 A kind of loading method and device of page data
CN110609966B (en) * 2018-05-29 2023-06-06 阿里巴巴集团控股有限公司 Page display method, device and equipment thereof
CN109934642A (en) * 2019-03-29 2019-06-25 珠海豹好玩科技有限公司 A kind of advertisement generation method, methods of exhibiting and corresponding system
CN110889074B (en) * 2019-11-27 2022-04-08 珠海格力电器股份有限公司 Page display method and device, storage medium and electronic equipment

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103634358A (en) * 2012-08-27 2014-03-12 深圳中兴网信科技有限公司 Browser adaption method and apparatus

Family Cites Families (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO1999063453A1 (en) * 1998-06-05 1999-12-09 Creative Internet Concepts Llc System for inserting background advertising into web page presentation or e-mail messages
US7467146B2 (en) * 2005-05-05 2008-12-16 International Business Machines Corporation System, method and program product for determining whether a web page returned to a web browser is a redirected web page
CN102254550B (en) * 2010-05-21 2015-06-17 腾讯科技(深圳)有限公司 Method and system for reading characters on webpage
US9320968B1 (en) * 2011-05-24 2016-04-26 Zynga Inc. Online game with matching of different data types
CN102915308B (en) * 2011-08-02 2016-03-09 阿里巴巴集团控股有限公司 A kind of method of page rendering and device
US20130227397A1 (en) * 2012-02-24 2013-08-29 Microsoft Corporation Forming an instrumented text source document for generating a live web page
US9471550B2 (en) * 2012-10-16 2016-10-18 Linkedin Corporation Method and apparatus for document conversion with font metrics adjustment for format compatibility
CN103049536A (en) * 2012-11-01 2013-04-17 广州汇讯营销咨询有限公司 Webpage main text content extracting method and webpage text content extracting system
CN103064943B (en) * 2012-12-25 2016-11-23 北京奇虎科技有限公司 A kind of client device
CN103336794B (en) * 2013-06-09 2018-07-06 百度在线网络技术(北京)有限公司 For providing the corresponding method and apparatus that information is presented in target pages
US20150082424A1 (en) * 2013-09-19 2015-03-19 Jayant Shukla Active Web Content Whitelisting
CN104063460B (en) * 2014-06-25 2018-10-09 北京奇虎科技有限公司 A kind of method and apparatus loading webpage in a browser
CN104123362A (en) * 2014-07-18 2014-10-29 华中师范大学 Multi-terminal-device-oriented webpage adaptation layout method
CN104572843B (en) * 2014-12-12 2018-06-08 百度在线网络技术(北京)有限公司 The loading method and device of a kind of page

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103634358A (en) * 2012-08-27 2014-03-12 深圳中兴网信科技有限公司 Browser adaption method and apparatus

Also Published As

Publication number Publication date
CN106547806A (en) 2017-03-29

Similar Documents

Publication Publication Date Title
CN106547806B (en) Page loading method and device
EP3485400B1 (en) Methods and systems for server-side rendering of native content for presentation
CN106484383B (en) Page rendering method, device and equipment
WO2018133452A1 (en) Webpage rendering method and related device
CN105975576B (en) Terminal content adaptive display method and device and terminal
US8869025B2 (en) Method and system for identifying advertisement in web page
CN109683998A (en) Internationalize implementation method, device and system
US20080184137A1 (en) Search results clustering in tabbed browsers
CN105528408A (en) Page display method and apparatus
CN102402518A (en) Method and device for accessing webpage
CN104462131A (en) Method and device for processing information issuing page
CN113382083B (en) Webpage screenshot method and device
US20140095579A1 (en) System and method for increasing web site serving performance
CN103577526A (en) Method and system as well as browser for verifying page modification
CN103258058A (en) Page display method and system and browser
CN103064989A (en) Webpage storing and opening method and device
CN113220657A (en) Data processing method and device and computer equipment
CN108885544B (en) Front-end page internationalized processing method, application server and computer-readable storage medium
CN104794118A (en) Webpage information processing method, device and system
CN112672187B (en) Page generation method and device, computer equipment and readable storage medium
US10417318B2 (en) Treatment controller
CN106294760A (en) Sheet disposal method and server, client
US8867837B2 (en) Detecting separator lines in a web page
US20160117392A1 (en) Information search method and apparatus
CN113050921A (en) Webpage conversion method, device, storage medium and computer equipment

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant