Rendering method, device, equipment and storage medium

Abstract

The present invention discloses a rendering method, apparatus, device, and storage medium, which are applied to the field of computer technology. The method comprises the following steps: sending a webpage access request to obtain webpage resources; the webpage resources include dynamic resources and static resources; the static resources include a route image composed of pages normally displayed under multiple routes and relationship files of the multiple routes in the route image; determining a comparison page rendered by a browser based on the dynamic resources, determining a display page of a corresponding area in the route image for the route corresponding to the comparison page according to the comparison page, the route image, and the relationship file; determining whether the comparison page differs from the display page and obtaining a determination result; and displaying the comparison page if the determination result indicates that there is no difference between the comparison page and the display page. The present invention accesses static resources including the route image and the relationship file through a webpage request, greatly shortening the front-end development cycle and avoiding the risk of page display failure caused by browser incompatibility.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a rendering method, apparatus, device and storage medium. Background Art

[0002] The browser rendering kernel determines how the browser displays the content of a web page and the formatting information of the page. Different browsers interpret web page writing syntax differently. Therefore, the same web page with the same front-end code will produce different rendering effects when rendered by different browsers. Even though the existing different browser kernels are the same for most web page writing languages, they still do not cover all situations, resulting in display problems in page rendering, browser event failures, and other situations. The existing technical solution is that after the front-end development staff develops a page based on a browser kernel, they must re-debug it on other mainstream browsers to ensure that the web page runs smoothly on different browsers.

[0003] Existing solutions require additional time to debug front-end code across different browser versions, significantly extending the development timeline. Front-end developers waste time troubleshooting compatibility issues, instead of focusing on more challenging and valuable technical implementations. Furthermore, even with debugging across different browser versions, the following issues remain: First, there's no guarantee of full browser coverage. Second, there's the risk of hidden issues going undetected. Currently, there's no effective solution to this problem. Summary of the Invention

[0004] In view of this, the present invention is intended to provide a rendering method, apparatus, device, and storage medium.

[0005] The technical embodiment of the embodiment of the present invention is implemented as follows:

[0006] An embodiment of the present invention provides a rendering method, applied to a browser, comprising:

[0007] Send a web page access request to obtain web page resources; the web page resources include dynamic resources and static resources; the static resources include a route map composed of pages normally displayed under multiple routes and relationship files of the multiple routes in the route map;

[0008] Determine a comparison page rendered by the browser based on the dynamic resource, and determine a display page for an area in the routing image corresponding to the route corresponding to the comparison page according to the comparison page, the routing image, and the relationship file;

[0009] Determine whether the comparison page is different from the display page, and obtain a determination result;

[0010] If the judgment result indicates that there is no difference between the comparison page and the display page, the comparison page is displayed.

[0011] In the above solution, the method further includes:

[0012] If the judgment result indicates that the compared page is different from the displayed page, obtaining difference information between the compared page and the displayed page;

[0013] Replacing the browser process based on the difference information and re-rendering a new comparison page;

[0014] Determine, according to the new comparison page and the static resource, a display page of the area corresponding to the route corresponding to the new comparison page in the routing image;

[0015] Determine whether the new comparison page is different from the display page, and obtain a determination result;

[0016] If the judgment result indicates that there is no difference between the compared page and the displayed page, the new compared page is displayed.

[0017] In the above solution, replacing the browser process based on the difference information and re-rendering a new comparison page includes:

[0018] determining a rendering position of the difference information in the browser based on the difference information;

[0019] A new comparison page is re-rendered according to the rendering position.

[0020] In the above solution, re-rendering a new comparison page according to the rendering position includes:

[0021] Obtaining an initial cascading style sheet in the dynamic resource;

[0022] Determining a new cascading style sheet according to the rendering position;

[0023] The new cascading style sheet replaces the initial cascading style sheet, and a new comparison page is rendered again.

[0024] In the above solution, the dynamic resources include descriptive text and an initial cascading style sheet of a web page; and determining the comparison page rendered by the browser based on the dynamic resources includes:

[0025] Parsing the descriptive text and the initial cascading style sheet to determine a rendering tree generated by the browser process;

[0026] The comparison page is rendered based on the render tree.

[0027] In the above solution, determining, based on the comparison page and the static resource, a display page of a corresponding area in the routing image of the route corresponding to the comparison page includes:

[0028] Obtaining a current route corresponding to the comparison page based on the comparison page;

[0029] Determine a positional relationship of the current route in the route graph according to the current route and the relationship file;

[0030] The display page is determined according to the position relationship and the routing picture.

[0031] In the above solution, displaying the comparison page includes:

[0032] Obtaining a display position of the comparison page;

[0033] The comparison page is displayed based on the display position.

[0034] An embodiment of the present invention provides a rendering device, which is applied to a browser. The device includes: an obtaining unit, a determining unit, a judging unit, and a display unit, wherein:

[0035] The obtaining unit is configured to send a web page access request to obtain web page resources; the web page resources include dynamic resources and static resources; the static resources include a route map consisting of pages normally displayed under multiple routes and relationship files of the multiple routes in the route map;

[0036] The determining unit is configured to determine a comparison page rendered by the browser based on the dynamic resource, and determine a display page for an area in the routing image corresponding to the route corresponding to the comparison page according to the comparison page, the routing image, and the relationship file;

[0037] The judging unit is configured to judge whether there is a difference between the comparison page and the display page, and obtain a judgment result;

