雅虎前端优化的35长条军规

 内容有

1.尽量减少HTTP请求数

  80%底极端用户应时间还花费在了前端上,其中大部分年华都在下载页面上的各种零部件:图片,样式表,脚本,Flash等等。减少组件数一定能减少页面提交的HTTP请求数。

  减少页面组件数的同种办法是简化页面设计。

  合并文件举凡由此把有脚论在一个文本中之法门来减少请求数的,当然,也得以合有的CSS。

  CSS
Sprites
大凡缩减图片请数量之首选办法。把背景图片都结至平布置图片被,然后据此CSS的background-imagebackground-position特性来恒定要显示的一些。

  图像投射足管多布置图合并成单张图,总大小是同样的,但减去了央数并加紧了页面加载。

  行内图片(Base64编码)data: URL模式来将图纸嵌入页面。这样见面追加HTML文件的深浅,把行内图片在(缓存的)样式表中是单好方法,而且成功避免了页面变“重”。  

  但眼前主流浏览器并无能够十分好地支持行内图片。

  减少页面的HTTP请求数是独起点,这是升格站点首坏走访速度之要紧点原则。

2.减少DNS查找

  域誉为系建立了主机名和IP地址间的投射,就如电话簿上姓名及编号的映照一样。当您以浏览器输入www.yahoo.com的时候,浏览器就是会见联系DNS解析器返回服务器的IP地址。DNS是来资本的,它要20到120毫秒去探寻给定主机名的IP地址。在DNS查找完成之前,浏览器无法从主机名下载任何东西。

  DNS查找被缓存起来重新敏捷,由用户之ISP(网络服务提供商)或者本地网络存在一个特别的缓存服务器上,但还好缓存在个人用户的微处理器及。DNS信息给保存在操作系统的DNS
cache(微软Windows上的”DNS客户端服务”)里。大多数浏览器有单独为操作系统的自己之cache。只要浏览器在温馨之cache里还保存在即长达记下,它便未会见朝着操作系统查询DNS。

  IE默认缓存DNS查找30分钟,写于DnsCacheTimeout注册表设置中。Firefox缓存1分钟,可以为此network.dnsCacheExpiration部署起设置。(Fasterfox把缓存时间转移化了1时
P.S. Fasterfox是FF的一个涨价插件)

  如果客户端的DNS
cache是拖欠的(包括浏览器的及操作系统的),DNS查找数等于页面上差之主机名数,包括页面URL,图片,脚本文件,样式表,Flash对象等等组件中之主机名,减少不同之主机名就是可抽DNS查找。

  减少不同主机名的数目而为减小了页面会互为下载的机件数量,避免DNS查找削减了响应时间,而减去并行下载数量却长了响应时间。我之极是拿组件分散于2到4单主机名下,这是又削减DNS查找和同意高并作下载的折中方案。

3.避免重定向

4.让Ajax可缓存

  Ajax的一个好处是得叫用户提供即时汇报,因为她会打后台服务器异步请求信息。然而,用了Ajax就无法保证用户在伺机异步JavaScript和XML响应返回期间未会见特别无聊。在多应用程序中,用户能够直接等候在如何使用Ajax。例如,在根据web的电子邮件客户端挨,用户为摸索可他们搜寻标准的邮件信息,将会保持对Ajax请求返回结果的体贴。重要的凡,要记得“异步”并无表示“即经常”。

  要增进性能,优化这些Ajax响应至关重要。最着重之增进Ajax性能的法门就是是让响应变得而缓存,就比如在添上Expires或者Cache-Control
HTTP头中讨论的相同。下面适用于Ajax的别规则:

  • Gzip组件
  • 减少DNS查找
  • 压缩JavaScript
  • 避免重定向
  • 配置ETags

5.延迟加载组件

  工具而辅助你减轻工作量:YUI Image
Loader可以缓加载折叠的图片,还有YUI Get
utility是一致种引入JS和CSS的略方法。Yahoo!主页就是一个例,可以打开Firebug的网络面板仔细看看。

  最好让性目标符合其它web开发最佳实践,比如“渐进增强”。如果客户端支持JavaScript,可以增进用户体验,但要保证页面在不支持JavaScript时为会健康干活。所以,在确定页面运行正常后,可以用部分推迟加载脚论增强她,以支撑部分拖放和动画之类的华丽效果。

6.预加载组件

  预加载可能拘留起与延缓加载是倒的,但它实际有不同的对象。通过预加载组件可以充分利用浏览器空闲的年华来求将来会见就此到之零部件(图片,样式与剧本)。用户访问下同样页的时光,大部分组件都曾经当缓存里了,所以当用户看来页面会加载得再快。

其实应用被生以下几栽预加载的种:

  • 义务预加载——尽快开始加载,获取有额外的零件。google.com就是一个sprite图片预加载的好例子,这个sprite图片并无是google.com主页需要之,而是找结果页面上的内容。
  • 条件性预加载——根据用户操作猜测用户将跳反至乌并因而预加载。在search.yahoo.com的输入框里键入内容后,可以视那些额外组件是什么请求加载的。
  • 提早预加载——在产新设计前面预加载。经常以还规划后会听到:“这个新网站是,但正如原先还慢了”,一部分原因是用户访问先前的页面都是产生老缓存的,但新的也是一律栽空缓存状态下的感受。可以由此在将要推出新规划前面预加载一些零部件来减轻这种负面影响,老站可以以浏览器空闲之时来呼吁那些新站需要的图片及剧本。

7.调减DOM元素的数据

8.跨域分离组件

  分离组件可以最大化并行下载,但倘若保管单独所以不超2-4个域,因为是DNS查找的代价。

9.尽量掉用iframe

从而iframe可以管一个HTML文档插入到父文档里,重要之凡明白iframe是哪行事的连飞速地用她。

<iframe>的优点:

  • 引入慢的老三着内容,比如标志以及广告
  • 平安沙箱
  • 互下载脚本

<iframe>的缺点:

  • 代价高昂,即使是空的iframe
  • 死页面加载
  • 非语义

10.杜绝404

  HTTP请求代价高昂,完全没有必要就此一个HTTP请求去得到一个无效的响应(比如404
Not Found),只会拖慢用户体验而从不其它功利。

css部分

11.免使CSS表达式

  用CSS表达式动态设置CSS属性,是同等栽强大又危险的道。从IE5开始支持,但从IE8起即非推荐应用了。

12.选择<link>舍弃@import

  前面提到了一个顶尖实践:为了落实逐步渲染,CSS应该放在顶部。

     在IE中用@import以及当脚用<link>成效一样,所以极不要就此它们。

13.免用滤镜

  IE专有的AlphaImageLoader滤镜可以就此来修复IE7之前的版本被半透明PNG图片的题目。在图片加载过程中,这个滤镜会阻塞渲染,卡住浏览器,还见面加内存消耗而是为使用至每个元素的,而不是每个图片,所以会满怀于同样非常堆问题。

  最好之不二法门是干脆不要因此AlphaImageLoader,而雅致地贬低到用在IE中支持性很好之PNG8图纸来替。如果不要是因此AlphaImageLoader,应该据此生划线hack:_filter来避免影响IE7及重新强版本的用户。

14.拿体制表放在顶部

  在Yahoo!研究性的当儿,我们发现将体制表放到文档的HEAD部分会于页面看起加载地重快。这是以将体制表放在head里会被页面逐步渲染

js部分

15.错过除还脚本

  IE会产生不必要之HTTP请求,而Firefox不会见。在IE中,如果一个不可缓存的表面脚论为页面引入了有限糟,它见面当页面加载时起两个HTTP请求。即使脚论是可缓存的,在用户还加载页面时也会生额外的HTTP请求。

  除了发生没有意思之HTTP请求外界,多次对准下论求值也会见浪费时间。因为不管脚论是否可缓存,在Firefox和IE中还见面履冗余的JavaScript代码。

