《条雅虎十四条优化原则.docVIP

Yahoo 14条 雅虎十四条 优化原则【转】 腾讯前端设计的Leader推荐我背熟的。请大家都能好好学习，不要像我一样一扫而过，好好的记下来！不仅仅是晓得一些CSS xhtml就好了，深刻认识到很多的东西需要学习的。很早就用Firebug，但是却没听说过Yslow，这叫不喜欢追求。希望大家关注前端设计的，多追求。 有兴趣的同学可以装个 Firebug 下的 Yslow ，测试下自己的网站。 Web 应用性能优化黄金法则：先优化前端程序 (front-end) 的性能，因为 这是 80% 或以上的最终用户响应时间的花费所在。 法则 1. 减少 HTTP 请求次数80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素， 如图像、 样式表、 脚本和 Flash 等，的下载上。 减少页面元素将会减少 HTTP 请求 次数。这是快速显示页面的关键所在。 一种减少页面元素个数的方法是简化页面设计。 但是否存在其他方式，能做到既 有丰富内容，又能获得快速响应时间呢？以下是这样一些技术： Image maps 组合多个图片到一张图片中。总文件大小变化不大，但减少了 HTTP 请求次数从而加快了页面显示速度。 该方式只适合图片连续的情况；同时坐标的 定义是烦人又容易出错的工作。 CSS Sprites 是更好的方法。它可以组合页面中的图片到单个文件中，并使用 CSS 的 background-image 和 background-position 属性来现实所需的部分图片。 Inline images 使用 data: URL scheme 来在页面中内嵌图片。这将增大 HTML 文 件的大小。组合 inline images 到你的（缓存）样式表是既能较少 HTTP 请求， 又能避免加大 HTML 文件大小的方法。 Combined files 通过组合多个脚本文件到单一文件来减少 HTTP 请求次数。样式 表也可采用类似方法处理。 这个方法虽然简单，但没有得到大规模的使用。 大 10 美国网站每页平均有 7 个脚本文件和 2 个样式表。当页面之间脚本和样式表变化 很大时，该方式将遇到很大的挑战，但如果做到的话，将能加快响应时间。 减少 HTTP 请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的 作用。 Tenni Theurer 的文章 Browser Cache Usage – Exposed!描述，40-60% 据 的日常访问是首次访问，因此为首次访问者加快页面访问速度是用户体验的关 键。 法则 2. 使用 CDN(Content Delivery Network, 内容分发网络 ) 用户离 web server 的远近对响应时间也有很大影响。从用户角度看，把内容部 署到多个地理位置分散的服务器上将有效提高页面装载速度。 但是该从哪里开始 呢？ 作为实现内容地理分布的第一步，不要试图重构 web 应用以适应分布架构。 改变 架构将导致多个周期性任务，如同步 session 状态，在多个 server 之间复制数 据库交易。 这样缩短用户与内容距离的尝试可能被应用架构改版所延迟，或阻止。 我们还记得 80-90%的最终用户响应时间花在下载页面中的各种元素上，如图像 文件、 样式表、 脚本和 Flash 等。 与其花在重构系统这个困难的任务上，还不如先 分布静态内容。 这不仅能大大减少响应时间，而且由于 CDN 的存在，分布静态内 容非常容易实现。 CDN 是地理上分布的 web server 的集合，用于更高效地发布内容。 通常基于网络 远近来选择给具体用户服务的 web server。 一些大型网站拥有自己的 CDN，但是使用如 Akamai Technologies, Mirror Image Internet, 或 Limelight Networks 等 CDN 服务提供商的服务将是划算的。 在 Yahoo!把静态内容分布到 CDN 减少了用户影响时间 20%或更多。切换到 CDN 的 代码修改工作是很容易的，但能达到提高网站的速度。 法则 3. 增加 Expires Header网页内容正变得越来越丰富，这意味着更多的脚本文件、样式表、图像文件和 Flash。 首次访问者将不得不面临多次 HTTP 请求，但通过使用 Expires header， 您可以在客户端缓存这些元素。这在后续访问中避免了不必要的 HTTP 请求。 Expires header 最常用于图像文件，但是它也应该用于脚本文件、样式表和 Flash。 浏览器（和代理）使用缓存来减少 HTTP 请求的次数和大小，使得网页加速装载。 Web server 通过 Expires header 告诉客户端一个元素可以缓存的时间长度。