Home Web Front-end HTML Tutorial Reduce memory and CPU usage by optimizing web pages_HTML/Xhtml_Web page production

Reduce memory and CPU usage by optimizing web pages_HTML/Xhtml_Web page production

May 16, 2016 pm 04:45 PM
optimization Memory reduce occupy Can Browser Web page pass reduce page

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)

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1268
29
C# Tutorial
1246
24
How to register an account on Ouyi Exchange Ouyi Exchange Registration Tutorial How to register an account on Ouyi Exchange Ouyi Exchange Registration Tutorial Apr 24, 2025 pm 02:06 PM

The steps to register an Ouyi account are as follows: 1. Prepare a valid email or mobile phone number and stabilize the network. 2. Visit Ouyi’s official website. 3. Enter the registration page. 4. Select email or mobile phone number to register and fill in the information. 5. Obtain and fill in the verification code. 6. Agree to the user agreement. 7. Complete registration and log in, carry out KYC and set up security measures.

Binance download link Binance download path Binance download link Binance download path Apr 24, 2025 pm 02:12 PM

To safely download the Binance APP, you need to go through the official channels: 1. Visit the Binance official website, 2. Find and click the APP download portal, 3. Choose to scan the QR code, app store, or directly download the APK file to download to ensure that the link and developer information are authentic, and enable two-factor verification to protect the security of the account.

Download the official website of Ouyi Exchange app for Apple mobile phone Download the official website of Ouyi Exchange app for Apple mobile phone Apr 28, 2025 pm 06:57 PM

The Ouyi Exchange app supports downloading of Apple mobile phones, visit the official website, click the "Apple Mobile" option, obtain and install it in the App Store, register or log in to conduct cryptocurrency trading.

Sesame Open Door Official Website Entrance Sesame Open Door Official Latest Entrance 2025 Sesame Open Door Official Website Entrance Sesame Open Door Official Latest Entrance 2025 Apr 28, 2025 pm 07:51 PM

Sesame Open Door is a platform that focuses on cryptocurrency trading. Users can obtain portals through official websites or social media to ensure that the authenticity of SSL certificates and website content is verified during access.

Binance official website entrance Binance official latest entrance 2025 Binance official website entrance Binance official latest entrance 2025 Apr 28, 2025 pm 07:54 PM

Visit Binance official website and check HTTPS and green lock logos to avoid phishing websites, and official applications can also be accessed safely.

How to register an account on Sesame Open Exchange? Tutorial on Registration of Sesame Open Exchange How to register an account on Sesame Open Exchange? Tutorial on Registration of Sesame Open Exchange Apr 24, 2025 pm 02:00 PM

Registering a Sesame Door Account requires 7 steps: 1. Prepare a valid email or mobile phone number and a stable network; 2. Visit the official website; 3. Enter the registration page; 4. Select and fill in the registration method; 5. Obtain and fill in the verification code; 6. Agree to the user agreement; 7. Complete registration and log in, it is recommended to carry out KYC and set security measures.

What is on-chain transaction? What are the global transactions? What is on-chain transaction? What are the global transactions? Apr 22, 2025 am 10:06 AM

EU MiCA compliance certification, covering 50 fiat currency channels, cold storage ratio 95%, and zero security incident records. The US SEC licensed platform has convenient direct purchase of fiat currency, a ratio of 98% cold storage, institutional-level liquidity, supports large-scale OTC and custom orders, and multi-level clearing protection.

What to do if the USDT transfer address is incorrect? Guide for beginners What to do if the USDT transfer address is incorrect? Guide for beginners Apr 21, 2025 pm 12:12 PM

After the USDT transfer address is incorrect, first confirm that the transfer has occurred, and then take measures according to the error type. 1. Confirm the transfer: view the transaction history, obtain and query the transaction hash value on the blockchain browser. 2. Take measures: If the address does not exist, wait for the funds to be returned or contact customer service; if it is an invalid address, contact customer service and seek professional help; if it is transferred to someone else, try to contact the payee or seek legal help.

See all articles