16.尽量减少DOM访问

就此JavaScript访问DOM元素是挺缓慢的,所以,为了让页面反应更快捷,应该:

  • 缓存已访过的元素的目录
  • 优先“离线”更新节点,再把它添到DOM树上
  • 避用JavaScript修复布局问题

17.用智能的事件处理器

  有时候感觉页面反映不够利索,是盖发极多累执行的事件处理器被添加到了DOM树的差因素上,这就是是引进用事件委托的原由。如果一个div内部来10个按钮,应该一味被div容器添加一个事件处理器,而非是受每个按钮都加上一个。事件能冒泡,所以可以捕获事件并查获哪个按钮是事件源。

18.把下论在脚

  脚本会阻塞并行下载,HTTP/1.1合法文档建议浏览器每个主机名下并行下载的零件数不苟过两独,如果图片源于多个主机名,并推行下载的数额就是好超越两只。如果脚本正在下载,浏览器就是无起头任何其他下载任务,即使是以不同主机名下的。

  有时候,并无轻把脚论活动到脚。举个例子,如果下论是为此document.write栽到页面内容被的,就从未有过办法重新朝着生转移了。还可能存在作用域问题,在多数情况下,这些题目都是足以化解的。

  一个周边的提议是为此推迟(deferred)脚本,有DEFER属性之脚本意味着不能够含有document.write,并且提示浏览器告诉她们得延续渲染。不幸的凡,Firefox不支持DEFER性能。在IE中,脚本可能吃延迟,但非顺畅。如果脚本可以推迟,我们不怕好将她坐页面底部,页面就可另行快地载入。

javascript, css 

19.拿JavaScript和CSS放到外面

  很多性能原则都是关于什么管理外部组件的,然而,在这些顾虑出现之前若应该咨询一个重复基础之题材:应该将JavaScript和CSS放到外部文件被要么一直写以页面里?

  实际上,用外表文件可以给页面重新快,因为JavaScript和CSS文件会给缓存在浏览器。HTML文档中的行内JavaScript和CSS在历次要该HTML文档的时刻还见面再也下载。这样做缩减了所用的HTTP请求数,但加了HTML文档的轻重。另一方面,如果JavaScript和CSS在表文件被,并且已被浏览器缓存起来了,那么我们就成地管HTML文档变多少了,而且还从来不加HTTP请求数。

20.压缩JavaScript和CSS

  压缩具体来说就是从代码中失去除不必要之字符以减掉大小,从而升级加载速度。代码最小化就是错过丢所有注释和免必要之空白字符(空格,换行和tab)。在JavaScript中如此做能加强响应性能,因为若下载的文本变多少了。两个极端常用之JavaScript代码压缩工具是JSMin和YUI
Compressor,YUI compressor还得压缩CSS。

  混淆是一致栽而选取的源码优化措施,要比较压缩更扑朔迷离,所以混淆过程为重新爱有bug。在对美国面前十底网站调查被,压缩可以缩小21%,而混淆能缩小25%。虽然混淆的压缩程度更强,但较压缩风险又怪。

  除了压缩外部脚本和体裁,行内的<script><style>片也得以减。即使启用了gzip模块,先进行压缩为能够缩小5%要另行多之大小。JavaScript和CSS的用途越来越多,所以压缩代码会生正确的职能。

图片

21.优化图片

  • 尝将GIF格式转换成PNG格式,看看是不是节省空间。在有着的PNG图片及运行pngcrush(或者其他PNG优化工具)

22.优化CSS Sprite

  • 当Sprite图片中横向排一般还较纵向排列的终极文件小
  • 结合Sprite图片被的相似颜色可维持低色数,最妙的凡256色以下PNG8格式
  • “对运动端好”,不要以Sprite图片被留下最死之空当。虽然非见面在充分死程度达到影响图片文件之尺寸,但如此做可以省用户代理将图纸解压成像素映射时消耗的内存。100×100底图样是1万单像素,而1000×1000的图片就是100万独如从了。

