How to reduce the memory usage and CPU usage of web pages _HTML/Xhtml_Web page production

Some webpages don’t look very big but are very laggy when opening. Some webpages are very long but can be used smoothly. This affects the memory and CPU of the user’s computer.

Browser issues, each browser will be affected by memory issues, but there is almost no way to control them. On Windows:

For IE series, the amount of refresh recovery is not large, but minimizing will release memory.
It is said that Firefox 2 will also minimize recycling, but I have never seen the most rubbish. It is used only as much as it is used, and it is basically not recycled. It is said that the prototype's ajax will also cause the memory to keep increasing.
Opera is the best. Always in good control. There is no problem. .
Linux’s memory allocation mechanism is different from Win’s. How much is used is used. If the browser takes up all the memory, it may kill the system.

Page problem. The browser will consume memory and CPU when rendering the page. Reduce it if you can.

Structurally
Use DocType to tell the browser what you are using. HTML4 also has DTD. Maybe Transitional is more suitable for you
If you are using XHTML and can maintain a good structure, remember to output the corresponding MIME and XML header 1, which can reduce the browser's code inspection.
Keep the structure intact and don't let the browser Help you complete the code.
Control the file size of the page. You can use the program to indent the code more comfortably for viewing. 2~3K is also a size.
iframe will generate a new page. In fact, there are many ways to replace iframe.
The introduced JS and CSS can be merged appropriately. Similarly, background images can also be merged. Some people even merge Flash
to give known width and height. The content image/Object plus the width attribute can reduce the partial re-rendering of the page
In terms of performance
In most cases, only the file size is different between jpg quality of 99 and 70. The same goes for gifs, especially small icons. The difference between 256 colors and 128 colors is the file size.
The flash moves too fast and consumes a lot of CPU. Controlling the number of frames per second and the effect of animation can be reduced. If the quality is medium and low, a lot of resources will be saved, but the effect will be sacrificed. . Quality attribute Sometimes it is more suitable to choose Autolow2 or Autohigh. There is no need to keep low or best.
Flash uses vector graphics to save file size, but calculating complex graphics and animations consumes the CPU. Too many complex filters will take up a lot of memory. The blur filter has been reduced 3.
IE’s filters also take up a lot of memory and also have compatibility issues. Full-screen translucency consumes resources.
A 2*2 image is about the same size as an 8*8 image, but the 2*2 tiled background takes up much more space.
GIF animation also has the concept of frames, just don’t play GIF as flash.
Behaviorally
Don’t import the entire prototype or jQuery just to use a $(), they do more.
AJAX is cool. But 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. Just pass in an additional object name, or write down the object name, or use jsonFlickrApi({"xxx":"xxx"}) like flickr, directly as a function, haha.
Don’t use display:none when achieving certain effects that can be solved by using visibility:hidden.
It doesn’t make much sense to emphasize that JS variables should pay attention to global and local variables, etc. The complexity of JS cannot be explained clearly in one or two sentences. Please pay attention to Yueying’s new book that is being published. ^^
Actually, a lot of the content here is similar to how to quickly render our web pages, but that article is mainly about processing the server side, but in many cases, saving server resource consumption will also save customers. end resource consumption.

Actually, this article has been sitting in the draft box for a long time and I haven’t had time to sort it out. What I am giving now is not complete, because it is not complete, so please add it slowly.

-------------------------------------------------- ----------------------------------

Create problems: Although it will cause browser mode problems, the problem can be solved. Refer to Serving up XHTML with the correct MIME type. The browser that sends the XML header will not display it fault-tolerantly. If an incorrect structure occurs, the entire page will not be displayed.
Autolow: Prioritize speed, but also improve appearance where possible. When playback begins, anti-aliasing is turned off. Flash Player turns on anti-aliasing if it detects that the processor can handle it.
Autohigh: At the beginning, playback speed and appearance are both equally important. If necessary, appearance will be sacrificed to ensure playback speed. When playback starts, anti-aliasing is 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-Aliasing command (View > Preview Mode > Anti-Aliasing).
Blur filter: When using the blur filter, 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 the performance can be improved Increase by 20% to 30% (flash helps a lot).