CN117033834A - Page rendering method, device, computer-readable medium and electronic device - Google Patents
Page rendering method, device, computer-readable medium and electronic device Download PDFInfo
- Publication number
- CN117033834A CN117033834A CN202311088583.3A CN202311088583A CN117033834A CN 117033834 A CN117033834 A CN 117033834A CN 202311088583 A CN202311088583 A CN 202311088583A CN 117033834 A CN117033834 A CN 117033834A
- Authority
- CN
- China
- Prior art keywords
- chart
- page
- data
- target
- determining
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
The disclosure relates to a page rendering method, a device, a computer readable medium and an electronic apparatus, wherein the method comprises the following steps: responding to the access operation to the page, and acquiring graph data and typesetting data corresponding to the page in the history access process from a local cache, wherein the typesetting data is at least used for representing the graph display position; determining a target display size of the page in the current access process; determining target typesetting data of the chart in the current access process according to the target display size and the typesetting data; and rendering a chart in the page according to the chart data and the target typesetting data. Through the technical scheme, the chart data and the typesetting data can be obtained from the local cache, and the chart rendering speed is improved. On the other hand, when the chart is rendered, typesetting data can be adjusted according to the display size of the current page, so that all charts can be displayed in the current page, and the completeness of the charts is ensured.
Description
Technical Field
The disclosure relates to the technical field of computers, and in particular relates to a page rendering method, a page rendering device, a computer readable medium and electronic equipment.
Background
The page rendering is a process of displaying data in a page in a visual form, and abstract data can be converted into a visual and easy-to-understand form through the page rendering, so that a user is helped to better understand data distribution, data change and data correlation, and further data analysis and decision making are performed.
Disclosure of Invention
This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detailed description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.
In a first aspect, the present disclosure provides a page rendering method, the method including:
responding to the access operation to the page, and acquiring graph data and typesetting data corresponding to the page in the history access process from a local cache, wherein the typesetting data is at least used for representing the graph display position;
determining a target display size of the page in the current access process;
Determining target typesetting data of the chart in the current access process according to the target display size and the typesetting data;
and rendering a chart in the page according to the chart data and the target typesetting data.
In a second aspect, the present disclosure provides a page rendering apparatus, the apparatus comprising:
the first acquisition module is used for responding to the access operation of the page, acquiring chart data and typesetting data corresponding to the page in the history access process from the local cache, wherein the typesetting data is at least used for representing the chart display position;
the first determining module is used for determining the target display size of the page in the current access process;
the second determining module is used for determining target typesetting data of the chart in the current access process according to the target display size and the typesetting data;
and the first rendering module is used for rendering the chart in the page according to the chart data and the target typesetting data.
In a third aspect, the present disclosure provides a computer readable medium having stored thereon a computer program which, when executed by a processing device, implements the steps of the method of any of the first aspects.
In a fourth aspect, the present disclosure provides an electronic device comprising:
a storage device having a computer program stored thereon;
processing means for executing said computer program in said storage means to carry out the steps of the method according to any one of the first aspects.
Through the technical scheme, the chart rendering data of the page in the history access process, namely the chart data and the typesetting data, can be obtained from the local cache, so that a corresponding chart is rendered in the page according to the chart rendering data. Compared with the prior art that the chart rendering data are obtained from the server, the method and the device can effectively reduce the transmission time of the chart rendering data and improve the chart rendering speed. On the other hand, when the chart rendering is carried out according to the chart data and the typesetting data in the history access process, the typesetting data is adjusted according to the target display size of the page under the current access operation, so that all charts can be displayed on the current page, and the completeness of the charts in the page is ensured.
Additional features and advantages of the present disclosure will be set forth in the detailed description which follows.
Drawings
The above and other features, advantages, and aspects of embodiments of the present disclosure will become more apparent by reference to the following detailed description when taken in conjunction with the accompanying drawings. The same or similar reference numbers will be used throughout the drawings to refer to the same or like elements. It should be understood that the figures are schematic and that elements and components are not necessarily drawn to scale. In the drawings:
FIG. 1 is a flow chart of a method of page rendering provided in accordance with an exemplary embodiment of the present disclosure;
FIG. 2 is a diagram of a page from a server after obtaining chart configuration items and chart data items and performing chart rendering, in accordance with an exemplary embodiment of the present disclosure;
FIG. 3 is a diagram of a page from a local cache after obtaining diagram data and composition data and rendering the diagram, in accordance with an exemplary embodiment of the present disclosure;
FIG. 4 is a block diagram of a page rendering device provided in accordance with an exemplary embodiment of the present disclosure;
fig. 5 is a schematic structural view of an electronic device according to an exemplary embodiment of the present disclosure.
Detailed Description
Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure have been shown in the accompanying drawings, it is to be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are for illustration purposes only and are not intended to limit the scope of the present disclosure.
It should be understood that the various steps recited in the method embodiments of the present disclosure may be performed in a different order and/or performed in parallel. Furthermore, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present disclosure is not limited in this respect.
The term "including" and variations thereof as used herein are intended to be open-ended, i.e., including, but not limited to. The term "based on" is based at least in part on. The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments. Related definitions of other terms will be given in the description below.
It should be noted that the terms "first," "second," and the like in this disclosure are merely used to distinguish between different devices, modules, or units and are not used to define an order or interdependence of functions performed by the devices, modules, or units.
It should be noted that references to "one", "a plurality" and "a plurality" in this disclosure are intended to be illustrative rather than limiting, and those of ordinary skill in the art will appreciate that "one or more" is intended to be understood as "one or more" unless the context clearly indicates otherwise.
The names of messages or information interacted between the various devices in the embodiments of the present disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.
It will be appreciated that prior to using the technical solutions disclosed in the embodiments of the present disclosure, the user should be informed and authorized of the type, usage range, usage scenario, etc. of the personal information related to the present disclosure in an appropriate manner according to the relevant legal regulations.
For example, in response to receiving an active request from a user, a prompt is sent to the user to explicitly prompt the user that the operation it is requesting to perform will require personal information to be obtained and used with the user. Thus, the user can autonomously select whether to provide personal information to software or hardware such as an electronic device, an application program, a server or a storage medium for executing the operation of the technical scheme of the present disclosure according to the prompt information.
As an alternative but non-limiting implementation, in response to receiving an active request from a user, the manner in which the prompt information is sent to the user may be, for example, a popup, in which the prompt information may be presented in a text manner. In addition, a selection control for the user to select to provide personal information to the electronic device in a 'consent' or 'disagreement' manner can be carried in the popup window.
It will be appreciated that the above-described notification and user authorization process is merely illustrative and not limiting of the implementations of the present disclosure, and that other ways of satisfying relevant legal regulations may be applied to the implementations of the present disclosure.
Meanwhile, it can be understood that the data (including but not limited to the data itself, the acquisition or the use of the data) related to the technical scheme should conform to the requirements of the corresponding laws and regulations and related regulations.
As described in the background art, page rendering is a process of displaying data in a page in a visual form, and abstract data can be converted into an intuitive and easy-to-understand form through page rendering, so that a user is helped to better understand data distribution, data change and data correlation, and further data analysis and decision are performed.
In the related art, when page rendering is performed, chart rendering data needs to be acquired from a server, and since chart rendering data needs to be acquired from the server and is generally transmitted through a network, the existence of network delay causes delay in chart rendering data transmission, so that the rendering speed is reduced. On the other hand, since a certain time is required for the server to process the request and generate the response, especially when the request amount is large or the server load is high, the acquisition time of the chart rendering data can be greatly increased, and the rendering efficiency is reduced.
In view of the above, embodiments of the present disclosure provide a method, an apparatus, a computer-readable medium, and an electronic device for rendering a page, so as to solve the above technical problems.
Embodiments of the present disclosure are further explained below with reference to the drawings.
Fig. 1 is a flowchart illustrating a page rendering method according to an exemplary embodiment of the present disclosure, and referring to fig. 1, the page rendering method may include the steps of:
s101: and responding to the access operation to the page, and acquiring graph data and typesetting data corresponding to the page in the history access process from a local cache, wherein the typesetting data is at least used for representing the graph display position.
In some embodiments, the page accessed may be a page of a browser or a page in a terminal device. The page may be a page of an online form, such as an online spreadsheet or an online database form, or the like. The page may also be a page that is opened via a chart link shared in an online form page.
It should be understood that local caching refers to the storage space in which data is stored in a terminal device, such as a computer or a cell phone. When the terminal equipment accesses the data resources on the Internet, the data resources are stored in the local cache of the terminal equipment, so that the terminal equipment does not need to download from a remote server when accessing the same data resources next time, but can directly acquire the data resources from the local cache, thereby reducing the transmission time of the data resources and accelerating the loading speed of the data resources.
The local cache may be a browser cache, a domain name resolution cache (Domain Name System Cache, DNS), or an operating system cache, which is not limited in any way by the embodiments of the present disclosure. In a possible implementation manner, in order to avoid loss of stored resource data and increase the storage capacity of the data resource, chart data and layout data corresponding to pages in the history access process may be stored in an index Database (index Database). Accordingly, the obtaining, from the local cache, the chart data and the typesetting data corresponding to the page in the history access process may include:
and obtaining the chart data and typesetting data corresponding to the page in the history access process from the local cache through an index database of the browser.
It should be appreciated that index db is a browser-provided client storage technology for maintaining large amounts of structured data in a browser. It provides a database-like interface that can be created and managed in a browser to store and access data in an offline state.
In addition, it should be understood that the index db database is typically stored in a local hard disk space of the browser, so that the history chart data and the history typesetting data can be read through JavaScript codes in the browser without depending on network connection, so that the transmission time of the history chart data and the history typesetting data is reduced, and the chart rendering speed is improved.
S102: and determining the target display size of the page in the current access process.
S103: and determining the target typesetting data of the chart in the current access process according to the target display size and the typesetting data.
S104: and rendering a chart in the page according to the chart data and the target typesetting data.
Through the technical scheme, the chart rendering data of the page in the history access process, namely the chart data and the typesetting data, can be obtained from the local cache, so that a corresponding chart is rendered in the page according to the chart rendering data. Compared with the prior art that the chart rendering data are obtained from the server, the method and the device can effectively reduce the transmission time of the chart rendering data and improve the chart rendering speed. On the other hand, when the chart rendering is carried out according to the chart data and the typesetting data in the history access process, the typesetting data is adjusted according to the target display size of the page under the current access operation, so that all charts can be displayed on the current page, and the completeness of the charts in the page is ensured.
In a possible implementation manner, the typesetting data includes a history display size of the page and a history display position of the chart in a history access process, and the determining, according to the target display size and the typesetting data, the target typesetting data of the chart in the current access process may include:
Determining the size conversion proportion of the page in the historical access process and the current access process according to the target display size and the historical display size, and determining a target display position according to the size conversion proportion and the historical display position; and determining the target display position and the target display size as target typesetting data.
It should be understood that the historical display size may be the display size presented by the page when the page is accessed for the first time, or the display size presented by the page when the page is accessed last time, which is not limited in any way by the embodiments of the present disclosure. In a possible implementation manner, in order to reduce the number of times of saving the display size of the page, the display size presented by the page when the page is accessed for the first time may be taken as the historical display size of the page.
It should be further understood that the display size of the terminal device is different for the same page, and the display size of the page is generally different. To avoid incomplete graphic display in a page after a change in the page display size. According to the method, the device and the system, the size conversion proportion of the target display size and the historical display size is determined, and the historical display position of the chart is adaptively adjusted according to the size conversion proportion, so that all charts can be displayed in a page with the current size.
In a possible implementation manner, the determining the size conversion ratio of the page in the history access process and the current access process according to the target display size and the history display size, and determining the target display position according to the size conversion ratio and the history display position may include:
determining a width ratio of a historical display width of the page to a target display width, determining a product of the width ratio and a historical X-axis position coordinate of the chart as a target X-axis position coordinate of the chart, determining a height ratio of a historical display height of the page to a target display height, and determining a product of the height ratio and a historical Y-axis position coordinate of the chart as a target Y-axis position coordinate of the chart to obtain the target display position, wherein the X-axis position coordinate is a coordinate along the width direction of the page, and the Y-axis position coordinate is a coordinate along the height direction of the page.
It should be appreciated that pages are generally two-dimensional planes, so the display position of a chart in a page can be determined by two-dimensional coordinates. For example, a two-dimensional coordinate system may be constructed with the upper left corner of the page as the origin, the upper left corner to upper right corner direction as the X-axis, and the upper left corner to lower left corner direction as the Y-axis, whereby the display position of the chart in the page may be determined by acquiring the center point position coordinates, the upper left corner position coordinates, or the lower right corner position coordinates of the chart.
Illustratively, the history display width is denoted as w cache The history display height is expressed as h cache The historical X-axis position coordinates are denoted as X and the historical Y-axis position coordinates are denoted as Y. Then, the target X-axis position coordinates and the target Y-axis position coordinates can be determined by:
wherein x is current Representing the X-axis position coordinate of the target, y current Representing the target Y-axis position coordinates.
In a possible implementation manner, the chart data includes a data code of each chart in the page, and the rendering of the chart in the page according to the chart data and the target typesetting data may include:
for each of the charts, the following steps are performed:
creating an image node in the page; and configuring the data codes of the charts into image attributes of the image nodes, and configuring width attributes and height attributes of the image nodes according to the target typesetting data so as to render charts in the pages.
It should be understood that the data encoding of the chart may be determined according to the actual situation, and the embodiment of the present disclosure does not impose any limitation on this. In possible embodiments, the data Encoding of the graph may be URL Encoding (URL Encoding), JSON Encoding (JSON Encoding), or Base64 Encoding. In a possible embodiment, the data encoding is set to Base64 encoding in order to avoid subsequent additional network requests when loading the graph.
It should also be appreciated that the image node (img) is a markup for inserting images in the hypertext markup language (HyperText Markup Language, HTML), which is a common element used to display pictures on web pages. An external picture can be inserted into a web page using img, and an image corresponding to the src attribute is inserted into the web page by configuring node attributes such as an image attribute (src), a width attribute (width), and a height attribute (height), and displayed according to the width and height corresponding to the width and height.
In a possible implementation manner, the obtaining, from the local cache, the chart data and the typesetting data corresponding to the page in the history access process includes:
determining whether the diagram data and typesetting data corresponding to the page exist in the local cache; and when the chart data and the typesetting data corresponding to the page exist in the local cache, acquiring the chart data and the typesetting data corresponding to the page from the local cache.
It should be understood that when a page is accessed or rendered for the first time, the chart data and layout data corresponding to the page do not exist in the local cache, so that when the chart data and the layout data are acquired from the local cache, it needs to be determined whether the chart data and the layout data corresponding to the page exist in the local cache.
In a possible embodiment, the method may further comprise:
when the diagram data and the typesetting data corresponding to the page do not exist in the local cache, obtaining a diagram configuration item and a diagram data item of the page from a server; and rendering a corresponding chart on the page according to the chart configuration item and the chart data item.
It should be understood that the chart configuration item and the chart data item together define the appearance and content of the chart. The diagram configuration items determine the overall style and behavior of the diagram, and the diagram data items provide actual data display. By adjusting the chart configuration items and chart data items, charts of different types and styles may be created to present the data.
In a possible implementation, the chart configuration items may include, but are not limited to, the following:
chart type: specifying the type of chart to be used, such as a line graph, a bar graph, a pie chart, etc.;
title and subtitle: a title and a subtitle for describing a chart, providing background information;
coordinate axes: setting labels, scales, ranges and the like of an x axis and a y axis;
legend: the identification and description are used for explaining different data series in the chart;
style and color: the patterns of the chart elements, such as line width, color, are controlled.
In a possible implementation, the chart data items may include, but are not limited to, the following:
data series: the different series of data in the graph may be a plurality of curves, columns or pie chart data;
data tag: a label for each data point for adding additional information or identification to the data point;
data value: specific values for each data point.
In a possible embodiment, the method may further comprise:
responding to the monitoring of an ending rendering signal or a starting caching signal, traversing the chart in the page; aiming at the traversed chart, saving the chart into the local cache in the form of pictures; after all charts are stored in the local cache, position coordinates of charts in the page and display size of the page are determined, and the chart association in the form of the position coordinates, the display size and pictures is stored in the local cache.
It should be appreciated that changes in the display size or display position of the chart may affect the layout of the chart. In order to ensure that the display information (i.e., the size of the chart and/or the position of the chart) of the page is consistent during each access, the embodiment stores the position coordinates of the chart in the page and the display size of the page after the chart is stored, so that the problem that the position coordinates of the chart and the display size of the page need to be stored again due to the change of the chart after the typesetting data is stored is avoided, and the data storage efficiency is prompted.
In addition, it should be understood that, since the chart data and the typesetting data are cached in the local system, only the corresponding chart needs to be rendered in the page in the subsequent process of rendering the page, so that the chart rendering speed is further improved, as shown in fig. 2 and 3.
In a possible embodiment, the method may further comprise:
determining a target storage space of an index database in the local cache through a browser;
accordingly, the saving the chart in the local cache in the form of a picture may include:
storing the chart in the target storage space in the form of pictures;
accordingly, the storing the graph association of the position coordinates, the display size, and the picture form in the local cache may include:
and storing the position coordinates, the display size and the chart association in the form of pictures in the target storage space.
In this embodiment, by determining the target storage space and storing the rendering data to be stored, that is, the chart, the position coordinates, the display size, etc., in the target storage space, only one rendering sub-data, for example, the chart, in the rendering data needs to be queried in the subsequent process of searching the rendering data, so that the complete rendering data can be obtained, the data query times are reduced, and the rendering efficiency is further improved.
Based on the same concept, the embodiments of the present disclosure provide a page rendering apparatus, as shown in fig. 4, the page rendering apparatus 400 may include:
a first obtaining module 410, configured to obtain, in response to an access operation to a page, chart data and layout data corresponding to the page in a history access process from a local cache, where the layout data is at least used to characterize a chart display position;
a first determining module 420, configured to determine a target display size of the page in the current access process;
a second determining module 430, configured to determine target layout data of the chart in the current access process according to the target display size and the layout data;
and a first rendering module 440, configured to render a chart in the page according to the chart data and the target typesetting data.
Through the technical scheme, the chart rendering data of the page in the history access process, namely the chart data and the typesetting data, can be obtained from the local cache, so that a corresponding chart is rendered in the page according to the chart rendering data. Compared with the prior art that the chart rendering data are obtained from the server, the method and the device can effectively reduce the transmission time of the chart rendering data and improve the chart rendering speed. On the other hand, when the chart rendering is carried out according to the chart data and the typesetting data in the history access process, the typesetting data is adjusted according to the target display size of the page under the current access operation, so that all charts can be displayed on the current page, and the completeness of the charts in the page is ensured.
In a possible implementation manner, the typesetting data includes a history display size of the page and a history display position of the chart in a history access process, and accordingly, the second determining module 430 may include:
the first determining unit is used for determining the size conversion proportion of the page in the history access process and the current access process according to the target display size and the history display size, and determining a target display position according to the size conversion proportion and the history display position;
and a second determining unit configured to determine the target display position and the target display size as target layout data.
In a possible embodiment, the first determining unit may include:
a first determining subunit, configured to determine a width ratio of a historical display width of the page to a target display width, determine a product of the width ratio and a historical X-axis position coordinate of the chart as a target X-axis position coordinate of the chart, determine a height ratio of a historical display height of the page to a target display height, and determine a product of the height ratio and a historical Y-axis position coordinate of the chart as a target Y-axis position coordinate of the chart, so as to obtain the target display position, where the X-axis position coordinate is a coordinate along the width direction of the page, and the Y-axis position coordinate is a coordinate along the height direction of the page.
In a possible implementation, the chart data includes a data encoding of each chart in the page, and accordingly, the first rendering module 440 may include:
a node creation unit configured to create an image node in the page;
and the attribute configuration unit is used for configuring the data code of the chart into the image attribute of the image node, and configuring the width attribute and the height attribute of the image node according to the target typesetting data so as to render the chart in the page.
In a possible implementation manner, the first obtaining module 410 may include:
a third determining unit, configured to determine whether chart data and typesetting data corresponding to the page exist in the local cache;
and the acquisition unit is used for acquiring the chart data and the typesetting data corresponding to the page from the local cache when the chart data and the typesetting data corresponding to the page exist in the local cache.
In a possible implementation manner, the page rendering device 400 may further include:
the second acquisition module is used for acquiring the chart configuration item and the chart data item of the page from the server when the chart data and the typesetting data corresponding to the page do not exist in the local cache;
And the second rendering module is used for rendering a corresponding chart on the page according to the chart configuration item and the chart data item.
In a possible implementation manner, the first obtaining module 410 is configured to obtain, from the local cache, graph data and layout data corresponding to the page in the history access process through an index database of the browser.
In a possible implementation manner, the page rendering device 400 may further include:
the chart traversing module is used for traversing charts in the page in response to the monitoring of the rendering ending signal or the caching starting signal;
the first storage module is used for storing the traversed chart into the local cache in the form of pictures;
and the second storage module is used for determining the position coordinates of the charts in the page and the display size of the page after all charts are stored in the local cache, and storing the position coordinates, the display size and the chart association in the form of pictures in the local cache.
In a possible implementation manner, the page rendering device 400 may further include:
the third determining module is used for determining a target storage space of the index database in the local cache through the browser;
Correspondingly, the first storage module is used for storing the chart in the target storage space in the form of pictures;
correspondingly, the second saving module is configured to save the position coordinates, the display size, and the chart association in the form of a picture in the local cache.
Based on the same conception, the embodiments of the present disclosure also provide a computer readable medium having stored thereon a computer program which, when executed by a processing device, implements the steps of the page rendering method in the first aspect.
Based on the same concept, the embodiments of the present disclosure also provide an electronic device including:
a storage device having a computer program stored thereon;
processing means for executing said computer program in said storage means to effect the step of page rendering in the first aspect.
Referring now to fig. 5, a schematic diagram of an electronic device 500 suitable for use in implementing embodiments of the present disclosure is shown. The terminal devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and the like, and stationary terminals such as digital TVs, desktop computers, and the like. The electronic device shown in fig. 5 is merely an example and should not be construed to limit the functionality and scope of use of the disclosed embodiments.
As shown in fig. 5, the electronic device 500 may include a processing means (e.g., a central processing unit, a graphics processor, etc.) 501, which may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 502 or a program loaded from a storage means 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the electronic apparatus 500 are also stored. The processing device 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
In general, the following devices may be connected to the I/O interface 505: input devices 506 including, for example, a touch screen, touchpad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; an output device 507 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 508 including, for example, magnetic tape, hard disk, etc.; and communication means 509. The communication means 509 may allow the electronic device 500 to communicate with other devices wirelessly or by wire to exchange data. While fig. 5 shows an electronic device 500 having various means, it is to be understood that not all of the illustrated means are required to be implemented or provided. More or fewer devices may be implemented or provided instead.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a non-transitory computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication means 509, or from the storage means 508, or from the ROM 502. The above-described functions defined in the methods of the embodiments of the present disclosure are performed when the computer program is executed by the processing device 501.
It should be noted that the computer readable medium described in the present disclosure may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this disclosure, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present disclosure, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, fiber optic cables, RF (radio frequency), and the like, or any suitable combination of the foregoing.
In some implementations, communications may be made using any currently known or future developed network protocol, such as HTTP (HyperText Transfer Protocol ), and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the internet (e.g., the internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed networks.
The computer readable medium may be contained in the electronic device; or may exist alone without being incorporated into the electronic device.
The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: responding to the access operation to the page, and acquiring graph data and typesetting data corresponding to the page in the history access process from a local cache, wherein the typesetting data is at least used for representing the graph display position; determining a target display size of the page in the current access process; determining target typesetting data of the chart in the current access process according to the target display size and the typesetting data; and rendering a chart in the page according to the chart data and the target typesetting data.
Computer program code for carrying out operations of the present disclosure may be written in one or more programming languages, including, but not limited to, an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present disclosure may be implemented in software or hardware. The name of a module does not in some cases define the module itself.
The functions described above herein may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: a Field Programmable Gate Array (FPGA), an Application Specific Integrated Circuit (ASIC), an Application Specific Standard Product (ASSP), a system on a chip (SOC), a Complex Programmable Logic Device (CPLD), and the like.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. The machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, and a portable compact disc read-only memory.
According to one or more embodiments of the present disclosure, example 1 provides a page rendering method, the method comprising: responding to the access operation to the page, and acquiring graph data and typesetting data corresponding to the page in the history access process from a local cache, wherein the typesetting data is at least used for representing the graph display position; determining a target display size of the page in the current access process; determining target typesetting data of the chart in the current access process according to the target display size and the typesetting data; and rendering a chart in the page according to the chart data and the target typesetting data.
According to one or more embodiments of the present disclosure, example 2 provides the method of example 1, the layout data including a history display size of the page and a history display position of the chart in a history access process, the determining target layout data of the chart in the current access process according to the target display size and the layout data, including: determining the size conversion proportion of the page in the historical access process and the current access process according to the target display size and the historical display size, and determining a target display position according to the size conversion proportion and the historical display position; and determining the target display position and the target display size as target typesetting data.
According to one or more embodiments of the present disclosure, example 3 provides the method of example 2, the determining a size conversion ratio of the page in the history access process and the current access process according to the target display size and the history display size, and determining a target display position according to the size conversion ratio and the history display position, including: determining a width ratio of a historical display width of the page to a target display width, determining a product of the width ratio and a historical X-axis position coordinate of the chart as a target X-axis position coordinate of the chart, determining a height ratio of a historical display height of the page to a target display height, and determining a product of the height ratio and a historical Y-axis position coordinate of the chart as a target Y-axis position coordinate of the chart to obtain the target display position, wherein the X-axis position coordinate is a coordinate along the width direction of the page, and the Y-axis position coordinate is a coordinate along the height direction of the page.
According to one or more embodiments of the present disclosure, example 4 provides the method of any one of examples 1-3, the chart data including a data encoding of each chart in the page, the rendering of a chart in the page according to the chart data and the target layout data, comprising: for each of the charts, the following steps are performed: creating an image node in the page; and configuring the data codes of the charts into image attributes of the image nodes, and configuring width attributes and height attributes of the image nodes according to the target typesetting data so as to render charts in the pages.
According to one or more embodiments of the present disclosure, example 5 provides the method of any one of examples 1 to 3, wherein the obtaining, from the local cache, chart data and layout data corresponding to the page in the history access process includes: determining whether the diagram data and typesetting data corresponding to the page exist in the local cache; and when the chart data and the typesetting data corresponding to the page exist in the local cache, acquiring the chart data and the typesetting data corresponding to the page from the local cache.
According to one or more embodiments of the present disclosure, example 6 provides the method of example 5, the method further comprising: when the diagram data and the typesetting data corresponding to the page do not exist in the local cache, obtaining a diagram configuration item and a diagram data item of the page from a server; and rendering a corresponding chart on the page according to the chart configuration item and the chart data item.
According to one or more embodiments of the present disclosure, example 7 provides the method of any one of examples 1 to 3, wherein the obtaining, from the local cache, chart data and layout data corresponding to the page in the history access process includes: and obtaining the chart data and typesetting data corresponding to the page in the history access process from the local cache through an index database of the browser.
According to one or more embodiments of the present disclosure, example 8 provides the method of example 1, the method further comprising: responding to the monitoring of an ending rendering signal or a starting caching signal, traversing the chart in the page; aiming at the traversed chart, saving the chart into the local cache in the form of pictures; after all charts are stored in the local cache, position coordinates of charts in the page and display size of the page are determined, and the chart association in the form of the position coordinates, the display size and pictures is stored in the local cache.
According to one or more embodiments of the present disclosure, example 9 provides the method of example 8, the method further comprising: determining a target storage space of an index database in the local cache through a browser; the storing the chart in the local cache in the form of pictures comprises the following steps: storing the chart in the target storage space in the form of pictures; the storing the position coordinates, the display size, and the chart association in the form of a picture in the local cache includes: and storing the position coordinates, the display size and the chart association in the form of pictures in the target storage space.
In accordance with one or more embodiments of the present disclosure, example 10 provides a page rendering apparatus, the apparatus comprising: the first acquisition module is used for responding to the access operation of the page, acquiring chart data and typesetting data corresponding to the page in the history access process from the local cache, wherein the typesetting data is at least used for representing the chart display position; the first determining module is used for determining the target display size of the page in the current access process; the second determining module is used for determining target typesetting data of the chart in the current access process according to the target display size and the typesetting data; and the first rendering module is used for rendering the chart in the page according to the chart data and the target typesetting data.
According to one or more embodiments of the present disclosure, example 11 provides a computer-readable medium having stored thereon a computer program which, when executed by a processing device, implements the steps of the method of any of examples 1-9.
Example 12 provides an electronic device according to one or more embodiments of the present disclosure, comprising: a storage device having a computer program stored thereon; processing means for executing the computer program in the storage means to implement the steps of the method of any one of examples 1-9.
The foregoing description is only of the preferred embodiments of the present disclosure and description of the principles of the technology being employed. It will be appreciated by persons skilled in the art that the scope of the disclosure referred to in this disclosure is not limited to the specific combinations of features described above, but also covers other embodiments which may be formed by any combination of features described above or equivalents thereof without departing from the spirit of the disclosure. Such as those described above, are mutually substituted with the technical features having similar functions disclosed in the present disclosure (but not limited thereto).
Moreover, although operations are depicted in a particular order, this should not be understood as requiring that such operations be performed in the particular order shown or in sequential order. In certain circumstances, multitasking and parallel processing may be advantageous. Likewise, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of the present disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features that are described in the context of a single embodiment can also be implemented in multiple embodiments separately or in any suitable subcombination.
Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are example forms of implementing the claims. The specific manner in which the various modules perform the operations in the apparatus of the above embodiments have been described in detail in connection with the embodiments of the method, and will not be described in detail herein.
Claims (12)
1. A method of page rendering, the method comprising:
responding to the access operation to the page, and acquiring graph data and typesetting data corresponding to the page in the history access process from a local cache, wherein the typesetting data is at least used for representing the graph display position;
determining a target display size of the page in the current access process;
determining target typesetting data of the chart in the current access process according to the target display size and the typesetting data;
and rendering a chart in the page according to the chart data and the target typesetting data.
2. The method according to claim 1, wherein the layout data includes a history display size of the page and a history display position of the chart in a history access process, and the determining the target layout data of the chart in the current access process according to the target display size and the layout data includes:
Determining the size conversion proportion of the page in the historical access process and the current access process according to the target display size and the historical display size, and determining a target display position according to the size conversion proportion and the historical display position;
and determining the target display position and the target display size as target typesetting data.
3. The method according to claim 2, wherein the determining the size conversion ratio of the page in the history access process and the current access process according to the target display size and the history display size, and determining the target display position according to the size conversion ratio and the history display position, comprises:
determining a width ratio of a historical display width of the page to a target display width, determining a product of the width ratio and a historical X-axis position coordinate of the chart as a target X-axis position coordinate of the chart, determining a height ratio of a historical display height of the page to a target display height, and determining a product of the height ratio and a historical Y-axis position coordinate of the chart as a target Y-axis position coordinate of the chart to obtain the target display position, wherein the X-axis position coordinate is a coordinate along the width direction of the page, and the Y-axis position coordinate is a coordinate along the height direction of the page.
4. A method according to any one of claims 1 to 3, wherein the chart data includes a data encoding for each chart in the page, the rendering of a chart in the page from the chart data and the target layout data comprising:
for each of the charts, the following steps are performed:
creating an image node in the page;
and configuring the data codes of the charts into image attributes of the image nodes, and configuring width attributes and height attributes of the image nodes according to the target typesetting data so as to render charts in the pages.
5. A method according to any one of claims 1 to 3, wherein the obtaining, from the local cache, chart data and layout data corresponding to the page in the history access process includes:
determining whether the diagram data and typesetting data corresponding to the page exist in the local cache;
and when the chart data and the typesetting data corresponding to the page exist in the local cache, acquiring the chart data and the typesetting data corresponding to the page from the local cache.
6. The method of claim 5, wherein the method further comprises:
When the diagram data and the typesetting data corresponding to the page do not exist in the local cache, obtaining a diagram configuration item and a diagram data item of the page from a server;
and rendering a corresponding chart on the page according to the chart configuration item and the chart data item.
7. A method according to any one of claims 1 to 3, wherein the obtaining, from the local cache, chart data and layout data corresponding to the page in the history access process includes:
and obtaining the chart data and typesetting data corresponding to the page in the history access process from the local cache through an index database of the browser.
8. The method according to claim 1, wherein the method further comprises:
responding to the monitoring of an ending rendering signal or a starting caching signal, traversing the chart in the page;
aiming at the traversed chart, saving the chart into the local cache in the form of pictures;
after all charts are stored in the local cache, position coordinates of charts in the page and display size of the page are determined, and the chart association in the form of the position coordinates, the display size and pictures is stored in the local cache.
9. The method of claim 8, wherein the method further comprises:
determining a target storage space of an index database in the local cache through a browser;
the storing the chart in the local cache in the form of pictures comprises the following steps:
storing the chart in the target storage space in the form of pictures;
the storing the position coordinates, the display size, and the chart association in the form of a picture in the local cache includes:
and storing the position coordinates, the display size and the chart association in the form of pictures in the target storage space.
10. A page rendering apparatus, the apparatus comprising:
the first acquisition module is used for responding to the access operation of the page, acquiring chart data and typesetting data corresponding to the page in the history access process from the local cache, wherein the typesetting data is at least used for representing the chart display position;
the first determining module is used for determining the target display size of the page in the current access process;
the second determining module is used for determining target typesetting data of the chart in the current access process according to the target display size and the typesetting data;
And the first rendering module is used for rendering the chart in the page according to the chart data and the target typesetting data.
11. A computer readable medium on which a computer program is stored, characterized in that the program, when being executed by a processing device, carries out the steps of the method according to any one of claims 1-9.
12. An electronic device, comprising:
a storage device having a computer program stored thereon;
processing means for executing said computer program in said storage means to carry out the steps of the method according to any one of claims 1-9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311088583.3A CN117033834A (en) | 2023-08-25 | 2023-08-25 | Page rendering method, device, computer-readable medium and electronic device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311088583.3A CN117033834A (en) | 2023-08-25 | 2023-08-25 | Page rendering method, device, computer-readable medium and electronic device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117033834A true CN117033834A (en) | 2023-11-10 |
Family
ID=88602233
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311088583.3A Pending CN117033834A (en) | 2023-08-25 | 2023-08-25 | Page rendering method, device, computer-readable medium and electronic device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117033834A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109299414A (en) * | 2018-09-26 | 2019-02-01 | 深圳壹账通智能科技有限公司 | A method and terminal for loading a page |
| US10769348B1 (en) * | 2019-09-23 | 2020-09-08 | Typetura Llc | Dynamic typesetting |
| WO2021027631A1 (en) * | 2019-08-09 | 2021-02-18 | 北京字节跳动网络技术有限公司 | Image special effect processing method and apparatus, electronic device, and computer-readable storage medium |
| CN114817816A (en) * | 2022-05-20 | 2022-07-29 | 盐城金堤科技有限公司 | Page loading method and device, storage medium and electronic equipment |
| CN115934214A (en) * | 2021-08-03 | 2023-04-07 | 北京小米移动软件有限公司 | Display data acquisition method and device, electronic equipment and storage medium |
-
2023
- 2023-08-25 CN CN202311088583.3A patent/CN117033834A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109299414A (en) * | 2018-09-26 | 2019-02-01 | 深圳壹账通智能科技有限公司 | A method and terminal for loading a page |
| WO2021027631A1 (en) * | 2019-08-09 | 2021-02-18 | 北京字节跳动网络技术有限公司 | Image special effect processing method and apparatus, electronic device, and computer-readable storage medium |
| US10769348B1 (en) * | 2019-09-23 | 2020-09-08 | Typetura Llc | Dynamic typesetting |
| CN115934214A (en) * | 2021-08-03 | 2023-04-07 | 北京小米移动软件有限公司 | Display data acquisition method and device, electronic equipment and storage medium |
| CN114817816A (en) * | 2022-05-20 | 2022-07-29 | 盐城金堤科技有限公司 | Page loading method and device, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111581563B (en) | Page response method and device, storage medium and electronic equipment | |
| CN111400625B (en) | Page processing method and device, electronic equipment and computer readable storage medium | |
| CN111258670B (en) | Method and device for managing component data, electronic equipment and storage medium | |
| CN111581555A (en) | Document loading method, device, equipment and storage medium | |
| CN111754600B (en) | Poster image generation method, device and electronic device | |
| JP2025516237A (en) | Collection management method, device, equipment and media | |
| CN110427584A (en) | Page generation method, device, electronic equipment and computer readable storage medium | |
| CN110717126A (en) | Page browsing method and device, electronic equipment and computer readable storage medium | |
| CN111338827B (en) | Method and device for pasting form data and electronic equipment | |
| CN115525852A (en) | Webpage rendering method, device, equipment and storage medium | |
| CN111258582B (en) | Window rendering method and device, computer equipment and storage medium | |
| CN109635263A (en) | The fixed methods of exhibiting of col width based on WEB ultra-wide table, device and electronic equipment | |
| CN113204557A (en) | Electronic form importing method, device, equipment and medium | |
| CN112333462A (en) | Page jumping method, returning method, device and electronic device in live broadcast room | |
| CN117033834A (en) | Page rendering method, device, computer-readable medium and electronic device | |
| CN117311684A (en) | Information circulation method, device, medium and electronic equipment | |
| CN111405342B (en) | Rich text message display method, device, system, medium and electronic equipment | |
| CN111209042B (en) | Method, device, medium and electronic equipment for establishing function stack | |
| CN112445478A (en) | Graphic file processing method, device, equipment and medium | |
| CN110795670A (en) | Webpage image monitoring method and device, electronic equipment and readable storage medium | |
| CN120216606B (en) | Knowledge graph rendering method, device, equipment and product under large-scale data | |
| CN111026983B (en) | Method, device, medium and electronic equipment for realizing hyperlink | |
| CN119476232B (en) | Tabular data processing methods, devices, equipment, media, and products | |
| CN114510309B (en) | Animation effect setting method, device, equipment and medium | |
| US20240386195A1 (en) | Table processing method, apparatus, device, storage medium and program product |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |