Home >Web Front-end >HTML Tutorial >Reduce memory and CPU usage by optimizing web pages_HTML/Xhtml_Web page production
Some webpages may not look big but will be very laggy when opened. Some webpages may be very long but can be used smoothly. These will be affected by occupying the memory and CPU of the user's computer.
Browser problems, each browser will affect memory processing, but there is almost no way to control it. On Windows:
·IE series, the amount of refresh recovery is not large, but minimization will release memory .
·Firefox 2 is said to be minimizing recycling, but I have never seen the most rubbish. It only uses what you use and basically does not recycle it. 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.
·The memory allocation mechanism of Linux is different from that of Win. Use only as much as you have. 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.
Structure
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 into content images with known width and height. /Object plus the width attribute can reduce partial re-rendering of the page
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 set to medium or low, a lot of resources will be saved, but the effect will be sacrificed. . Sometimes it is more suitable to choose Autolow2 or Autohigh for the quality attribute. 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 picture is about the same size as an 8*8 picture, 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.
Behavior
Don’t import an 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 you can use visibility:hidden to achieve certain effects.
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.
In fact, 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-side resource consumption will also save client-side resources. consumption.
(Everyone is welcome to add)