CN116578795A

CN116578795A - Webpage generation method and device, storage medium and electronic equipment

Info

Publication number: CN116578795A
Application number: CN202310404821.0A
Authority: CN
Inventors: 马振山
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2023-04-14
Filing date: 2023-04-14
Publication date: 2023-08-11

Abstract

The disclosure relates to a method and a device for generating a webpage, a storage medium and electronic equipment, and relates to the technical field of computers, wherein the method comprises the following steps: acquiring a rich text character string, and processing the rich text character string to obtain a source picture link and a text to be rendered, wherein the source picture link and the text to be rendered are included in the rich text character string; rendering the text to be rendered to obtain a text page rendering result, and determining a current visible area corresponding to the text page rendering result; determining a picture tag to be rendered in the current visible area, and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered; and loading a compressed image corresponding to the compressed picture link in the current visible area to generate a webpage. The method and the device improve the generation efficiency of the webpage.

Description

Webpage generation method and device, storage medium and electronic equipment

Technical Field

The embodiment of the disclosure relates to the technical field of computers, in particular to a webpage generating method, a webpage generating device, a computer readable storage medium and electronic equipment.

Background

In the existing webpage generation method, the corresponding webpage can be obtained by directly rendering the rich text content. However, when the data volume of the page to be loaded in the rendering process is large, the waiting time of the user is long; that is, rendering the rich text content directly has a problem of low page rendering efficiency.

It should be noted that the information of the present invention in the above background section is only for enhancing understanding of the background of the present disclosure, and thus may include information that does not form the prior art that is already known to those of ordinary skill in the art.

Disclosure of Invention

An object of the present disclosure is to provide a method for generating a web page, an apparatus for generating a web page, a computer-readable storage medium, and an electronic device, so as to overcome at least to some extent the problem of low page rendering efficiency caused by the limitations and drawbacks of the related art.

According to one aspect of the present disclosure, there is provided a method for generating a web page, including:

acquiring a rich text character string, and processing the rich text character string to obtain a source picture link and a text to be rendered, wherein the source picture link and the text to be rendered are included in the rich text character string;

Rendering the text to be rendered to obtain a text page rendering result, and determining a current visible area corresponding to the text page rendering result;

determining a picture tag to be rendered in the current visible area, and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered;

and loading a compressed image corresponding to the compressed picture link in the current visible area to generate a webpage.

According to one aspect of the present disclosure, there is provided a generation apparatus of a web page, including:

the character string processing module is used for acquiring a rich text character string, and processing the rich text character string to obtain a source picture link and a text to be rendered, wherein the source picture link and the text to be rendered are included in the rich text character string;

the visual area determining module is used for rendering the text to be rendered to obtain a text page rendering result and determining a current visual area corresponding to the text page rendering result;

the to-be-rendered picture tag determining module is used for determining a to-be-rendered picture tag in the current visible area and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the to-be-rendered picture tag;

And the webpage generating module is used for loading the compressed image corresponding to the compressed picture link in the current visible area so as to generate a webpage.

According to an aspect of the present disclosure, there is provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the method of generating a web page of any one of the above.

According to one aspect of the present disclosure, there is provided an electronic device including:

a processor; and

a memory for storing executable instructions of the processor;

wherein the processor is configured to perform the method of generating a web page of any of the above via execution of the executable instructions.

According to the webpage generation method, on one hand, a rich text character string is obtained, and the rich text character string is processed to obtain a source picture link and a text to be rendered, wherein the source picture link and the text to be rendered are included in the rich text character string; then rendering the text to be rendered to obtain a text page rendering result, and determining a current visible area corresponding to the text page rendering result; further determining a picture tag to be rendered in the current visible area, and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered; finally, loading a compressed image corresponding to the compressed picture link in the current visible area to generate a webpage; the text can be rendered first and then the image can be rendered, so that the problem that blank pages wait due to direct rendering in the prior art can be avoided; on the other hand, as the rendered image is a compressed image, the problem of low page rendering efficiency caused by directly rendering the rich text content can be avoided, and the generation efficiency of the webpage is improved.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure. It will be apparent to those of ordinary skill in the art that the drawings in the following description are merely examples of the disclosure and that other drawings may be derived from them without undue effort.

Fig. 1 schematically illustrates an example diagram of the principle of generating a page directly from a rich text string.

Fig. 2 schematically illustrates a flowchart of a method of generating a web page according to an example embodiment of the present disclosure.

Fig. 3 schematically illustrates an example diagram of an application scenario of a method for generating a web page according to an example embodiment of the present disclosure.

Fig. 4 schematically illustrates a flowchart of a method for compressing the source picture links to obtain compressed picture links according to an exemplary embodiment of the present disclosure.

Fig. 5 schematically illustrates an example diagram of an interface of a text page rendering result according to an example embodiment of the present disclosure.

Fig. 6 schematically illustrates an example diagram of an interface of a viewable area in accordance with an example embodiment of the present disclosure.

