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

Abstract

The present disclosure relates to a method and device for generating a web page, a storage medium, and electronic equipment, and relates to the field of computer technology. The method includes: obtaining a rich text string, and processing the rich text string to obtain the rich text string. The source image link included in the text string and the text to be rendered; rendering the text to be rendered to obtain a text page rendering result, and determining the current visible area corresponding to the text page rendering result; determining the currently available The image tag to be rendered in the visual area, and obtain the compressed image link corresponding to the source image link from the first data source attribute of the image tag to be rendered; load the compressed image link in the current viewable area Corresponding compressed images to generate web pages. The disclosure improves the generation efficiency of web pages.

Description

Method and device for generating web page, storage medium, and electronic device

technical field

Embodiments of the present disclosure relate to the field of computer technology, and in particular, relate to a method for generating a webpage, a device for generating a webpage, a computer-readable storage medium, and an electronic device.

Background technique

In the existing method for generating a webpage, the corresponding page can be obtained by directly rendering the rich text content. However, when the page needs to load a large amount of data during the rendering process, the user needs to wait for a long time; that is, directly rendering the rich text content has the problem of low page rendering efficiency.

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

Contents of the invention

The purpose of the present disclosure is to provide a method for generating a web page, a device for generating a web page, a computer-readable storage medium, and an electronic device, so as to overcome at least to a certain extent the relatively low page rendering efficiency caused by the limitations and defects of related technologies. low problem.

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

Obtain a rich text string, and process the rich text string to obtain the source image link included in the rich text string and the text to be rendered;

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

Determine the image tag to be rendered in the current visible area, and obtain the compressed image link corresponding to the source image link from the first data source attribute of the image tag to be rendered;

The compressed image corresponding to the compressed image link is loaded in the current viewable area to generate a web page.

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

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

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

A to-be-rendered image tag determination module, configured to determine the to-be-rendered image tag in the current viewable area, and obtain a compressed image link corresponding to the source image link from the first data source attribute of the to-be-rendered image tag ;

The web page generation module is used to load the compressed image corresponding to the compressed image link in the current viewable area to generate a web page.

According to one aspect of the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the method for generating a web page described in any one of the above-mentioned items is implemented.

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

processor; and

a memory for storing executable instructions of the processor;

Wherein, the processor is configured to execute the method for generating a web page described in any one of the above by executing the executable instructions.

In the method for generating a web page provided by an embodiment of the present disclosure, on the one hand, by obtaining a rich text string and processing the rich text string, the source picture link and the text to be rendered included in the rich text string are obtained; and then Render the text to be rendered, obtain the rendering result of the text page, and determine the current viewable area corresponding to the rendering result of the text page; then determine the tag of the image to be rendered in the current viewable area, and obtain the first data source of the image tag to be rendered Get the compressed image link corresponding to the source image link in the attribute; finally load the compressed image corresponding to the compressed image link in the current visible area to generate a web page; since the text can be rendered first and then the image can be rendered, and then can Avoid the problem of blank page waiting in the prior art due to direct rendering; on the other hand, since the rendered image is a compressed image, it can avoid the problem of low page rendering efficiency in the direct rendering of rich text content, and improve the efficiency of web pages. Page generation efficiency.

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 present disclosure.

Description of 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. Apparently, the drawings in the following description are only some embodiments of the present disclosure, and those skilled in the art can obtain other drawings according to these drawings without creative efforts.

Fig. 1 schematically shows an example diagram of the principle of generating a page directly according to a rich text string.

Fig. 2 schematically shows a flowchart of a method for generating a web page according to an exemplary embodiment of the present disclosure.

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

Fig. 4 schematically shows a flow chart of a method for compressing the source picture link to obtain a compressed picture link according to an example embodiment of the present disclosure.

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

Fig. 6 schematically shows an example diagram of an interface of a visible area according to an exemplary embodiment of the present disclosure.

