CN112749358A - Page rendering method and device, electronic equipment and storage medium - Google Patents

Page rendering method and device, electronic equipment and storage medium Download PDF

Info

Publication number
CN112749358A
CN112749358A CN202110042847.6A CN202110042847A CN112749358A CN 112749358 A CN112749358 A CN 112749358A CN 202110042847 A CN202110042847 A CN 202110042847A CN 112749358 A CN112749358 A CN 112749358A
Authority
CN
China
Prior art keywords
rendering
server
client
page
rendering mode
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
Application number
CN202110042847.6A
Other languages
Chinese (zh)
Inventor
杨丹
姜坤
王立林
徐克宝
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Industrial and Commercial Bank of China Ltd ICBC
Original Assignee
Industrial and Commercial Bank of China Ltd ICBC
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Industrial and Commercial Bank of China Ltd ICBC filed Critical Industrial and Commercial Bank of China Ltd ICBC
Priority to CN202110042847.6A priority Critical patent/CN112749358A/en
Publication of CN112749358A publication Critical patent/CN112749358A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation

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)
  • Information Transfer Between Computers (AREA)

Abstract

The invention provides a page rendering method and device, electronic equipment and a storage medium, which are applicable to the field of finance, and the method comprises the following steps: acquiring a page loading request sent by a client; selecting a server rendering mode or a client rendering mode according to the client performance real-time monitoring result and the server performance real-time monitoring result; if the server rendering mode is selected, the page loading request and the rendering mode identifier or the server rendering instruction are sent to the server; and if the client rendering mode is selected, sending the page loading request and the rendering mode identifier to the server, and sending the rendering mode identifier or the client rendering instruction to the client. The method comprises the steps of monitoring the performance of a client and the performance of a server in real time, dynamically selecting a rendering end according to the performance of the client and the performance of the server, and giving consideration to the access pressure of the server, the page switching speed, the rendering efficiency and the like.

Description