[0038] The display unit is configured to display the comparison page if the judgment result indicates that there is no difference between the comparison page and the display page.

[0039] In the above solution, the obtaining unit is further configured to obtain difference information between the comparison page and the display page if the judgment result indicates that the comparison page and the display page are different; replace the browser process based on the difference information, and re-render a new comparison page;

[0040] The determining unit is further configured to determine, based on the new comparison page and the static resource, a display page for the route corresponding to the new comparison page and corresponding to the area in the routing image;

[0041] The judging unit is further configured to judge whether the new comparison page is different from the display page, and obtain a judgment result;

[0042] The display unit is further configured to display the new comparison page if the judgment result indicates that there is no difference between the comparison page and the display page.

[0043] In the above solution, the obtaining unit is further configured to determine a rendering position of the difference information in the browser based on the difference information; and re-render a new comparison page according to the rendering position.

[0044] In the above solution, the obtaining unit is further configured to obtain an initial cascading style sheet in the dynamic resource; determine a new cascading style sheet according to the rendering position; replace the initial cascading style sheet with the new cascading style sheet, and re-render a new comparison page.

[0045] In the above solution, the dynamic resources include descriptive text and an initial cascading style sheet of the web page; the determination unit is further configured to parse the descriptive text and the initial cascading style sheet to determine a rendering tree generated by the browser process; and render the comparison page based on the rendering tree.

[0046] In the above scheme, the determination unit is further used to obtain the current route corresponding to the comparison page based on the comparison page; determine the position relationship of the current route in the routing picture according to the current route and the relationship file; and determine the display page according to the position relationship and the routing picture.

[0047] In the above solution, the display unit is further configured to obtain a display position of the comparison page; and display the comparison page based on the display position.

[0048] An embodiment of the present invention provides a rendering device, including a memory and a processor, wherein the memory stores a program that can be run on the processor, and the processor implements any step of the above-mentioned method when executing the program.

[0049] An embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, any step of the above-described method is implemented.

[0050] The present invention provides a rendering method, apparatus, device and storage medium, wherein the method includes sending a web page access request to obtain web page resources; the web page resources include dynamic resources and static resources; the static resources include a routing picture composed of pages normally displayed under multiple routes and relationship files of the multiple routes in the routing picture; based on the dynamic resources, the comparison page rendered by the browser is determined, and according to the comparison page, the routing picture and the relationship file, the display page of the route corresponding to the comparison page in the corresponding area of ​​the routing picture is determined; whether the comparison page is different from the display page is determined to obtain a judgment result; if the judgment result shows that the comparison page is not different from the display page, the comparison page is displayed. The technical solution of the embodiment of the present invention is adopted to access static resources including routing pictures and relationship files through web page requests, which greatly shortens the front-end development cycle and avoids the risk of page display failure caused by browser incompatibility. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] Figure 1 This is a schematic diagram of a flow chart for implementing a rendering method according to an embodiment of the present invention;

[0052] Figure 2 This is a schematic diagram of a routing image in a rendering method according to an embodiment of the present invention;

[0053] Figure 3 This is a schematic diagram of replacing the original CSS with the new CSS in the rendering method according to an embodiment of the present invention;

[0054] Figure 4 A schematic diagram of the execution order and relationship of threads in a browser kernel in a rendering method according to an embodiment of the present invention;

[0055] Figure 5 Schematic diagram of the execution order and relationship of threads in another browser kernel in the rendering method according to an embodiment of the present invention;

[0056] Figure 6 This is a schematic diagram of the display effect of the engineering code in the rendering method according to an embodiment of the present invention in Chrome;

[0057] Figure 7 This is a schematic diagram of the display effect of the engineering code in the rendering method according to an embodiment of the present invention in IE8;

[0058] Figure 8 This is a schematic diagram of the display effect in IE8 after replacing the CSS style code and re-rendering in the rendering method according to an embodiment of the present invention;

[0059] Figure 9 This is a schematic diagram of the structure of a rendering device according to an embodiment of the present invention;

[0060] Figure 10 Schematic diagram of a hardware entity structure of a rendering device in an embodiment of the present invention. DETAILED DESCRIPTION

[0061] To make the purpose, technical solutions and advantages of the embodiments of the present invention more clear, the specific technical solutions of the invention will be described in further detail below in conjunction with the accompanying drawings in the embodiments of the present invention. The following embodiments are used to illustrate the present invention, but are not intended to limit the scope of the present invention.

[0062] This embodiment proposes a rendering method. Figure 1 FIG. 1 is a flow chart showing a rendering method according to an embodiment of the present invention. Figure 1 As shown, the method is applied to the browser and includes:

[0063] Step S101: Send a web page access request to obtain web page resources; the web page resources include dynamic resources and static resources; the static resources include a route image composed of pages normally displayed under multiple routes and relationship files of the multiple routes in the route image.

[0064] It should be noted that the rendering method may be a browser rendering method. As an example, the browser rendering method may be a browser rendering method for resolving compatibility.

[0065] The browser may be a compatible browser that includes a kernel for resolving compatibility issues. The kernel includes at least the following threads: a JS execution thread, a parsing thread, a comparison thread, a replacement thread, and a display thread. All threads are mutually exclusive.

[0066] Sending a webpage access request and obtaining a webpage resource may involve the client sending a webpage access request to the server and obtaining a webpage resource returned by the server based on the webpage access request.

