CN104850602B - A kind of rendering refreshing implementation method and device based on internet web page - Google Patents

Abstract

Embodiments of the present invention provide a method and device for implementing rendering refresh based on Internet webpages. The method includes: when one or more page modules in the entire page corresponding to a certain webpage of a client are refreshed, obtaining the one or more page modules Refresh data of multiple page modules; render the refresh data of the one or more page modules into the entire page corresponding to the webpage, replace the original data of the one or more page modules, and render the webpage The URL address of the corresponding current browser is changed to a new URL address. The present invention realizes dynamically changing the address bar URL of the browser without refreshing the page, which facilitates website content sharing; is perfectly compatible with various browser records, realizes dynamically changing the browser address, and realizes functional page switching without refreshing the page; through Pagelets refreshes a server request to implement incremental switching of page functions, reducing the number of server connections; minimizing the browsing history of pages in the same domain, reducing redundant historical records.

Description

A method and device for implementing rendering refresh based on Internet web pages

technical field

The present invention relates to the technical field of the Internet, in particular to a method and device for realizing rendering refresh based on Internet web pages.

Background technique

With the rapid development of the Internet in China, web applications (browser website applications) are widely used on the Internet (Internet). Every time a user browses a web page, a history record is generated, and the user can view the history record of each browsing in the history record.

In the prior art, web 1.0 applications implement page jumps through hyperlinks and generate history records, each page jump will generate a record, and you can freely switch back to historically visited website pages in the history records. But every time you switch between pages, the entire page will be refreshed, and a history record will be generated in the history record, regardless of whether you switch between different modules of the same website, resulting in multiple history records of the same website in the history record.

With AJAX (AJAX: Asynchronous Javascript And XML asynchronous JavaScript (script) and XML (Extensible Markup Language), which refers to a web development technology for creating interactive web applications) technology is widely used in web development, through XHR (ajax asynchronous request object) requests background data, javascript (script) parses the data and converts it into html (Hyper Text Markup Language, Hyper Text Markup Language) node rendering document stream. In this way, partial module refresh of relevant data obtained from the server is realized, and user interaction experience is optimized. The browser will not generate browsing records, and a large number of concurrent HTTP (HyperText Transfer Protocol) requests will be generated when the module is refreshed or the page is refreshed, resulting in excessive pressure on the server.

Technical disadvantage of web1.0 in the prior art: the user visits the same web site (website), the website address is http://weibo.com/a.com (website address), and switches on the website function page. Jumping through hyperlinks will generate multiple history records of weibo.com (domain name), and the history records will grow linearly with the number of visits. The history records are redundant, inconvenient to manage, occupying the user's disk space, and the entire page is refreshed, which is not a good user experience.

AJAX does not have a perfect solution to the history record solution, and the refresh module cannot be configured as required, and the server is under a lot of request pressure instantly. The user interaction experience is average.

bigbipe (page loaded by module): It is a redesigned basic dynamic web service system. Web pages are decomposed into Pagelets (single module) blocks according to module functions, and then establish pipelines and manage their operations in different stages through Web servers (dedicated computers that provide services to customers in a network environment) and browsers. This is similar to the pipelined execution process of most modern microprocessors: multiple instruction pipelines pass through different processor execution units to achieve the best performance.

Pagelets (single module): A module is called a pagelets module. The module registers the module into the memory and executes it through the registration method provided by the framework. Framework providing method (registration) register(ns(parameter): module label, domid(parameter): container label, html(parameter): module rendering string, js(parameter): script address, css(parameter): style address) , to complete the steps of module style loading, page rendering, and script execution. Each module provides destroy (destroy method), so that when switching pages, the framework destroys unused modules and releases the occupied memory.

Weibo uses bigpipe to output modules on demand, as long as the module is loaded, it can interact with it, and there is no coupling between modules.

Chunked transfer encoding (Chunked transfer encoding): It is a data transmission mechanism in the Hypertext Transfer Protocol (HTTP), which allows HTTP data sent by a web server to a client application (usually a web browser) to be divided into multiple parts . Chunked transfer encoding is only provided in the HTTP protocol (Hypertext Transfer Protocol) version 1.1 (HTTP/1.1) (Hypertext Transfer Protocol version 1.1).

Usually, the data sent in the HTTP (Hypertext Transfer Protocol) response message is sent in its entirety, and the Content-Length (content length) message header field indicates the length of the data. The length of the data is important because the client needs to know where the reply message ends and the subsequent reply message begins. However, with chunked transfer encoding, the data is broken up into a series of data chunks and sent in one or more chunks, so that the server can send the data without knowing in advance the total size of what is being sent.

Pagelets (module) refresh: page switching is refreshed once, the Pagelets module that changes the content is output, and the module corresponding to the Pagelets is changed, so that the page module can be switched without refreshing.

Bigbipe (page loaded by module) technology realizes multi-module parallel and controllable output, increasing the reusability of modules. There is no coupling between modules, no interdependence between modules, modules can run independently, and modules can be loaded concurrently and randomly. As soon as the Pagelets (single module) output is rendered immediately, the module uses interactions immediately, regardless of whether other modules have loaded or not. Realize parallel loading of modules, optimize the loading sequence of modules, load and use modules in a pipelined manner, and optimize user experience.

The existing technology divides the entire page into modules according to functions, and the modules do not depend on each other. When the page is switched, only the module that needs to be modified is output through the algorithm chunked (block transmission) to replace the original module, while the public module is not updated and modified, so as to achieve the function of page switching. Chunked output (chunked transfer) modification requires only one http request (HyperText Transfer Protocol) to complete page function switching. Since the page is not refreshed, the address bar will not be modified, how to achieve no refresh and modify the page URL address? For example: jumping from http://weibo.com/a.html (website address) to http://weibo.com/b.html (website address), the way of the prior art is to refresh the entire page and jump through the link Go to http://weibo.com/b.html (website address). In this way, the top navigation, the left navigation, and the bottom module will all request refresh again, which will increase the network transmission data, increase the network bandwidth, and increase the server load. Therefore, how to realize no refresh and modify the page URL address is an issue in this field. A technical problem urgently needed to be solved by technicians.

Contents of the invention

Embodiments of the present invention provide a method and device for implementing rendering refresh based on Internet web pages, so as to realize no refresh and modify the URL address of the page.

On the one hand, an embodiment of the present invention provides a method for implementing rendering refresh based on Internet web pages, the method comprising:

When one or more page modules in the entire page corresponding to a certain webpage of a client are refreshed, obtain refresh data of the one or more page modules;

Render the refresh data of the one or more page modules into the entire page corresponding to the web page, replace the original data of the one or more page modules, and transfer the unified resources of the current browser corresponding to the web page The locator URL address is changed to a new URL address.

On the other hand, an embodiment of the present invention provides an Internet webpage-based rendering refresh implementation device, the device comprising:

An acquisition unit, configured to acquire refresh data of the one or more page modules when one or more page modules in the entire page corresponding to a certain webpage of a client are refreshed;

a rendering and refreshing unit, configured to render the refresh data of the one or more page modules into the entire page corresponding to the web page, and replace the original data of the one or more page modules;

The address modifying unit is configured to modify the URL address of the current browser corresponding to the web page to a new URL address.

The above-mentioned technical solution has the following beneficial effects: the URL in the address bar of the browser can be dynamically changed without refreshing the page, which is convenient for website content sharing; it is perfectly compatible with various browser records, and the browser address can be dynamically changed without refreshing the page Realize functional page switching; perform a server request through pagelets refresh to realize incremental switching of page functions, reduce the number of server connections; minimize the browsing history of pages in the same domain, and reduce redundant historical records.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings that need to be used in the description of the embodiments or the prior art. Obviously, the accompanying drawings in the following description are only These are some embodiments of the present invention. Those skilled in the art can also obtain other drawings based on these drawings without creative work.

FIG. 1 is a flow chart of a method for implementing rendering refresh based on Internet webpages according to an embodiment of the present invention;

FIG. 2 is a schematic structural diagram of a device for realizing rendering and refreshing based on Internet webpages according to an embodiment of the present invention;

Fig. 3 is a schematic diagram of updating module E and module F of the application example of the present invention;

FIG. 4 is a flow chart of an implementation method for rendering and refreshing based on Internet webpages in an application example of the present invention.

Detailed ways

The following will clearly and completely describe the technical solutions in the embodiments of the present invention with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only some, not all, embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by persons of ordinary skill in the art without making creative efforts belong to the protection scope of the present invention.

