首页 > 网站 > 优化推广 > 正文

Yahoo对Web前端优化的14条经验拔萃

2024-04-26 14:03:44
字体:
来源:转载
供稿:网友

规则1——减少HTTP请求(Minimize HTTP Requests)
    只有10%~20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%~90%时间都花在HTML文档所引用的所有组件(图片、脚本、样式表、Flash等)进行的HTTP请求上。因此,改善响应时间最简单的办法就是减少组件数量并由此减少HTTP请求数。减少组件数量通常会和产品设计的初衷相矛盾,因此,此处给出了一些技术:

   图片地图(Image Maps)联合多个图片到一个单独的图片中。下载图片大小的总和保持不变,但是,通过减少HTTP请求数的方式加速了页面。图片地图适用于导航栏或其他超链接中使用多个图片的情形。但是,在定义图片地图上的区域坐标时,如果采用手工方式很难完成且容易出错,而且除了矩形外几乎无法定义其他形状。

   CSS Sprites使用CSS background-image和background-position属性将多个图片联合成一个独立的图片来显示。它通过合并图片减少了HTTP请求,并且比图片地图更加灵活,同时也降低了图片的下载量。如果在页面中需要为背景、按钮、导航栏、链接等提供大量图片,CSS Sprites是一种优秀的解决方案。

   内联图片(Inline images)使用data: URL scheme模式将图片嵌入到HTML文档中。通过此模式嵌入图片,不需要任何额外的HTTP请求开销。但是,目前的主流浏览器(主要是IE)不支持此种方式。

   合并文件(Combined files)通过将所有JavaScript脚本合并到一个文件,所有CSS样式表合并到另一个文件的方式来减少HTTP请求的数量。但是简单的合并通常会遇到模块化、页面变化等问题,需要根据页面引用脚本和样式表来具体分析以确定具体的组合方式。

规则2——使用内容发布网络(Use a Content Delivery Network)
    用户同Web服务器的距离会对页面响应时间产生影响。网站最初通常将其所有服务器放在同一个地方,当用户群增加时,公司必须面对服务器放置地点不再合适的事实。因此,有必要在多个地理位置不同的服务器上部署内容。

   作为实现地理位置分离的第一步,不应当首先尝试使用分布式架构重新设计Web应用程序。这样的应用程序决定了重新设计将带来如同步会话状态、在服务器放置地点间复制数据库事务等复杂问题。重新设计会推迟甚至根本无法实现缩短用户和网站内容距离的愿望。

   如果应用程序Web服务器里用户更近,则一个HTTP请求的响应时间将被缩短;如果组件Web服务器离用户更近,则多个HTTP请求的响应时间将缩短。因此,与其重新开始设计应用程序,以便将应用程序Web服务器分散开,不如首先将组件Web服务器分散开。这不仅能达到响应时间大幅减少的目的,还很容易实现。

   内容发布网络(CDN)是一组分布在多个不同地理位置的Web服务器,用于更加有效的向用户发布内容。向特定用户发布内容的服务器基于对网络可用度的测量,例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。

   除了缩短响应时间外,CDN还可以带来其他优势,包括备份、扩展存储能力和进行缓存;同时,CDN还有助于缓和Web流量峰值的压力,如在获取天气或股市新闻、浏览体育或娱乐事件时。依赖CDN的一个缺点是网站的响应时间会受到其他网站——甚至可能是竞争对手流量的影响;另一个缺点是无法直接控制组件服务器所带来的问题。

  CDN用于发布静态内容(如图片、脚本、样式表、Flash)。提供动态HTML页面会引入特殊的存储要求——数据库连接、状态管理、验证、硬件和OS优化等,这些复杂性超过了CDN的范围。另一方面,静态文件更容易存储并具有较少的依赖。

规则3——添加Expires头(Add an Expires or a Cache-Control Header)
   Web页面包含大量组件,并且数量在不断增长。页面的初访者会进行很多的HTTP请求,但通过一个长久的Expires头,可以使这些组件被缓存下来,可以在后续的页面浏览中避免不必要的HTTP请求。长久的Expires头最长用于图片,但应该将其用于所有组件上,包括脚本、样式表和Flash。

Web服务器使用Expires头告诉Web客户端它可以使用一个组件的当前副本,知道指定时间为止。HTTP规范中简要的称该头为“在这一日期/时间之后,响应将被认为是无效的”。例如:

复制代码
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表