[0067] The web page resources include dynamic resources and static resources; the dynamic resources can be determined according to actual conditions and are not limited here. As an example, the dynamic resources can at least include descriptive text html, cascading style sheets css, script text js, etc.; the static resources include a routing picture composed of pages that are normally displayed under multiple routes and relationship files of the multiple routes in the routing picture; wherein, the routing picture composed of pages that are normally displayed under multiple routes can be understood as a routing picture that is a picture that corresponds one-to-one with the front-end routes in different regions, and it displays the effect of the normal display of the page under a certain route in the front-end project in different regions. As an example, the routing picture can be divided into four regions, each region is a page that is normally displayed under a certain route, for example, the four regions can be a page that is normally displayed under the overview route, a page that is normally displayed under the guide route, a page that is normally displayed under the order route, and a page that is normally displayed under the confirm route; the relationship file can be a corresponding relationship json file, and the corresponding relationship json file can record the relationship between the route and the image area position.

[0068] In actual applications, static resources can be deployed on the server side, and these resources can be accessed when requested by the client. Specifically, a set of front-end project code with a route image and a corresponding JSON file as static resources is deployed on the server side. Simultaneously, a browser that can resolve compatibility issues is enabled on the client side to properly render the front-end project pages. As an example, during the development process, front-end developers need to include a route image and a corresponding JSON file in the front-end project. These can be accessed as static resources when requested by the client. The route image is an image with a one-to-one correspondence between regions and front-end routes. It displays the normal display effect of a page under a specific route in the front-end project. The route image reflects the normal display effect of all pages in the project, so when a client requests the route image resource, only one request is required. The corresponding JSON file can record the relationship between each route and the image area location. As an example, to further reduce the size of the route image resource and shorten the request time, the image can be scaled down proportionally. For example, a page with a normal display width and height of 1024*768 can be scaled down to 256*192. The corresponding JSON file stores the relationship between each route and the image area location, for example, the path of each route and the location of each route in the image area. This location can be the top distance, left and right distances, height, width, etc. of the route image. For example, the path can be recorded as path; the top distance can be recorded as top; the left distance can be recorded as left; the right distance can be recorded as right; the height can be recorded as height; and the width can be recorded as width. For example, path: ' / overview'; top: 0; left: 0; height: 192; width: 256.

[0069] In actual applications, you can introduce a routing image into the entry index.html file of the front-end project, and use position positioning to position it outside the display screen, so that users cannot see it when the page is rendered. The client has enabled a browser that can solve browser compatibility issues. It has a kernel that can cooperate with the routing image and the corresponding relationship json file in the static resources of the page to solve compatibility issues. The kernel contains the following threads: JS execution thread, parsing thread, comparison thread, replacement thread, and display thread. All threads are mutually exclusive. Among them, the JS execution thread can be implemented using any conventional implementation method of the existing mainstream browser kernel. The client accesses the web page path and obtains web page resources, including html, css, js, and static resources (including routing images and comparison relationship json files). First, the browser kernel starts the parsing thread.

[0070] Step S102: determining a comparison page rendered by the browser based on the dynamic resource, and determining a display page of a corresponding area in the routing image of the route corresponding to the comparison page according to the comparison page, the routing image, and the relationship file.

[0071] It should be noted that determining the comparison page rendered by the browser based on the dynamic resource may include determining rendering parameters based on the dynamic resource, and determining the comparison page rendered by the browser according to the rendering parameters. As an example, the dynamic resource may include HTML, CSS, JS, etc.; and the rendering parameters may include a DOM tree, a CSSDOM tree, a Render tree, etc.

[0072] The route corresponding to the comparison page is determined based on the comparison page, the routing image, and the relationship file. The page displaying the area in the routing image corresponding to the route corresponding to the comparison page can obtain the route corresponding to the comparison page based on the comparison page, determine the positional relationship of the route in the routing image based on the route and the relationship file, and determine the page displaying the area corresponding to the route in the routing image based on the positional relationship and the routing image. For ease of understanding, an example is provided herein: the browser's parsing thread, which has a basic understanding of web page syntax, parses the HTML and CSS resources obtained from the page to create a DOM tree and a CSSDOM tree. These trees are then assembled into a render tree. The rendered page is then positioned outside the display screen, not overlapping with the obtained routing image and invisible to the user. This page can be referred to as the comparison page. As a simple example of how to achieve this non-overlapping with the obtained routing image, the routing image is placed on the left side of the display screen, and the page rendered by the parsing process is placed on the right side. After obtaining the comparison page, the comparison thread is started. The comparison thread obtains the current route, compares it with the value in the comparison relationship json file, and obtains the area in the route image that corresponds to the current route page, that is, determines the display page of the corresponding area of ​​the current route in the image route.

[0073] Step S103: determining whether there is any difference between the comparison page and the display page, and obtaining a determination result.

[0074] It should be noted that, determining whether there are differences between the comparison page and the display page, and obtaining a determination result can be determining whether there are differences between the comparison page and the display page, and obtaining a determination result that there are differences between the comparison page and the display page or that there are no differences between the comparison page and the display page.