Page rendering method and device, electronic equipment and storage medium
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a page rendering method and apparatus, an electronic device, and a storage medium.
Background
With the high-speed development of the internet, the transmission speed is greatly increased, the user experience is more and more important, the front-end page logic is more and more complex, and the corresponding professional requirements on the front-end development are more and more high. The front-end and back-end separation mode can effectively achieve front-end and back-end decoupling, front-end development is independent from back-end engineering, and front-end personnel can be concentrated in achieving the page. With the rapid development of front-end engineering, front-end three-large frames Vue/React/Angular have been widely used, and all of the frames adopt a client-side rendering mode, namely, a page is rendered at a browser side.
In the client rendering mode, when a page is accessed, the page rendering work can be started only after the browser downloads the frame file, the service code and the static resource first and finishes loading, so that the problems of low whole page loading speed and long white screen waiting time exist.
In order to solve the bottleneck of page access performance and improve user experience, the industry generally adopts server rendering to solve the problems, a page is rendered at a server end during each page request, and the rendered page is returned to a browser end for display.
Disclosure of Invention
The invention provides a page rendering method and device, an electronic device and a storage medium, which can solve the problems in the prior art at least partially.
In order to achieve the purpose, the invention adopts the following technical scheme:
in a first aspect, a page rendering method is provided, including:
acquiring a page loading request sent by a client;
selecting a server rendering mode or a client rendering mode according to the client performance real-time monitoring result and the server performance real-time monitoring result;
if the server rendering mode is selected, the page loading request and the rendering mode identifier or the server rendering instruction are sent to the server;
and if the client rendering mode is selected, sending the page loading request and the rendering mode identifier to the server, and sending the rendering mode identifier or the client rendering instruction to the client.
Further, the real-time monitoring result of the client performance is historical page rendering duration within a preset time period; the server performance real-time monitoring result comprises the following steps: historical interface delay and historical server pressure within a preset time period.
Further, the historical server pressure is obtained according to the CPU index, the memory index and the IO index in a preset time period.
Further, the historical server pressure is obtained according to the CPU occupancy rate, the memory occupancy rate and the IO read-write speed in the preset time period through weighted calculation.
Further, the selecting a server rendering mode or a client rendering mode according to the client performance real-time monitoring result and the server performance real-time monitoring result includes:
obtaining an average rendering time length according to the historical page rendering time length in a preset time period;
obtaining an average interface time delay according to historical interface time delays in a preset time period;
judging whether the sum of the historical server pressure multiplied by a preset coefficient and the average interface time delay is less than the average rendering time length or not;
when the sum of the historical server pressure multiplied by a preset coefficient and the average interface time delay is smaller than the average rendering time length, selecting a server side rendering mode;
and when the sum of the historical server pressure multiplied by a preset coefficient and the average interface time delay is not less than the average rendering time length, selecting a client rendering mode.
Further, the preset coefficient is obtained according to the number of rendering strokes of the server and the total number of rendering strokes.
Further, the page rendering method further includes:
and monitoring the performance of the client and the performance of the server in real time.
In a second aspect, there is provided a page rendering apparatus, including:
the page loading request acquisition module is used for acquiring a page loading request sent by a client;
the rendering mode selection module is used for selecting a server side rendering mode or a client side rendering mode according to the real-time monitoring result of the client side performance and the real-time monitoring result of the server side performance;
the first sending module is used for sending the page loading request and the rendering mode identifier or the server rendering instruction to the server if the server rendering mode is selected;
and the second sending module is used for sending the page loading request and the rendering mode identifier to the server side if the client side rendering is selected, and sending the rendering mode identifier or the client side rendering instruction to the client side.
In a third aspect, an electronic device is provided, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, the steps of the page rendering method are implemented.
In a fourth aspect, a computer-readable storage medium is provided, on which a computer program is stored, which computer program, when being executed by a processor, realizes the steps of the page rendering method described above.
The invention provides a page rendering method and device, electronic equipment and a storage medium, which are applicable to the field of finance, and the method comprises the following steps: acquiring a page loading request sent by a client; selecting a server rendering mode or a client rendering mode according to the client performance real-time monitoring result and the server performance real-time monitoring result; if the server rendering mode is selected, the page loading request and the rendering mode identifier or the server rendering instruction are sent to the server; and if the client rendering mode is selected, sending the page loading request and the rendering mode identifier to the server, and sending the rendering mode identifier or the client rendering instruction to the client. The method comprises the steps of monitoring the performance of a client and the performance of a server in real time, dynamically selecting a rendering end according to the performance of the client and the performance of the server, and giving consideration to the access pressure of the server, the page switching speed, the rendering efficiency and the like.
In order to make the aforementioned and other objects, features and advantages of the invention comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts. In the drawings:
FIG. 1 is a first diagram illustrating an application scenario architecture according to an embodiment of the present invention;
FIG. 2 is a diagram illustrating a second exemplary application scenario architecture according to an embodiment of the present invention;
FIG. 3 is a flowchart illustrating a page rendering method according to an embodiment of the present invention;
FIG. 4 is a schematic diagram of the internal structure of a rendering device on a client for implementing page rendering;
FIG. 5 is a schematic diagram of the internal structure of the rendering device 2 on the server for implementing page rendering;
FIG. 6 is a schematic diagram of the internal structure of the response detecting means 4;
FIG. 7 is a schematic view showing the internal structure of the pressure monitoring device 5;
fig. 8 shows the detailed steps of step S200 in the embodiment of the present invention;
FIG. 9 illustrates the process flow of a page load request in an embodiment of the invention;
FIG. 10 is a block diagram showing the structure of a page rendering apparatus according to an embodiment of the present invention;
FIG. 11 is a block diagram showing the structure of a rendering style selection module in the embodiment of the present invention;
fig. 12 is a block diagram of an electronic device according to an embodiment of the invention.
Detailed Description
In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only partial embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
It should be noted that the terms "comprises" and "comprising," and any variations thereof, in the description and claims of this application and the above-described drawings, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict. The present application will be described in detail below with reference to the embodiments with reference to the attached drawings.
Fig. 1 is a schematic diagram of an application scenario architecture in an embodiment of the present invention, referring to fig. 1, the server S1 may be communicatively connected to at least one client device B1, the client device B1 may send a page load request to the server S1, and the server S1 may receive the page load request online. The server S1 can perform online or offline preprocessing on the acquired page loading request, and selects a server rendering mode or a client rendering mode according to a client B1 performance real-time monitoring result and a server device S2 performance real-time monitoring result; if the server rendering mode is selected, sending the page loading request and the rendering mode identifier or the server rendering instruction to the server device S2; if the client rendering mode is selected, the page loading request and the rendering mode identifier are sent to the server device S2, and the rendering mode identifier or the client rendering instruction is sent to the client device B1.
In addition, referring to fig. 2, the server S1 and the server S2 may be implemented by the same server, i.e., the server S.
It is understood that the client device B1 may include a smart phone, a tablet electronic device, a network set-top box, a portable computer, a desktop computer, a Personal Digital Assistant (PDA), a vehicle-mounted device, a smart wearable device, etc. Wherein, intelligence wearing equipment can include intelligent glasses, intelligent wrist-watch, intelligent bracelet etc..
The server device, server, and client device may communicate using any suitable network protocol, including network protocols not yet developed at the filing date of this application. The network protocol may include, for example, a TCP/IP protocol, a UDP/IP protocol, an HTTP protocol, an HTTPS protocol, or the like. Of course, the network Protocol may also include, for example, an RPC Protocol (Remote Procedure Call Protocol), a REST Protocol (Representational State Transfer Protocol), and the like used above the above Protocol.
FIG. 3 is a flowchart illustrating a page rendering method according to an embodiment of the present invention; as shown in fig. 3, the page rendering method may include the following:
step S100: acquiring a page loading request sent by a client;
step S200: selecting a server rendering mode or a client rendering mode according to the client performance real-time monitoring result and the server performance real-time monitoring result;
if the server rendering mode is selected, executing step S300; if the client rendering mode is selected, step S400 is performed.
Specifically, the performance is monitored in real time by presetting monitoring programs at a client and a server, and specifically, the monitored performance comprises the following steps: historical rendering speed of the client, transmission delay of a historical interface of the server, pressure indexes of the server and the like.
Step S300: if a server rendering mode is selected, sending the page loading request and a rendering mode identifier or a server rendering instruction to the server;
specifically, when a server rendering mode is selected, a page loading request is sent to the server, and meanwhile, a rendering mode identifier or a server rendering instruction is sent to the server, so that the server knows that a page is rendered by the server, then static resources are obtained according to the page loading request for rendering, finally the rendered page is sent to the client, and a browser of the client directly loads the rendered page.
Step S400: and if the client rendering mode is selected, sending the page loading request and the rendering mode identifier to the server, and sending the rendering mode identifier or the client rendering instruction to the client.
Specifically, when a client rendering mode is selected, the page loading request is sent to the server, and the rendering mode identifier is also sent to the server, so that the server knows that the page is rendered by the client, then the corresponding static resource is sent to the client according to the page loading request, and the client performs rendering according to the received data.
By adopting the technical scheme, the whole page loading efficiency and the page switching efficiency can be considered, the server rendering switch can be set according to the client rendering speed and the server pressure index, the rendering mode can be dynamically adjusted, the page rendering is switched between the client and the server, and the optimal efficiency is ensured.
During specific implementation, through frame transformation, a set of compatible processing modules are arranged in the server and the client, so that code isomorphism is guaranteed, and a set of source codes can run on the client and the server simultaneously.
The page rendering method provided by the embodiment of the invention solves the problems of long resource downloading time consumption caused by client rendering, serious dependence on browser processing speed and high service access pressure caused by server rendering, supports the operation of the original front-end page code at the server based on isomorphic technology, and dynamically switches rendering modes according to the historical rendering speed of the client, the transmission delay of a historical interface and the pressure index of the server, so that the page rendering is switched between the client and the server, and the optimal efficiency is ensured.
Js server cloud upper nodes may be added to the deployment architecture to execute the dynamic rendering technology provided by the embodiment of the present invention, and a page isomorphic rendering program is added to the server side, so that the front-end code originally rendered in the browser may be rendered at the server side. Secondly, when the processing performance of the client is reduced due to equipment or a browser, the rendering step is switched to the server to be completed, so that the overhead caused by static resource transmission and loading can be effectively reduced, and the page display rate is improved; when the server is under excessive pressure due to excessive requests and the time delay for returning the page is obviously prolonged, rendering of the page is switched to the browser to be completed, partial replacement and rendering of the page are carried out, and the access efficiency is improved.
In an optional embodiment, when the server side performs page rendering, a unique instance is generated for a page loading request of a user, so that data pollution and state pollution caused by concurrent access of multiple users are avoided, and meanwhile, front-end page codes are analyzed and loaded, and frame codes, page codes and style codes are rendered into HTML.
In an optional embodiment, when the client performs page rendering, the frame code is rendered into html, Vue instances are mounted on a designated html tag, so that a static string is activated into a dynamic DOM, static resources are injected into a DOM tree, and page display is completed.
Fig. 4 is a schematic diagram of an internal structure of a rendering apparatus for implementing page rendering on a client, and as shown in fig. 4, the client rendering apparatus 1 includes: a framework code parsing unit 11, an instance mounting unit 12 and a static resource injection unit 13, wherein:
framework code analysis unit 11: analyzing the frame codes and the service logic, and converting the frame codes and the service logic into html;
example mount unit 12: mounting html into DOM tree of browser
The static resource injection unit 13: and loading the style, merging the style with the DOM tree, and displaying the style on the page.
Fig. 5 is a schematic diagram of an internal structure of a rendering apparatus 2 on a server for implementing page rendering, and as shown in fig. 5, the server rendering apparatus 2 includes: an instance creation unit 21, a data prefetch unit 22, and a framework code parsing unit 23, wherein:
the instance creating unit 21: an instance is created for each request, with state isolation.
The data prefetch unit 22: and in case of large data quantity, performing data prefetching from the application server and injecting the data into the page.
Framework code analysis section 23: analyzing the frame code and the service logic, and rendering the code into html
In an optional embodiment, the page rendering method may further include: and monitoring the performance of the client and the performance of the server in real time.
In an optional embodiment, the real-time monitoring result of the client performance is historical page rendering duration within a preset time period; the real-time monitoring result of the performance of the server comprises the following steps: historical interface delay and historical server pressure within a preset time period.
It should be noted that the server pressure is obtained according to the CPU index, the memory index, and the IO index in the preset time period.
Specifically, the time from static resource downloading to page loading completion of the browser in the client can be tracked and recorded through the response detection device; and tracking and detecting a page return interface rendered by the server, and recording the return time delay of the page return interface. And monitoring the performance index of the server through a pressure monitoring device.
Fig. 6 is a schematic diagram of an internal structure of the response detection apparatus 4, and as shown in fig. 6, the response detection apparatus 4 includes a loading duration recording unit 41 and an interface duration recording unit 42, where:
loading duration recording unit 41: and recording the loading duration of the page rendering of the client, including the whole time from the static resource downloading to the page display, namely the page rendering duration.
Interface duration recording unit 42: and recording the time delay of the page returned by the server, namely the interface time delay.
Fig. 7 is a schematic diagram of an internal structure of the pressure monitoring device 5, and as shown in fig. 7, the dynamic decision device 2 includes a CPU monitoring unit 51, a memory monitoring unit 52, and a disk IO monitoring unit 53, where:
the CPU monitoring unit 51: and monitoring the CPU index of the server.
The memory monitoring unit 52: and monitoring the memory index of the server.
Disk IO monitoring unit 53: and monitoring IO indexes of the server.
It is worth to be noted that the CPU index may be CPU occupancy; the memory index can be memory occupancy rate; the IO indicator may be read/write speed.
The server pressure can be obtained by weighting and averaging the CPU occupancy rate, the memory occupancy rate and the IO read-write speed in a preset time period.
In an alternative embodiment, referring to fig. 8, this step S200 may include the following:
step S210: obtaining an average rendering time length according to the historical page rendering time length in a preset time period;
because the monitoring is continuous, the monitoring result is data in a period of time, and the rendering duration of each page is averaged to obtain the average rendering duration.
Step S220: obtaining an average interface time delay according to historical interface time delays in a preset time period;
because the monitoring is continuous, the monitoring result is data in a period of time, and the time delay of each interface is averaged to obtain the average interface time delay.
Step S230: judging whether the sum of the historical server pressure multiplied by a preset coefficient and the average interface time delay is smaller than the average rendering duration or not;
specifically, the average rendering duration is the sum of the rendering durations of the last 10 times/10;
the average time delay is the sum of the interface time delays of the latest 10 times/10;
the decision formula is as follows: average rendering duration > average interface delay + preset coefficient x server pressure.
It should be noted that the initial value of the preset coefficient may be 0.5, and the operation and maintenance staff may flexibly adjust the initial value according to the actual conditions and requirements of the number of rendering strokes of the server, the total number of rendering strokes, and the like, for example, the initial value may be adjusted to 0.3 to 0.8, such as 0.7, 0.6, 0.4, or even to 0.2 or 0.9 in special cases, which is not limited in this embodiment of the present invention.
If the sum of the historical server pressure multiplied by a preset coefficient and the average interface delay is less than the average rendering duration, executing step S240; if the sum of the historical server pressure multiplied by a preset coefficient and the average interface delay is not less than the average rendering duration, step S250 is executed.
Step S240: selecting a rendering mode of a server;
step S250: and selecting a client rendering mode.
Fig. 9 shows a processing flow of a page load request in the embodiment of the present invention, and referring to fig. 9, the following contents are included:
firstly, a client initiates a page request; then, a dynamic decision device of a server executing the page rendering method provided by the embodiment of the invention judges which rendering mode is used, and if the server is used for rendering, the server rendering device is started to start page rendering; and if the client rendering is used, starting the client rendering device, and starting to perform page rendering, thereby finishing page display. And after the rendering of the server side is finished or the rendering of the client side is finished, responding to the detection device for detection, and feeding back a detection result to the dynamic decision device, wherein the pressure monitoring device detects the pressure of the server side in real time and feeds back the result to the server side rendering device for starting page rendering if the server side rendering is used. And the response detection device detects and records the time delay index and feeds back the time delay index.
It should be noted that the pressure monitoring device and the response detecting device may be part of the page rendering device provided in the embodiment of the present invention.
In summary, the technology provided by the embodiment of the present invention solves the problem that the existing page rendering modes cannot be effectively combined to achieve the optimal rendering efficiency, and switches the rendering modes by monitoring the rendering speed of the client, the interface transmission delay, and the server pressure index, so that the page rendering is switched between the client and the server, and the optimal page display efficiency is ensured.
1. The multi-user concurrency has high performance and safety, and data pollution and state pollution of multi-user concurrent access are prevented through the server-side instantiation chemical plant.
2. The stable operation of the server is ensured, the performance pressure of the server is monitored in real time, and the problem of overlarge server pressure caused by high access volume is solved in time
3. The page access efficiency is maximized, the performance influence of equipment and a browser is eliminated, and the time delay caused by network waiting is reduced.
Based on the same inventive concept, the embodiment of the present application further provides a page rendering apparatus, which can be used to implement the method described in the foregoing embodiment, as described in the following embodiment. Because the principle of the page rendering device for solving the problem is similar to that of the method, the implementation of the page rendering device can refer to the implementation of the method, and repeated details are not repeated. As used hereinafter, the term "unit" or "module" may be a combination of software and/or hardware that implements a predetermined function. Although the means described in the embodiments below are preferably implemented in software, an implementation in hardware, or a combination of software and hardware is also possible and contemplated.
Fig. 10 is a block diagram of a page rendering apparatus in the embodiment of the present invention. As shown in fig. 10, the page rendering apparatus specifically includes: the system comprises a page loading request acquisition module 10, a rendering mode selection module 20, a first sending module 30 and a second sending module 40.
The page loading request obtaining module 10 obtains a page loading request sent by a client;
the rendering mode selection module 20 selects a server rendering mode or a client rendering mode according to the real-time client performance monitoring result and the real-time server performance monitoring result;
the first sending module 30, if the server rendering mode is selected, sends the page loading request and the rendering mode identifier or the server rendering instruction to the server;
the second sending module 40, if the client rendering is selected, sends the page loading request and the rendering mode identifier to the server, and sends the rendering mode identifier or the client rendering instruction to the client.
The page rendering device provided by the embodiment of the invention solves the problems that resource downloading time consumption is long due to client rendering, the browser processing speed is seriously depended on, and service access pressure is large due to server rendering, supports the operation of the original front-end page code at the server based on isomorphic technology, and dynamically switches rendering modes according to the client rendering speed, interface transmission delay and server pressure index, so that page rendering is switched between the client and the server, and the optimal efficiency is ensured.
In an optional embodiment, the real-time monitoring result of the client performance is a page rendering duration; the real-time monitoring result of the performance of the server comprises the following steps: interface latency and server pressure.
In an alternative embodiment, referring to fig. 11, the rendering mode selecting module includes: a first average calculation unit 20a, a second average calculation unit 20b, a judgment unit 20c, and a rendering mode selection unit 20 d.
The first mean value calculating unit 20a obtains an average rendering time length according to the page rendering time length;
the second average value calculating unit 20b obtains an average interface delay according to the interface delay;
a determining unit 20c, configured to determine whether a sum of the server pressure multiplied by a preset coefficient and the average interface duration is smaller than the average rendering duration;
if the rendering mode is determined to be yes, the rendering mode selecting unit 20d selects a server rendering mode, otherwise, selects a client rendering mode.
The apparatuses, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or implemented by a product with certain functions. A typical implementation device is an electronic device, which may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.
In a typical example, the electronic device specifically includes a memory, a processor, and a computer program stored on the memory and executable on the processor, and the processor implements the page rendering steps described above when executing the program.
Referring now to FIG. 12, shown is a schematic diagram of an electronic device 600 suitable for use in implementing embodiments of the present application.
As shown in fig. 12, the electronic apparatus 600 includes a Central Processing Unit (CPU)601 that can perform various appropriate works and processes according to a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage section 608 into a Random Access Memory (RAM)) 603. In the RAM603, various programs and data necessary for the operation of the system 600 are also stored. The CPU601, ROM602, and RAM603 are connected to each other via a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.
The following components are connected to the I/O interface 605: an input portion 606 including a keyboard, a mouse, and the like; an output portion 607 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The driver 610 is also connected to the I/O interface 605 as needed. A removable medium 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 610 as necessary, so that a computer program read out therefrom is mounted as necessary on the storage section 608.
In particular, according to an embodiment of the present invention, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, an embodiment of the invention includes a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of page rendering described above.
In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 609, and/or installed from the removable medium 611.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.
For convenience of description, the above devices are described as being divided into various units by function, and are described separately. Of course, the functionality of the units may be implemented in one or more software and/or hardware when implementing the present application.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims (10)

