Frontend performance optimization and specifications

Web performance involves a wide range, but generally web developers have encountered performance problems after the program is launched. The general manifestation is that the page speed starts to rapidly slow, and the normal access time changes to a long time, or simply throws an exception error page to you. There are many possible cases involved here. For example, there are several major cases: * when the maximum number of database connections is exceeded, the connection pool of the program is full and the connection to the database is denied. * Database deadlock * Web Server exceeds the maximum number of connections (usually restricted on the virtual host) * Memory leakage * too many HTTP connections, that is, the traffic volume exceeds the request and Response Process of the Service browser provided by the machine and software design. Step 1: browser preprocessing

Query cache: Read cache or send 304 requests

Step 2: query DNS optimization rules-Reduce DNS Lookup

DNS Cache

Browser DNS Cache computer DNS Cache Server DNS cache (TTL)

Use the keep-alive feature
Reduce DNS Lookup

When the DNS cache of the client is empty, the number of DNS queries is equal to the number of unique host names on the web page. By reducing the number of unique host names, you can reduce the number of DNS searches.

Fewer domain names to Reduce DNS lookup (2-4 hosts)

Step 3: establish connection optimization rules-Use the content delivery network

Top 10 Internet websites and CDN service providers in the United States

Static Page, depending on the publishing system

China-Cache and chinanetcenter used by Ctrip

Optimization rules -- divide page content by domain name

Divide domain names by page content and store files on appropriate resource servers

Step 4: Send request optimization rules-Reduce HTTP requests

HTTP request 30-40, merge file, image map, inline Image

A) JS files (no more than 7 files)

1. tuna_090501_base.js and tuna_090501_module.js (split tuna_090501.js) 2. Data File JS (1-2) 3. Channel public JS (1) and page private JS (1-2)

JS not including ga. JS, uiscript. asp, and other external links

B) no more than 4 CSS files, and no more than 3 homepage of each channel and full site.

 

C) what cannot be solved currently is the number of requests for Allyes ads.

• A large number of advertisements and product images may result in a large number of image requests, which may result in a tight overall request count index,

This can only be done from the design perspective and must be weighed

• The number of requests to CSS and JS files on old pages may exceed the limit.

 

Optimization rules--optimize CSS spirite

Ctrip homepage example

Optimization rules-avoid 404 errors and avoid invalid internal link Rules Optimization-do not use frameset, use less IFRAME search engine unfriendly,

The real-time content is empty. Loading also takes time and prevents page loading.

You are prohibited from using IFRAME to introduce external resources, excluding Allyes ads and empty pages of about: blank. Step 5: Wait for the response to the optimization rules-avoid redirection before the redirection is completed and the HTML download is completed, step 6, which involves server load, data query, and server cache, is not displayed to users: receive data optimization rules-compression Components

How to compress HTML documents, scripts, style sheets, XML and JSON text responses
Compression usually reduces the response data size by nearly 70%

Optimization rules-Simplified JavaScript and CSS

Remove unnecessary characters from the code to reduce the size and load time.

Rule rules-minimize page size

The page must be smaller than 150 KB (excluding images)
A) whether the static file is Gzip
B) whether the image has been compressed or not

Step 7: Read Cache Optimization rules-add expire or cache-control

Applies to infrequently changed components, including scripts, style sheets, flash components, and images.
Expires and cache-control

Rule rules-use external JS and CSS files

Try to use external JS and CSS as much as possible, because most of our current JS and CSS have implemented gzip and cache technologies to make full use of them.

Step 8: process elements

Do not perform gzip compression on binary files such as image and PDF.

Step 9: rendering Element Optimization rules -- place the style sheet on the top

The style sheet must be placed at the top of the page on the page prototype page. Developers must also place the style sheet at the top of the page for no special reason.

In the past, most style sheets were not allowed to be topped because of masterpage. We tried our best to follow this principle when modifying masterpage.

Optimization rules-it is recommended that the script be placed at the bottom

Generally, the browser can allow parallel downloads, depending on the number of hosts and bandwidth.

(By default, ie is 2, FF is 8)

Parallel download is actually disabled during script download.
 

Optimize rules -- remove duplicate scripts

Must be 0

Optimization rules -- avoid CSS expressions

The browser rendering time is affected.

Optimization rules-optimize images

Try to use GIF and PNG

Try to use images in PNG/GIF format. PNG images are preferred, but you must note that if you want to be compatible with IE6, you must pay attention to transparency when using PNG.

Before the last time, you must first use tools to compress and optimize images (PNG and jpg)

Javascript development specifications

A large project has several goals to achieve in front-end JS:

1. Code logic hierarchy
2. Avoid global variables
3. Convenient collaborative development
4. The code is modular and can be loaded as needed.
5. Keep global variables clean
6. Unit tests are available.

Recommended books

 

 

Post Note: http://www.cnblogs.com/and/p/3390676.html

Frontend performance optimization and specifications