Fig. 7 schematically shows an example diagram of an interface of a generated web page according to an exemplary embodiment of the present disclosure.

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

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

Fig. 10 schematically shows a display interface diagram of a loaded original image according to an exemplary embodiment of the present disclosure.

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

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

Detailed ways

Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, 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 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 in order to give a thorough understanding of embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced without one or more of the specific details being omitted, or other methods, components, devices, steps, etc. may be adopted. 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 repeated descriptions thereof will be omitted. Some of the block diagrams shown in the drawings 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 network and/or processor means and/or microcontroller means.

Rich text editor, Multi-function Text Editor, referred to as MTE, is a text editor that can be embedded in a browser, and what you see is what you get; at the same time, rich text is a text similar to Word, which has the features of ordinary text. Features; rich text can include illustrations and the definition of text color, etc., and it can also have the functions of adjusting page, text layout, inserting audio and video, pictures, etc. In the process of practical application, rich text rendering occupies a very important position in major websites, and most systems on the market have the function of rich text rendering.

During the page generation process, users can edit the content by themselves through the rich text editor, and finally generate HTML (HyperText Mark-up Language, hypertext markup language) code; that is, under the premise of the rich text editor, the user does not need to For code development, you can directly fill in the required page content in the rich text editor to generate the web page that the user wants. This method greatly reduces the development cost; however, this method also has certain disadvantages. The disadvantage is: if there is a lot of content written in the rich text, or some large pictures are uploaded in the rich text, then the rendering of the rich text content will be slow, resulting in a bad user experience.

In order to solve the bad experience of slow rich text rendering based on the above-mentioned large images, in some technical solutions, rich text rendering can be optimized in the form of lazy loading; among them, the specific implementation process is: before rich text rendering, Clear the source (Source) attribute of the image link in the rich text. The purpose of clearing the source attribute is to prevent the loading of the image when the rich text is rendered, so that after the rich text is rendered, the position of the image tag will be judged in the visual The pictures in the area can be rendered by resetting the source attribute; this method can optimize the user experience to a certain extent, although the content of the page can be quickly displayed, but when the picture resource is too large, the user still needs to wait It takes a long time to see the complete page.

In some technical solutions, without any processing on the rich text content, the specific implementation method of directly obtaining the rich text content and then obtaining the web page can be shown in Figure 1; wherein, in the implementation mode shown in Figure 1, it can be seen that The entire code process does not process rich text, and directly uses innerHTML for content rendering; however, because this solution directly renders rich text without image processing, when the amount of loaded data is relatively large, the page display will be slower .

Based on this, a method for generating a web page is firstly provided in this example embodiment, which can be run on a terminal device; of course, those skilled in the art can also run the method of the present disclosure on other platforms according to requirements, this example implementation There is no special limitation on this in the example. Specifically, as shown in FIG. 2, the method for generating the web page may include the following steps:

Step S210. Obtain a rich text string, and process the rich text string to obtain the source picture link and the text to be rendered included in the rich text string;

Step S220. Render the text to be rendered to obtain a text page rendering result, and determine the current visible area corresponding to the text page rendering result;

Step S230. Determine the image tag to be rendered in the current visible area, and obtain the compressed image link corresponding to the source image link from the first data source attribute of the image tag to be rendered;

Step S240. Load the compressed image corresponding to the compressed image link in the current visible area to generate a web page.

In the method for generating the above web page, on the one hand, by obtaining the rich text string and processing the rich text string, the source picture link and the text to be rendered included in the rich text string are obtained; and then the text to be rendered is rendered, Obtain the rendering result of the text page, and determine the current visible area corresponding to the rendering result of the text page; then determine the image tag to be rendered in the current visible area, and obtain the source image from the first data source attribute of the image tag to be rendered The compressed image link corresponding to the link; finally, the compressed image corresponding to the compressed image link is loaded in the current visible area to generate a web page; since the text can be rendered first and then the image is rendered, it can avoid Direct rendering will have the problem of waiting for blank pages; on the other hand, since the rendered image is a compressed image, it can avoid the problem of low page rendering efficiency caused by directly rendering rich text content, and improve the generation efficiency of web pages.

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

First, explain and illustrate the technical implementation process of the exemplary embodiment of the present disclosure. Specifically, the method for generating webpages described in the exemplary embodiments of the present disclosure can further optimize the loading speed of image resources in the process of rendering rich text; The size, thus loading the rendering speed of rich text, is suitable for any browser. At the same time, in the process of actual application, the user can upload the added picture to the picture server during the rich text editing process (the picture server can support picture compression through links); at the same time, before the rich text is rendered, identify For the image tag in the rich text, set the source attribute of the image to empty, and store the original link and the compressed link of the image separately; after the page is rendered, the lazy loading plug-in is introduced and initialized, and the The picture tag will load the compressed link; further, the picture preview function can be added, and the user can click the picture to preview the original picture; through the above implementation method, the number of network requests and page loading resources can be reduced to a certain extent, thereby speeding up the page rendering speed ; Moreover, the picture preview mechanism can also be used to ensure that the user can clearly know the content of each picture, and will not cause information loss due to the compression of the picture.

Secondly, the application scenario of the method for generating a web page according to the exemplary embodiment of the present disclosure is explained and illustrated. Specifically, as shown in FIG. 3 , the method for generating a web page described in an exemplary embodiment of the present disclosure can be applied to a scenario including a terminal device 310 and a picture server 320; wherein, the terminal device can communicate via wired or wireless communication connection with the picture server; the terminal device 310 can be used to implement the method for generating web pages described in the exemplary embodiment of the present disclosure, and the picture server 320 can be used to compress the original picture according to the compression parameters, and generate corresponding compressed The image link is fed back to the terminal device.

In a feasible exemplary embodiment, the terminal devices here may include but not limited to fixed terminals (for example, desktop computers or all-in-one computers, etc.) and mobile terminals (for example, personal computers, tablet computers, mobile phones, etc. etc.), this example does not impose special restrictions on this.

Further, the specific generation process of the compressed picture link recorded in the exemplary embodiment of the present disclosure is explained and described. Specifically, the compressed image link described in the exemplary embodiments of the present disclosure can be generated in the following manner: compress the source image link to obtain the compressed image link; at the same time, after obtaining the compressed image link, the compressed The image link is stored in the first data source attribute in the original image tag, so that when loading through the image loading plug-in, other compressed image links can be obtained from the first data source attribute and the compression corresponding to the compressed image link can be loaded picture.

Fig. 4 schematically shows a flow chart of a method for compressing the source picture link to obtain a compressed picture link according to an example embodiment of the present disclosure. Specifically, as shown in FIG. 4, the specific generation process of the compressed picture link may include the following steps:

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

Step S420, splicing the source image link and the compression parameters to obtain a splicing result, and uploading the splicing result to an image server;

Step S430, receiving the compressed picture link obtained by compressing the source picture link according to the compression parameters sent by the picture server.

In an example embodiment, the compressed picture link is obtained by the picture server in the following manner: first, the splicing result is analyzed to obtain the compression parameters and the source picture link included in the splicing result; wherein , the compression parameters include a length compression parameter and a width compression parameter; secondly, load the original image corresponding to the source image link, and perform proportional compression based on the width compression parameter and the width compression parameter to obtain Compressing an image; then, generating a compressed picture link corresponding to the compressed image.

Hereinafter, step S410-step S430 will be explained and illustrated. Specifically, after the source picture link is obtained, 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 according to the original data size and the compressed target data size , determine the compression parameters required for compressing the original image; wherein, the compression parameters recorded here may include width compression parameters (Width) and/or height compression parameters (Height); then, link the source picture and the compression parameters Stitching to obtain the stitching result; for example, assuming that the source image link is {url}, then splicing compression parameters after the source image link, the final stitching result can be: {url/2/w/<Width>/h/ <Height>}, the splicing result can indicate that the maximum width of the thumbnail is <Width>, and the maximum height is <Height>, which means that the width and height of the original image corresponding to the source image link {url} are limited to [Width] , Height]; and then upload the splicing result to the image server.

