Website front-end and back-end performance optimization (net excerpt)

1. Reduce the number of http requests
Merge files, by placing all scripts in one script file or all style sheets in one style sheet file, thereby reducing the number of HTTP requests.
CSS Sprites are the preferred solution for reducing image requests. Combine all background images into one image, and use the CSS background-image and background-position properties to control the appropriate image area.
Inline images use the data: URL scheme to embed image data into the page, but this will increase the size of the Html document.
2. Use Content Distribution Network
Content Distribution Network (CDN) is a collection of servers distributed in different regions, which can send information to users more effectively. It chooses the server to send data to for a user based on a measure of domain distance. For example, the server with the fewest hops to reach the user or the fastest response speed will be selected.
3. Add an expiration date or Cache-Control to the header
For static components: Set the cache period of the header to some distant future so that it can "never expire".
For dynamic components: Use appropriate Cache-Control headers to help the browser perform specific requests.
4. Gzip compression component
The compression format specified by Accept-Encoding in the header of the HTTP request:
ν Accept-Encoding: gzip, deflate
ν Content-Encoding: gzip
5. Put the style sheet in front
Moving the style sheet to the head of the document can make the page load faster. Because placing the style sheet at the head allows the page to be rendered gradually.
6. Put the script at the end
Scripts may block concurrent downloads. The HTTP/1.1 specification recommends that browsers only perform two concurrent downloads per domain name.
Set up a lazy loading script, which can also be placed at the bottom of the page
7. Do not use CSS expressions
CSS expressions are a powerful (and dangerous) way to dynamically set CSS properties.

The problem with CSS expressions is that they are executed more often than most people would expect. Expressions are not only executed when the page is displayed and resized, but also when the page is scrolled and even when the user moves the mouse on the page. Adding a counter to a CSS expression can track when and how the CSS is executed. Moving the mouse around the page can easily generate more than 10,000 executions.
8. Using external JavaScript and CSS
Using external files in practical applications often produces faster pages because browsers cache JavaScript and CSS files. If JavaScript and CSS placed in external files are cached by the browser, there is no need to increase the number of HTTP requests and the size of the HTML document will be reduced.
9. Reduce DNS queries
DNS generally takes 20-120 milliseconds to look up the IP address of a given domain name. The browser won't download anything from the target domain name until the DNS lookup is complete.

10. Minify JavaScript and CSS

Minification refers to removing unnecessary letters from the code, reducing the file size and improving loading speed.

When reducing code, you need to remove all comments, as well as unnecessary whitespace (spaces, new lines and tabs).

Reduce the size of js or css files and improve responsive performance.

Code obfuscation is another optimization solution that can be used for source code.

Compress

16.在Ajax请求中使用GET方法

Yahoo! Mail 团队发现进行XMLHttpRequest的时候，POST方法在浏览器中分两步执行：先发送头部，然后发送数据。所以最好使用只发送一个TCP包（除非你有很多的cookie）的GET方法。IE中URL的最大长度是2000，所以如果你发送超过 2000的数据就不能使用GET方法。
一个有趣的现象是，POST方法并不像GET那样实际发送数据（而Get则名副其实）。基于 HTTP规范，GET方法意味着取回数据，所以当你只是请求数据时使用GET方法更为有意义（从语义上来说），而在发送需要储存在服务器端的数据时则相反使用POST。

17.后加载组件

你可以仔细端详下你的页面然后自问：“什么是在页面初始化时必须的？”那么其余的内容和组件可以放在后面。
JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单，它们可以稍后加载，因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容（当用户做某项操作才会展现的内容）和被折叠的图片。