As shown in FIG. 1 , it is a flow chart of a method for implementing rendering refresh based on Internet web pages according to an embodiment of the present invention, and the method includes:

101. When one or more page modules in the entire page corresponding to a certain webpage of a client are refreshed, obtain refresh data of the one or more page modules;

102. Render the refresh data of the one or more page modules into the entire page corresponding to the web page, replace the original data of the one or more page modules, and update the current browser's corresponding to the web page The Uniform Resource Locator URL address is changed to a new URL address.

Preferably, said modifying the Uniform Resource Locator URL address of the current browser corresponding to the web page to a new URL address includes: unifying the URL address of the current browser corresponding to the web page by encapsulating the page browsing history management class historyM The URL address of the resource locator is changed to a new URL address.

Preferably, modifying the URL address of the current browser corresponding to the web page to a new URL address by encapsulating the page browsing history management class historyM includes: judging whether the current browser supports encapsulating page browsing history The replacement address in the management class historyM replaceState/operation address bar address method pushState: If the current browser supports replaceState/pushState, use replaceState/pushState to modify the URL address of the current browser corresponding to the web page to a new URL address .

Preferably, the method further includes: if the current browser does not support replaceState/pushState, then judging whether the current browser supports the browser hash change event onhashChange event: if the current browser supports the onhashChange event, then by modifying location.hash (local hash) address to dynamically modify the URL address of the current browser corresponding to the webpage to a new URL address.

Preferably, the method further includes: if the current browser does not support the onhashChange event, dynamically modifying the URL address of the current browser corresponding to the web page to a new URL address.

Corresponding to the above-mentioned method embodiment, as shown in FIG. 2 , it is a schematic structural diagram of an Internet webpage-based rendering refresh implementation device according to an embodiment of the present invention. The device includes:

The acquiring unit 21 is configured to acquire refresh data of the one or more page modules when one or more page modules in the entire page corresponding to a certain web page of a client are refreshed;

A rendering and refreshing unit 22, configured to render the refresh data of the one or more page modules into the entire page corresponding to the web page, and replace the original data of the one or more page modules;

The address modifying unit 23 is configured to modify the URL address of the current browser corresponding to the web page to a new URL address.

Preferably, the address modifying unit 23 is specifically configured to modify the URL address of the current browser corresponding to the web page to a new URL address by encapsulating the page browsing history record management class historyM.

Preferably, the address modification unit 23 is further specifically used to judge whether the current browser supports the replacement address replaceState/operation address bar address method pushState in the encapsulation page browsing history management class historyM: if the current browser supports replaceState/ pushState, then use replaceState/pushState to modify the URL address of the current browser corresponding to the webpage to a new URL address.

Preferably, the address modifying unit 23 is further specifically configured to determine whether the current browser supports the browser hash change event onhashChange event if the current browser does not support replaceState/pushState: if the current browser supports onhashChange event, dynamically modify the URL address of the current browser corresponding to the web page to a new URL address by modifying the location.hash address.

Preferably, the address modifying unit 23 is further specifically configured to insert the URL address of the current browser corresponding to the web page by dynamically creating a browser tag iframe into the document stream if the current browser does not support the onhashChange event. Dynamically modify to a new URL address.

The above technical solution of the embodiment of the present invention has the following beneficial effects: it realizes dynamically changing the address bar URL of the browser without refreshing the page, which facilitates website content sharing; it is perfectly compatible with various browser records, and realizes dynamically changing the browser address , do not refresh the page to achieve functional page switching; perform a server request through pagelets refresh to realize incremental switching of page functions, reduce the number of server connections; minimize the browsing history of pages in the same domain, and reduce redundant historical records.

The above-mentioned technical solutions of the embodiments of the present invention are described in detail below through application examples:

The application example of the present invention realizes the jump page module (hereinafter referred to as the module) and the module that the current module needs to modify, (as shown in Figure 3, it is the application example module E of the present invention and the refresh schematic diagram of module F) and renders it in the page, replacing the original Module A and module C, to achieve page refresh switching (module B, module D, top navigation, left navigation, bottom navigation are not refreshed), and the current browser address http://weibo.com/a.html Modified to http://weibo.com/b.html. After each page switch renders and modifies the address in the address bar, the user can copy the URL (Uniform Resource Locator) address to other computers for access, and the rendered content is consistent with the current content of the URL (Uniform Resource Locator).