[0075] In actual applications, determining whether there are differences between the comparison page and the display page, and obtaining a judgment result that the comparison page and the display page are different or the comparison page and the display page are not different can be performed by comparing the comparison page with the display page to determine whether there are differences between the comparison page and the display page, and obtaining a judgment result that the comparison page and the display page are different or the comparison page and the display page are not different. As an example, the difference can also be referred to as a difference point. Determining whether there are differences between the comparison page and the display page by comparing the display page in the corresponding area of ​​the routing image and the comparison page can obtain a judgment result that there are differences between the comparison page and the display page or the comparison page and the display page are not different.

[0076] Step S104: if the judgment result indicates that there is no difference between the comparison page and the display page, display the comparison page.

[0077] Here, when the judgment result shows that there is no difference between the comparison page and the display page, displaying the comparison page may include obtaining a display position of the comparison page when the judgment result shows that there is no difference between the comparison page and the display page; and displaying the comparison page based on the display position.

[0078] The embodiment of the present invention deploys a set of front-end engineering codes with routing images and corresponding relationship JSON files as static resources on the server side. At the same time, a browser that can solve compatibility problems is enabled on the client side, so that the front-end engineering page can be rendered normally.

[0079] The rendering method provided by the embodiment of the present invention accesses static resources including routing images and related files through web page requests, greatly shortens the front-end development cycle, and avoids the risk of page display failure caused by browser incompatibility.

[0080] In an optional embodiment of the present invention, the method further includes: when the judgment result indicates that there is a difference between the comparison page and the display page, obtaining difference information between the comparison page and the display page; replacing the browser process based on the difference information, and re-rendering a new comparison page; determining the display page of the corresponding area in the routing image of the route corresponding to the new comparison page based on the new comparison page and the static resource; judging whether there is a difference between the new comparison page and the display page, and obtaining a judgment result; when the judgment result indicates that there is no difference between the comparison page and the display page, displaying the new comparison page.

[0081] It should be noted that when the judgment result indicates that there is a difference between the comparison page and the display page, the difference information between the comparison page and the display page is obtained; wherein, the difference information can be determined according to actual conditions and is not limited here. As an example, the difference information may include the size of the difference area, the location of the difference, the content of the difference, etc.

[0082] Replacing the browser process based on the difference information and re-rendering a new comparison page may include obtaining a position of the difference information in a render tree in the browser based on the difference information, passing the position to the replacement process in the browser, generating a new render tree based on the replacement process, and re-rendering a new comparison page according to the new render tree.

[0083] Determining the display page of the area corresponding to the route of the new comparison page in the routing picture according to the new comparison page and the static resource may be determining the display page of the area corresponding to the route of the new comparison page in the routing picture according to the new comparison page, the routing picture, and the relationship file. Determining the display page of the area corresponding to the route of the new comparison page in the routing picture according to the new comparison page, the routing picture, and the relationship file may be obtaining the route corresponding to the new comparison page according to the new comparison page, determining the positional relationship of the route in the routing picture according to the route and the relationship file, and determining the display page of the area corresponding to the route in the routing picture based on the positional relationship and the routing picture.

[0084] Determining whether the new comparison page is different from the displayed page, and obtaining a determination result may be determining whether the new comparison page is different from the displayed page, and obtaining a determination result that the new comparison page is different from the displayed page or that the new comparison page is not different from the displayed page.

[0085] When the judgment result shows that there is no difference between the comparison page and the display page, displaying the new comparison page can be: obtaining a display position of the new comparison page when the judgment result shows that there is no difference between the new comparison page and the display page; and displaying the new comparison page based on the display position.

[0086] To facilitate understanding, here's an example of a practical application scenario. This compares the display page for the corresponding area in the routing diagram with the comparison page to identify differences. By comparing the pages, the corresponding difference point is located in the render tree and passed to the replacement process. The replacement process then locates the CSSdom at that location based on the render location, retrieves the differences in CSS interpretation between major browsers, and then modifies the CSSdom tree at that location from the repository. The parsing process then restarts, regenerating a new render tree and creating a new page. This cycle repeats until no differences remain. For example, if opcaity is incompatible with browsers below IE9, the comparison process identifies the differences. The parsing process then retrieves the new CSS from the repository and replaces the original CSS.

[0087] In an embodiment of the present invention, a browser kernel having a JS execution thread, a parsing thread, a comparison thread, a replacement thread, and a display thread marks a front-end project by routing images and comparing json files.

[0088] In an optional embodiment of the present invention, replacing the browser process based on the difference information and re-rendering a new comparison page includes: determining a rendering position of the difference information in the browser based on the difference information; and re-rendering a new comparison page according to the rendering position.

[0089] It should be noted that determining the rendering position of the difference information in the browser based on the difference information may be locking the position of the difference information in a rendering tree through the comparison page; the rendering tree may be recorded as a render tree.

[0090] Re-rendering a new comparison page according to the rendering position may include transferring the rendering position to a replacement process, regenerating a new render number based on the replacement process and the rendering position, and generating a new comparison page.

[0091] In an optional embodiment of the present invention, re-rendering a new comparison page according to the rendering position includes: obtaining an initial cascading style sheet in the dynamic resource; determining a new cascading style sheet according to the rendering position; replacing the initial cascading style sheet with the new cascading style sheet, and re-rendering a new comparison page.

[0092] In the embodiment of the present invention, obtaining the initial cascading style sheet in the dynamic resource may be obtaining the initial css in the dynamic resource.