FIG. 7 schematically illustrates an example diagram of an interface of a generated web page according to an example embodiment of the present disclosure.

Fig. 8 schematically illustrates a method flowchart of a loading process of an original image according to an example embodiment of the present disclosure.

Fig. 9 schematically illustrates an exemplary diagram of the principle of a loading process of an original image according to an exemplary embodiment of the present disclosure.

Fig. 10 schematically illustrates a display interface diagram of a loaded raw image according to an example embodiment of the present disclosure.

Fig. 11 schematically illustrates a block diagram of a generating apparatus of a web page according to an exemplary embodiment of the present disclosure.

Fig. 12 schematically illustrates an electronic device for implementing the above-described method for generating a web page according to an exemplary embodiment of the present disclosure.

Detailed Description

Example embodiments will now be described more fully with reference to the accompanying drawings. However, the exemplary embodiments may be embodied in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of the example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the present disclosure. One skilled in the relevant art will recognize, however, that the aspects of the disclosure may be practiced without one or more of the specific details, or with other methods, components, devices, steps, etc. In other instances, well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the present disclosure.

Furthermore, the drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus a repetitive description thereof will be omitted. Some of the block diagrams shown in the figures are functional entities and do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in software or in one or more hardware modules or integrated circuits or in different networks and/or processor devices and/or microcontroller devices.

The rich text editor, multi-function Text Editor, MTE for short, is a text editor which can be embedded in a browser and is obtained after being seen; meanwhile, the rich text is a Word-like text, and has the characteristic of a common text; the rich text may include a definition of the colors of the text, etc., and may also have functions of adjusting pages, text layout, inserting audio and video, pictures, etc. In the practical application process, rich text rendering occupies very important positions in various large websites, and most of systems on the market have rich text rendering functions.

In the generation process of the page, a user can edit the content by a rich text editor and finally generate an HTML (HyperText Mark-up Language) code; that is, on the premise of the rich text editor, the user does not need to develop codes, and the user can directly fill in the required page content in the rich text editor to generate the webpage desired by the user, so that the method greatly reduces the development cost; however, this method also has certain drawbacks, in particular: assuming that the content written in the rich text is more, or some big pictures are uploaded in the rich text, the rendering of the rich text content is slower, which causes bad user experience.

In order to solve the problem that the slow and poor experience of the rich text rendering is caused based on the large picture, in some technical schemes, the rich text rendering can be optimized in a lazy loading mode; the specific implementation process is as follows: before rich text rendering, removing a Source (Source) attribute of a picture link in the rich text, wherein the Source attribute is used for preventing loading of pictures when the rich text is rendered, so that after the rich text rendering is completed, judging the position of a picture tag, and resetting the Source attribute of the pictures in a visible area to perform rendering; the method can optimize user experience to a certain extent, and although the content of the page can be displayed quickly, the user still needs to wait for a long time to see the complete page under the condition of overlarge picture resources.

In some technical schemes, without any processing on the rich text content, a specific implementation manner of directly obtaining the web page by directly processing the rich text content may be shown in fig. 1; in the implementation shown in fig. 1, it can be seen that the whole code process does not process the rich text, and the content rendering is directly performed using the incerrhtml; however, since the rich text is directly rendered and no picture processing is performed in the scheme, when the amount of the loaded data is relatively large, the page display is relatively slow.

Based on this, in this exemplary embodiment, there is first provided a method for generating a web page, where the method may be run in a terminal device; of course, those skilled in the art may also operate the methods of the present disclosure on other platforms as desired, which is not particularly limited in the present exemplary embodiment. Specifically, referring to fig. 2, the method for generating a web page may include the following steps:

s210, acquiring a rich text character string, and processing the rich text character string to obtain a source picture link and a text to be rendered, wherein the source picture link and the text to be rendered are included in the rich text character string;

s220, rendering the text to be rendered to obtain a text page rendering result, and determining a current visible area corresponding to the text page rendering result;

S230, determining a picture tag to be rendered in the current visible area, and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered;

and S240, loading a compressed image corresponding to the compressed picture link in the current visible area to generate a webpage.

In the method for generating the webpage, on one hand, the rich text character string is obtained and processed to obtain the source picture link and the text to be rendered, wherein the source picture link and the text to be rendered are included in the rich text character string; then rendering the text to be rendered to obtain a text page rendering result, and determining a current visible area corresponding to the text page rendering result; further determining a picture tag to be rendered in the current visible area, and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered; finally, loading a compressed image corresponding to the compressed picture link in the current visible area to generate a webpage; the text can be rendered first and then the image can be rendered, so that the problem that blank pages wait due to direct rendering in the prior art can be avoided; on the other hand, as the rendered image is a compressed image, the problem of low page rendering efficiency caused by directly rendering the rich text content can be avoided, and the generation efficiency of the webpage is improved.

