|
Enough of small talk <br />Based on the large number of golden rules for building high-performance Yahoo websites found on the Internet, I would like to talk about my own rules.
The code is divided into 7 categories and 34 articles, including content, server, cookies, CSS, Javascript, images, and mobile applications.
1. Try to reduce HTTP requests <br />When a user loads your page, 80% of the time is used to download various items in the page, including pictures, styles, scripts, FLash, etc. Therefore, reducing HTTP requests can improve response speed. For example: Baidu, Google, there is just a line there...
As we all know, merging files, CSS Sprite, etc., what I want to say is: it is not just about reducing requests, but about weighing the impact on other factors after doing so.
Merged files: The coupling is large and the functional modules cannot be distinguished at a glance.
CSS Sprite: The difficulty of maintaining a large number of integrated images will increase exponentially.
In addition, until the super large integrated image is downloaded, it will not be displayed wherever it is used.
2. Reduce the number of DNS lookups <br />Each independent domain name will have a corresponding IP address. That is to say, when you enter www.baidu.com, the server will not know that you are looking for "baidu", but will resolve it into the corresponding IP address and then access it. Just like when you look up a phone book, the browser just sits there waiting for the parsing process, which usually takes 20 to 120 milliseconds.
The number of DNS lookups is the total number of different domain names you access to download CSS, JS, images, etc., including subdomains. External domains that are different from the primary domain will take more time.
Solution: Use CSS to solve some image styles and JS animation (the NB part of CSS3).
Place portable external domain resources under the subdomain.
3. Avoid redirects <br />Redirects are implemented using 301 and 302 codes, such as in the following HTTP request header:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
The browser will direct the user to the URL specified in Location, where Expires or Cache-Control must be specified if caching is required.
Although JS can achieve jump, in order to ensure that the back button works well, it is still necessary to use the 3XX status code.
This part seems to have nothing to do with pure front-end or not much contact, but in order to grow into a truly NB front-end, sooner or later you have to master these.
4. Cacheable AJAX
Everyone knows the significance of cache to users, so the cache function is indispensable in ajax.
But what I want to say is that you should decide whether to cache based on your needs.
IE automatically adds cache, but Chrome does not.
Here are some common ways to clear the cache:
On the server side, header("Cache-Control: no-cache, must-revalidate");
Add xmlhttpObj.setRequestHeader("If-Modified-Since","0"); before sending the ajax request
Add xmlhttpObj.setRequestHeader("Cache-Control","no-cache"); before sending ajax request
Add ?t="Math.random()" after the ajax URL parameter;
5. Delay loading of content
The performance and behavior of a web page should be separated, first the performance, then the behavior. Therefore, the first priority is to present the page quickly, then some necessary functional interactions, and then some animations or fancy effects to enhance the experience.
6. Preloading
The goal of preloading is to use asynchronous or browser idle time to load the content that is about to be used, so as to quickly respond to user operations.
For example:
In web games, the required images for the next scene are loaded during idle time.
The JS in the page uses the img object to preload the JS and then execute it on demand.
7. Reduce the number of DOM elements
A complex page means more data needs to be downloaded, which also means that JavaScript traversal of the DOM is slower.
Solution: Deeply understand the semantics of each tag and reduce the large number of DIVs listed for layout.
8. Divide page content by domain name
When a page is loaded, many external resources will be downloaded, such as CSS, JS, IMG, etc. However, classifying and distributing them under different subdomains will improve the efficiency of DNS parallel download.
Because the maximum number of connections allowed by the browser and the maximum number of connections allowed by each server are limited.
9. Avoid 404
HTTP overhead is huge, and it is completely unnecessary to use it to request a 404 response.
Exceptions are also not good for the site's SEO. Even if some websites have no restrictions on rabots.txt, you should upload an empty file. If not, the engine crawler will record a 404 for your site, thereby reducing the weight of your site.
|