[0093] Determining a new cascading style sheet according to the rendering position may include locating the cssdom of the rendering position according to the rendering position, pulling the differences in CSS interpretations at the rendering position between existing mainstream browsers from a warehouse, and determining a new cascading style sheet CSS.

[0094] Replacing the initial cascading style sheet with the new cascading style sheet and re-rendering a new comparison page may include replacing the initial cascading style sheet CSS with the new cascading style sheet CSS, restarting the parsing process, regenerating a new render tree, and generating a new comparison page according to the new render tree.

[0095] In an optional embodiment of the present invention, the dynamic resource includes descriptive text and an initial cascading style sheet of a web page; and determining the comparison page rendered by the browser based on the dynamic resource includes: parsing the descriptive text and the initial cascading style sheet to determine a render tree generated by the browser process; and rendering the comparison page based on the render tree.

[0096] It should be noted that the descriptive text can be recorded as html, and the initial cascading style sheet can be recorded as initial css.

[0097] The descriptive text and the initial cascading style sheet are parsed to determine that the render tree generated by the browser process can be a DOM tree and a CSSDOM tree, obtained by parsing the HTML and initial CSS. A render tree is formed based on the DOM tree and the CSSDOM tree. The comparison page is rendered based on the render tree. In practical applications, the comparison page can also be positioned outside the display screen, not overlapping with the obtained route image, and not visible to the user. This page can be referred to as a comparison page.

[0098] In an optional embodiment of the present invention, determining the display page of the corresponding area of ​​the route corresponding to the comparison page in the routing picture based on the comparison page and the static resource includes: obtaining the current route corresponding to the comparison page based on the comparison page; determining the positional relationship of the current route in the routing picture based on the current route and the relationship file; and determining the display page based on the positional relationship and the routing picture.

[0099] In the embodiment of the present invention, obtaining the current route corresponding to the comparison page based on the comparison page may include starting a comparison thread based on the comparison page to obtain the current route corresponding to the comparison page.

[0100] Determining the positional relationship of the current route in the route graph based on the current route and the relationship file may be performed by comparing parameters of the current route with parameters in the relationship file to determine the positional relationship of the current route in the route graph. The parameters of the current route may be a path, height, width, etc. of the current route, and the parameters in the relationship file may be paths, heights, widths, etc. of routes in different areas of the route graph.

[0101] In an optional embodiment of the present invention, displaying the comparison page includes: obtaining a display position of the comparison page; and displaying the comparison page based on the display position.

[0102] In the embodiment of the present invention, obtaining the display position of the comparison page may be understood as obtaining the final display position of the comparison page.

[0103] Displaying the comparison page based on the display position may include displaying a process based on the display position and displaying a page.

[0104] This embodiment of the present invention differs from existing front-end development processes in that it implements functionality using only the original front-end code, eliminating the need to consider browser compatibility. This significantly shortens the front-end development cycle and avoids the risk of page display failures caused by browser incompatibility.

[0105] For ease of understanding, the present invention illustrates a rendering method that solves browser compatibility. A set of front-end engineering code with routing images and corresponding JSON files is deployed on the server as static resources. At the same time, a browser that can solve compatibility is enabled on the client to render the front-end engineering page normally. Specifically, the following steps are included:

[0106] Step 1: During the development process, front-end developers need to put a routing image and a corresponding JSON file in the front-end project, which can be accessed as static resources when the client requests it.

[0107] Step 2: Regarding the routing picture in the first step, this picture is a picture with one-to-one correspondence between the regions and the front-end routes. It shows the normal display effect of the page under a certain route in the front-end project in different regions.

[0108] For ease of understanding, here is an example: Figure 2 This is a schematic diagram of a routing image in a rendering method according to an embodiment of the present invention. Figure 2 As shown in the routing picture, four pages that are normally displayed under the routing are shown, namely the page that is normally displayed under the overview routing, the page that is normally displayed under the guide routing, the page that is normally displayed under the order routing, and the page that is normally displayed under the confirm routing.

[0109] Step 3: Regarding the route image in Step 1, since only one image is needed to display the normal display of all pages in the project, the client only needs to make a single request when requesting the route image resource. To further reduce the size of the route image resource and shorten the request time, the image can be scaled down proportionally. For example, if the normal display width and height of a page is 1024*768, it can be scaled down to 256*192. This way, the original 1024*768 area can display the normal display effect of the page under four routes.

[0110] Step 4: Regarding the corresponding relationship json file in the first step, the relationship between the routing and the image area position is recorded. Assuming that the pixel of the routing image is 1024*768, the content of the json file is as follows:

[0111]

[0112]

[0113] Step 5: Introduce the routing image into the index.html file of the front-end project, and position it outside the display screen through positioning, so that users cannot see it when the page is rendered.

[0114] Step 6: The client enables a browser that can solve browser compatibility issues. It has a core that can cooperate with the routing images and corresponding relationship json files in the static resources of the page to solve compatibility issues.

[0115] Step 7: The kernel that failed in step 6 includes the following threads: JS execution thread, parsing thread, comparison thread, replacement thread, and display thread. All threads are mutually exclusive.

[0116] Step 8: Regarding the JS execution thread in step 7, it can be implemented using any conventional implementation method of the existing mainstream browser kernel.

[0117] Step 9: The client accesses the web page path and obtains web page resources, including HTML, CSS, JS, and static resources (including routing images and comparison relationship JSON files). First, the browser kernel starts the parsing thread.

