WEB前端优化

找到一篇非常不错的关于WEB前端优化的文章：

http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/

 

 

性能对于网站而言是非常重要的。

Website performance is a hugely important topic, so much so that the big companies of the Web are obsessed with it. For the Googles, Yahoos, Amazons and eBays, slow websites mean fewer users and less happy users and thus lost revenue and reputation.

 

Google准备把网站的速度作为搜索排名的因素：

At PubCon, Matt Cutts from Google said there is strong lobbying in Google to introduce a new ranking factor into the algorithm. The new ranking factor has to do with how fast a site or page loads. Matt described this as one of his ‘what to expect in 2010′ bullet points in his presentation yesterday evening in Las Vegas.

参考：

http://searchengineland.com/site-speed-googles-next-ranking-factor-29793

http://www.downloadsquad.com/2009/11/14/google-to-use-page-load-speed-as-a-search-result-ranking-factor/

 

 

性能可以从各方面进行度量，一种是从技术的角度：检查页面加载的速度以及字节传输了多少；另外一种是从用户感知的角度，即用户体验测试的角度。

Performance can be measured in various ways. One way is technical: seeing how fast a page loads and how many bytes are transferred. Another is perceived performance, which ties into usability testing. This can only be measured by testing with users and seeing how satisfied they are with the speed of your interface (e.g. do they start clicking on your JavaScript carousel before it is ready?).

 

80%到90%的性能问题出现在Web前端，为了取得高性能的效果，我们不仅需要优化后台应用程序，还需要优化JavaScript、图片、CSS、HTML。

The good news (and hard truth) about performance is that 80 to 90% of poor performance happens in the front end. Once the browser gets the HTML, the server is done and the back-end developer can do nothing more. The browser then starts doing things to our HTML, and we are at its mercy. This means that to achieve peak performance, we have to optimize our JavaScript, images, CSS and HTML, as well as the back end.

 

影响页面加载速度的包括图片、脚本、样式表单。

 

浏览器对于脚本的处理过程：

1. Whenever the browser encounters a <script> block in the document, it calls up the JavaScript engine, sits back and has a coffee.
2. The script engine then looks at the content in the script block (which may have been delivered earlier), sighs, complains about the poor code, scratches its head and then does what the script tells it to do.
3. Once the script engine is done, it reports back to the browser, which puts down its coffee, says good-bye to the script engine and looks at the rest of the document (which might have been changed, because the script may have altered the HTML).

The moral of the story is to use as few script blocks as possible and to put them as far down the document as possible. You could also use clever and lazy JavaScript, but more on that later.

 

绝对有必要对图片进行优化：

Optimizing your images is absolutely necessary because most of the time they are the biggest files on page. I’ve seen people jump through hoops to cut their JavaScript down from 50 KB to 12 KB and then happily use a 300 KB logo or “hero shot” in the same document. Performance needs you!

 

可利用的一些工具包括：

1、Yahoo’s Yslow

YSlow is a Firebug add-on from Yahoo that allows you to automatically check your website for performance issues.

 

2、Google’s Page Speed

Like YSlow, Page Speed by Google is also an add-on for Firebug. Its main difference is that it does a lot of the optimization for you and provides the modified code and images immediately.

 

3、AOL’s WebPageTest

Rather late to the game, AOL’s WebPageTest is an application with some very neat features. (It is also available as a desktop application, in case you want to check Intranets or websites that require authentication.)

 

4、Google的Sprite Me

Sprite Me was produced by Google (under the supervision of Steve Souders) and allows you to create Sprites automatically from any website, even via a bookmarklet. It analyzes the images on a page and offers you various options before generating the Sprite and CSS for you.

 

使用图片整合技术

Image Sprites were first discussed in an article published by Dave Shea and based on the work of Petr Stanicek.

 

CSS Sprites它是为了提高网页读取速度而诞生的一种技术，或者可以说是一种技巧。

 

在传统做法中，我们希望把网页上的图片切割的越讲究（指降低图片大小）越好，但这起到的效果是微乎其微的，甚至都感觉不到。CSS Sprites 从减少服务器发送请求出发，告诉我们要把许多图片整合为一张，这样会更有效率。同时造成延迟的可能性也就越小。

 

 

5、Yahoo’s Smush It

You can use Smush.it directly in the browser or automatically from YSlow. The website tells you how many bytes you can save by optimizing your images.

 

 

使用Network Distributed Hosting技术

If you use a library or CSS provided by a library, make sure to use the hosted versions of the files. In the case of YUI, this is done for you if you use the configurator. And you can pick from Yahoo or Google’s network.

 

For other libraries, there is a Google code repository of AJAX libraries. This is useful for a few reasons:

    * Visitors to your website will get the JavaScript and CSS from the server that is as geographically close to them as possible and won’t have to wait for your server to send the information from around the globe.

    * There is a high probability that these servers are faster than yours.

    * Visitors who have visited other websites that use the same includes will already have them on their computers and won’t need to load them again.

    * You save on bandwidth and can easily upgrade the library by changing the version number of the include.