1. A page rendering method, comprising:
acquiring a page loading request sent by a client;
selecting a server rendering mode or a client rendering mode according to the client performance real-time monitoring result and the server performance real-time monitoring result;
if a server rendering mode is selected, sending the page loading request and a rendering mode identifier or a server rendering instruction to the server;
and if the client rendering mode is selected, sending the page loading request and the rendering mode identifier to the server, and sending the rendering mode identifier or the client rendering instruction to the client.
2. The page rendering method according to claim 1, wherein the real-time monitoring result of the client performance is a historical page rendering duration within a preset time period; the real-time monitoring result of the performance of the server comprises the following steps: historical interface delay and historical server pressure within a preset time period.
3. The page rendering method according to claim 2, wherein the historical server pressure is obtained according to a CPU index, a memory index, and an IO index within a preset time period.
4. The page rendering method according to claim 2, wherein the historical server pressure is obtained by weighted averaging according to the CPU occupancy, the memory occupancy, and the IO read-write speed within a preset time period.
5. The page rendering method according to claim 2, wherein the selecting a server rendering mode or a client rendering mode according to the client performance real-time monitoring result and the server performance real-time monitoring result comprises:
obtaining an average rendering time length according to the historical page rendering time length in a preset time period;
obtaining an average interface time delay according to historical interface time delays in a preset time period;
judging whether the sum of the historical server pressure multiplied by a preset coefficient and the average interface time delay is smaller than the average rendering duration or not;
when the sum of the historical server pressure multiplied by a preset coefficient and the average interface time delay is smaller than the average rendering time length, selecting a server side rendering mode;
and when the sum of the historical server pressure multiplied by a preset coefficient and the average interface time delay is not less than the average rendering time length, selecting a client rendering mode.
6. The page rendering method according to claim 5, wherein the preset coefficient is obtained according to the number of rendering strokes of the server and the total number of rendering strokes.
7. The page rendering method of claim 1, further comprising:
and monitoring the performance of the client and the performance of the server in real time.
8. A page rendering apparatus, comprising:
the page loading request acquisition module is used for acquiring a page loading request sent by a client;
the rendering mode selection module is used for selecting a server side rendering mode or a client side rendering mode according to the real-time monitoring result of the client side performance and the real-time monitoring result of the server side performance;
the first sending module is used for sending the page loading request and the rendering mode identifier or the server rendering instruction to the server if the server rendering mode is selected;
and the second sending module is used for sending the page loading request and the rendering mode identifier to the server side if the client side rendering is selected, and sending the rendering mode identifier or the client side rendering instruction to the client side.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the steps of the page rendering method according to any of claims 1 to 5 are implemented by the processor when executing the program.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the page rendering method of any one of claims 1 to 5.
CN202110042847.6A 2021-01-13 2021-01-13 Page rendering method and device, electronic equipment and storage medium Pending CN112749358A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110042847.6A CN112749358A (en) 2021-01-13 2021-01-13 Page rendering method and device, electronic equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110042847.6A CN112749358A (en) 2021-01-13 2021-01-13 Page rendering method and device, electronic equipment and storage medium

