How to reduce the memory and CPU usage of web pages

How to reduce the memory and CPU usage of web pages
<br />Some web pages may not look large but may be very slow to open, while others may be very long but smooth to use. This is affected by the memory and CPU used on the user's computer.
Browser issues are affected by the memory handling issues of each browser, but there is almost no way to control it. On Windows: IE series, the amount of refresh recycling is not large, but minimizing will release memory. Firefox 2 is said to also recycle when minimized, but I have never seen the most garbage. It uses as much as it can and basically does not recycle. It is said that prototype's ajax will cause memory to continue to increase. Opera is the best. Always well controlled. There is no problem. .
The memory allocation mechanism of Linux is different from that of Win. It uses as much memory as possible. If the browser occupies all the memory, it may crash the system.
Page problem: The browser will consume memory and CPU when rendering the page, so reduce it as much as possible.
Use DocType structurally to tell the browser what you are using. HTML4 also has DTD. Maybe Transitional is more suitable for you. If you use XHTML and can maintain a good structure, remember to output the corresponding MIME and XML headers1, which can reduce the browser's code inspection, keep the structure intact, and don't let the browser help you complete the code. To control the file size of the page, you can use the program to indent the code to make it more comfortable to read. 2~3K is also the size. Iframe will generate a new page. In fact, there are many ways to replace iframe. The JS and CSS introduced can be properly merged. The background image can also be merged. Some people even merge Flash. Adding the width attribute to the content image/Object with known width and height can reduce the partial re-rendering of the page.
In most cases, the only difference between a 99% and 70% quality jpg is the file size. The same is true for gif, especially small icons. The difference between 256 colors and 128 colors is the file size. Flash moves too fast and consumes a lot of CPU. The number of frames per second and the animation effect can be reduced. If the quality is set to medium or low, a lot of resources will be saved, but this will sacrifice the effect. . Sometimes it is more appropriate to select Autolow2 or Autohigh for the quality attribute. There is no need to always use low or best. Flash uses vector graphics to save file size, but it uses the CPU to calculate complex graphics and animations. Too many complex filters will take up a lot of memory, blur filters can reduce this. IE filters also take up a lot of memory and also have compatibility issues. Full-screen translucency is very resource-intensive. A 2*2 image is about the same size as an 8*8 image, but a 2*2 tiled background takes up much more space. GIF animation also has the concept of frames, so don't treat GIF as Flash.
Don't import the entire pretotype or jQuery just to use a $() behavior , they have more functions. AJAX is cool. However, using XML will require an XML parser. Some people recommend using JSON, but this requires eval data. In fact, you can directly import the script that is already an object. You just need to pass an extra object name, or hardcode the object name, or use it directly as a function like flickr does, jsonFlickrApi({"xxx":"xxx"}), haha. Don't use display:none when visibility:hidden can solve certain effects. It doesn't make much sense to emphasize here that JS variables should pay attention to global and local, etc. The complexities of JS cannot be explained in just a sentence or two. Let's pay attention to Yueying's new book that is being published. ^^
In fact, a lot of the content here is similar to how to quickly present our web pages, but that article focuses on processing the server. But in many cases, saving server resource consumption will also save client resource consumption.
In fact, this article has been in the draft box for a long time, and I haven't had time to organize it. What I give you now is not complete, because it is not complete yet. I will add to it slowly.
------------------------------------------------------------------------
    Problem: Although it may cause browser mode problems, the problem can be solved. Refer to Serving up XHTML with the correct MIME type. The browser will not be able to display the XML header properly. If there is an incorrect structure, the entire page will not be displayed properly. Autolow: Prioritizes speed, but also tries to improve appearance when possible. When playback starts, anti-aliasing is turned off. If Flash Player detects that the processor can handle anti-aliasing, it turns on the feature.
    Autohigh: Initially, both playback speed and appearance are given equal weight, and when necessary, appearance will be sacrificed to ensure playback speed. When playback begins, anti-aliasing is turned on. If the actual frame rate drops below the specified frame rate, anti-aliasing is turned off to increase playback speed. Use this setting to emulate the Anti-Alias ​​command (View > Preview Mode > Anti-Alias). Blur filter: When using blur filters, if the values ​​used for blurX and blurY are integer powers of 2 (such as 2, 4, 8, 16, and 32), the calculation speed can be accelerated and performance can be improved by 20% to 30% (Flash help says so).

<<:  HTML Self-study Journey (I) Basic Elements and Attributes Practice (Write Your Own Code)

>>:  VMware ESXi 5.5 deployment and configuration diagram process

Recommend

Nodejs-cluster module knowledge points summary and example usage

The interviewer will sometimes ask you, tell me h...

mysql5.7.18 decompressed version to start mysql service

The decompressed version of mysql5.7.18 starts th...

CSS to achieve fast and cool shaking animation effect

1. Introduction to Animate.css Animate.css is a r...

Detailed example of changing Linux account password

Change personal account password If ordinary user...

How to monitor the running status of docker container shell script

Scenario The company project is deployed in Docke...

HTML special character conversion table

character Decimal Character Number Entity Name --...

Vue implements a draggable tree structure diagram

Table of contents Vue recursive component drag ev...

Example code for implementing 3D Rubik's Cube with CSS

Let's make a simple 3D Rubik's Cube today...

A brief discussion on the principle of js QR code scanning login

Table of contents The essence of QR code login Un...

Detailed explanation of mysql basic operation statement commands

1. Connect to MySQL Format: mysql -h host address...

Five solutions to cross-browser problems (summary)

Brief review: Browser compatibility issues are of...

Datagrip2020 fails to download MySQL driver

If you cannot download it by clicking downloadlao...