Hereinafter, a method for generating a web page according to an exemplary embodiment of the present disclosure will be explained and described in detail with reference to the accompanying drawings.

First, a technical implementation procedure of the exemplary embodiments of the present disclosure is explained and explained. Specifically, the webpage generation method disclosed by the example embodiment of the present disclosure can further optimize the loading speed of the picture resource in the process of rich text rendering; meanwhile, the size of the resources is reduced by compressing or cutting the picture resources, so that the rendering speed of the rich text is loaded, and the method is suitable for any browser. Meanwhile, in the practical application process, a user can upload the added picture to a picture server in the rich text editing process (the picture server can support the picture compression capability through links); meanwhile, before rich text rendering, identifying a picture tag in the rich text, setting a Source (Source) attribute of a picture to be null, and respectively storing an original link and a compressed link of the picture; after the page is rendered, introducing a lazy loading plug-in and initializing, and loading a compression link on a picture tag in a visible area; further, a picture preview function can be added, and a user can preview an original picture by clicking a picture; through the implementation manner, the network request quantity and the page loading resources can be reduced to a certain extent, so that the page rendering speed is increased; and moreover, the content of each picture can be clearly known by a user through a picture preview mechanism, so that information loss caused by compressed pictures is avoided.

Next, an application scenario of the method for generating a web page according to the exemplary embodiment of the present disclosure is explained and explained. Specifically, referring to fig. 3, the method for generating a web page according to the exemplary embodiment of the present disclosure may be applied to a scenario including a terminal device 310 and a picture server 320; the terminal equipment can be in communication connection with the picture server in a wired communication or wireless communication mode; the terminal device 310 may be configured to implement the method for generating a web page according to the exemplary embodiment of the present disclosure, and the picture server 320 may be configured to compress an original picture according to a compression parameter, and generate a corresponding compressed picture link and feed back the compressed picture link to the terminal device.

In one possible example embodiment, the terminal device where this is located may include, but is not limited to, a fixed terminal (e.g., desktop or all-in-one machine, etc.) and a removable terminal (e.g., personal computer, tablet, cell phone, etc.), which this example is not particularly limited to.

Further, a specific generation process of the compressed picture link described in the exemplary embodiment of the present disclosure is explained and illustrated. Specifically, the compressed picture links described in the exemplary embodiments of the present disclosure may be generated as follows: compressing the source picture link to obtain a compressed picture link; meanwhile, after obtaining the compressed picture link, the compressed picture link is also required to be stored in the first data source attribute in the original picture tag, so that when loading is performed through the picture loading plug-in, the compressed picture link can be obtained from the first data source attribute, and the compressed picture corresponding to the compressed picture link is loaded.

Fig. 4 schematically illustrates a flowchart of a method for compressing the source picture links to obtain compressed picture links according to an exemplary embodiment of the present disclosure. Specifically, referring to fig. 4, the specific generation process of the compressed picture link may include the following steps:

step S410, determining compression parameters required for compressing the source picture link according to the original data size of the source picture link;

step S420, splicing the source picture links and the compression parameters to obtain a splicing result, and uploading the splicing result to a picture server;

step S430, receiving a compressed picture link obtained by compressing the source picture link according to the compression parameter, which is sent by the picture server.

In an example embodiment, the compressed picture link is obtained by the picture server by: firstly, analyzing the splicing result to obtain compression parameters and source picture links included in the splicing result; the compression parameters comprise length compression parameters and width compression parameters; secondly, loading an original image corresponding to the source picture link, and carrying out equal-proportion compression on the original image based on the width compression parameter and the width compression parameter to obtain a compressed image; then, a compressed picture link corresponding to the compressed image is generated.

Hereinafter, step S410 to step S430 will be explained and explained. Specifically, after the source picture link is acquired, the original data size of the original image corresponding to the source picture link can be determined according to the source picture link, and then the compression parameters required for compressing the original image are determined according to the original data size and the compressed target data size; the compression parameters described herein may include a Width compression parameter (Width) and/or a Height compression parameter (Height); then, the source pictures are linked and the compression parameters are spliced, so that a splicing result is obtained; for example, assuming that the source picture link is { url }, the compression parameters are spliced after the source picture link, and the final splicing result may be: { url/2/w/< Width >/h/< Height > }, the concatenation result may indicate that the Width of the defined thumbnail is at most < Width >, and the Height is at most < Height >, that is, the Width and Height of the original image corresponding to the source picture link { url } are limited within the range of [ Width, height ]; and then uploading the splicing result to a picture server.

Further, after the picture server receives the splicing result, a corresponding original image can be loaded according to the source picture link included in the splicing result, and the original image is compressed according to the compression parameters included in the splicing result, so that a compressed image is obtained; meanwhile, after the compressed image is obtained, a compressed picture link corresponding to the compressed image can be generated, and the compressed picture link is fed back to the terminal equipment. It should be noted that, the picture server described herein is a picture server that can support scaling of the original according to the specified format in the form of url concatenation; meanwhile, the data volume of the picture is reduced in a mode of scaling the original image in an equal proportion (reducing in an equal proportion) according to the width compression parameter and the width compression parameter, the purpose of reducing the data volume of the picture can be achieved on the basis of keeping the information integrity of the original picture, and the problem of picture information loss caused by the fact that the data volume of the picture is reduced in a mode of cutting the picture is avoided.

