WEB前端优化

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

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

 

 

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

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

 

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

AtPubCon, Matt Cutts from Google said there is strong lobbying in Googleto introduce a new ranking factor into the algorithm. The new rankingfactor has to do with how fast a site or page loads. Matt describedthis 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/

 

 

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

Performancecan be measured in various ways. One way is technical: seeing how fasta page loads and how many bytes are transferred. Another is perceivedperformance, which ties into usability testing. This can only bemeasured by testing with users and seeing how satisfied they are withthe speed of your interface (e.g. do they start clicking on yourJavaScript 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-enddeveloper can do nothing more. The browser then starts doing things toour HTML, and we are at its mercy. This means that to achieve peakperformance, we have to optimize our JavaScript, images, CSS and HTML,as well as the back end.

 

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

 

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

1. Wheneverthe browser encounters a <script> block in the document, it callsup the JavaScript engine, sits back and has a coffee.
2. Thescript engine then looks at the content in the script block (which mayhave been delivered earlier), sighs, complains about the poor code,scratches its head and then does what the script tells it to do.
3. Oncethe script engine is done, it reports back to the browser, which putsdown its coffee, says good-bye to the script engine and looks at therest of the document (which might have been changed, because the scriptmay 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 necessarybecause most of the time they are the biggest files on page. I’ve seenpeople jump through hoops to cut their JavaScript down from 50 KB to 12KB and then happily use a 300 KB logo or “hero shot” in the samedocument. 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 Googleis also an add-on for Firebug. Its main difference is that it does alot of the optimization for you and provides the modified code andimages immediately.

 

3、AOL’s WebPageTest

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

 

4、Google的Sprite Me

Sprite Mewas produced by Google (under the supervision of Steve Souders) andallows you to create Sprites automatically from any website, even via abookmarklet. It analyzes the images on a page and offers you variousoptions 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.itdirectly in the browser or automatically from YSlow. The website tellsyou how many bytes you can save by optimizing your images.

 

 

使用Network Distributed Hosting技术

Ifyou use a library or CSS provided by a library, make sure to use thehosted versions of the files. In the case of YUI, this is done for youif you use the configurator. And you can pick from Yahoo or Google’snetwork.

 

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 theserver that is as geographically close to them as possible and won’thave to wait for your server to send the information from around theglobe.

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

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

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

<script type="text/javascript"><!--  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 YslowYSlow is a Firebug add-on from Yahoo that allows you to automatically check your website for performance issues. 2、Google’s Page SpeedLike 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 WebPageTestRather 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 MeSprite 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 ItYou 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.// --></script>