Reduce memory and CPU usage by optimizing web pages

Some web pages may not look large but may be very slow to open, while others may be very long but smooth to use, which is affected by the memory and CPU used in the user's computer.
Browser issues. Each browser has its own memory issues that can affect it, but there is almost no way to control it. On Windows:
· For IE series, the amount of memory recovered by refreshing is not large, but minimizing will release memory.
·Firefox 2 is said to recycle when minimized, but I have never seen the most garbage. It only 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 Windows. It uses as much memory as possible. If the browser occupies all the memory, it may kill the system.
Page problem: The browser will consume memory and CPU when rendering the page, so reduce it as much as possible.
Structure <br />Use DocType to tell the browser what you are using. HTML4 also has DTD. Maybe Transitional is more suitable for you. If you use XHTML and keep a good structure, remember to output the corresponding MIME and XML headers 1, which can reduce the browser's code inspection.
Keep the structure intact and don't let the browser complete the code for you.
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 introduced JS and CSS can be merged appropriately, and 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.
Performance <br />In most cases, the only difference between jpgs with quality 99 and 70 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 select 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.
Behavior <br />Don't import the entire prototype or jQuery just to use a $(), they do more.
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.

(Everyone is welcome to add more)

<<: Summary of commonly used SQL statements for creating MySQL tables

>>: JS implements a simple counter

Ideas and codes for realizing magnifying glass effect in js

Reduce memory and CPU usage by optimizing web pages

Ideas and codes for realizing magnifying glass effect in js

Sample code for deploying Spring-boot project with Docker

Detailed explanation of CSS3+JS perfect implementation of magnifying glass mode

Tutorial on installing the unpacked version of mysql5.7 on CentOS 7

Detailed explanation of Mysql master-slave synchronization configuration practice

Alibaba Cloud Centos7 installation and configuration of SVN

This article teaches you how to import CSS like JS modules

Map the mouse position in CSS and control the page elements by moving the mouse (example code)

JavaScript anti-shake case study

Detailed explanation of how NGINX counts the website's PV, UV, and independent IP

Recommend

A brief discussion on innodb's index page structure, insert buffer, and adaptive hash index

JS achieves five-star praise case

Complete steps for Docker to pull images

A brief discussion on value transfer between Vue components (including Vuex)

Some details about semicolons in JavaScript

HTML form application includes the use of check boxes and radio buttons

JS realizes the front-end paging effect

Vue state management: using Pinia instead of Vuex

Detailed steps for completely uninstalling MySQL 5.7

Detailed tutorial on deploying Jenkins based on docker

MySQL trigger syntax and application examples

MySQL 5.7.16 free installation version installation and configuration method graphic tutorial

MySQL quickly obtains the table instance code without primary key in the library

Diving into JS inheritance

MySQL cursor detailed introduction