Furthermore, after the terminal device receives the compressed picture link, the compressed picture link is stored in a first data source attribute (data-src) of a corresponding original picture tag, so that in the process of loading the compressed picture, the compressed picture link can be acquired from the first data source attribute, and a compressed picture corresponding to the compressed picture link can be loaded.

Hereinafter, the method of generating the web page shown in fig. 2 will be explained and described in detail with reference to fig. 3 and 4. Specific:

in step S210, a rich text string is obtained, and the rich text string is processed to obtain a source picture link and a text to be rendered included in the rich text string.

In the present exemplary embodiment, first, a user may input a rich text string in a rich text editor; wherein the rich text strings described herein may include, but are not limited to, characters, images, video, audio, and the like; wherein, the images, the video and the audio can be presented in an address link mode; further, when a webpage needs to be generated, the browser can acquire a rich text character string input by a user from a rich text editor, and further process the rich text character string to obtain a source picture link and a text to be rendered; specifically, the method can be realized by the following steps: firstly, matching an original picture tag from the rich text character string based on a preset regular expression, and extracting the source picture link from a second source attribute of the original picture tag; and setting a second source attribute of the original picture tag to be null so as to obtain a target attribute of the original picture tag, and generating the text to be rendered according to the target attribute and other text character strings except the source picture link in the rich text character string.

That is, in the practical application process, after the rich text string is obtained at the browser end, regular expression processing can be performed on the rich text string based on the regular expression, so that an original picture (img, image) tag is matched from the rich text string, and then a source picture link is extracted from a second source attribute of the original picture tag; wherein the second Source attribute described herein, namely, the Source (src) attribute; and then setting the second source attribute of the original picture label as null, and finally generating a corresponding to-be-rendered book. It should be noted that, the second source attribute is set to be null, so that in the process of performing text rendering, image rendering is skipped first and text is directly rendered, so that the purpose of improving the rendering efficiency can be achieved.

Further, after the source picture link is obtained, the method for generating the webpage further comprises the following steps: and storing the source picture link into a third data original attribute of the original picture tag. That is, the source picture link can be stored in the third data original attribute data-origin, so that when the compressed image is previewed, the source picture link can be acquired from the data-origin and the original image corresponding to the source picture link can be loaded.

In step S220, the text to be rendered is rendered, a text page rendering result is obtained, and a current visible area corresponding to the text page rendering result is determined.

In this example embodiment, first, a text to be rendered is rendered, and a text page rendering result is obtained; specifically, the rendering result of the text page can be obtained by the following steps: firstly, analyzing the text to be rendered to obtain a page object model corresponding to a webpage; wherein the rendered text described herein may include hypertext markup language files, cascading style sheet files, and the like; then, generating a page rendering tree according to the page object model, and calculating the page layout of the webpage based on the page rendering tree; finally, rendering the page layout to obtain a text page rendering result; the text rendering result obtained may be specifically shown in fig. 5; meanwhile, based on the text rendering result shown in fig. 5, it can be known that the text rendering result only includes a text portion, and a corresponding position and space are saved for a portion needing to be displayed with an image.

Further, after the text page rendering result is obtained, a current visual area corresponding to the text page rendering result can be determined. The current visible area can be obtained by the following way: firstly, acquiring screen resolution of terminal equipment for displaying the webpage, and determining the display size of the terminal equipment according to the screen resolution; and secondly, determining the current visual area according to the display size of the terminal equipment, the page size of the text page rendering result and the current position of a page scroll bar in the text rendering result. Specifically, referring to fig. 6, in the actual application process, a corresponding visual area may be determined according to the display size of the terminal device, the page size of the text page rendering result, and the current position of the page scroll bar; wherein the viewable area may be as shown at 601; meanwhile, the position of the page scrollbar described herein may be determined according to the distance of the page scrollbar from the top or bottom of the text page rendering result.

In step S230, a picture tag to be rendered in the current visible area is determined, and a compressed picture link corresponding to the source picture link is obtained from a first data source attribute of the picture tag to be rendered.

In the present exemplary embodiment, first, a picture tag to be rendered in a current visible region is determined; specifically, the method can be realized by the following steps: firstly, calling a preset picture loading plug-in, traversing hypertext markup language elements in the text page rendering result based on the preset picture loading plug-in, and obtaining all original picture tags included in the text page rendering result; secondly, determining a picture label to be rendered in the current visible area according to a first current page position of the original picture label in the text page rendering result and a second current page position of the current visible area in the text page rendering result. The preset picture loading plug-in described herein may be a lazy loading plug-in; in the actual application process, firstly, a lazy loading plug-in can be called and initialized; then, traversing HTML (HyperText Mark-up Language) elements in a text page rendering result based on the lazy loading plug-in after initialization processing, thereby obtaining an original picture tag; then, a picture tag to be rendered is determined from the original picture tags.