Further, when the image server receives the splicing result, it can load the corresponding original image according to the source picture link included in the splicing result, and compress the original image according to the compression parameters included in the splicing result, and then obtain compressed At the same time, 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 device. What needs to be added here is that the picture server recorded here is a picture server that can support the image server to scale the original according to the specified format through url splicing; at the same time, the picture server recorded here is based on the width compression parameter and the width compression parameter The original image is proportionally scaled (proportionally reduced) to reduce the data volume of the picture, which can achieve the purpose of reducing the data volume of the picture on the basis of maintaining the information integrity of the original picture, and avoids the need to crop the picture The problem of image information loss caused by reducing the amount of image data.

Furthermore, when the terminal device receives the compressed picture link, it also needs to store the compressed picture link in the first data source attribute (data-src) of the corresponding original picture tag, so as to facilitate the process of loading the compressed picture , the compressed image link may be acquired from the first data source attribute and the compressed image corresponding to the compressed image link may be loaded.

Hereinafter, the method for generating the web page shown in FIG. 2 will be explained and illustrated in detail with reference to FIG. 3 and FIG. 4 . specific:

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

In this example embodiment, firstly, the user can input a rich text string in the rich text editor; wherein, the rich text string recorded here may include but not limited to characters, images, video and audio, etc.; where , images, videos, and audios can be presented through address links; further, when a web page needs to be generated, the browser can obtain the rich text string entered by the user from the rich text editor, and then edit the rich text string process to obtain the source image link and the text to be rendered; specifically, it can be achieved in the following manner: first, match the original image tag from the rich text string based on a preset regular expression, and obtain the original image tag from the original image tag The source image link is extracted from the second source attribute of the original image tag; secondly, the second source attribute of the original image tag is set to be empty to obtain the target attribute of the original image tag, and according to the target attribute and the other text strings in the rich text string except the source image link to generate the text to be rendered.

That is to say, in the process of actual application, after the rich text string is obtained on the browser side, regular expression processing can be performed on the rich text string based on regular expressions, so as to match the original image from the rich text string (img, image) tag, and then extract the source image link from the second source attribute of the original image tag; wherein, the second source attribute described here is the Source (src) attribute; then, the original image The second source attribute of the label is set to be empty, and the corresponding object to be rendered is finally generated. What needs to be added here is that the second source attribute needs to be set to null here, the purpose is to skip image rendering and directly render text in the process of text rendering, so as to improve the The purpose of rendering efficiency.

Further, after obtaining the source picture link, the method for generating the web page further includes: storing the source picture link in the third data original attribute of the original picture tag. That is, the source image link can be stored in the third data original attribute data-origin, so that when previewing the compressed image, the source image link can be obtained from data-origin and the corresponding source image link can be loaded. The original image.

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

In this example embodiment, firstly, the text to be rendered is rendered to obtain the rendering result of the text page; specifically, the rendering result of the text page can be obtained in the following manner: first, the text to be rendered is parsed to obtain the result corresponding to the webpage The corresponding page object model; wherein, the rendered text described here may include hypertext markup language files and cascading style sheet files, etc.; then, generate a page rendering tree according to the page object model, and calculate the web page based on the page rendering tree page layout; finally, the page layout is rendered to obtain the text page rendering result; wherein, the obtained text rendering result can be specifically referred to as shown in Figure 5; at the same time, based on the text rendering result shown in Figure 5, it can be known , the text rendering result only includes the text part, and saves the corresponding position and space for the part that needs to be displayed as an image.