Publications (1)

Publication Number Publication Date
CN112749358A true CN112749358A (en) 2021-05-04

Family

ID=75651092

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110042847.6A Pending CN112749358A (en) 2021-01-13 2021-01-13 Page rendering method and device, electronic equipment and storage medium

Country Status (1)

Country Link
CN (1) CN112749358A (en)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113436056A (en) * 2021-07-21 2021-09-24 挂号网(杭州)科技有限公司 Rendering method, rendering device, electronic equipment and storage medium
CN113836455A (en) * 2021-09-18 2021-12-24 北京百度网讯科技有限公司 Special effect rendering method, device, equipment, storage medium and computer program product
CN113934958A (en) * 2021-12-17 2022-01-14 北京德风新征程科技有限公司 Page loading method and device, electronic equipment and computer readable medium
CN114003220A (en) * 2021-12-30 2022-02-01 思创数码科技股份有限公司 Workflow model implementation method, system, readable storage medium and computer equipment
CN114500484A (en) * 2021-12-24 2022-05-13 中国电信股份有限公司 Page rendering method and device, electronic equipment and readable medium
CN115186216A (en) * 2022-07-27 2022-10-14 苏州浪潮智能科技有限公司 Page rendering method, device, equipment and storage medium
CN115454637A (en) * 2022-09-16 2022-12-09 北京字跳网络技术有限公司 Image rendering method, device, equipment and medium
WO2023142578A1 (en) * 2022-01-25 2023-08-03 腾讯科技(深圳)有限公司 Webpage page rendering method and apparatus, device, and storage medium

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113436056A (en) * 2021-07-21 2021-09-24 挂号网(杭州)科技有限公司 Rendering method, rendering device, electronic equipment and storage medium
CN113436056B (en) * 2021-07-21 2023-02-17 挂号网(杭州)科技有限公司 Rendering method and device, electronic equipment and storage medium
CN113836455A (en) * 2021-09-18 2021-12-24 北京百度网讯科技有限公司 Special effect rendering method, device, equipment, storage medium and computer program product
CN113934958A (en) * 2021-12-17 2022-01-14 北京德风新征程科技有限公司 Page loading method and device, electronic equipment and computer readable medium
CN113934958B (en) * 2021-12-17 2022-04-22 北京德风新征程科技有限公司 Page loading method and device, electronic equipment and computer readable medium
CN114500484A (en) * 2021-12-24 2022-05-13 中国电信股份有限公司 Page rendering method and device, electronic equipment and readable medium
CN114003220A (en) * 2021-12-30 2022-02-01 思创数码科技股份有限公司 Workflow model implementation method, system, readable storage medium and computer equipment
WO2023142578A1 (en) * 2022-01-25 2023-08-03 腾讯科技(深圳)有限公司 Webpage page rendering method and apparatus, device, and storage medium
CN115186216A (en) * 2022-07-27 2022-10-14 苏州浪潮智能科技有限公司 Page rendering method, device, equipment and storage medium
CN115186216B (en) * 2022-07-27 2024-02-09 苏州浪潮智能科技有限公司 Page rendering method, device, equipment and storage medium
CN115454637A (en) * 2022-09-16 2022-12-09 北京字跳网络技术有限公司 Image rendering method, device, equipment and medium
WO2024055840A1 (en) * 2022-09-16 2024-03-21 北京字跳网络技术有限公司 Image rendering method and apparatus, device, and medium