And secondly, after the picture label to be rendered is determined, acquiring a corresponding compressed picture link from the first data source attribute of the picture label to be rendered so as to execute a subsequent picture rendering process. It should be added here that the following concepts appear in the exemplary embodiments of the present disclosure: a second source attribute (source), which is an attribute of the original picture tag itself, in which a source picture link (based on which an original image can be loaded) is stored; a first data source attribute (data-source), which is an attribute added by generating a corresponding webpage by adopting the webpage generating method described in the example embodiment of the present disclosure, wherein compressed picture links corresponding to source picture links are stored in the first data source attribute; and a third data original attribute (data-origin), which is an added attribute of the corresponding webpage generated by adopting the webpage generating method described in the example embodiment of the present disclosure, wherein the third data original attribute stores an active picture link. That is, in the actual use process, firstly, a source picture link in the second source attribute is acquired, and the second source attribute is set to be empty at the same time, so that no corresponding picture is rendered during text rendering; secondly, storing the obtained source picture link to a third data original attribute, so that when picture preview is needed, the original picture can be loaded based on the source picture link; further, the compressed picture link obtained according to the source picture link is stored in the first data source attribute, so that when the picture loading is carried out through the lazy loading plug-in, the compressed picture corresponding to the compressed picture link can be loaded, and the purpose of improving the generation efficiency of the webpage is achieved.

In step S240, a compressed image corresponding to the compressed picture link is loaded in the current visible area to generate a web page.

Specifically, after the corresponding compressed picture links are obtained, compressed images can be loaded at corresponding positions to obtain a complete webpage; the obtained complete web page may be specifically shown in fig. 7. It should be noted that, because the images appearing in the web page are all appearing in the form of small images in the normal generation process of the web page; therefore, in the normal page display process, the purpose of not influencing the use of the page by the user on the basis of improving the page generation efficiency can be achieved by displaying the pictures at the corresponding positions in a compressed image mode; meanwhile, when the picture is required to be previewed, the original image can be displayed, so that the aim that a user needs to view the high-definition large picture is fulfilled. The method and the device have the advantages that the compressed pictures in the visible area are only required to be loaded, and the pictures in the non-visible area are not required to be loaded, so that the page generation efficiency is further improved.

So far, the specific generation process of the webpage is realized completely. Meanwhile, in order to facilitate the user to view the high-definition large image of the compressed image appearing in the web page, referring to fig. 8, the method for generating the web page further includes the following steps:

step S810, responding to a screen input event aiming at the webpage, triggering a binding event of a root element corresponding to the webpage, and determining an element category of an event element acted by the screen input event based on the binding event of the root element;

step S820, when determining that the element category of the event element is a rendered picture tag in the webpage, acquiring a source picture link to be previewed from a third data original attribute of the rendered picture tag;

step S830, call a picture preview plug-in, and transfer the source picture link to be previewed to the picture preview plug-in, so as to load an original image corresponding to the source picture link to be previewed in the picture preview plug-in.

In an example embodiment, triggering a binding event of a root element corresponding to the web page, and determining an event element acted on by the screen input event based on the binding event of the root element may be implemented as follows: firstly, triggering a binding event of a root element corresponding to the webpage through an event bubbling mechanism; next, an element category of an event element acted upon by the screen input event is determined based on an event execution function in the binding event of the root element.

Hereinafter, step S810 to step S830 will be explained and explained. Specifically, in the process of loading the original image, the method can be realized by using a native event entrusting mechanism; that is, in the actual application process, a click event can be bound in a root element of rich text rendering, when a user clicks a picture, the user triggers the binding event on the root element through an event bubbling mechanism, then the event execution function of the root element judges the element category of the element clicked by the user, if the element category is a picture label, a picture preview function is called, and the value of data-origin on the picture label is provided for a picture preview plug-in to carry out full-screen preview; the specific implementation code may be shown in fig. 9, and the specific obtained full-screen preview result may be shown in fig. 10. Moreover, the use of event delegation can greatly reduce memory consumption, as each element binding click event occupies memory, resulting in a significant memory consumption affecting page performance.

Finally, the example embodiments of the present disclosure also describe a method of generating a web page in the case of scroll bar scrolling. Specifically, the method for generating the webpage further comprises the following steps: when detecting a screen input event of a page scroll bar for the webpage, determining a next visible area corresponding to the current visible area; determining a picture tag to be rendered in the next visible area, and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered; and loading a compressed image corresponding to the compressed picture link in the next visible area to generate a webpage. That is, when the page scroll event is monitored, the page generation process can be repeated as long as the content of the copy appears in the visible area, so as to obtain a new web page.