[0118] Step 10: The parsing thread in Step 9, which has its own basic understanding of web page syntax, parses the HTML and CSS resources obtained from the page to create a DOM tree and a CSSDOM tree. After assembling the render tree, the rendered page is positioned off-screen and does not overlap with the obtained routing image. This page is invisible to the user and can be called a comparison page. The simplest way to achieve this is to place the routing image on the left side of the screen and the parsing-rendered page on the right.

[0119] Step 11: After obtaining the comparison page, start the comparison thread. This thread obtains the current route and compares it with the value in the comparison relation JSON file. It then retrieves the area in the route image that corresponds to the current route page. By comparing the corresponding area in the route image with the comparison page, it identifies the differences. Using the comparison page, it locates the corresponding difference in the render tree and passes this location to the replacement process.

[0120] Step 12: Replace the process, locate the CSSDOM here according to the render position, go to the warehouse to pull the differences in the CSS interpretation here between existing mainstream browsers, pull it locally, modify the CSSDOM tree at this location, and then start the parsing process, regenerate a new render number, generate a new page, and repeat the cycle until there is no difference.

[0121] Step 13: Differences in CSS interpretation between major browsers from Step 12.

[0122] For ease of understanding, here is an example to illustrate that opcaity is not compatible with browsers below IE9. The comparison process will compare the differences, and the parsing process will pull the new CSS from the warehouse and replace the original CSS. The replacement content can be referred to Figure 3 As shown, Figure 3 This is a schematic diagram of replacing the original CSS with the new CSS in the rendering method according to an embodiment of the present invention.

[0123] Step 14: When the comparison process is completed, the display process is started, and the display position of the final comparison page is changed and displayed at the screen display position. At this point, the entire process is completed.

[0124] For ease of understanding, here is an example to illustrate that the entire process can be combined Figure 4 To understand, Figure 4 Schematic diagram of the execution order and relationship of each thread in the browser kernel in the rendering method according to an embodiment of the present invention.

[0125] Step 15: After the page rendering is completed, if the JS execution thread is triggered to change the page render tree, it is nothing more than repeating the process of page parsing, comparison, replacement, and display.

[0126] For ease of understanding, here is an example to illustrate that the process of repeated page parsing, comparison, replacement, and display can be combined Figure 5 To understand, Figure 5 This is a schematic diagram of the execution order and relationship of threads in another browser kernel in the rendering method according to an embodiment of the present invention.

[0127] The embodiments of the present invention have the following beneficial technical effects:

[0128] First: A browser kernel with JS execution thread, parsing thread, comparison thread, replacement thread, and display thread, which marks the front-end project by routing pictures and comparing json files.

[0129] Second, unlike existing front-end development processes, this proposal uses the original front-end code to implement functionality, without having to consider browser compatibility. This significantly shortens the front-end development cycle and avoids the risk of page display failures caused by browser incompatibility.

[0130] To better understand the present invention, this embodiment provides a specific application scenario of the rendering method. Taking opacity as an example, it is incompatible with browsers below IE9. Based on this compatibility issue, we explore solutions by using the opacity of a div to display differently in different browsers. Assume that the browser used during development is Chrome, while the user opens the page using IE8.

[0131] The code is as follows:

[0132]

[0133]

[0134] This code will display in Chrome like this: Figure 6 As shown, Figure 6 This is a schematic diagram of the display effect of the engineering code in the rendering method according to an embodiment of the present invention in Chrome.

[0135] This code will be displayed in IE8 as follows Figure 7 As shown, Figure 7 This is a schematic diagram of the display effect of the engineering code in the rendering method according to an embodiment of the present invention in IE8.

[0136] Obviously, the transparency shown by the two is different.

[0137] The solution at this time is to try to replace the CSS style code when it is determined that the different interpretation of the opacity style causes the page displayed to the user to be different from what we expected.

[0138]

[0139] At this time, after re-rendering, the display effect in IE8 browser is as follows Figure 8 As shown, Figure 8 This is a schematic diagram of the display effect in IE8 after replacing the CSS style code and re-rendering in the rendering method according to an embodiment of the present invention.

[0140] This embodiment provides a rendering device. Figure 9 FIG. 1 is a schematic diagram showing the structure of a rendering device according to an embodiment of the present invention. Figure 9 As shown, the apparatus 200 includes: an obtaining unit 201, a determining unit 202, a judging unit 203, and a display unit 204, wherein:

[0141] The obtaining unit 201 is configured to send a web page access request to obtain web page resources; the web page resources include dynamic resources and static resources; the static resources include a route map consisting of pages normally displayed under multiple routes and relationship files of the multiple routes in the route map;

[0142] The determining unit 202 is configured to determine a comparison page rendered by the browser based on the dynamic resource, and determine a display page for an area in the routing image corresponding to the route corresponding to the comparison page according to the comparison page, the routing image, and the relationship file;

[0143] The judging unit 203 is configured to judge whether there is a difference between the comparison page and the display page, and obtain a judgment result;

[0144] The display unit 204 is configured to display the comparison page if the judgment result indicates that there is no difference between the comparison page and the display page.

[0145] In other embodiments, the obtaining unit 201 is further configured to obtain difference information between the comparison page and the display page if the judgment result indicates that the comparison page and the display page are different; replace the browser process based on the difference information, and re-render a new comparison page;

[0146] The determining unit 202 is further configured to determine, based on the new comparison page and the static resource, a display page for the route corresponding to the new comparison page and corresponding to the region in the routing image;