Further, after the text page rendering result is obtained, the current visible area corresponding to the text page rendering result can be determined. Wherein, the current viewable area can be obtained in the following manner: firstly, obtain the screen resolution of the terminal device displaying the web page, and determine the display size of the terminal device according to the screen resolution; secondly, according to the The current visible area is determined based on 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 in the text rendering result. Specifically, as shown in FIG. 6, in the actual application process, the corresponding visible area can 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 visible area It may be as shown in 601; meanwhile, the position of the page scroll bar recorded here may be determined according to the distance between the page scroll bar and the topmost or bottommost end of the text page rendering result.

In step S230, determine the image tag to be rendered in the current visible area, and obtain the compressed image link corresponding to the source image link from the first data source attribute of the image tag to be rendered.

In this example embodiment, first, determine the image tag to be rendered in the current visible area; specifically, it can be implemented in the following manner: first, call a preset image loading plug-in, and load the plug-in based on the preset image traverse the hypertext markup language elements in the rendering result of the text page, and obtain all original picture tags included in the rendering result of the text page; secondly, according to the first The current page position and the second current page position of the current viewable area in the text page rendering result determine the image tags to be rendered that need to be rendered in the current viewable area. Among them, the preset image loading plug-in described here can be a lazy loading plug-in; in the process of actual application, first, the lazy loading plug-in can be called and initialized; The loading plug-in traverses the HTML (HyperText Mark-up Language, Hypertext Markup Language) elements in the rendering result of the text page, and then obtains the original image tag; then, determines the image tag to be rendered from the original image tag.

Secondly, after the image tag to be rendered is determined, the corresponding compressed image link can be obtained from the first data source attribute of the image tag to be rendered, so as to execute the subsequent image rendering process. What needs to be supplemented here is that the following concepts appear in the exemplary embodiments of the present disclosure: the second source attribute (source) is an attribute of the original image tag itself, and the source image link is stored in this attribute (based on the source image link The original image can be loaded); the first data source attribute (data-source) is an attribute added by using the method for generating a web page described in an exemplary embodiment of the present disclosure to generate a corresponding web page, and the first data source attribute stores The compressed picture link corresponding to the source picture link; the third data original attribute (data-origin), which is also an attribute added by using the method for generating a web page described in the exemplary embodiment of the present disclosure to generate a corresponding web page, the third data-origin The source image link is stored in the attribute. That is to say, in the actual use process, firstly, get the source image link in the second source attribute and set the second source attribute to empty, so that the corresponding image will not be rendered when the text is rendered; secondly, the obtained The link of the source picture is stored in the original attribute of the third data, so that when the picture preview is needed, the original picture can be loaded based on the link of the source picture; further, the link of the compressed picture obtained according to the link of the source picture is stored in the first data source property, and then realize that when the image is loaded through the lazy loading plug-in, the compressed image corresponding to the compressed image link can be loaded, so as to achieve the purpose of improving the generation efficiency of the web page.

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

Specifically, after obtaining the corresponding compressed image link, the compressed image can be loaded at the corresponding position to obtain a complete web page; wherein, the obtained complete web page can be specifically shown in FIG. 7 . What needs to be added here is that during the normal webpage generation process, the images that appear on the webpage are all in the form of small pictures; therefore, during the normal page display process, by compressing the image The way to display the pictures at the corresponding positions can achieve the purpose of improving the page generation efficiency without affecting the user's use of the page; at the same time, when the picture preview is required, the original image can also be displayed to achieve the user's The purpose of viewing high-resolution large images is required. What needs to be further supplemented here is that since only the compressed pictures in the visible area need to be loaded, the pictures in the non-visible area do not need to be loaded, thereby further improving the efficiency of page generation.

So far, the specific generation process of the web page has been fully realized. At the same time, in order to facilitate the user to view the high-definition large image of the compressed image appearing in the web page, as shown in Figure 8, the method for generating the web page also includes the following steps:

Step S810, in response to the screen input event for the web page, trigger the binding event of the root element corresponding to the web page, and determine the event on which the screen input event acts based on the binding event of the root element the element class of the element;

Step S820, when it is determined that the element type of the event element is the rendered image tag in the web page, obtain the source image link to be previewed from the third data original attribute of the rendered image tag;

Step S830, calling the image preview plug-in, and passing the link of the source image to be previewed to the image preview plug-in, so as to load the original image corresponding to the link of the source image to be previewed in the image preview plug-in.

In an example embodiment, triggering the binding event of the root element corresponding to the web page, and determining the event element on which the screen input event acts based on the binding event of the root element can be implemented in the following manner : firstly, trigger the binding event of the root element corresponding to the web page through the event bubbling mechanism; secondly, determine the event on which the screen input event acts based on the event execution function in the binding event of the root element The element class of the element.

Hereinafter, step S810-step S830 will be explained and illustrated. Specifically, in the process of loading the original image, it can be realized by using the native event delegation mechanism; that is, in the actual application process, the click event can be bound to the root element of rich text rendering, when the user clicks on the image , the binding event on the root element will be triggered through the event bubbling mechanism, and then the event execution function of the root element will determine the element category of the element clicked by the user. If the element category is an image tag, call the image The preview function provides the value of data-origin on the image tag to the image preview plug-in for full-screen preview; among them, the specific implementation code can refer to Figure 9, and the specific full-screen preview result can refer to Figure 10. Moreover, using event delegation can greatly reduce memory consumption, because each element binding click event will occupy memory, which will cause a large amount of memory consumption and affect page performance.

Finally, the exemplary embodiment of the present disclosure also records a method for generating a webpage when a scroll bar scrolls. Specifically, the method for generating a web page further includes: when detecting a screen input event for a page scroll bar of the web page, determining the next visible area corresponding to the current visible area; determining the next visible area The image tag to be rendered in the visual area, and obtain the compressed image link corresponding to the source image link from the first data source attribute of the image tag to be rendered; load the compressed image link in the next visible area Corresponding compressed images to generate web pages. That is, when the page scrolling event is detected, as long as the content of the copy appears in the visible area, the above page generation process can be repeated to obtain a new web page.

So far, the methods for generating webpages described in the exemplary embodiments of the present disclosure have been fully implemented. Based on the content of the foregoing description, it can be known that the method for generating a web page described in the exemplary embodiment of the present disclosure enables the user to insert a picture into the rich text editor when the user edits the content in the rich text editor. Upload the image to a server with the function of clipping (can be clipped in the form of link splicing); at the same time, before rendering the rich text content, use regular expressions to process the image link, separate the image resource from other resources, and render other resources first. Resources, and then initialize the content through the lazy loading plug-in, so that only the pictures that appear in the visible area will be loaded; further, in order to ensure that the user's picture information is not lost, bind the click event to the root element in the form of event delegation , the user clicks on the picture to call the picture preview component to preview the original picture; based on this, the rich text can reduce the waiting time of the white screen during the rendering process, and the page can be displayed quickly, which improves the user experience.

The exemplary embodiment of the present disclosure also provides an apparatus for generating a web page. Specifically, referring to FIG. 11 , the apparatus for generating a webpage may include a character string processing module 1110 , a visible area determining module 1120 , a to-be-rendered image label determining module 1130 and a first webpage generating module 1140 . in:

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

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

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

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

In an exemplary embodiment of the present disclosure, processing the rich text string to obtain the source picture link and the text to be rendered included in the rich text string includes: based on a preset regular expression from Match the original image tag in the rich text string, and extract the source image link from the second source attribute of the original image tag; set the second source attribute of the original image tag to empty to get the The target attribute of the original image tag, and generate the text to be rendered according to the target attribute and other text strings in the rich text string except the source image link.