Up to this point, the method for generating a web page described in the exemplary embodiment of the present disclosure has been fully implemented. Based on the foregoing description, it can be known that, according to the method for generating a web page according to the exemplary embodiment of the present disclosure, when a user edits a content by using a rich text editor, in the process of inserting a picture into the rich text editor, a system uploads the picture to a server having a clipping function (clipping can be performed in a link-splicing manner); meanwhile, before rendering the rich text content, processing the picture link by using a regular expression, separating picture resources from other resources, firstly rendering other resources, and then initializing the content by lazy loading plug-in, so that only pictures in a visible area can be loaded; furthermore, in order to ensure that the picture information of the user is not lost, a click event is bound to a root element in an event entrusting mode, and the user clicks a picture to call a picture preview component to preview an original picture; based on the method, the waiting time of the white screen can be reduced in the rendering process of the rich text, the page can be displayed rapidly, and the user experience is improved.

The example embodiment of the disclosure also provides a device for generating the webpage. Specifically, referring to fig. 11, the generating device of the web page may include a character string processing module 1110, a visible area determining module 1120, a to-be-rendered picture tag determining module 1130, and a first web page generating module 1140. Wherein:

The character string processing module 1110 may be configured to obtain a rich text character string, and process the rich text character string to obtain a source picture link and a text to be rendered included in the rich text character string;

the visual area determining module 1120 may be configured to render the text to be rendered, obtain a text page rendering result, and determine a current visual area corresponding to the text page rendering result;

the to-be-rendered picture tag determining module 1130 may be configured to determine a to-be-rendered picture tag in the current visible area, and obtain a compressed picture link corresponding to the source picture link from a first data source attribute of the to-be-rendered picture tag;

the first web page generation module 1140 may be configured to load a compressed image corresponding to the compressed picture link in the current visible area, so as to generate a web page.

In an exemplary embodiment of the present disclosure, processing the rich text string to obtain a source picture link and text to be rendered included in the rich text string includes: matching an original picture tag from the rich text character string based on a preset regular expression, and extracting the source picture link from a second source attribute of the original picture tag; setting a second source attribute of the original picture tag to be null so as to obtain a target attribute of the original picture tag, and generating the text to be rendered according to the target attribute and other text character strings except the source picture link in the rich text character string.

In one exemplary embodiment of the present disclosure, determining a current viewable area corresponding to the text page rendering result includes: acquiring screen resolution of terminal equipment for displaying the webpage, and determining the display size of the terminal equipment according to the screen resolution; and determining the current visual area according to the display size of the terminal equipment, the page size of the text page rendering result and the current position of the page scroll bar in the text rendering result.

In an exemplary embodiment of the present disclosure, determining a picture tag to be rendered in the current viewable area includes: invoking a preset picture loading plug-in, traversing hypertext markup language elements in the text page rendering result based on the preset picture loading plug-in, and obtaining all original picture tags included in the text page rendering result; and determining the picture label to be rendered in the current visible area according to the first current page position of the original picture label in the text page rendering result and the second current page position of the current visible area in the text page rendering result.

In an exemplary embodiment of the present disclosure, the generating device of the web page further includes:

the compressed picture link generation module can be used for carrying out compression processing on the source picture link to obtain a compressed picture link, and storing the compressed picture link into a first data source attribute in an original picture tag.

In an exemplary embodiment of the present disclosure, compressing the source picture link to obtain a compressed picture link includes: determining compression parameters required for compressing the source picture link according to the original data size of the source picture link; splicing the source picture links and the compression parameters to obtain a splicing result, and uploading the splicing result to a picture server; and receiving a compressed picture link which is transmitted by the picture server and obtained by compressing the source picture link according to the compression parameter.

In an exemplary embodiment of the present disclosure, the compressed picture link is obtained by the picture server by: analyzing the splicing result to obtain compression parameters and source picture links included in the splicing result; the compression parameters comprise length compression parameters and width compression parameters; loading an original image corresponding to the source picture link, and carrying out equal-proportion compression on the original image based on the width compression parameter and the width compression parameter to obtain a compressed image; and generating a compressed picture link corresponding to the compressed image.

and the source picture link storage module can be used for storing the source picture link into a third data original attribute of an original picture tag.

the element category determining module can be used for responding to a screen input event aiming at the webpage, triggering a binding event of a root element corresponding to the webpage, and determining the element category of an event element acted by the screen input event based on the binding event of the root element;

the source picture link acquisition module can be used for acquiring a source picture link to be previewed from the third data original attribute of the rendered picture tag when the element category of the event element is determined to be the rendered picture tag in the webpage;

the original image loading module can be used for calling a picture preview plug-in and transmitting the source picture link to be previewed to the picture preview plug-in so as to load an original image corresponding to the source picture link to be previewed in the picture preview plug-in.