[0147] The judging unit 203 is further configured to judge whether the new comparison page is different from the display page, and obtain a judgment result;

[0148] The display unit 204 is further configured to display the new comparison page if the judgment result indicates that there is no difference between the comparison page and the display page.

[0149] In other embodiments, the obtaining unit 201 is further configured to determine a rendering position of the difference information in the browser based on the difference information; and re-render a new comparison page according to the rendering position.

[0150] In other embodiments, the obtaining unit 201 is further configured to obtain an initial cascading style sheet in the dynamic resource; determine a new cascading style sheet according to the rendering position; replace the initial cascading style sheet with the new cascading style sheet, and re-render a new comparison page.

[0151] In other embodiments, the dynamic resource includes descriptive text and an initial cascading style sheet of a web page; the determining unit 202 is further configured to parse the descriptive text and the initial cascading style sheet to determine a rendering tree generated by the browser process; and render the comparison page based on the rendering tree.

[0152] In other embodiments, the determination unit 202 is further used to obtain the current route corresponding to the comparison page based on the comparison page; determine the position relationship of the current route in the routing picture according to the current route and the relationship file; and determine the display page according to the position relationship and the routing picture.

[0153] In other embodiments, the display unit 204 is further configured to obtain a display position of the comparison page; and display the comparison page based on the display position.

[0154] The description of the above device embodiment is similar to the description of the above method embodiment and has similar beneficial effects as the method embodiment. For technical details not disclosed in the device embodiment of the present invention, please refer to the description of the method embodiment of the present invention for understanding.

[0155] It should be noted that, in the embodiment of the present invention, if the above-mentioned rendering method is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical embodiment of the embodiment of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a control server (which can be a personal computer, server, or network server, etc.) to execute all or part of the methods described in each embodiment of the present invention. The aforementioned storage medium includes various media that can store program codes, such as a U disk, a mobile hard disk, a read-only memory (ROM), a magnetic disk or an optical disk. In this way, the embodiment of the present invention is not limited to any specific combination of hardware and software.

[0156] Correspondingly, an embodiment of the present invention provides a rendering device, including a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the processor executes the program, the steps in the control method provided in the above embodiment are implemented.

[0157] Correspondingly, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the steps of the control method provided in the above embodiment are implemented.

[0158] It should be noted that the description of the above storage medium and device embodiments is similar to the description of the above method embodiments and has similar beneficial effects as the method embodiments. For technical details not disclosed in the storage medium and device embodiments of the present invention, please refer to the description of the method embodiments of the present invention for understanding.

[0159] It should be noted that Figure 10 FIG. 1 is a schematic diagram of a hardware entity structure of a rendering device according to an embodiment of the present invention. Figure 10 As shown, the hardware entity of the rendering device 300 includes: a processor 301 and a memory 303 . Optionally, the rendering device 300 may further include a communication interface 302 .

[0160] It is understood that the memory 303 can be a volatile memory or a non-volatile memory, or can include both volatile and non-volatile memories. Among them, the non-volatile memory can be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a magnetic random access memory (FRAM), a flash memory, a magnetic surface memory, an optical disc, or a compact disc read-only memory (CD-ROM); the magnetic surface memory can be a magnetic disk memory or a magnetic tape memory. The volatile memory can be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static random access memory (SRAM), synchronous static random access memory (SSRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct rambus random access memory (DRRAM).The memory 303 described in the embodiments of the present invention is intended to include, but is not limited to, these and any other suitable types of memories.

[0161] The methods disclosed in the above embodiments of the present invention can be applied to or implemented by processor 301. Processor 301 may be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above method can be completed by hardware integrated logic circuits in processor 301 or by software instructions. Processor 301 may be a general-purpose processor, a digital signal processor (DSP), or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, etc. Processor 301 can implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present invention. A general-purpose processor may be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of the present invention can be directly implemented and executed by a hardware decoding processor, or by a combination of hardware and software modules in the decoding processor. The software module may be located in a storage medium located in memory 303. Processor 301 reads information from memory 303 and, in conjunction with its hardware, completes the steps of the above method.

[0162] In an exemplary embodiment, the device may be implemented by one or more application-specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field-programmable gate arrays (FPGAs), general-purpose processors, controllers, microcontrollers (MCUs), microprocessors, or other electronic components to perform the aforementioned method.

[0163] In the several embodiments provided by the present invention, it should be understood that the disclosed methods and devices can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as: multiple units or components can be combined, or can be integrated into another observation quantity, or some features can be ignored or not executed. In addition, the communication connection between the various components shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0164] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of this embodiment.

[0165] Those skilled in the art will understand that all or part of the steps of implementing the above-mentioned method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above-mentioned method embodiment; and the aforementioned storage medium includes: mobile storage devices, read-only memories (ROMs), magnetic disks, optical disks, and other media that can store program codes.

[0166] Alternatively, if the above-mentioned integrated unit of the embodiment of the present invention is implemented in the form of a software functional unit and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical embodiment of the embodiment of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a number of instructions for enabling a device (which can be a personal computer, server, or network device, etc.) to execute all or part of the methods described in various embodiments of the present invention. The aforementioned storage medium includes: various media that can store program code, such as mobile storage devices, ROMs, magnetic disks, or optical disks.

