Best practices for front-end pages-3

From: http://hi.baidu.com/redstorm_wu/blog/item/011ca4fea05c463b5d600809.html1.1 get method to get Ajax request

Yahoo Mail team found that when XMLHttpRequest is used, the POST method is implemented in two steps in the browser. The first step is to send the request header, and the second is to send the request data; when the length of a GET request is less than 2 K, both requests and data are sent in a TCP packet. From the above findings, we can see that the POST request does not send data as the GET request. According to HTTP specifications, get is the method of querying information, and post is used to submit the data to be saved to the server. Therefore, when you only query data from the server, it is natural to use the get method.
1.2 delayed loading of page elements

You should carefully check the page to find out which content is required for the first page rendering and which content can be loaded later. In general, JS Code can be loaded with a delay, for example, JavaScript code that implements page dragging or animation effects. In addition, some delayed loading content includes hidden content on the initial Page and images under the folder (the page is not displayed when it is displayed for the first time, and is displayed only when the operator opens the folder.

If you can confirm that the page runs normally without JS, you can delay loading Js in the page to improve the customer experience.
1.3 load page elements in advance

Early loading seems to be the opposite of delayed loading. In fact, early loading and delayed loading have different targets. Delayed loading increases the response speed of the page by delaying the loading time of page elements. In advance loading, when the browser is idle, load the page elements that may be used in the future (such as images, style sheets, and scripts) in advance, so that the page that uses the content will get better response speed.

There are several types of advance loading: unconditional advance loading: as long as the onload event is triggered on the current page, some special page elements are loaded in advance. On Google's website, we can see the application of technology loading in advance. After a user opens the homepage (no search action has been performed), the browser starts to load images used for display of search results. Conditional advance loading: analyzes possible next actions based on user actions to perform advance loading. On the Yahoo Search homepage, we can see the application of this technology.
1.4 reduce the number of DOM elements

Complex pages require more storage space (which slows down the download of the page), and also slows down JavaScript access to the DOM elements of the page (because the complexity of the DOM tree increases ). If your page contains a large number of DOM elements, in most cases, this indicates that your page needs to be optimized. Do you only use table nesting for page layout? Or is there too many Div labels introduced in the page layout? You can use Yui CSS utilities to conveniently perform page layout operations and avoid introducing too many DOM objects.

Using firebug, you can easily check the number of DOM objects contained in the page. You only need to enter the following statement in the console: Document. getelementbytagname ('*'). length. How many DOM objects are contained on the page? There is no clear standard for this, but we can compare it with a better website to get the answer. For example, the home page of the Yahoo website contains a considerable amount of content, with less than 700 DOM objects.
1.5 split page elements into several domains

Separate the page content on servers of different domains to maximize concurrency. However, it should be noted that the best configuration for domain servers is 2-4. If there are more domain servers, the performance will be degraded because the DNS server needs to be searched frequently.
1.6 use less IFRAME

IFRAME allows you to embed a complete HTML page into the parent page. To use IFRAME more efficiently, you must understand the advantages and disadvantages of IFRAME.

Advantages of IFRAME: it is suitable for displaying content provided by a third party with slow display speed, including Trademark Logo and advertisement, providing a security sandbox, and downloading script code concurrently.

The disadvantage of IFRAME is that it consumes a lot of resources (even if a blank IFRAME is used, it will block page loading; it is speechless.
1.7 avoid 404 page

HTTP requests consume resources and are expensive. Therefore, it is absolutely wrong to let an HTTP request return a completely useless response (such as 404. Some websites provide useful "404" responses when they cannot find the requested content, for example, providing users with another choice. Even so, this interaction process still wastes server resources. The worst case is that an error occurs when an external JS request is made. First, when an external JS request is made, the download of other page elements will be blocked, the browser also needs to spend time parsing the 404 page returned by the server, which tries to find the request JS content from the response.
1.8 reduce cookie size

Cookies are used for verification and provide personalized responses. When the customer browses the page, the information in cookies is placed in the HTTP header and exchanged between the browser and the server. Therefore, we should minimize the size of cookies to reduce the consumption of resources for cookie information exchange. For more information about the problems caused by excessive cookies, see this analysis document: http://yuiblog.com/blog/2007/03/01/performance-research-part-3 /.

To control the size of cookies, follow these guidelines: Delete unnecessary cookies; Minimize the number of cookies; reasonably design the domain in which cookies reside, to avoid unnecessary primary domain cookies being introduced in subdomains; to properly set the timeout duration of cookies.
1.9 use a domain that does not support cookies

The browser requests a static image and sends cookies with the request. After receiving the request, the browser does not use cookies. These cookies only generate useless network traffic. Therefore, cookies should not be sent for all static HTTP requests. In actual work, you can create a subdomain to deploy all static elements on the subdomain and set the settings for this subdomain to not send cookies, thus improving the application response speed.

For example, if your application domain name is www.example.org, you may deploy the static content of the application to the domain name static.example.org. However, if you have set cookies on the top-level domain example.org, all requests to static.example.org will contain cookies. In this case, you need to purchase a brand new domain name to deploy the static content of the application to set the use of cookies. For example, Yahoo uses yimg.com to deploy static content, YouTube uses ytimg.com, and Amazon uses images-amazon.com.

Another advantage of not using cookies is that if a request carries cookies, some agents may refuse to cache the response to the request.
1.10 minimize Dom element access

Using js to access DOM elements is slow, so to get a faster response, you should follow the principle below: cache references to DOM elements to be accessed; update nodes "offline" and then add them to the tree; avoid setting the page layout using Js. For more information, visit http://yuiblog.com/blog/2007/12/20/video-lecomte /.
1.11 intelligent event handling

Sometimes the page response speed is slow because too many event processing methods are bound to the elements of the page DOM tree. These event processing methods are continuously executed, resulting in slow page response speed. Proxy can better solve this problem. Suppose there are 10 buttons in a DIV, binding an event processing method to a div is much more efficient than binding an event processing method to each button.

Another smart JS processing method is that your JS operations on page elements do not have to wait until the whole page is loaded. As long as the elements you access are created in the DOM tree of the page, you can reference this element, instead of loading all the images and styles on the page until the onload event is triggered.