In one exemplary embodiment of the present disclosure, triggering a binding event of a root element corresponding to the web page, and determining an event element acted upon by the screen input event based on the binding event of the root element, includes: triggering a binding event of a root element corresponding to the webpage through an event bubbling mechanism; based on an event execution function in the binding event of the root element, determining an element category of an event element acted by the screen input event.

the next visible area determining module can be used for determining a next visible area corresponding to the current visible area when detecting a screen input event of a page scroll bar of the webpage;

the compressed picture link acquisition module can be used for determining a picture tag to be rendered in the next visible area and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered;

and the second webpage generating module can be used for loading the compressed image corresponding to the compressed picture link in the next visible area so as to generate the webpage.

The specific details of each module in the above-mentioned webpage generating device are described in detail in the corresponding webpage generating method, so that the details are not repeated here.

It should be noted that although in the above detailed description several modules or units of a device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit in accordance with embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into a plurality of modules or units to be embodied.

Furthermore, although the steps of the methods in the present disclosure are depicted in a particular order in the drawings, this does not require or imply that the steps must be performed in that particular order or that all illustrated steps be performed in order to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step to perform, and/or one step decomposed into multiple steps to perform, etc.

In an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above method is also provided.

Those skilled in the art will appreciate that the various aspects of the present disclosure may be implemented as a system, method, or program product. Accordingly, various aspects of the disclosure may be embodied in the following forms, namely: an entirely hardware embodiment, an entirely software embodiment (including firmware, micro-code, etc.) or an embodiment combining hardware and software aspects may be referred to herein as a "circuit," module "or" system.

An electronic device 1200 according to such an embodiment of the present disclosure is described below with reference to fig. 12. The electronic device 1200 shown in fig. 12 is merely an example, and should not be construed as limiting the functionality and scope of use of the disclosed embodiments.

As shown in fig. 12, the electronic device 1200 is in the form of a general purpose computing device. Components of electronic device 1200 may include, but are not limited to: the at least one processing unit 1210, the at least one memory unit 1220, a bus 1230 connecting the different system components (including the memory unit 1220 and the processing unit 1210), and a display unit 1240.

Wherein the storage unit stores program code that is executable by the processing unit 1210 such that the processing unit 1210 performs steps according to various exemplary embodiments of the present disclosure described in the above-described "exemplary methods" section of the present specification. For example, the processing unit 1210 may perform step S210 as shown in fig. 2: acquiring a rich text character string, and processing the rich text character string to obtain a source picture link and a text to be rendered, wherein the source picture link and the text to be rendered are included in the rich text character string; step S220: rendering the text to be rendered to obtain a text page rendering result, and determining a current visible area corresponding to the text page rendering result; step S230: determining a picture tag to be rendered in the current visible area, and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered; step S240: and loading a compressed image corresponding to the compressed picture link in the current visible area to generate a webpage.

The storage unit 1220 may include a readable medium in the form of a volatile storage unit, such as a Random Access Memory (RAM) 12201 and/or a cache memory 12202, and may further include a Read Only Memory (ROM) 12203.

Storage unit 1220 may also include a program/utility 12204 having a set (at least one) of program modules 12205, such program modules 12205 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment.

Bus 1230 may be a local bus representing one or more of several types of bus structures including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or using any of a variety of bus architectures.

The electronic device 1200 may also communicate with one or more external devices 1300 (e.g., keyboard, pointing device, bluetooth device, etc.), one or more devices that enable a user to interact with the electronic device 1200, and/or any device (e.g., router, modem, etc.) that enables the electronic device 1200 to communicate with one or more other computing devices. Such communication may occur through an input/output (I/O) interface 1250. Also, the electronic device 1200 may communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network such as the internet through the network adapter 1260. As shown, the network adapter 1260 communicates with other modules of the electronic device 1200 over bus 1230. It should be appreciated that although not shown, other hardware and/or software modules may be used in connection with electronic device 1200, including, but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, data backup storage systems, and the like.

From the above description of embodiments, those skilled in the art will readily appreciate that the example embodiments described herein may be implemented in software, or may be implemented in software in combination with the necessary hardware. Thus, the technical solution according to the embodiments of the present disclosure may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (may be a CD-ROM, a U-disk, a mobile hard disk, etc.) or on a network, including several instructions to cause a computing device (may be a personal computer, a server, a terminal device, or a network device, etc.) to perform the method according to the embodiments of the present disclosure.

In an exemplary embodiment of the present disclosure, a computer-readable storage medium having stored thereon a program product capable of implementing the method described above in the present specification is also provided. In some possible implementations, various aspects of the disclosure may also be implemented in the form of a program product comprising program code for causing a terminal device to carry out the steps according to the various exemplary embodiments of the disclosure as described in the "exemplary methods" section of this specification, when the program product is run on the terminal device.

A program product for implementing the above-described method according to an embodiment of the present disclosure may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present disclosure is not limited thereto, and in this document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, random Access Memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The computer readable signal medium may include a data signal propagated in baseband or as part of a carrier wave with readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A readable signal medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.