[0167] The rendering method, apparatus, device and storage medium described in the examples of the present invention are only taken as examples of the embodiments of the present invention, but are not limited to this. As long as the rendering method, apparatus, device and storage medium are involved, they are within the protection scope of the present invention.

[0168] It should be understood that "one embodiment" or "an embodiment" mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present invention. Therefore, "in one embodiment" or "in an embodiment" appearing throughout the specification does not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in various embodiments of the present invention, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present invention. The serial numbers of the above-mentioned embodiments of the present invention are for description only and do not represent the advantages and disadvantages of the embodiments.

[0169] It should be noted that, in this document, the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, article, or apparatus comprising a series of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or apparatus comprising the element.

[0170] The methods disclosed in the several method embodiments provided by the present invention can be arbitrarily combined without conflict to obtain new method embodiments.

[0171] The features disclosed in several product embodiments provided by the present invention can be arbitrarily combined without conflict to obtain new product embodiments.

[0172] The features disclosed in several method or device embodiments provided by the present invention can be arbitrarily combined without conflict to obtain new method embodiments or device embodiments.

[0173] The above description is merely an embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any modifications or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in the present invention should be included in the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be based on the scope of protection of the claims.

Claims

1. A rendering method, characterized in that: Applied to a browser, the method includes: Send a web page access request to obtain web page resources; the web page resources include dynamic resources and static resources; the static resources include a route map composed of pages normally displayed under multiple routes and relationship files of the multiple routes in the route map; Determine a comparison page rendered by the browser based on the dynamic resource, and determine a display page for an area in the routing image corresponding to the route corresponding to the comparison page according to the comparison page, the routing image, and the relationship file; Determine whether the comparison page is different from the display page, and obtain a determination result; If the judgment result shows that there is no difference between the comparison page and the display page, displaying the comparison page; The method further comprises: If the judgment result indicates that the compared page is different from the displayed page, obtaining difference information between the compared page and the displayed page; Replacing the browser process based on the difference information and re-rendering a new comparison page; Determine, according to the new comparison page and the static resource, a display page of the area corresponding to the route corresponding to the new comparison page in the routing image; Determine whether the new comparison page is different from the display page, and obtain a determination result; If the judgment result shows that there is no difference between the comparison page and the display page, displaying the new comparison page; The replacing the browser process based on the difference information and re-rendering a new comparison page includes: determining a rendering position of the difference information in the browser based on the difference information; and re-rendering a new comparison page according to the rendering position; Re-rendering a new comparison page according to the rendering position includes: obtaining an initial cascading style sheet in the dynamic resource; determining a new cascading style sheet according to the rendering position; replacing the initial cascading style sheet with the new cascading style sheet, and re-rendering a new comparison page.

2. The method according to claim 1, characterized in that The dynamic resources include descriptive text and an initial cascading style sheet of a web page; and determining the comparison page rendered by the browser based on the dynamic resources includes: Parsing the descriptive text and the initial cascading style sheet to determine a rendering tree generated by the browser process; The comparison page is rendered based on the render tree.

3. The method according to claim 1, characterized in that Determining, based on the comparison page and the static resource, a display page of an area corresponding to the route corresponding to the comparison page in the routing image, includes: Obtaining a current route corresponding to the comparison page based on the comparison page; Determine a positional relationship of the current route in the route graph according to the current route and the relationship file; The display page is determined according to the position relationship and the routing picture.

4. The method according to claim 1, wherein The displaying of the comparison page includes: Obtaining a display position of the comparison page; The comparison page is displayed based on the display position.

5. A rendering device, characterized in that: Applied to a browser, the device includes: an obtaining unit, a determining unit, a judging unit, and a display unit, wherein: The obtaining unit is configured to send a web page access request to obtain web page resources; the web page resources include dynamic resources and static resources; the static resources include a route map consisting of pages normally displayed under multiple routes and relationship files of the multiple routes in the route map; The determining unit is configured to determine a comparison page rendered by the browser based on the dynamic resource, and determine a display page for an area in the routing image corresponding to the route corresponding to the comparison page according to the comparison page, the routing image, and the relationship file; The judging unit is configured to judge whether there is a difference between the comparison page and the display page, and obtain a judgment result; The display unit is configured to display the comparison page if the judgment result indicates that there is no difference between the comparison page and the display page; The obtaining unit is further configured to obtain difference information between the compared page and the displayed page if the judgment result indicates that the compared page and the displayed page are different; replace the browser process based on the difference information, and re-render a new compared page; The determining unit is further configured to determine, based on the new comparison page and the static resource, a display page for the route corresponding to the new comparison page and corresponding to the area in the routing image; The judging unit is further configured to judge whether the new comparison page is different from the display page, and obtain a judgment result; The display unit is further configured to display the new comparison page if the judgment result indicates that there is no difference between the comparison page and the display page; The obtaining unit is further configured to determine a rendering position of the difference information in the browser based on the difference information; and re-render a new comparison page according to the rendering position; The obtaining unit is further configured to obtain an initial cascading style sheet in the dynamic resource; determine a new cascading style sheet according to the rendering position; replace the initial cascading style sheet with the new cascading style sheet, and re-render a new comparison page.

6. A rendering device comprising a memory and a processor, wherein the memory stores a program that can be run on the processor, characterized in that: When the processor executes the program, the steps of the method according to any one of claims 1 to 4 are implemented.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 4 are implemented.

Images