23.不要就此HTML缩放图片

  不要因在HTML中得设置宽高而利用以不欲的大图。

24.据此粗之可缓存的favicon.ico(P.S. 收藏夹图标)

  favicon.ico是位于服务器根目录的图片,它会带一样积聚麻烦,因为就是你管其,浏览器也会自动请求其,所以极不用给一个404 Not Found响应。而且只要以同一个服务器上,每次要其时犹见面发送cookie,此外这个图还会见惊动下载顺序,例如在IE中,当您于onload中要求额外组件时,将会优先下载favicon。

  所以为了化解favicon.ico的弱项,应该保证:

  • 足够小,最好在1K以下
  • 安合适的有效期HTTP头(以后只要想更换的语就是不能够重命名了),把有效期设置为几独月后一般比较安全,可以透过检查时favicon.ico的最后修改日期来保管反能于浏览器知道。

 cookie

25.给Cookie减肥

运cookie的因由来很多,比如授权和个性化。HTTP头中cookie信息在web服务器和浏览器中交换。重要之是包cookie尽可能的小,以极端小化对用户应时间的熏陶。

  • 打消不必要的cookie
  • 包cookie尽可能小,以最好小化对用户应时间的熏陶
  • 瞩目让cookie设置合适的地域级别,以免影响其他子域
  • 装合适的有效期,更早的有效期或none可以再快之去除cookie,提高用户应时间

26.管组件放在不含有cookie的域下

  当浏览器发送对静态图像的呼吁时,cookie也会见共同发送,而服务器根本无需这些cookie。所以她只是见面导致没意义的纱通信量,应该保证对静态组件的请求不带有cookie。可以创建一个子域,把拥有的静态组件都配备在当年。

移动端 

27.保所有组件都自愧不如25K

  这个界定是坐iPhone不可知缓存大于25K的零部件,注意这里依的凡休减的分寸。这虽是胡缩减内容本身吗蛮重大,因为只有的gzip可能不够。

28.把组件封装到一个复合文档里

  把各个零部件打包改成一个如发附件的电子邮件一样的复合文档里,可以为此一个HTTP请求获取多个零部件(记住一点:HTTP请求是代价高昂的)。用这种艺术的当儿,要优先检查用户代理是否支持(iPhone就未支持)。

服务器

29.Gzip组件

前者工程师可以想艺术明确地缩水通过网传输HTTP请求与应的时刻。毫无疑问,终端用户的带富速度,网络服务商,对顶交换点的离等等,都是开团队所无法控制的。但还有别的能够影响响应时间的元素,压缩可以经减HTTP响应的轻重来浓缩响应时间。

打HTTP/1.1开始,web客户端就时有发生矣支撑压缩的Accept-Encoding HTTP请求头。

1
Accept-Encoding: gzip, deflate

  如果web服务器看到此要头,它就是见面就此客户端列出之一致种方法来减响应。web服务器通过Content-Encoding相应头来通知客户端。

1
Content-Encoding: gzip

  尽可能多地用gzip压缩能够被页面减肥,这吗是升级用户体验最好简便易行的法。

30.避免图纸src属性为空

会面唤起的题目:浏览器会向服务器发送另一个请。

31.配置ETags

实业标签(ETags),是服务器和浏览器用来决定浏览器缓存中组件和自服务器受到之零件是否配合的相同栽机制(“实体”也尽管是组件:图片,脚本,样式表等等)。添加ETags可以供平等栽实体验证机制,比最后修改日期越来越灵活。一个ETag是一个字符串,作为一个组件有平切实可行版本的唯一标识符。唯一的格式约束是字符串必须用引号括起来,源服务器用相应头挨之ETag来指定组件的ETag:

1
2
3
4
HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

  然后,如果浏览器必须证明一个零部件,它因此If-None-Match请头来管ETag传回源服务器。如果ETags匹配成功,会返回一个304状态码,这样即使抽了12195只字节的响应体。

GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified

32.对Ajax用GET请求

  使用XMLHttpRequest不时,浏览器的POST请求是通过一个两步底过程来兑现的:先发送HTTP头,在发送数据。所以极好用GET请求,它只待发送一个TCP报文(除非cookie特别多)。IE的URL长度最大值是2K,所以只要只要发送的数额超过2K即使无法使用GET了。

  POST请求的一个好玩之副作用是实在没有发送任何数据,就如GET请求一样。正使HTTP说明文档中讲述的,GET请求是用来探寻信息之。所以它们的语义只是用GET请求来呼吁数据,而非是为此来发送需要仓储到服务器的数。

33.尽早清空缓冲区

当用户要一个页面时,服务器需要用大约200交500毫秒来组装HTML页面,在即时期间,浏览器闲等在数量达。PHP中来一个flush()函数,允许为浏览器发送一部分既准备结束的HTML响应,以便浏览器可当后台准备剩余部分的又开取组件,好处主要体现在非常忙碌的后台或者很“轻”的前端页面及(P.S.
也就是说,响应时消耗主要以后台方面经常最能体现优势)。

  较出色的清空缓冲区的岗位是HEAD后面,因为HTML的HEAD部分日常更易于变,并且同意引入任何CSS和JavaScript文件,这样虽好叫浏览器在后台还在拍卖的时光就是开始相互获取组件。

34.使用CDN(情节分发网络

  用户以及服务器的情理距离对响应时间吧闹影响。把内容安排在多单地理位置分散的服务器上会让用户更快地载入页面。但现实而怎么开吧?

  实现内容在地理位置上散落的率先步是:不要品味去还规划而的web应用程序来适应分布式结构。这取决于应用程序,改变结构或包括有深受丁心惊胆战之任务,比如同会话状态和超越服务器复制数据库事务(翻译或者未确切)。缩短用户和内容里离开的提议可能给推迟,或者从不容许通过,就是以这难题。

  记住终端用户80%交90%之应时间还花费在下载页面组件上了:图片,样式,脚本,Flash等等,这是功绩黄金法则。最好先疏散静态内容,而非是平等开始就是再度设计应用程序结构。这不但能大大减少响应时间,还又易于表现有CDN的功绩。

  内容分发网络(CDN)是同一组分散在不同地理位置的web服务器,用来为用户更高效地发送内容。典型地,选择用来发送内容的服务器是依据网络距离的衡量标准的。例如:选跳数(hop)最少之要么响应时间太抢的服务器。

35.添上Expires或者Cache-Control HTTP头

这条规则来一定量只地方:

  • 对此静态组件:通过安装一个悠久的未来日作为Expires来落实永不失效
  • 结余动态组件:用相当的Cache-ControlHTTP头来受浏览器进行条件性的请

  网页设计更加长,这表示页面里发生双重多之台本,图片及Flash。站点的初访客可能还是只能交给几单HTTP请求,但经使用有效期能于组件变得可缓存,这避免了以接下的浏览过程中不必要的HTTP请求。有效期HTTP头通常给用当图上,但其该用当具备组件上,包括剧本、样式和Flash组件。

  浏览器(和代理)用缓存来减少HTTP请求的数及尺寸,让页面会还快加载。web服务器通过有效期HTTP响应头来告诉客户端,页面的逐一零部件应该于缓存多久。用一个马拉松的明天光阴开有效期,告诉浏览器是响应在2010年4月15日前未见面变动。

1
Expires: Thu, 15 Apr 2010 20:00:00 GMT

  

假如您用底凡Apache服务器,用ExpiresDefault指令来设置相对于即日期的有效期。下面的事例设置了起呼吁时自10年之有效期:

ExpiresDefault "access plus 10 years"

 

相关文章