URL (uniform resource locator): consists of the following parts: protocol (protocol type) + hostname (host name) + port (port number) + path (path) +? query (query) (optional, used to pass parameters to dynamic webpages, there can be multiple parameters, separated by "&" symbol, the name and value of each parameter are separated by "=" symbol) + #hash (ha hope).

The application example of the present invention is by encapsulating historyM (page browsing history record management class), by providing the following method collection: setQuery (setting browser address query parameter method), pushState (operating address bar address method), onpopstate (adding address bar to change callback method ), removePopstate (remove the address bar and change the callback method), replaceState (replace the address), parseURL (parse the current address method) and other methods, which are convenient for users to dynamically modify the browser address, and realize the address bar modification after switching without refreshing the page on the same domain website function. When the user performs the forward/backward function, no history record is generated.

As shown in Figure 4, it is a flow chart of an implementation method for rendering and refreshing based on Internet webpages of an application example of the present invention, including:

401. When one or more page modules in the entire page corresponding to a certain webpage of a client are refreshed, obtain refresh data of the one or more page modules;

402. Render the refresh data of the one or more page modules into the entire page corresponding to the web page, and replace the original data of the one or more page modules;

403. Determine whether the current browser supports replaceState/pushState: if the current browser supports replaceState/pushState, go to 404; if the current browser does not support replaceState/pushState, go to 405;

404. Use replaceState/pushState to modify the URL address of the current browser corresponding to the web page to a new URL address, and then go to 408.

405. Determine whether the current browser supports the onhashChange event: if the current browser supports the onhashChange event, turn to 406; if the current browser does not support the onhashChange event, turn to 407;

406. Dynamically modify the URL address of the current browser corresponding to the web page to a new URL address by modifying the location.hash address, and then go to 408.

407. Dynamically modify the URL address of the current browser corresponding to the web page to a new URL address by dynamically creating an iframe to insert into the document stream, and then go to 408.

408. End.

Application examples of the present invention The above technical scheme realizes dynamically changing the address bar URL of the browser without refreshing the page, which is convenient for website content sharing; it is perfectly compatible with various browser records, and realizes dynamically changing the browser address without refreshing the page. Functional page switching; through pagelets refreshing a server request to realize incremental switching of page functions, reducing the number of server connections; minimizing the browsing history of pages in the same domain, reducing redundant historical records.

Those skilled in the art can also understand that various illustrative logical blocks, units, and steps listed in the embodiments of the present invention can be implemented by electronic hardware, computer software, or a combination of both. To clearly demonstrate the interchangeability of hardware and software, the various illustrative components, units and steps above have generally described their functions. Whether such functions are implemented by hardware or software depends on the specific application and overall system design requirements. Those skilled in the art may use various methods to implement the described functions for each specific application, but such implementation should not be understood as exceeding the protection scope of the embodiments of the present invention.

Various illustrative logic blocks or units described in the embodiments of the present invention can be discretely processed by a general-purpose processor, a digital signal processor, an application-specific integrated circuit (ASIC), a field programmable gate array or other programmable logic devices. Gate or transistor logic, discrete hardware components, or any combination of the above designed to implement or operate the described functions. The general-purpose processor may be a microprocessor, and optionally, the general-purpose processor may also be any conventional processor, controller, microcontroller or state machine. A processor may also be implemented by a combination of computing devices, such as a digital signal processor and a microprocessor, multiple microprocessors, one or more microprocessors combined with a digital signal processor core, or any other similar configuration to accomplish.

The steps of the method or algorithm described in the embodiments of the present invention may be directly embedded in hardware, a software module executed by a processor, or a combination of both. The software modules may be stored in RAM memory, flash memory, ROM memory, EPROM memory, EEPROM memory, registers, hard disk, removable disk, CD-ROM or any other storage medium in the art. Exemplarily, the storage medium can be connected to the processor, so that the processor can read information from the storage medium, and can write information to the storage medium. Optionally, the storage medium can also be integrated into the processor. The processor and the storage medium can be set in the ASIC, and the ASIC can be set in the user terminal. Optionally, the processor and the storage medium may also be set in different components in the user terminal.

