CN110851683A - Webpage display method for prerendering - Google Patents
Webpage display method for prerendering Download PDFInfo
- Publication number
- CN110851683A CN110851683A CN201911022667.0A CN201911022667A CN110851683A CN 110851683 A CN110851683 A CN 110851683A CN 201911022667 A CN201911022667 A CN 201911022667A CN 110851683 A CN110851683 A CN 110851683A
- Authority
- CN
- China
- Prior art keywords
- web page
- rendering
- webpage
- user
- rendered
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 15
- 238000009877 rendering Methods 0.000 claims description 20
- 238000004806 packaging method and process Methods 0.000 abstract 1
- 238000005457 optimization Methods 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/951—Indexing; Web crawling techniques
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
The invention discloses a webpage display method for prerendering, which prerenders a webpage which does not change frequently in a project, namely dynamically renders the webpage according to the hierarchy of a route before packaging the project when the project is constructed, and outputs corresponding html. The web browser then retrieves, for each of the plurality of links, the web page associated with the link, and renders the retrieved web pages prior to any selection by the user to view them. The browser then receives a user selection of a preview link and displays a rendered web page associated with the preview link in the content area.
Description
Technical Field
The invention belongs to the technical field of front-end development, and particularly relates to a webpage display method for prerendering.
Background
With the rapid development of the internet, the number of network users is increasing, and network devices are also coming to endlessly, and in order to meet the increasing browsing experience demands of different users, display devices are changing continuously, and what is most prominent is that the resolution of a display is changed from the first single fixed to the present diversified ones. But this brings extra development effort to the web page developer. The focus of work for the web page developer should be to complete the functionality of the page, and to beautify the style, giving the user an enjoyable viewing experience, and these should not include the size of the components, and the scale between the components.
For example, when a developer develops a web page, the developer often needs to stop the development of functions during the development or the development process to continue the sensory experience of the web page according to the characteristics of the own screen, wherein the style of the components is already realized by the existing various UI frames, so that the size of the debugging components and the distance between the debugging components become the most common redundant work of the developer. The mainstream front-end framework is a single-page application, and data is requested from the back end in an ajax asynchronous request mode and then rendered at the front end. Html file is only provided after the project is compiled, and the content only remains the reference of js and css, so that the html file is inconvenient to capture, and the seo is very unfavorable. Accordingly, the prior art is yet to be improved and developed. Although some UI frameworks integrate the sizes and the intervals of components into the framework style, the requirements of users and developers on the aesthetic feeling of the web pages cannot be met in the development, and the developers need to revise the layout and the proportion of the web pages according to their own screens. Generally, in order to adapt to different screen sizes, developers generally need to perform adaptive web page development, which is a tedious and unquestionable task, and each page needs to perform adjustment work once, which undoubtedly brings a lot of unnecessary workload to the developers. Some developers of existing development tools can directly operate typesetting, such as control size and the like, but the style size values formed by the development tools are basically fixed size values, and the requirements of different displays of the public are difficult to adapt.
Disclosure of Invention
The invention aims to provide a webpage display method for prerendering, which solves the problem that the front-end typesetting of a webpage is fixed and different requirements of a user cannot be met in the prior art.
The technical scheme adopted by the invention is as follows: a method for displaying a pre-rendered web page, comprising the steps of:
step 1: performing basic configuration in advance to obtain a set of data items, wherein the set comprises links to web pages;
step 2: retrieving, for each of a plurality of the links, a web page associated with the link;
step 3, rendering the retrieved web page before the user of the browser makes any selection to view the retrieved page;
step 4, performing pre-rendering configuration on the designated page, and starting pre-rendering; constructing a project, and generating a folder under a configured generation directory;
step 5, returning corresponding html files through different routes;
step 6: receiving a selection of a preview link by the user; and displaying a rendered web page associated with the previewed link in the content area;
and 7: acquiring a DOM tree generated by analyzing according to the webpage content; calculating the proportion value of each visible node in the DOM tree relative to the webpage window;
and 8: and setting the size of each visible node in the DOM tree according to the proportion value to serve as a pre-rendering tree, so that a browser can perform webpage presentation according to the pre-rendering tree.
The pre-rendering is performed in association with a tab that is not visible to a user in the user interface, and further includes replacing content in the currently visible tab with rendered content in the tab in response to input navigating to the network address.
And saving the html file in the generated directory.
The collection of data items includes a text message from a blog service, the text message having at least one link to a web page.
Calculating the proportion value of each visible node in the DOM tree relative to the webpage window comprises the following steps: and calculating the proportion value of each visible node relative to the browser window according to the proportion set by the user.
The invention has the beneficial effects that:
according to the method and the device, the page which does not change frequently in the project is pre-rendered, namely when the project is constructed, the dynamic rendering is performed according to the routing hierarchy before the project is packaged, and the corresponding html is output. The search engine can grab the page contents from html, so that the optimization of the website search engine is promoted.
Detailed Description
The present invention will be described in detail with reference to the following embodiments.
A method for displaying a pre-rendered web page, comprising the steps of:
step 1: performing basic configuration in advance to obtain a set of data items, wherein the set comprises links to web pages;
step 2: retrieving, for each of a plurality of the links, a web page associated with the link;
step 3, rendering the retrieved web page before the user of the browser makes any selection to view the retrieved page;
step 4, performing pre-rendering configuration on the designated page, and starting pre-rendering; constructing a project, and generating a folder under a configured generation directory;
step 5, returning corresponding html files through different routes;
step 6: receiving a selection of a preview link by the user; and displaying a rendered web page associated with the previewed link in the content area;
and 7: acquiring a DOM tree generated by analyzing according to the webpage content; calculating the proportion value of each visible node in the DOM tree relative to the webpage window;
and 8: and setting the size of each visible node in the DOM tree according to the proportion value to serve as a pre-rendering tree, so that a browser can perform webpage presentation according to the pre-rendering tree.
The pre-rendering is performed in association with a tab that is not visible to a user in the user interface, and further includes replacing content in the currently visible tab with rendered content in the tab in response to input navigating to the network address.
And saving the html file in the generated directory.
The collection of data items includes a text message from a blog service, the text message having at least one link to a web page.
Calculating the proportion value of each visible node in the DOM tree relative to the webpage window comprises the following steps: and calculating the proportion value of each visible node relative to the browser window according to the proportion set by the user.
According to the method and the device, the page which does not change frequently in the project is pre-rendered, namely when the project is constructed, the dynamic rendering is performed according to the routing hierarchy before the project is packaged, and the corresponding html is output. The search engine can grab the page contents from html, so that the optimization of the website search engine is promoted.
Claims (5)
1. A method for displaying a pre-rendered web page, comprising the steps of:
step 1: performing basic configuration in advance to obtain a set of data items, wherein the set comprises links to web pages;
step 2: retrieving, for each of a plurality of the links, a web page associated with the link;
step 3, rendering the retrieved web page before the user of the browser makes any selection to view the retrieved page;
step 4, performing pre-rendering configuration on the designated page, and starting pre-rendering; constructing a project, and generating a folder under a configured generation directory;
step 5, returning corresponding html files through different routes;
step 6: receiving a selection of a preview link by the user; and displaying a rendered web page associated with the previewed link in the content area;
and 7: acquiring a DOM tree generated by analyzing according to the webpage content; calculating the proportion value of each visible node in the DOM tree relative to the webpage window;
and 8: and setting the size of each visible node in the DOM tree according to the proportion value to serve as a pre-rendering tree, so that a browser can perform webpage presentation according to the pre-rendering tree.
2. A method for display of a pre-rendered web page according to claim 1, wherein the pre-rendering is performed in association with a tab that is not visible to a user in the user interface, and further comprising replacing content in the currently visible tab with rendered content in the tab in response to an input navigating to the network address.
3. The method according to claim 1, wherein the html file is saved in the generation directory.
4. A method for display of a pre-rendered web page as recited in claim 1, wherein the collection of data items includes a text message from a blog service, the text message having at least one link to a web page.
5. The method for displaying the pre-rendered webpage according to claim 1, wherein the calculating the ratio of each visible node in the DOM tree to the webpage window comprises: and calculating the proportion value of each visible node relative to the browser window according to the proportion set by the user.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911022667.0A CN110851683A (en) | 2019-10-25 | 2019-10-25 | Webpage display method for prerendering |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911022667.0A CN110851683A (en) | 2019-10-25 | 2019-10-25 | Webpage display method for prerendering |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110851683A true CN110851683A (en) | 2020-02-28 |
Family
ID=69597405
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911022667.0A Pending CN110851683A (en) | 2019-10-25 | 2019-10-25 | Webpage display method for prerendering |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110851683A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111506387A (en) * | 2020-03-02 | 2020-08-07 | 百度在线网络技术（北京）有限公司 | Page pre-rendering method and device, electronic equipment and storage medium |
| CN113542047A (en) * | 2020-04-21 | 2021-10-22 | 北京沃东天骏信息技术有限公司 | Abnormal request detection method and device, electronic equipment and computer readable medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102792244A (en) * | 2010-01-13 | 2012-11-21 | 洛克迈特公司 | Preview functionality for increased browsing speed |
| CN105378713A (en) * | 2013-06-14 | 2016-03-02 | 微软技术许可有限责任公司 | Method and systems for pre-rendering and pre-fetching content |
| CN108182190A (en) * | 2016-12-08 | 2018-06-19 | 北京京东尚科信息技术有限公司 | For the method, apparatus and electronic equipment that webpage is presented, generates self adaptive net |
| CN109543128A (en) * | 2018-10-19 | 2019-03-29 | 深圳点猫科技有限公司 | A kind of the front end frame project implementation method and electronic equipment of language based on programming |
-
2019
- 2019-10-25 CN CN201911022667.0A patent/CN110851683A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102792244A (en) * | 2010-01-13 | 2012-11-21 | 洛克迈特公司 | Preview functionality for increased browsing speed |
| CN105378713A (en) * | 2013-06-14 | 2016-03-02 | 微软技术许可有限责任公司 | Method and systems for pre-rendering and pre-fetching content |
| CN108182190A (en) * | 2016-12-08 | 2018-06-19 | 北京京东尚科信息技术有限公司 | For the method, apparatus and electronic equipment that webpage is presented, generates self adaptive net |
| CN109543128A (en) * | 2018-10-19 | 2019-03-29 | 深圳点猫科技有限公司 | A kind of the front end frame project implementation method and electronic equipment of language based on programming |
Non-Patent Citations (1)
| Title |
|---|
| 赵经纬;周余;王自强;都思丹;: "基于Webkit的嵌入式浏览器的研究与实现" * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111506387A (en) * | 2020-03-02 | 2020-08-07 | 百度在线网络技术（北京）有限公司 | Page pre-rendering method and device, electronic equipment and storage medium |
| WO2021174928A1 (en) * | 2020-03-02 | 2021-09-10 | 百度在线网络技术（北京）有限公司 | Page pre-rendering method and apparatus, electronic device, and storage medium |
| US20220308900A1 (en) | 2020-03-02 | 2022-09-29 | Baidu Online Network Technology (Beijing) Co., Ltd. | Method and apparatus of pre-rendering page, electronic device, and storage medium |
| CN111506387B (en) * | 2020-03-02 | 2023-09-22 | 百度在线网络技术（北京）有限公司 | Page prerendering method and device, electronic equipment and storage medium |
| US11829436B2 (en) | 2020-03-02 | 2023-11-28 | Baidu Online Network Technology (Beijing) Co., Ltd. | Method and apparatus of pre-rendering page, electronic device, and storage medium |
| CN113542047A (en) * | 2020-04-21 | 2021-10-22 | 北京沃东天骏信息技术有限公司 | Abnormal request detection method and device, electronic equipment and computer readable medium |
| CN113542047B (en) * | 2020-04-21 | 2023-04-07 | 北京沃东天骏信息技术有限公司 | Abnormal request detection method and device, electronic equipment and computer readable medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3518124A1 (en) | Webpage rendering method and related device | |
| CN100578496C (en) | Webpage dynamic creation method and system based on template | |
| US7496831B2 (en) | Method to reformat regions with cluttered hyperlinks | |
| US20150074561A1 (en) | Customizable themes for browsers and web content | |
| JP5056810B2 (en) | Information processing apparatus and control program thereof | |
| US8645823B1 (en) | Converting static websites to resolution independent websites in a web development environment | |
| JP2002373043A (en) | Method and device for expanding one part of document inside browser, and program therefor | |
| CN101876897A (en) | System and method used for processing Widget on Web browser | |
| WO2008106669A1 (en) | Adaptive server-based layout of web documents | |
| CN107357817B (en) | It is a kind of towards the Web page module design of JSON and its Asynchronous loading method | |
| CN106339414A (en) | Webpage rendering method and device | |
| CN103955367A (en) | Method and device for generating pages | |
| WO2011069377A1 (en) | Method and apparatus for generating widget | |
| CN110851683A (en) | Webpage display method for prerendering | |
| CN108595697A (en) | Webpage integrated approach, apparatus and system | |
| CN103942231A (en) | Webpage displaying method and electronic device | |
| JP2012212473A (en) | Information processor and its control program | |
| CN111782213A (en) | Dynamic control page generation system based on DOM | |
| CN104750866A (en) | Embedded WEB server based dynamic menu bar generation method and system | |
| JP2003281093A (en) | Method and device for browsing link destination information in browser | |
| WO2016011699A1 (en) | Method and device for use in configuring navigation page of browser | |
| CN105824790A (en) | Equipment table adapting method, computer equipment and mobile terminal | |
| CN106598933B (en) | A kind of web-based type-setting document proofreading method and equipment | |
| CN114579031B (en) | Response method and device for sliding operation, server and storage medium | |
| JP5884814B2 (en) | Display processing apparatus and program |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200228 |