CN112380474A - Method for optimizing webpage rendering performance by analyzing computer equipment information - Google Patents
Method for optimizing webpage rendering performance by analyzing computer equipment information Download PDFInfo
- Publication number
- CN112380474A CN112380474A CN202011280439.6A CN202011280439A CN112380474A CN 112380474 A CN112380474 A CN 112380474A CN 202011280439 A CN202011280439 A CN 202011280439A CN 112380474 A CN112380474 A CN 112380474A
- Authority
- CN
- China
- Prior art keywords
- rendering
- performance
- webpage
- page
- cpu
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR 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/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
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 relates to the technical field of webpage rendering, in order to solve the problem of overlarge server pressure during webpage rendering, in particular to a method for optimizing webpage rendering performance by analyzing computer equipment information, which comprises the following steps: step 1, acquiring equipment information; step 2, calculating the rendering index of the equipment according to the equipment information; step 3, judging the webpage rendering performance of the current equipment according to the rendering index and in combination with a threshold value; and 4, determining whether page rendering adjustment is carried out or not according to the judgment result of the step 3, and carrying out page rendering adjustment when the page rendering adjustment is required. By adopting the steps, the webpage rendering can be simplified and accepted, so that the webpage rendering performance is improved, and the server pressure is reduced.
Description
Technical Field
The invention relates to the technical field of webpage rendering, in particular to a method for optimizing webpage rendering performance by analyzing computer equipment information.
Background
At present, the method for optimizing the webpage rendering performance generally puts the webpage content into a server rendering, namely SSR (Server Side render) technology. The SSR technical process comprises the following steps: data needing to be returned to a user is integrated with a webpage by using equipment resources of a server, then the data are downloaded to computer equipment of the user, and rendering is carried out after the data are acquired by a browser. The page generated by the SSR technology is a static page, namely an html file rendered at a server side, and the browser can directly render the html file after receiving the html file, so that the SSR technology is different from the traditional webpage loading process, namely html is rendered first, and then data is loaded, so that the webpage rendering performance is improved to a certain extent by the SSR technology.
The SSR technology has the main defects that a large performance cost is caused to a server, particularly, due to the adoption of the technology for a website with high complexity and large user quantity, the server is over-stressed easily during the peak period of user access, and hardware resources are not enough to support the large performance cost, so that the server is down, and the normal access of the website is influenced finally.
Disclosure of Invention
In order to improve the rendering performance of the webpage, reduce the pressure of a server and the pause time of high-complexity webpage browsing by low-performance equipment and improve the fluency, the invention provides a method for optimizing the webpage rendering performance by analyzing computer equipment information.
The technical scheme adopted by the invention for solving the problems is as follows:
a method of optimizing web page rendering performance by analyzing computer device information, comprising:
step 1, acquiring equipment information;
step 3, judging the webpage rendering performance of the current equipment according to the rendering index and in combination with a threshold value;
and 4, determining whether page rendering adjustment is carried out or not according to the judgment result of the step 3, and carrying out page rendering adjustment when the page rendering adjustment is required.
Further, the device information includes the number of logic cores of the CPU, the memory capacity of the CPU, and the maximum resolution of the display.
Further, in step 1, a navigator object and a window object, which are global browser objects, are used to acquire information of the computer device, where the navigator object is used to acquire the number of logical cores of the CPU and the memory capacity of the CPU, and the window object is used to acquire the maximum resolution of the display.
Further, the method for calculating the rendering index in step 2 includes:
wherein R is a rendering index, A is the number of logic cores of the CPU, B is the memory capacity of the CPU, C is the pixel width of the display, and D is the pixel height of the display.
Further, the selection of the threshold in step 3 is determined by the hardware configuration of the computer on the market.
Further, the threshold value in step 3 is 600.
Further, in the step 3, if the rendering index is greater than the threshold, it indicates that the rendering performance of the device webpage is low, and the rendering of the page needs to be adjusted; if the rendering index is smaller than or equal to the threshold value, the webpage rendering performance of the equipment is high, and the page rendering does not need to be adjusted.
Further, the adjustment of the rendering of the page in the step 4 includes disabling an animation effect in the page, dropping a UI decoration in the page, and/or deleting a high-quality picture.
Compared with the prior art, the invention has the beneficial effects that: by performing performance evaluation on the computer equipment information of the user side and simplifying and accepting the rendering of the webpage according to different evaluation results, the rendering performance of the webpage is improved, the white screen and waiting time of the webpage are reduced, the pause time of browsing the high-complexity webpage by low-performance equipment is reduced, and the fluency is improved; the rendering of the webpage is simplified and selected or rejected, so that the performance overhead of the server can be reduced, and the server response efficiency of a large number of user websites is improved. In addition, the method has wide application range, is suitable for any website, and is not limited by an operating system installed by a user computer.
Drawings
FIG. 1 is a flow chart of an embodiment of the present invention;
FIG. 2 is a graph of CPU logic core number versus rendering index;
FIG. 3 is a graph of memory capacity versus rendering index;
FIG. 4 is a graph of maximum resolution versus rendering index;
fig. 5 is a graph of mainstream configuration versus rendering index.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
Examples
As shown in fig. 1, a method for optimizing webpage rendering performance by analyzing computer device information includes:
step 1, acquiring equipment information;
step 3, judging the webpage rendering performance of the current equipment according to the rendering index and in combination with a threshold value;
and 4, determining whether page rendering adjustment is carried out or not according to the judgment result of the step 3, and carrying out page rendering adjustment when the page rendering adjustment is required.
According to the method, the rendering index of the equipment is calculated through the equipment information, and the smaller the rendering index is, the faster the equipment renders the webpage content in unit time is, and the more the content is; the rendering index of the equipment is compared with the threshold value obtained by pre-research, if the rendering index is larger than the threshold value, the rendering of the page needs to be adjusted, so that the rendering performance of the webpage is improved, the white screen and waiting time of the webpage are reduced, the pause time of browsing the high-complexity webpage by the low-performance equipment is reduced, and the fluency is improved.
Specifically, the device information includes the number of logic cores of the CPU, the memory capacity of the CPU, and the maximum resolution of the display. The webpage rendering mainly takes data loading and document rendering as main parts, and both the data loading and the document rendering need a large amount of linear operation and a large amount of memory as cache carriers during CPU calculation, so that the performance and the memory capacity of the CPU directly determine the webpage rendering performance of the equipment, and the number of CPU logic cores and the memory capacity are selected as calculation parameters; the larger the maximum resolution of the display device is, the more pixel points that need to be rendered are, although the current browser software can use a graphics processor to perform rendering acceleration, the main rendering work is still on a CPU, when the number of pixel points that need to be rendered is too large, the performance overhead of the CPU is increased, the occupation of the memory capacity is also increased, and therefore the maximum resolution of the display device is also a parameter that affects the rendering performance. The relationship between the three parameters and the rendering index is respectively shown in fig. 2-4, and the rendering index is continuously reduced along with the continuous increase of the number of logic cores of the CPU or the memory capacity of the CPU; as the maximum resolution becomes larger, the rendering index becomes larger.
And acquiring the equipment information by adopting a navigator object and a window object of the global browser, wherein the navigator object and the window object exist in any browser of all computers. The specific operation is as follows: using navigator objects in a webpage source code, taking hardwareconcurrenty attributes from the navigator objects, wherein the attribute values are numbers, the size of the numbers represents the number of computer CPU logic cores, and storing the obtained values in a variable named A; using a navigator object, taking a deviceMemory attribute in the navigator object, wherein the attribute value is the memory capacity, and storing the obtained value in a variable named B; using the window object, taking the sub-object screen therein, and then taking the width and height attributes in the screen object, wherein the width attribute value represents the pixel width of the display, the height attribute value represents the pixel height of the display, and the obtained values are respectively stored in a variable named C and a variable named D.
The formula is adopted when the rendering index of the equipment is calculated:
wherein R is the rendering index, A is the number of logic cores of the CPU, B is the memory capacity of the CPU, C is the display pixel width, and D is the display pixel height.
The selection of the threshold in the step 3 is determined by the hardware configuration of a computer on the market, fig. 5 is a graph showing the relationship between the mainstream configuration and the rendering index, and by comprehensively analyzing fig. 2 to 5, it can be found that the rendering index of the mainstream equipment is generally about 600, and 600 is taken as the threshold in the embodiment; if the rendering index is larger than the threshold value, the rendering performance of the equipment webpage is low, and the rendering of the webpage needs to be adjusted; if the rendering index is less than or equal to the threshold value, the rendering performance of the webpage of the device is high, and the webpage content can be displayed in full.
Rendering adjustments to the page include disabling animation effects in the page, dropping UI embellishments in the page, and/or pruning high-quality pictures. In the embodiment, a large amount of animation effects in the webpage are mainly removed, a large amount of high-quality pictures are removed, only the text content is reserved, the font is changed into the default font of the browser, and the webpage background is removed.
Claims (8)
1. A method for optimizing web page rendering performance by analyzing computer device information, comprising:
step 1, acquiring equipment information;
step 2, calculating the rendering index of the equipment according to the equipment information;
step 3, judging the webpage rendering performance of the current equipment according to the rendering index and in combination with a threshold value;
and 4, determining whether page rendering adjustment is carried out or not according to the judgment result of the step 3, and carrying out page rendering adjustment when the page rendering adjustment is required.
2. A method for optimizing web page rendering performance by analyzing computer device information as recited in claim 1, wherein the device information includes a number of logical cores of a CPU, a memory capacity of the CPU, and a maximum resolution of a display.
3. The method of claim 2, wherein the step 1 acquires the information of the computer device by using a navigator object and a window object, the navigator object being used to acquire the number of logic cores of the CPU and the memory capacity of the CPU, and the window object being used to acquire the maximum resolution of the display.
4. A method for optimizing webpage rendering performance by analyzing computer device information according to claim 3, wherein the rendering index in the step 2 is calculated by:
wherein R is rendering index, A is the number of logic cores of the CPU, and B isThe memory capacity of the CPU, C is the pixel width of the display, and D is the pixel height of the display.
5. A method for optimizing web page rendering performance by analyzing computer device information as claimed in claim 1, wherein the selection of the threshold value in step 3 is determined by a computer hardware configuration on the market.
6. A method for optimizing web page rendering performance by analyzing computer device information as claimed in claim 5, wherein the threshold value in step 3 is 600.
7. The method of claim 1, wherein in step 3, if the rendering index is greater than a threshold, indicating that the rendering performance of the web page is low, the rendering of the web page needs to be adjusted; if the rendering index is smaller than or equal to the threshold value, the webpage rendering performance of the equipment is high, and the page rendering does not need to be adjusted.
8. A method for optimizing web page rendering performance by analyzing computer device information as claimed in claim 1, wherein the rendering adjustment to the page in step 4 includes disabling animation effects in the page, dropping UI modifications in the page and/or deleting high quality pictures.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011280439.6A CN112380474A (en) | 2020-11-16 | 2020-11-16 | Method for optimizing webpage rendering performance by analyzing computer equipment information |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011280439.6A CN112380474A (en) | 2020-11-16 | 2020-11-16 | Method for optimizing webpage rendering performance by analyzing computer equipment information |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112380474A true CN112380474A (en) | 2021-02-19 |
Family
ID=74584765
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011280439.6A Pending CN112380474A (en) | 2020-11-16 | 2020-11-16 | Method for optimizing webpage rendering performance by analyzing computer equipment information |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112380474A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1120718A1 (en) * | 2000-01-25 | 2001-08-01 | Hewlett-Packard Company, A Delaware Corporation | A system for providing internet-related services to handheld devices |
| CN109840195A (en) * | 2017-11-29 | 2019-06-04 | 腾讯科技（武汉）有限公司 | Webpage method for analyzing performance, terminal device and computer readable storage medium |
| CN110152291A (en) * | 2018-12-13 | 2019-08-23 | 腾讯科技（深圳）有限公司 | Rendering method, device, terminal and the storage medium of game picture |
| CN110516179A (en) * | 2019-08-07 | 2019-11-29 | Oppo广东移动通信有限公司 | Method for rendering graph, device, electronic equipment and storage medium |
| CN110559659A (en) * | 2019-07-09 | 2019-12-13 | 深圳市瑞立视多媒体科技有限公司 | game rendering optimization method, device, equipment and storage medium |
-
2020
- 2020-11-16 CN CN202011280439.6A patent/CN112380474A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1120718A1 (en) * | 2000-01-25 | 2001-08-01 | Hewlett-Packard Company, A Delaware Corporation | A system for providing internet-related services to handheld devices |
| CN109840195A (en) * | 2017-11-29 | 2019-06-04 | 腾讯科技（武汉）有限公司 | Webpage method for analyzing performance, terminal device and computer readable storage medium |
| CN110152291A (en) * | 2018-12-13 | 2019-08-23 | 腾讯科技（深圳）有限公司 | Rendering method, device, terminal and the storage medium of game picture |
| CN110559659A (en) * | 2019-07-09 | 2019-12-13 | 深圳市瑞立视多媒体科技有限公司 | game rendering optimization method, device, equipment and storage medium |
| CN110516179A (en) * | 2019-08-07 | 2019-11-29 | Oppo广东移动通信有限公司 | Method for rendering graph, device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10497086B2 (en) | Methods and apparatuses for providing a hardware accelerated web engine | |
| EP2805258B1 (en) | Low resolution placeholder content for document navigation | |
| US9195637B2 (en) | Proportional font scaling | |
| US10540077B1 (en) | Conserving processing resources by controlling updates to damaged tiles of a content page | |
| US9830308B2 (en) | Rendering apparatus and method for operating a web-platform | |
| US9418171B2 (en) | Acceleration of rendering of web-based content | |
| US11657510B2 (en) | Automatic sizing and placement of text within a digital image | |
| US9754392B2 (en) | Generating data-mapped visualization of data | |
| US20080033696A1 (en) | Method and system for calculating performance parameters for a processor | |
| CN107015788B (en) | Method and device for displaying images on mobile device in animation mode | |
| US9766860B2 (en) | Dynamic source code formatting | |
| US20150348278A1 (en) | Dynamic font engine | |
| US9679075B1 (en) | Efficient delivery of animated image files | |
| CN110309463B (en) | Floor page optimization method and device, computer storage medium and network equipment | |
| CN114564630A (en) | Method, system and medium for visualizing graph data Web3D | |
| WO2019018062A1 (en) | Organizing images automatically into image grid layout | |
| CN111460342B (en) | Page rendering display method and device, electronic equipment and computer storage medium | |
| CN112380474A (en) | Method for optimizing webpage rendering performance by analyzing computer equipment information | |
| CN114756797A (en) | Page processing method and device, electronic equipment and storage medium | |
| US20160342570A1 (en) | Document presentation qualified by conditions evaluated on rendering | |
| CN117111799A (en) | Data display method and device, storage medium and electronic equipment | |
| US7598954B2 (en) | Adapting and rendering graphic effects | |
| US20190163762A1 (en) | Reflow of user interface elements | |
| CN113033173A (en) | Streaming document picture loading method and device, electronic equipment and storage medium | |
| CN114491350A (en) | Content display method, device, equipment and storage medium |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210219 |