In one or more exemplary designs, the above functions described in the embodiments of the present invention may be implemented in hardware, software, firmware or any combination of the three. If implemented in software, the functions can be stored on or transmitted over as one or more instructions or code on a computer-readable medium. Computer-readable media includes computer storage media and communication media that facilitate transfer of a computer program from one place to another. Storage media may be any available media that can be accessed by a general purpose or special computer. For example, such computer-readable media may include, but are not limited to, RAM, ROM, EEPROM, CD-ROM or other optical disk storage, magnetic disk storage or other magnetic storage devices, or any other device that can be used to carry or store instructions or data structures and Other medium of program code in a form readable by a general-purpose or special-purpose computer, or a general-purpose or special-purpose processor. In addition, any connection is properly defined as a computer-readable medium, for example, if the software is transmitted from a website site, server, or other remote source via a coaxial cable, fiber optic cable, twisted pair, digital subscriber line (DSL) Or transmitted by wireless means such as infrared, wireless and microwave are also included in the definition of computer readable media. Disks and discs include compact discs, laser discs, optical discs, DVDs, floppy discs, and Blu-ray discs. Disks usually reproduce data magnetically, while discs usually reproduce data optically with lasers. Combinations of the above can also be contained on a computer readable medium.

The specific embodiments described above have further described the purpose, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above descriptions are only specific embodiments of the present invention and are not intended to limit the scope of the present invention. Protection scope, within the spirit and principles of the present invention, any modification, equivalent replacement, improvement, etc., shall be included in the protection scope of the present invention.

Claims (6)

1. A method for implementing rendering refresh based on Internet web pages, characterized in that the method comprises: When one or more page modules in the entire page corresponding to a certain webpage of a client are refreshed, obtain refresh data of the one or more page modules; Rendering the refresh data of the one or more page modules into the entire page corresponding to the web page, replacing the original data of the one or more page modules, and converting the page browsing history management class historyM into the The URL address of the current browser corresponding to the web page is changed to a new URL address; Wherein, the URL address of the current browser corresponding to the webpage is modified to a new URL address by encapsulating historyM, including: Determine whether the current browser supports the replacement address replaceState/operation address bar address method pushState in the encapsulation historyM: If the current browser does not support replaceState/pushState, then determine whether the current browser supports the browser hash change event onhashChange event: if If the current browser supports the onhashChange event, the URL address of the current browser corresponding to the webpage is dynamically modified to a new URL address by modifying the local hash location.hash address. 2. as claimed in claim 1 based on the method for implementing rendering refresh of Internet web pages, it is characterized in that the method also includes: if the current browser supports replaceState/pushState, then use replaceState/pushState to replace the current web page corresponding to The URL address of the browser is changed to the new URL address. 3. as claimed in claim 1, based on the Internet web page rendering refresh implementation method, it is characterized in that, the method also includes: If the current browser does not support the onhashChange event, the URL address of the current browser corresponding to the web page is dynamically modified to a new URL address by dynamically creating a browser tag iframe to insert into the document stream. 4. A device for implementing rendering refresh based on Internet web pages, characterized in that the device includes: An acquisition unit, configured to acquire refresh data of the one or more page modules when one or more page modules in the entire page corresponding to a certain webpage of a client are refreshed; a rendering and refreshing unit, configured to render the refresh data of the one or more page modules into the entire page corresponding to the web page, and replace the original data of the one or more page modules; The address modification unit is used to modify the Uniform Resource Locator URL address of the current browser corresponding to the webpage to a new URL address by encapsulating the page browsing history management class historyM; Wherein, the address modifying unit is specifically used to judge whether the current browser supports the replacement address replaceState/operation address bar address method pushState in the encapsulation historyM: if the current browser does not support replaceState/pushState, then judge whether the current browser supports Support browser hash change event onhashChange event: if the current browser supports the onhashChange event, dynamically modify the URL address of the current browser corresponding to the web page to a new URL address by modifying the location.hash address. 5. as claimed in claim 4, based on the Internet web page rendering refresh implementation device, it is characterized in that: The address modification unit is further specifically configured to use replaceState/pushState to modify the URL address of the current browser corresponding to the web page to a new URL address if the current browser supports replaceState/pushState. 6. as claimed in claim 4, based on the Internet web page rendering refresh implementation device, it is characterized in that: The address modifying unit is further specifically used for if the current browser does not support the onhashChange event, then by dynamically creating a browser label iframe to insert the document flow mode, the URL address of the current browser corresponding to the web page is dynamically modified to a new URL address.