Similar Documents

Publication Publication Date Title
CN112749358A (en) Page rendering method and device, electronic equipment and storage medium
CN107798108B (en) Asynchronous task query method and device
CN105677327B (en) A kind of method and system that page info preloads
CN110020367B (en) Page rendering method and device
KR102151457B1 (en) Method and apparatus for reducing page load time in a communication system
CN107103004B (en) Method, device and system for processing data in webpage
CN109992406B (en) Picture request method, picture request response method and client
CN114416512A (en) Test method, test device, electronic equipment and computer storage medium
CN108810047B (en) Method and device for determining information push accuracy rate and server
CN110866040B (en) User portrait generation method, device and system
CN110598135A (en) Network request processing method and device, computer readable medium and electronic equipment
CN111897658A (en) Cloud computing system capacity expansion method and device based on function computing nodes
CN110765386A (en) Webpage image monitoring method and device, electronic equipment and readable storage medium
CN110677447B (en) User stay time length determining method, device, equipment and storage medium
CN112035676B (en) User operation behavior knowledge graph construction method and device
CN111159596A (en) Application resource access control method and device
CN111338928A (en) Chrome-based browser testing method and device
CN105160006A (en) Page content transmission method
CN110187987B (en) Method and apparatus for processing requests
CN110798496A (en) CDN scheduling system, method and device
CN114500484A (en) Page rendering method and device, electronic equipment and readable medium
CN112765503A (en) Static processing method and device for page loading data
CN106899652A (en) A kind of method and device of transmission service result
CN107220306B (en) Searching method and device
CN113760972B (en) Data searching method and device

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