In an exemplary embodiment of the present disclosure, determining the current visible area corresponding to the rendering result of the text page includes: obtaining the screen resolution of the terminal device displaying the web page, and according to the screen The resolution determines the display size of the terminal device; 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 in the text rendering result, determine the current visible area.

In an exemplary embodiment of the present disclosure, determining the image tag to be rendered in the current visible area includes: calling a preset image loading plug-in, and traversing the text based on the preset image loading plug-in The hypertext markup language element in the page rendering result obtains all original image tags included in the text page rendering result; according to the first current page position of the original image tag in the text page rendering result and the The second current page position of the current viewable area in the rendering result of the text page determines the image tag to be rendered that needs to be rendered in the current viewable area.

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

The compressed picture link generating module can be used to compress the source picture link to obtain the compressed picture link, and store the compressed picture link in the first data source attribute in the original picture tag.

In an exemplary embodiment of the present disclosure, performing compression processing on the source picture link to obtain the compressed picture link includes: determining the source picture link according to the original data size of the source picture link Compression parameters required for compression; splicing the source picture link and the compression parameters to obtain a splicing result, and uploading the splicing result to the picture server; A compressed picture link obtained by compressing the source picture link.

In an exemplary embodiment of the present disclosure, the compressed picture link is obtained by the picture server in the following manner: parsing the splicing result to obtain the compression parameters included in the splicing result and the source picture link ; Wherein, the compression parameters include length compression parameters and width compression parameters; load the original image corresponding to the source picture link, and perform proportional compression based on the width compression parameters and the original image of the width compression parameters, to obtain Compressing an image; generating a compressed picture link corresponding to the compressed image.

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

The source picture link storage module can be used to store the source picture link in the third data original attribute of the original picture tag.

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

The element category determination module may be configured to trigger a binding event of a root element corresponding to the web page in response to a screen input event for the web page, and determine the screen input based on the binding event of the root element the element class of the event element on which the event acts;

The source image link obtaining module can be used to obtain the source to be previewed from the third data original attribute of the rendered image tag when it is determined that the element category of the event element is the rendered image tag in the web page image link;

The original image loading module can be used to call the image preview plug-in, and transfer the link of the source image to be previewed to the image preview plug-in, so as to load the image corresponding to the link of the source image to be previewed in the image preview plug-in of the original image.

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

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

The next visible area determination module can be used to determine the next visible area corresponding to the current visible area when a screen input event for the page scroll bar of the web page is detected;

The compressed image link acquisition module can be used to determine the image tag to be rendered in the next visible area, and obtain the compressed image corresponding to the source image link from the first data source attribute of the image tag to be rendered Link;

The second web page generation module can be used to load the compressed image corresponding to the compressed image link in the next visible area to generate a web page.

The specific details of each module in the above-mentioned web page generation apparatus have been described in detail in the corresponding web page generation method, so details will not be repeated here.

It should be noted that although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. Actually, according to the embodiment of the present disclosure, the features and functions of two or more modules or units described above may be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided to be embodied by a plurality of modules or units.

In addition, although steps of the methods of the present disclosure are depicted in the drawings in a particular order, there is no requirement or implication that the steps must be performed in that particular order, or that all illustrated steps must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step for execution, and/or one step may be decomposed into multiple steps for execution, 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 can understand that various aspects of the present disclosure can be implemented as a system, method or program product. Therefore, various aspects of the present disclosure can be embodied in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software, which can be collectively referred to herein as "circuit", "module" or "system".

An electronic device 1200 according to this embodiment of the present disclosure is described below with reference to FIG. 12 . The electronic device 1200 shown in FIG. 12 is only an example, and should not limit the functions and scope of use of the embodiments of the present disclosure.

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

Wherein, the storage unit stores program codes, and the program codes can be executed by the processing unit 1210, so that the processing unit 1210 executes various exemplary methods according to the present disclosure described in the "Exemplary Methods" section of this specification. Implementation steps. For example, the processing unit 1210 may execute step S210 as shown in FIG. 2: acquire a rich text string, and process the rich text string to obtain the source picture link included in the rich text string and Text to be rendered; Step S220: Render the text to be rendered to obtain a text page rendering result, and determine the current visible area corresponding to the text page rendering result; Step S230: Determine the The image tag to be rendered, and obtain the compressed image link corresponding to the source image link from the first data source attribute of the image tag to be rendered; Step S240: Load the image corresponding to the compressed image link in the current visible area Compressed images to generate web pages.

The storage unit 1220 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 12201 and/or a cache storage unit 12202 , and may further include a read-only storage unit (ROM) 12203 .

Storage unit 1220 may also include programs/utilities 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, Implementations of networked environments may be included in each or some combination of these examples.

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

The electronic device 1200 can also communicate with one or more external devices 1300 (such as keyboards, pointing devices, Bluetooth devices, etc.), and can also communicate with one or more devices that enable the user to interact with the electronic device 1200, and/or communicate with Any device (eg, router, modem, etc.) that enables the electronic device 1200 to communicate with one or more other computing devices. Such communication may occur through input/output (I/O) interface 1250 . Moreover, the electronic device 1200 can also 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 through the bus 1230 . It should be appreciated that although not shown, other hardware and/or software modules may be used in conjunction with electronic device 1200, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives And data backup storage system, etc.

Through the description of the above implementations, those skilled in the art can easily understand that the example implementations described here can be implemented by software, or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of the present disclosure can be embodied in the form of software products, and the software products can be stored in a non-volatile storage medium (which can be CD-ROM, U disk, mobile hard disk, etc.) or on the network , including several instructions to make a computing device (which may be a personal computer, a server, a terminal device, or a network device, etc.) execute the method according to the embodiments of the present disclosure.

In an exemplary embodiment of the present disclosure, there is also provided a computer-readable storage medium on which a program product capable of implementing the above-mentioned method in this specification is stored. In some possible implementation manners, various aspects of the present disclosure may also be implemented in the form of a program product, which includes program code, and when the program product is run on a terminal device, the program code is used to make the The terminal device executes the steps according to various exemplary embodiments of the present disclosure described in the "Exemplary Method" section above in this specification.

According to the program product for implementing the above method according to the embodiment of the present disclosure, it may adopt a portable compact disk read only memory (CD-ROM) and include program codes, and may run on a terminal device such as a personal computer. However, the program product of the present disclosure is not limited thereto. In this document, a readable storage medium may be any tangible medium containing or storing a program, and the program may be used by or in combination with an instruction execution system, apparatus or device.

The program product may reside on 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 may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or device, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: electrical connection with one or more conductors, portable disk, 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), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

A computer readable signal medium may include a data signal carrying readable program code in baseband or as part of a carrier wave. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing. A readable signal medium may also be any readable medium other than a readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction 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 performing the operations of the present disclosure may be written in any combination of one or more programming languages, including object-oriented programming languages—such as Java, C++, etc., as well as conventional procedural Programming language - such as "C" or a similar programming language. 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 and partly on a remote computing device, or entirely on the remote computing device or server to execute. In cases involving a remote computing device, 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 (for example, using an Internet service provider). business to connect via the Internet).

In addition, the above-mentioned drawings 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 is easy to understand that the processes shown in the above figures do not imply or limit the chronological order of these processes. In addition, it is also easy to understand that these processes may be executed synchronously or asynchronously in multiple modules, for example.

Other embodiments of the disclosure will be readily apparent to those skilled in the art from consideration of the specification and practice of the invention invented herein. This application is intended to cover any modification, use or adaptation of the present disclosure, which follow the general principles of the present disclosure and include common knowledge or conventional technical means in the technical field not invented by the present disclosure . The specification and examples are to be considered exemplary only, with the true scope and spirit of the disclosure indicated by the appended claims.

Claims (14)

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

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.

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:

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.

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.