Program code embodied on a readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Program code for carrying out operations of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device, partly on a remote computing device, or entirely on the remote computing device or server. In the case of remote computing devices, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., connected via the Internet using an Internet service provider).

Furthermore, the above-described figures are only schematic illustrations of processes included in the method according to the exemplary embodiments of the present disclosure, and are not intended to be limiting. It will be readily appreciated that the processes shown in the above figures do not indicate or limit the temporal order of these processes. In addition, it is also readily understood that these processes may be performed synchronously or asynchronously, for example, among a plurality of modules.

Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the application disclosed herein. This application is intended to cover any adaptations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

Claims

1. The method for generating the webpage is characterized by comprising the following steps of:

2. The method for generating a web page according to claim 1, wherein processing the rich text string to obtain a source picture link and text to be rendered included in the rich text string comprises:

matching an original picture tag from the rich text character string based on a preset regular expression, and extracting the source picture link from a second source attribute of the original picture tag;

setting a second source attribute of the original picture tag to be null so as to obtain a target attribute of the original picture tag, and generating the text to be rendered according to the target attribute and other text character strings except the source picture link in the rich text character string.

3. The method for generating a web page according to claim 1, wherein determining a current viewable area corresponding to the text page rendering result comprises:

Acquiring screen resolution of terminal equipment for displaying the webpage, and determining the display size of the terminal equipment according to the screen resolution;

and determining the current visual area according to the display size of the terminal equipment, the page size of the text page rendering result and the current position of the page scroll bar in the text rendering result.

4. The method of claim 1, wherein determining a picture tag to be rendered in the current viewable area comprises:

invoking a preset picture loading plug-in, traversing hypertext markup language elements in the text page rendering result based on the preset picture loading plug-in, and obtaining all original picture tags included in the text page rendering result;

and determining the picture label to be rendered in the current visible area according to the first current page position of the original picture label in the text page rendering result and the second current page position of the current visible area in the text page rendering result.

5. The method for generating a web page according to claim 1, wherein the method for generating a web page further comprises:

And compressing the source picture link to obtain a compressed picture link, and storing the compressed picture link into a first data source attribute in an original picture tag.

6. The method for generating a web page according to claim 5, wherein compressing the source picture link to obtain a compressed picture link comprises:

determining compression parameters required for compressing the source picture link according to the original data size of the source picture link;

splicing the source picture links and the compression parameters to obtain a splicing result, and uploading the splicing result to a picture server;

and receiving a compressed picture link which is transmitted by the picture server and obtained by compressing the source picture link according to the compression parameter.

7. The method for generating a web page according to claim 6, wherein the compressed picture link is obtained by the picture server by:

analyzing the splicing result to obtain compression parameters and source picture links included in the splicing result; the compression parameters comprise length compression parameters and width compression parameters;

Loading an original image corresponding to the source picture link, and carrying out equal-proportion compression on the original image based on the width compression parameter and the width compression parameter to obtain a compressed image;

and generating a compressed picture link corresponding to the compressed image.

8. The method for generating a web page according to claim 1, wherein after generating the web page, the method for generating a web page further comprises:

and storing the source picture link into a third data original attribute of the original picture tag.

9. The method for generating a web page according to claim 8, wherein after generating the web page, the method for generating a web page further comprises:

triggering a binding event of a root element corresponding to the webpage in response to a screen input event for the webpage, and determining an element category of an event element acted by the screen input event based on the binding event of the root element;

when the element category of the event element is determined to be a rendered picture tag in the webpage, acquiring a source picture link to be previewed from a third data original attribute of the rendered picture tag;

And calling a picture preview plug-in, and transmitting the source picture link to be previewed to the picture preview plug-in so as to load an original image corresponding to the source picture link to be previewed in the picture preview plug-in.

10. The method for generating a web page according to claim 9, wherein triggering a binding event of a root element corresponding to the web page and determining an event element acted on by the screen input event based on the binding event of the root element comprises:

triggering a binding event of a root element corresponding to the webpage through an event bubbling mechanism;

based on an event execution function in the binding event of the root element, determining an element category of an event element acted by the screen input event.

11. The method for generating a web page according to claim 1, wherein after generating the web page, the method for generating a web page further comprises:

when detecting a screen input event of a page scroll bar for the webpage, determining a next visible area corresponding to the current visible area;

determining a picture tag to be rendered in the next visible area, and acquiring a compressed picture link corresponding to the source picture link from a first data source attribute of the picture tag to be rendered;

And loading a compressed image corresponding to the compressed picture link in the next visible area to generate a webpage.

12. A web page generation apparatus, comprising:

13. A computer readable storage medium having stored thereon a computer program, which when executed by a processor implements the method of generating a web page according to any of claims 1-11.

14. An electronic device, comprising:

a processor; and

a memory for storing executable instructions of the processor;

wherein the processor is configured to perform the method of generating a web page of any of claims 1-11 via execution of the executable instructions.