从雅虎军规看前端性能优化分分快三计划

作者:分分快三计划

       关注性能的前端工程师希望页面逐步加载; 也就是说,我们希望浏览器尽快显示它拥有的任何内容。这对于具有大量内容的页面和对较慢Internet连接的用户尤其重要。为用户提供视觉反馈(例如进度指示器)的重要性已得到很好的研究和记录。在我们的例子中,HTML页面是进度指示器!当浏览器逐步加载页面时,标题,导航栏,顶部的徽标等都作为等待页面的用户的视觉反馈。这改善了整体用户体验。

4.1 将CSS放在顶部

在研究Yahoo!的性能时,我们发现将样式表移动到文档HEAD会使页面看起来加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现。

关注性能的前端工程师希望页面被逐步渲染,这时因为,我们希望浏览器尽早渲染获取到的任何内容。这对大页面和网速慢的用户很重要。给用户视觉反馈,比如进度条的重要性已经被大量研究和记录。在我们的情况中,HTML页面就是进度条。当浏览器逐步加载页面头部,导航条,logo等等,这些都是给等待页面的用户的视觉反馈。这优化了整体用户体验。

把样式表放在文档底部的问题是它阻止了许多浏览器的逐步渲染,包括IE。这些浏览器阻止渲染来避免在样式更改时需要重绘页面元素。所以用户会卡在白屏。

规则4—压缩组件(使用gzip编码压缩HTTP响应包)

   从HTTP1.1开始,Web客户端可以通过添加HTTP请求头Accept-Encoding来表示对压缩的支持

/*从客户端发送到服务器*/Accept-Encoding: gzip, deflate

    如果Web服务器看到请求中有这个头,就会使用客户端列出来的方法中的一种来压缩响应。Web服务器通过响应中的Content-Encoding头来通知Web客户端。

/*从客户端发送到服务器*/Content-Encoding: gzip

gzip是目前最流行和有效的压缩方法。

       30.优化CSS Sprites 

5.3 压缩JavaScript 和 CSS

压缩就是删除代码中不必要的字符来减小文件大小,从而提高加载速度。当代码压缩时,注释删除,不需要的空格(空白,换行,tab)也被删除。

规则10—精简Javascript

    精简是从代码中移除不必要的字符以减小其大小,进而改善加载时间的实践。在代码被精简后,所有的注释以及不必要的空白字符(空格、换行和制表符)都将被移除。对于 JavaScript 而言,这可以改善响应时间效率,因为需要下载的文件大小减小了。
精简 CSS 能够带来的节省通常要小干精简 JavaScript, 因为通常 CSS 中的注释和空白比JavaScript少。最大的潜在节省来自于优化 CSS——合并相同的类、移除不使用的类等。CSS的依赖顺序的本质决定了这将是一个复杂的问题。这个领域还需要进一步研究和工具开发。最佳的解决方案还是移除注释和空白 ,并进行一些直观的优化,比如使用缩写(用 “#606” 代替 “#660066”和移除不必要的字符串 (用 “0”代替 “Opx”)。
在线 JS/CSS/HTML压缩工具
http://tool.oschina.net/jscompress

为了提高性能,优化这些Ajax响应非常重要。提高Ajax性能的最重要方法是使响应可缓存,如添加Expires或Cache-controll标头中所述。其他一些规则也适用于Ajax:

6.3 不要在HTML中缩放图片

不要使用比您需要的更大的图像,因为您可以在HTML中设置宽度和高度。如果您需要, <img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 那么您的图像(mycat.jpg)应该是100x100px而不是缩小的500x500px图像。

规则13—配置ETag(或者干脆不使用)

   在熟悉这条规则之前,最后看一下http协议中关于缓存的知识。
实体标签(ETag)是 Web 服务器和浏览器用于确认缓存组件的有效性的一种机制,在进入 ETag的细节之前,我们先回顾一下组件是如何被缓存和确认有效性的。
   当请求一个组件时,服务器会根据其选项在响应中返回一个Expires头,浏览器会缓存该组件

/*从服务器发送到客户端*/Expires:Mon, 15 Apr 2017 20:00:00 GMT

如果缓存的组件过期了(或者用户明确地重新加载了页面 浏览器在重用它之前必须首先检査它是否仍然有效)
服务器在检测缓存的组件是否和原始服务器上的组件匹配时有两种方式

  •  比较最新修改日期(Last-Modified)
  •  比较实体标签(Etag)

最新修改日期:(仅举例说明,示例测试可能已过期)

  •  比较最新修改日期(Last-Modified)
  •  比较实体标签(Etag)

最新修改日期:(仅举例说明,示例测试可能已过期)
原始服务器通过 Last-Modified 响应头来返回组件的最新修改日期。

/*客户端请求*/GET /i/yahoo.gif  HTTP 1.1Host: us.yimg.com

/*服务器应答*/
HTTP 1.1 200 OKLast-Modified:tue, 12 Dec 2006 03:03:59 GMTContent-Length: 1195

  下一次请求时浏览器会使用 If-Modified-Since 头将最新修改日期传回到原始服务器以进行比较。如果原始服务器上组件的最新修改日期与浏览器传回的值匹配,会返回一个304 响应。

/*客户端请求*/GET /i/yahoo.gif  HTTP 1.1Host: us.yimg.comIf-Modified-Since:Tue,12 Dec 2006 03:03:59 GMT

/*服务器应答*/HTTP 1.1 304 Not Modified

实体标签:    ETag 提供了另外一种方式,用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。ETag 在 HTTP1.1中引入。 ETag是唯一标识了一个组件的一个特定版本的字符串。唯一的格式约束是该字符串必须用引号引起来。原始服务器使用 ETag 响应头来指定组件的 ETag。

/*客户端请求*/GET /i/yahoo.gif  HTTP 1.1Host: us.yimg.com

/*服务器应答*/HTTP 1.1 200 OKLast-Modified:tue, 12 Dec 2006 03:03:59 GMTETag: "10c24bc-4ab-457e1c1f"Content-Length: 1195

此后,如果浏览器必须验证一个组件,它会使用 If-None-Match 头将 ETag 传回原始服务器。如果 ETag 是匹配的,就会返回 304 状态码, 使响应减小 1195字节。

/*客户端请求*/GET /i/yahoo.gif  HTTP 1.1Host: us.yimg.comIf-Modified-Since:Tue,12 Dec 2006 03:03:59 GMTIf-None-Match: "10c24bc-4ab-457e1c1f"

/*服务器应答*/HTTP 1.1 304 Not Modified

ETag 带来的问题

    ETag 的问题在于,通常使用组件的某些属性来构造它, 这些属性对于特定的、寄宿了网站的服务器来说是唯一的。 当浏览器从一台服务器上获取了原始组件,之后,又向 另外一台不同的服务器发起条件 GET 请求时, ETag 是不会匹配的 而对于使用服务器集群来处理请求的网站来说,这是很常见的一种情况。默认情况下,对于拥有多台服务器的网站,Apache 和 IIS 向 ETag 中嵌入的数据都会大大地降低有效性验证的成功率。
    Apache 1.3 和 2.x 的 ETag 格式是 inode-size-timestamp文件系统使用 inode 来存储诸如文件类型、所有者、 组和访问模式等信息。尽管在多台服务器上一个给定的文件可能位于相同的目录、具有相同的文件大小、权限、时间截等,从一台服务器到另一台服务器,其 inode 仍然是不同的。
  IIS5.0 和 6.0 在 ETag 上有着类似的问题。IIS上 ETag 的格式是 Filetimestamp:ChangeNumber. ChangeNumber 适用于路踪 IIS 配罝变化的计数器。 对于一个网站背后的所有IIS服务器来说, ChangeNumber 不大可能相同。
  IIS5.0 和 6.0 在 ETag 上有着类似的问题。IIS上 ETag 的格式是 Filetimestamp:ChangeNumber. ChangeNumber 适用于路踪 IIS 配罝变化的计数器。 对于一个网站背后的所有IIS服务器来说, ChangeNumber 不大可能相同。
    最后的结果是,对于完全相同的组件,从一台服务器到另一台, Apache 和 IIS产生的 ETag是不会匹配的。如果 ETag 不匹配,用 户就不会按照 ETage 的设计计划那样接收到更小更快的 304 响应,相反,它们会收到普通的 200 响应以及组件的所有数据。如果你只在一台服务器上寄宿网站,这不是什么问题,但如果你使用了服务器集群, 则组件的下载次数可能会比必须进行下载的次数多得多 ,这将导致性能的下降。ETag 还降低了代理缓存的效串.代理后面的用户缓存的 ETag 经常和代理缓存的 ETag 不匹配, 这导致不必要的请求被发送到原始服务器。用户和代理之间不会出现 304 响应,而是会产生两个又慢又大的200 响应—一个是从原始服务器到代理的, 另一个是从代理到用户的。并且 If-None-Match 比 If-Modified-Since 具有更髙的优先级。
  鉴于ETag带来的缓存性能问题,有两种办法绕过它:一种使对ETag进行配置,Apache 1.3.23 版和之后版本支持FileETag指令,使用这一指令,可以从ETag中移除 inode, 只留下大小和时间截作为组件的 ETagÿ 类似地,在 IIS 中可以为所有服务器设置相同的 ChangeNumber, 保留文件的时间戳作为 ETag 中仅有的另一块信息。另一种办法是直接移除ETag。

  使用JavaScript访问DOM元素的速度很慢,因此为了获得响应更快的页面,您应该:

2.3 Gzip组件

通过前端工程师做出的决策,可以显著减少在网络上传输HTTP请求和响应所需的时间。从HTTP / 1.1开始,Web客户端表示支持使用HTTP请求中使用Accept-Encoding进行压缩。

 Accept-Encoding:gzip,deflate

如果服务器看到这个头部,它可能会选用列表中的某个方法压缩响应。服务器通过Content-Encoding头部提示客户端:

Content-Encoding: gzip

gzip一般可减小响应的70%。尽可能去gzip更多类型的文件。html,脚本,样式,xml和json等等都应该被gzip,而图片,pdf等等不应该被gzip,因为它们本身已被压缩过,gzip压缩它们只是浪费cpu,甚至增加文件大小。

尽可能多地压缩文件类型是减轻页面重量和加速用户体验的简便方法。

1.使用图片地图

    图片地图允许你在一个图片上关联多个URL,目标URL的选择取决于用户点击了图片上的哪个位置。

分分快三计划 1

    比如导航栏菜单有五个选项,为了美观,我们将菜单对应的超链接关联到图片上,可以使用五个分开的图片分别关联五个分开的超链接,此时加载这个导航菜单就要通过五次HTTP请求下载五张图片,如果将五个单独的图标合成一张图片,使用图片地图就可以将HTTP请求减少到一次。具体HTML代码如下:

<map name="map1" id="map1">  <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">  <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">  <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">  <area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">  <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help"></map>

  在<img>标签中我们中加载了一张包含所有图标的图片,在<map>标签中定义了一个客户端图像映射,图像映射(image-map)指带有可点击区域的一幅图像。area 元素永远嵌套在 map 元素内部,定义了图像映射中的区域。<img>的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们最好同时向 <map> 添加 id 和 name 属性。

这些标签的具体用户可以参考w3cschool<map>、<area>

缺点:

  • 图片地图上的区域坐标比较难确定

  • 图片地图中的图片要按次序并且连续

       4. 使用Gzip组件

1.4 使Ajax可缓存

使Ajax可缓存的好处之一就是在用户请求时可以提供快速反馈,因为它从后端Web服务器异步请求信息。重要的是要记住“异步”并不意味着“瞬时”。

为了提高性能,优化这些Ajax响应非常重要。提高Ajax性能的最重要方法是使响应可缓存,其中提高的方法除了Add an Expires or a Cache-Control Header 中讨论的之外,其他方法还有:

  • gzip组件
  • 减少DNS查找
  • 压缩JS
  • 避免重定向
  • 设置ETags

规则6—将脚本放在底部

     使用脚本时,对于所有位于脚本以下的内容,逐步呈现都被阻塞了,出现这一现象是因为脚本阻塞了并行下载。

HTTP1.1规范建议(只是建议)浏览器从每个主机名并行地下载两个组件,用户通过修改浏览器设置可以修改并行下载的数量,对于开发者来说,可以简单的使用CNAME(DNS别名)来将组件分别放到多个主机名中,但是主机名并不是越多越好,这取决于你的硬件和带宽性能。然而,在下载脚本时并行下载实际上是被禁用的—即使使用了不同的主机名,浏览器也不会启动其他的下载。一是因为脚本可能使用document.write来修改页面内容,因此浏览器会等待,以确保页面能够恰当布局。二是为了保证脚本能够按照正确的顺序执行(由于多个脚本之间可能才在依赖关系)。放置脚本的最好地方是页面的底部。这不会阻止页面内容的呈现,而且页面中的可视组件以尽早下载,虽然其请求时间较长,但对页面的影响很小。

需要说明的是这条规则并不是所有情况下都要遵循,例如使用脚本向页面插入了内容,为了让内容尽快呈现给用户,就不能将脚本移动到页面靠后的位置。

  1. 最小化HTTP请求次数

2.7 避免空src的图片

空src属性的图片的行为可能跟你预期的不一样。它有两种形式:

  1. html标签:<img src="">
  2. js:var img = new Image(); img.src = "";

两种形式都会产生相同的效果:浏览器向您的服务器发出另一个请求

  • Internet Explorer向页面所在的目录发出请求。
  • Safari和Chrome会向实际页面提出请求。
  • Firefox 3及更早版本的行为与Safari和Chrome相同,但3.5版解决了此问题[错误444931],不再发送请求。
  • 遇到空图像时,Opera不执行任何操作。
  1. 由于发送大量的意料之外的流量,会削弱服务器,尤其那些每天pv上百万的页面。
  2. 浪费服务器计算周期取生成不会被浏览的页面。
  3. 可能会破坏用户数据。如果你在跟踪请求状态,通过cookie或其它,你可能会破坏数据。即使image的请求不会返回图片,但所有的头部数据都被浏览器读取了,包括cookie。即使剩下的响应体被丢弃,破坏可能已经发生。
3.合并脚本和样式表

  JS具有阻塞特性,每次遇到<script>,页面都必须停下来等待脚本下载并执行,这会停止页面绘制,分散过多的js和css文件会导致HTTP请求增加。因此建议合理的合并脚本和样式表文件,从而减少请求次数。

  除了生成浪费的HTTP请求之外,还浪费了多次评估脚本的时间。无论脚本是否可缓存,这种冗余的JavaScript执行都会在Firefox和Internet Explorer中执行。

3.1 减小Cookie大小

http cookie的使用有多种原因,比如授权和个性化。cookie的信息通过http头部在浏览器和服务器端交换。尽可能减小cookie的大小来降低响应时间。

  • 消除不必要的cookie。
  • 尽可能减小cookie的大小来降低响应时间。
  • 注意设置cookie到合适的域名级别,则其它子域名不会被影响。
  • 正确设置Expires日期。早一点的Expires日期或者没有会尽早删除cookie,优化响应时间。

规则14—使Ajax可缓存

    使用Ajax会生成动态响应,只包含与这世界上的一个用户相关的信息。 缓存这些数据看上去没有任何意义。要记得的很重要的一点是,一个用户可能每天或毎周进行很多次请求(比如用户查看自己的邮箱中的邮件)。如果你可以为他缓存响应, 就会看到缓慢的和快速的用户体验之间的差距。
    使这些 Ajax 请求可缓存,除了改变 HTTP 头之外(添加Expires头)还需要进行更多的工作, 响应的个性化和动态本质必须被反映到缓存中。可供采用的最好的方式是使用査询字符串参数。例如

/ws/mail /vl / formrpc?m=GetMessage&yid=steve_souders

    这个响应只对当前用户有效。可以将用户名放到査询字符串中来做到这一点。

来自为知笔记(Wiz)

  • 您可以检查GIF并查看它们是否使用与图像中颜色数对应的调色板大小。使用imagemagick很容易检查 
  • identify -verbose image.gif 
  • 当你在调色板中看到使用4种颜色和256色“槽”的图像时,还有改进的余地。
  • 尝试将GIF转换为PNG并查看是否存在保存。通常,有。由于浏览器的支持有限,开发人员经常对使用PNG犹豫不决,但现在已成为过去。唯一真正的问题是真彩色PNG中的alpha透明度,但是GIF也不是真彩色,也不支持变量透明度。所以GIF可以做任何事情,调色板PNG(PNG8)也可以做(动画除外)。这个简单的imagemagick命令导致完全安全的PNG:
  • convert image.gif image.png
  • “我们所说的只是:给PiNG一个机会!”
  • 在所有PNG上 运行pngcrush(或任何其他PNG优化工具)。例: 
  • pngcrush image.png -rem alla -reduce -brute result.png
  • 在所有JPEG上运行jpegtran。此工具执行无损JPEG操作(如旋转),还可用于优化和删除图像中的注释和其他无用信息(如EXIF信息)。
  • jpegtran -copy none -optimize -perfect src.jpg dest.jpg

5.1 将Script放在底部

脚本引起的问题是它们阻塞了并行下载。 HTTP1.1规范建议浏览器每个域名下不要一次下载超过2个组件。如果你的图片分散在不同服务器,那么你能并行下载多个图片。但当脚本在下载,浏览器不会再下载其它组件,即使在不同域名下。

有些情况下把脚本移动到底部并不简单。比如,脚本中用了document.write来插入内容,它就不能被移动到底部。另外有可能有作用域问题。但大多数情况,有方法可以解决这些问题。

一个替代建议是使用异步脚本。defer属性表明脚本不包含document.write,是提示浏览器继续渲染的线索。

规则2—使用内容发布网络(CDN)

     内容分发网络Content delivery networkContent distribution network,缩写:CDN)是指一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户,来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求。对于前端开发来说,可以将CDN用于发布静态内容,如图片、脚本、样式表。

  YUI CSS实用程序 提供了很好的布局帮助:grids.css可以帮助您完成整体布局,fonts.css和reset.css可以帮助您去除浏览器的默认格式。这是一个重新开始并考虑标记的机会,例如,<div>只有在语义上有意义时才使用s,而不是因为它呈现新行。

5.2 使用外部JavaScript 和 CSS

在实际中使用外部文件通常会产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时,都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数,但增加了HTML文档的大小。另一方面,如果JavaScript和CSS位于浏览器缓存的外部文件中,则HTML文档的大小会减少,而不会增加HTTP请求的数量。

规则9—减少DNS查找

      当客户端的 DNS 缓存为空(浏览器和操作系统都是)时, DNS査找的数量与 Web页面中唯一主机名的数量相等。这包括页面URL、图片、脚本文件、样式表、 Flash 对象等的主机名。 减少唯一主机名的数量就可以减少 DNS 査找的数址。But减少唯一主机名的数量会潜在地减少页面中并行下载的数量。 避免 DNS 査找降低了响应时间 ,但减少并行下载可能会增加响应时间。 正如规则6中“并行下载”中介绍的那样, 一定数量的并行下载是好的,因此建议是将这些组件分別放到至少 2 个,但不要超过 4 个主机名下。这是在减少 DNS 査找和允许高度并行下载之间作出的很好的权衡。另外,使用 Connection:Keep-Alive 也能带来好处,它可以通过重用现有连接,既能避免重复的DNS查找,也能避免 TCP/IP 开销来减少响应时间。

 

4.2 避免CSS表达式

CSS表达式是强大的设置动态CSS属性的方法。IE5开始支持,IE8开始不赞成使用。例如,背景颜色可以设置成每小时轮换:

background-color: expression( (new Date.getHours()%2 ? "#B8D4FF" : "#F08A00" );

表达式的问题在于它们的评估频率高于大多数人的预期。它们不仅在页面呈现和调整大小时进行重新计算,而且在页面滚动时甚至在用户将鼠标移动到页面上时进行计算。在CSS表达式中添加计数器可以让我们跟踪CSS表达式的计算时间和频率。在页面上移动鼠标可以轻松计算超过10,000次。

本文对《高性能网站建设指南》这本书中提出的14种基本的前端性能优化方案进行了总结,这本书介绍的优化方案比较过时了,不能完全满足目前前端性能优化,如果您浏览完能弄清楚每种方案的实施过程。就没必要看这本书了。

       22. 不用404s

1.3 避免重定向

使用301和302状态码完成重定向。下面是一个301响应http头示例:

HTTP/1.1 301 Moved PermanentlyLocation: http://example.com/newuriContent-Type: text/html

浏览器自动将用户带到Location字段指定的URL。跳转所需的所有信息都在http头 ,响应的主体通常是空的。301或302响应一般不会被缓存,除非有Expires 或者Cache-Control 指定要缓存。

要记住的主要事情是重定向会降低用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容,因为页面中的任何内容都无法呈现,并且在HTML文档到达之前不会开始下载任何组件。

最浪费的重定向之一经常发生,就是在URL中缺少尾部/ 会产生301响应,比如http://astrology.yahoo.com/astrology301跳转到http://astrology.yahoo.com/astrology/

规则1—减少HTTP请求

  DOM元素的数量很容易测试,只需键入Firebug的控制台:
``

6.2 优化CSS精灵图

  • 将图像水平排列在精灵图中而不是垂直排列通常会导致文件较小。
  • 把颜色近似的图片合并到一张精灵图,这样可以让颜色数更少,如果低于256就可以用png8.
  • “适应移动设备”并且不要在精灵中留下大的间隙。这不会影响文件大小,但需要较少的内存,以便用户代理将图像解压缩为像素图。

规则3-添加Expires头和Cache-Control头(使用缓存)

   浏览器(和代理)使用缓存来减少HTTP请求的数量,并减小HTTP响应的大小,使页面加载的更快。缓存的实现是Web服务器在相应中添加Expires头来告诉客户端它可以使用一个组件直到过期为止。

/*从服务器发送到客户端*/Expires:Mon, 15 Apr 2024 20:00:00 GMT

    这个响应头告诉浏览器该响应的有效性持续到2014年4月15日为止。需要指出的是使用Expires头要求服务器和客户端的时钟严格同步并且要经常检测过期时间。在HTTP1.1中引入了Cache-Control头来克服Expires头的限制,它使用max-age指令指定组件被缓存多久,单位为秒,为了兼容低版本的HTTP协议,可以同时使用上述两个响应头,HTTP规范规定max-age指令将重写Expires头

/*从服务器发送到客户端*/Expires:Mon, 15 Apr 2024 20:00:00 GMTCache-Control: max-age=315360000

       Gzipping通常将响应大小减少约70%。今天大约90%的互联网流量通过声称支持gzip的浏览器传播。如果你使用Apache,配置gzip的模块取决于你的版本:Apache 1.3使用mod_gzip而Apache 2.x使用mod_deflate。

2.6 AJAX 使用 GET 请求

在雅虎邮件团队发现,在使用时XMLHttpRequest,POST在浏览器中实现为两步过程:首先发送头部,然后发送数据。因此最好使用GET,它只需要一个TCP数据包发送(除非你有很多cookie)。IE中的最大URL长度为2K,因此如果发送的数据超过2K,则可能无法使用GET。

POST不提交任何数据跟GET行为类似,但从语义上讲,获取数据应该用GET,提交数据到服务器用POST。

2.CSS Sprites

  和图片地图一样,CSS SPrites也可以合并图片,要使用CSS SPrites也需要将多个图片合并到一个单独的图片中,但是其对图片的次序、排列方向、是否连续没有硬性要求,因此推荐实际开发过程中采用此方法。任何支持背景图片的HTML元素,使用CSS的background-position属性,可以将HTML元素放置到背景图片中期望的位置(或者说,可以选取图片中期望的位置区域作为元素的背景)。关于background-position属性的用法可以参考background-position

<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333; width: 180px; height: 32px; padding: 4px 0 4px 0;">  <a href="javascript:alert('Home')" title="Home"></a>  <a href="javascript:alert('Gifts')" title="Gifts"></a>  <a href="javascript:alert('Cart')" title="Cart"></a>  <a href="javascript:alert('Settings')" title="Settings"></a>  <a href="javascript:alert('Help')" title="Help"></a></div>

       如果您的服务器是Apache,请使用ExpiresDefault指令设置相对于当前日期的到期日期。ExpiresDefault指令的这个示例将Expires日期设置为距请求时间10年。

3.2 用没有cookie的域名提供组件。

当浏览器发出静态图像请求并将cookie与请求一起发送时,服务器对这些cookie没有任何用处。所以他们只是没有充分理由创建网络流量。您应该确保使用无cookie请求请求静态组件。创建一个子域并在那里托管所有静态组件。

如果您的域名是www.example.org,您可以托管您的静态组件static.example.org。但是,如果您已经在顶级域上设置了cookie example.org而不是www.example.org,则所有请求都 static.example.org将包含这些cookie。在这种情况下,您可以购买一个全新的域,在那里托管您的静态组件,并保持此域无cookie

规则12—删除重复的脚本

    在开发大型网站的业务中,各个团队负责不同的业务功能,很容易产生相同的脚本被添加多次的情况。
重复脚本损伤性能的方式有两种:不必要的 HTTP请求和执行JavaScript所浪费的时间,

  • 在 Internet Explorer 中,如果脚本没有被缓存,或在重新加载页面时, 会产生额外的HTTP 请求。
  • 在firefox和 Internet Explorer中,脚本会被多次求值。

       19. 减少DOM元素的数量

6.4 让 favicon.ico 小且可缓存

favicon.ico是在你服务器根路径的图片。邪恶的是即使你不关心它,浏览器仍然会请求它。所以最好不要响应404。另外由于在同一服务器,每次请求favicon.ico时也会带上cookie。这个图片还会影响下载顺序,比如在IE,如果你在onload时下载额外的组件,fcvicon会在这些组件之前被下载。

怎么减轻favicon.ico的缺点?

  • 小,最好1K以下
  • 设置Expires头部。也许可以安全地设置为几个月。
<style>#navbar span {    width: 31px;    height: 31px;    display: inline;    float: left;    background-image: url(spritebg.gif?t=1462159036);    /*加载的图片仍为上面例子中的图片}.home {    background-position: 0 0;    margin-right: 4px;    margin-left: 4px;}.gifts {    background-position: -32px 0;    margin-right: 4px;}/*比较多,后面的就省略了*/</style>

  实体标记(ETag)是Web服务器和浏览器用于确定浏览器缓存中的组件是否与源服务器上的组件匹配的机制。(“实体”是另一个词“组件”:图像,脚本,样式表等)。添加ETag以提供验证比上次修改日期更灵活的实体的机制。ETag是唯一标识组件的特定版本的字符串。唯一的格式约束是引用字符串。源服务器使用ETag响应头指定组件的ETag 。

5.5 最小化DOM访问

使用JavaScript访问DOM元素的速度很慢,因此为了获得响应更快的页面,您应该:

  • 缓存访问过的元素的引用
  • 在DOM树外更新节点,然后添加到DOM树
  • 避免用JS实现固定布局

规则5—将样式表放在顶部(使用LINK标签将样式表放在文档的HEAD中)

    在HTML文件<body>中指定外部样式表和内联样式块可能对浏览器的渲染性能产生不利影响。浏览器阻塞渲染网页样式直到所有外部的样式表都已被下载。(用<style>标记指定的)内联样式块可能会导致重排和页面跳动。因此,把外部样式表和内联样式块放在页面的<head>中是很重要的。通过确保样式表首先被下载和解析,可以让浏览器逐步渲染页面。另外使用使用@import可能导致组件下载无序性,也就是存在其他组件已下载当样式文件仍未下载完成的情况,同样会阻塞页面渲染。因此建议使用LINK标签将样式表放在文档的HEAD中。

<iframe> 优点:

1.7 减少DOM数量

复杂页面意味着要下载更多字节,这也意味着JavaScript中的DOM访问速度更慢。例如,当您想要添加事件处理程序时,如果在页面上循环遍历500或5000个DOM元素,则会有所不同。

规则7—避免使用CSS表达式

  CSS表达式是动态设置CSS属性的一种强大且危险的方式,受到IE10(包括IE10)之前版本的支持,CSS表达式会自动绑定到浏览器事件中,

p{    /*IE浏览器会识别这一项,忽略min-width,其他浏览器则相反*/    width: expression(document.body.clientWidth<600?"600px":"auto");    min-width: 600px;    border: 1px solid;}

   上面的示例保证段落的宽度至少是600像素,在IE浏览器中测试,当页面改变时,CSS表达式会重新计算,而在测试过程中(测试地址为Expression Counter)发现,改变窗口大小、滚动、鼠标拖拽,甚至鼠标移动,表达式都会被求值,如此频繁的求值势必会影响浏览器性能。避免该问题的方法是使用Javascript监听事件从而设置元素宽度。

  ETag的问题在于它们通常使用属性构建,这些属性使它们对托管站点的特定服务器是唯一的。当浏览器从一个服务器获取原始组件并稍后尝试在不同服务器上验证该组件时,ETag将不匹配,这种情况在使用服务器集群处理请求的网站上非常常见。默认情况下,Apache和IIS都在ETag中嵌入数据,这大大降低了在具有多个服务器的网站上成功进行有效性测试的几率。

7.2 将组件打包到多部分文档中

将组件打包到多部分文档就像带有附件的电子邮件,它可以帮助您通过一个HTTP请求获取多个组件(请记住:HTTP请求很昂贵)。使用此技术时,首先检查用户代理是否支持它(iPhone不支持)。

原文地址:

规则11—避免重定向

   重定向用于将用户从一个 URL 重新路由到另一个URL。重定向有很多种301 和 302 是最常用的两种。通常针对 HTM文档进行重定向 ,但也可能用在请求页面中的组件(图片、脚本等) 时。实现重定向可能有很多不同的原因, 包括网站重新设计、跟踪流世、记录广告点击和建立易于记忆的URL,但主要要记得的是重定向会使你的页面变慢。

       在现实世界中使用外部文件通常会产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时,都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数,但增加了HTML文档的大小。另一方面,如果JavaScript和CSS位于浏览器缓存的外部文件中,则HTML文档的大小会减少,而不会增加HTTP请求的数量。

2.4 配置ETag

实体标记是Web服务器和浏览器用于确定浏览器缓存中的组件是否与源服务器上的组件匹配的机制。 添加ETag以提供验证比上次修改日期更灵活的实体的机制。ETag是唯一标识组件的特定版本的字符串。 服务器这样设置组件的ETag:

HTTP/1.1 200 OKLast-Modified: Tue, 12 Dec 2006 03:03:59 GMTETag: "10c24bc-4ab-457e1c1f"Content-Length: 12195

之后,如果浏览器要验证组件,它用If-None-Match头部来传ETag给服务器。如果ETag匹配,服务器返回304:

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

规则8—使用外部Javascript和CSS

   一般情况下内联Javascript和CSS(通过<script>和<style>标签定义的)的页面加载速度会比使用外部Javascript和CSS文件快,这是因为使用外部文件增加了HTTP的请求量,但是外部文件所带来的收益是 JavaScript 和 CSS 文件有机会被浏览器缓存起来。 HTML文档,至少是那些包含动态内容的HTML文档通常不会被配置为可以进行缓存,当遇到这种情况时文档没有被缓存每次请求 HTML 文档都要下载内联的 JavaScript和 CSS另一方面,如果 JavaScript和 CSS 是外部文件,浏览器就能缓存它们, HTML文档的大小减小,而且不会增加 HTTP 请求的数量。

   这条规则也不是绝对的,关键因素是,与 HTML 文档请求数量相关的、外部 JavaScript 和 CSS 组件被缓存的频率。这个因素尽管难以量化,但可以通过下面几个基准衡量。

1.页面浏览量

毎个用户产生的页面査看越少,内联 JavaScript 和 CSS 的论据越强势。如果用户访问页面频率较低,即使缓存了外部文件也可能过期。
2.空缓存VS完整缓存

如果你的网站的本质上能够为用户带来髙完整缓存串,使用外部文件的收益就更大。 如果不大可能产生完整缓存,则内联是更好的选择。

3.组件重用

如果你的网站中的毎个页面都使用了相同的 JavaScript 和 CSS, 使用外部文件可以提髙这些组件的重用率。 在这种情况下使用外部文件更加具有优势,因为当用户在页面间导航时,JavaScript 和 CSS 组件已经位于浏览器的缓存中了。如果重用率较低,还是使用内联更有意义。
两全其美的技术

1.加载后下载

   对于作为多次页面査看中的第一次的主页,我们希望为主页内联 JavaScript 和 CSS, 但又能为所有后续页面査看提供外部文件。这可以通过在主页加载完成后动态下载外部组件来实现(通过 onload 亊件 ),这能够将外部文件放到浏览器的缓存中以便用户接下来访问其他页面。

<script>function doOnload() {    // Do the downloading awhile AFTER the onload.    setTimeout("downloadComponents()", 1000);}window.onload = doOnload;// Download external components dynamically using JavaScript.function downloadComponents() {    downloadCSS("http://stevesouders.com/hpws/testsm.css?t=1462242339");    downloadJS("http://stevesouders.com/hpws/testsma.js?t=1462242339");    downloadJS("http://stevesouders.com/hpws/testsmb.js?t=1462242339");    downloadJS("http://stevesouders.com/hpws/testsmc.js?t=1462242339");}// Download a stylesheet dynamically.function downloadCSS(url) {    var elem = document.createElement("link");    elem.rel = "stylesheet";    elem.type = "text/css";    elem.href = url;    document.body.appendChild(elem);}// Download a script dynamically.function downloadJS(url) {    var elem = document.createElement("script");    elem.src = url;    document.body.appendChild(elem);}</script>

2.动态内联

   如果主页服务器知道一个组件是否在浏览器的缓存中,它可以在内联或使用外部文件之间做出最佳的选择。尽管服务器不能査看浏览器缓存中有些什么,但可以用 cookies 做指示器。如果 cookie不存在,就内联 JavaScript 和 CSS。如果 cookie 出现了 ,则有可能外部组件位于浏览器的缓存中 ,并使用了外部文件。
  由于每个用户开始的时候都没有 cookie, 因此必须有一种途径来引导这一过程。这可以通过使用前一个例子中的加载后下载技术来完成。当用户第一次访问页面时,服务器发现没有 cookie, 于是生成一个内联了组件的页面。然后服务器添加 JavaScript 来在页面加载后动态下载外部文件 并设置 cookie),下一次访问页面时,服务器看到了 cookie就会生成一个使用外部文件的页面。

  欲了解更多信息,请查看 Tenni Theurer和Patty Chi撰写的“当Cookie崩溃时”。这项研究的主要内容:

1.8 跨域拆分组件

拆分组件来达到最大化的并行下载,由于DNS查询的副作用,最好保证使用的域名不准超过2-4个。例如,您可以托管HTML和动态内容,www.example.org 并在static1.example.org和之间拆分静态组件。

  将组件打包到多部分文档就像带有附件的电子邮件,它可以帮助您通过一个HTTP请求获取多个组件(请记住:HTTP请求很昂贵)。使用此技术时,首先检查用户代理是否支持它(iPhone不支持)。

2.2 添加Expries 或者 Cache-Control

这条规则有两个方面:

  • 对于静态组件:通过设置Expires头实现“永不过期”策略
  • 对于动态组件:使用适当的Cache-Control标头来帮助浏览器处理条件请求

页面内容越来越丰富,意味着页面中有更多脚本,样式表,图像以及Flash。您的页面的首次访问可能必须发出多个HTTP请求,但通过使用Expires标头,您可以使这些组件可缓存。

浏览器使用缓存来减少HTTP请求的数量和大小,从而加快网页加载速度。Web服务器使用HTTP响应中的Expires头来告诉客户端可以缓存组件多长时间。 比如:

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

表示在2010-04-15都可以请求缓存内容。

       最终用户响应时间的80%用于前端。大部分时间都在下载页面中的所有组件:图像,样式表,脚本,Flash等。减少组件数量反过来减少了呈现页面所需的HTTP请求数量。这是更快页面的关键。

1.6 预加载组件

预加载看起来和延迟加载相反,但它实际上有着不同的目标,通过预加载组件,您可以利用浏览器空闲的时间并请求将来需要的组件(如图像,样式和脚本)。这样,当用户访问下一页时,您可以将大部分组件放在缓存中,并且用户加载页面将更快。

有几种预加载类型:

  • 无条件预加载:一旦onload触发,你立即获取另外的组件。比如谷歌会在主页这样加载搜索结果页面用到的雪碧图。
  • 有条件预加载:基于用户操作,您可以进行有根据的猜测,即用户前进的位置并相应地预加载。
  • 预期的预加载:在旧网页预加载新网页的部分组件,那么切换到新网页时就不会是没有任何缓存了。

       经常出现的另一种建议是使用延迟脚本。该DEFER属性表明该脚本不包含document.write,并且是浏览器可以继续呈现的线索。不幸的是,Firefox不支持该DEFER属性。在Internet Explorer中,脚本可能会延迟,但不是所需的。如果可以延迟脚本,也可以将其移动到页面底部。这将使您的网页加载速度更快。

1.5 延迟加载组件

你可以自习看看你的页面并问问你自己,最初页面的渲染需要什么,其他的内容和组件就是可以延迟加载的。

JavaScript是在 onload 时间之前和之后拆分的理想候选者,例如,如果您有拖放和动画的JS代码,则可以延迟加载,因为它需要在页面渲染完之后才可以执行。其它可延迟的包括隐藏的内容,折叠起来的图片等等。

  复杂页面意味着要下载更多字节,这也意味着JavaScript中的DOM访问速度更慢。例如,当您想要添加事件处理程序时,如果在页面上循环遍历500或5000个DOM元素,则会有所不同。

1.2 减少DNS查找

DNS就像电话簿将人们的姓名映射到他们的电话号码一样,当您输入www.yahoo.com时,浏览器会通过DNS解析返回服务器的IP地址,这个DNS解析过程需要成本,通常需要20-120ms才能解析成功,在这之前,浏览器无法从服务器获取任何内容。

通过缓存DNS查找来获得更好的性能。DNS信息保留在操作系统的DNS缓存中,大多数的浏览器都有自己的缓存,与操作系统的分开。

默认情况,IE会将DNS查找缓存30分钟,FireFox缓存一分钟。

当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的数量等于网页中唯一主机名的数量。 减少唯一主机名的数量可减少DNS查找的数量。

减少唯一主机名的数量有可能减少页面中发生的并行下载量。避免DNS查找会缩短响应时间,但减少并行下载可能会缩短响应时间。 准则是将这些组件分成至少两个但不超过四个主机名。这是减少DNS查找和允许高度并行下载之间的良好折衷。

       24. 对组建使用cookie-free的域名

本文大部分内容翻译自雅虎前端的性能优化,如何让页面加载更快,雅虎给出了多个规则,原文地址:Best Practices for Speeding Up Your Web Site 。主要从八个方向分别介绍了如何进行性能的优化。

  HTTP请求很昂贵,因此发出HTTP请求并获得无用的响应(即404 Not Found)是完全没必要的,并且会在没有任何好处的情况下减慢用户体验。

1.10 不要出现404

HTTP的请求是非常昂贵的,因此发出的HTTP请求获得无用的响应是完全没有必要的,并且会影响用户体验。

一些网站会有特别的404页面提高用户体验,但这仍然会浪费服务器资源。特别坏的是当链接指向外部js但却得到404结果。这样首先会降低并行下载数,其次浏览器可能会把404响应体当作js来解析,试图从里面找出可用的东西。

例:

1.1 最小化HTTP请求

雅虎军规上说明80%的响应时间都来自前端,大多数页面的加载时间都是在下载图片,样式,js,flash等,减少组件的数量反过来减少请求的数量是页面加载更快的关键。

减少页面组件数量的一种方法是简化页面设计,但是如何在构建更丰富内容的基础上,同时还能减少相应时间?

  • Combined file ,合并文件,可以通过合并JavaScript,CSS文件来减少HTTP请求的数量来缩短响应时间。
  • CSS Sprites ,CSS精灵,是减少图片请求数量的首选方法,通过将背景图合并为单个图像, 通过background-imagebackground-position 属性来显示部分需要的图像。
  • Image maps ,图像地图,通过将多张图片合成为一张图片,整体大小大致相同,但减少HTTP请求的数量会加快页面的速度。 一般用于如导航条 ,定义图像坐标容易出错,不推荐使用。
  • Inline images ,内联图像,使用data:url scheme将图像嵌入实际页面中。
Content-Encoding:gzip

2.5 尽早刷新Buffer

当用户请求页面时,后端服务器可能需要200到500毫秒才能将HTML页面拼接在一起。在此期间,浏览器在等待数据到达时处于空闲状态。 在PHP中,有函数flush()。它允许您将部分准备好的HTML响应发送到浏览器,以便浏览器可以在后端忙于HTML页面的其余部分时开始获取组件。这种好处主要出现在繁忙的后端或轻量级前端。

一个比较好的flush的位置是在head之后,因为浏览器可以加载其中的样式和脚本文件,而后台继续生成页面剩余部分。

<!-- css, js --></head><?php flush(); ?><body><!-- content -->

       用户与Web服务器的距离会对响应时间产生影响。在多个地理位置分散的服务器上部署内容将使您的页面从用户的角度加载更快。但是你应该从哪里开始呢?

4.3 选择<link>而不是@import

之前的一个最佳原则是说CSS应该在顶部来允许逐步渲染。

在IE用@import和把CSS放到页面底部行为一致,所以最好别用。

这条规则有两个方面:

6.1 优化图片

  • 检查GIF并查看它们是否使用与图像中颜色数对应的调色板大小。
  • 可以把gif转成png看看有没有变小。除了动画,gif一般可以转成png8
  • 运行pngcrush或其它工具压缩png。
  • 运行jpegtran或其它工具压缩jpeg。
FileETag none

1.9 最少的iframe

iframe允许html文档被插入到父文档。

<iframe>优点:

  • 帮助解决缓慢的第三方内容的加载,如广告和徽章
  • 安全沙盒
  • 并行下载脚本

<iframe>缺点:

  • 即使空的也消耗
  • 阻塞了页面的onload
  • 非语义化

  避免意外包含相同脚本两次的一种方法是在模板系统中实现脚本管理模块。包含脚本的典型方法是在HTML页面中使用SCRIPT标记。

4.4 避免过滤器

专有的AlphaImageLoader过滤器旨在解决IE版本<7中的半透明真彩色PNG的问题。该过滤器的问题在于它在下载图像时阻止渲染并冻结浏览器。它还会增加内存消耗,并且每个元素应用,而不是每个图像,因此问题成倍增加。

最佳做法是放弃AlphaImageLoader,改用PNG8来优雅降级。

从HTTP / 1.1开始,Web客户端表示支持使用HTTP请求中的Accept-Encoding标头进行压缩。

5.4 删除重复的脚本

在一个页面中两次包含相同的JavaScript文件会损害性能。这并不像你想象的那么不寻常。对美国十大顶级网站的评论显示,其中两个网站包含重复的脚本。两个主要因素会增加脚本在单个网页中重复的几率:团队规模和脚本数量。当它发生时,重复的脚本会通过创建不必要的HTTP请求和浪费的JavaScript执行来损害性能。

发出不必要的http请求发生在IE而不是Firefox。在IE,如果外部脚本引入两次且没有缓存,它会发出2个请求。即使脚本被缓存,刷新时也会发出额外请求。

除了增加http请求,时间被浪费在执行脚本多次上。不管IE还是Firefox都会执行多次。

       16. 使用GET进行Ajax请求

2.1 使用CDN

用户与Web服务器的距离会对响应时间产生影响。在多个地理位置分散的服务器上部署内容将使您的页面从用户的角度加载更快。

CDN是一群不同地点的服务器,可以更高效地分发内容到用户。

  减少页面中HTTP请求的数量是可以开始的地方。这是提高首次访问者性能的最重要指南。正如Tenni Theurer的博客文章浏览器缓存使用 - 暴露!,您网站的每日访问者中有40-60%使用空缓存。让这些首次访问者快速访问页面是获得更好用户体验的关键。

5.6 使用事件代理

有时候页面看起来不那么响应,是因为绑定到不同元素的大量事件处理函数执行太多次。这是为什么使用事件委托是一种好方法。

另外,你不必等到onload事件来开始处理DOM树,DOMContentLoaded更快。大多时候你需要的只是想访问的元素已在DOM树中,所以你不必等到所有图片被下载。

       如此处所示,该expression方法接受JavaScript表达式。CSS属性设置为评估JavaScript表达式的结果。expression其他浏览器会忽略该方法,因此在Internet Explorer中设置属性以在跨浏览器创建一致体验时非常有用。

7.1 保持组件小于25K

此限制与iPhone不会缓存大于25K的组件这一事实有关。请注意,这是未压缩的大小。在这里减少组件大小很重要,因为单独使用gzip可能还不够。

  • 无条件预加载 - 一旦onload触发,你就可以继续获取一些额外的组件。请访问google.com,了解如何请求加载精灵图片。google.com主页上不需要此精灵图片,但在连续搜索结果页面上需要此精灵图片。
  • 条件预加载 - 基于用户操作,您可以进行有根据的猜测,即用户前进的位置并相应地预加载。在search.yahoo.com上,您可以看到在开始输入输入框后如何请求一些额外的组件。
  • 预期的预加载 - 在启动重新设计之前提前预加载。经常在重新设计之后听到:“新网站很酷,但比以前慢”。部分问题可能是用户使用完整缓存访问旧网站,但新网站始终是空缓存体验。您可以通过在启动重新设计之前预加载某些组件来缓解此副作用。您的旧站点可以使用浏览器空闲的时间并请求新站点将使用的图像和脚本
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

图像地图将多个图像组合成单个图像。整体大小大致相同,但减少HTTP请求的数量会加快页面的速度。图像映射仅在图像在页面中是连续的时才起作用,例如导航栏。定义图像映射的坐标可能是乏味且容易出错的。使用图像地图进行导航也无法访问,因此不建议使用。

  内容传送网络(CDN)是分布在多个位置的Web服务器的集合,以更有效地向用户传送内容。选择用于向特定用户传送内容的服务器通常基于网络邻近度的度量。例如,选择具有最少网络跳跃的服务器或具有最快响应时间的服务器。

  当性能目标与其他Web开发最佳实践一致时,这是很好的。在这种情况下,渐进增强的想法告诉我们,JavaScript在受支持时可以改善用户体验,但您必须确保即使没有JavaScript也能正常工作。因此,在确保页面正常工作之后,您可以使用一些后期加载的脚本来增强它,这些脚本可以为您提供更多的花俏功能,例如拖放和动画。

Best Practices for Speeding Up Your Web Site

  因此,为了减轻拥有favicon.ico的缺点,请确保:

       通过前端工程师做出的决策,可以显着减少在网络上传输HTTP请求和响应所需的时间。确实,最终用户的带宽速度,互联网服务提供商,与对等交换点的距离等都超出了开发团队的控制范围。但是还有其他变量会影响响应时间。压缩通过减少HTTP响应的大小来减少响应时间。

       在研究Yahoo!的性能时,我们发现将样式表移动到文档HEAD会使页面看起来加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现。

       因此,关键因素是外部JavaScript和CSS组件相对于请求的HTML文档数量的缓存频率。这个因素虽然难以量化,但可以使用各种指标进行衡量。如果您站点上的用户每个会话有多个页面查看,并且您的许多页面重复使用相同的脚本和样式表,则缓存的外部文件可能会带来更大的潜在好处。

  当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的数量等于网页中唯一主机名的数量。这包括页面的URL,图像,脚本文件,样式表,Flash对象等中使用的主机名。减少唯一主机名的数量可减少DNS查找的数量。

<? php insertScript(“menu.js”)?>

Imagemagick可以帮助您创建小的favicons

  • 将图像水平排列在精灵中而不是垂直排列通常会导致文件较小。
  • 在精灵中组合相似的颜色可以帮助您保持较低的颜色数,理想情况下在256色以下,以适应PNG8。
  • “适合移动设备”并且不要在精灵中留下大的间隙。这不会影响文件大小,但需要较少的内存,以便用户代理将图像解压缩为像素图。100x100图像是1万像素,其中1000x1000是100万像素

  最浪费的重定向之一经常发生,Web开发人员通常不了解它。当URL中缺少尾部斜杠(/)时会发生这种情况。例如,转到会产生301响应,其中包含重定向到(注意添加的尾部斜杠)。如果您使用的是Apache处理程序,则可以使用Alias 或 mod_rewrite 或 ``DirectorySlash指令在Apache中修复此问题。

       在某些情况下,将脚本移到底部并不容易。例如,如果脚本用于document.write插入页面内容的一部分,则无法在页面中向下移动。可能还存在范围问题。在许多情况下,有办法解决这些问题。

  一个有趣的副作用是没有实际发布任何数据的POST就像GET一样。根据HTTP规范,GET用于检索信息,因此当您仅请求数据时,使用GET是有意义的(语义上),而不是将数据发送到服务器端存储。

  减少唯一主机名的数量有可能减少页面中发生的并行下载量。避免DNS查找会缩短响应时间,但减少并行下载可能会缩短响应时间。我的准则是将这些组件分成至少两个但不超过四个主机名。这导致在减少DNS查找和允许高度并行下载之间的良好折衷。

  如果您没有利用ETag提供的灵活验证模型,最好只删除ETag。该Last-Modified头验证基于对组件的时间戳。删除ETag会减少响应和后续请求中HTTP标头的大小。此Microsoft支持文章介绍了如何删除ETag。在Apache中,只需将以下行添加到Apache配置文件即可:

  当浏览器发出静态图像请求并将cookie与请求一起发送时,服务器对这些cookie没有任何用处。所以他们只是没有充分理由创建网络流量。您应该确保使用无cookie请求请求静态组件。创建一个子域并在那里托管所有静态组件。

       8. 将JavaScript和CSS独立成外部文件

       6. 将JavaScript脚本放在底部

  HTTP cookie的使用有多种原因,例如身份验证和个性化。有关cookie的信息在Web服务器和浏览器之间的HTTP标头中进行交换。保持cookie的大小尽可能低是非常重要的,以尽量减少对用户响应时间的影响。

  有时页面感觉响应性较差,因为过多的事件处理程序附加到DOM树的不同元素,然后执行得太频繁。这就是为什么使用事件委托是一个很好的方法。如果a中有10个按钮div,则只将一个事件处理程序附加到div包装器,而不是每个按钮一个处理程序。事件冒出来,这样你就可以捕捉事件并找出它来自哪个按钮。

  内联图像使用data:URL方案将图像数据嵌入实际页面中。这可以增加HTML文档的大小。将内嵌图像组合到(缓存的)样式表中是一种减少HTTP请求并避免增加页面大小的方法。并非所有主流浏览器都支持内嵌图像。

       21. 最小化iframe数量

       27. 优先选择使用<link>而非@import

  • 帮助缓慢的第三方内容,如徽章和广告
  • 安全沙箱
  • 并行下载脚本

  拆分组件允许您最大化并行下载。由于DNS查询惩罚,请确保您使用的域名不超过2-4个。例如,您可以托管HTML和动态内容,www.example.org 并在static1.example.org和之间拆分静态组件static2.example.org

  设计师完成为您的网页创建图像后,在将这些图像FTP到Web服务器之前,仍然可以尝试一些操作。

  此行为的根本原因是在浏览器中执行URI解析的方式。此行为在RFC 3986 - 统一资源标识符中定义。当遇到空字符串作为URI时,它被视为相对URI,并根据5.2节中定义的算法进行解析。这个具体的例子是一个空字符串,在5.4节中列出。Firefox,Safari和Chrome都按照规范正确解析空字符串,而Internet Explorer正在解析它,显然符合规范的早期版本RFC 2396 - 统一资源标识符(这已被RFC 3986废弃) 。从技术上讲,浏览器正在做他们应该做的事情来解析相对URI。问题是在这种情况下,

  最好的方法是AlphaImageLoader完全避免使用优雅降级的PNG8,这在IE中很好。如果你绝对需要AlphaImageLoader,使用下划线黑客_filter不会惩罚你的IE7 用户。

  在无cookie域上托管静态组件的另一个好处是,某些代理可能拒绝缓存使用cookie请求的组件。在相关说明中,如果您想知道是否应该使用example.org或www.example.org作为主页,请考虑cookie的影响。省略www会让您别无选择,只能写入cookie *.example.org,因此出于性能原因,最好使用www子域并将cookie写入该子域。

  IE专有的AlphaImageLoader过滤器旨在解决IE版本<7中的半透明真彩色PNG的问题。该过滤器的问题在于它在下载图像时阻止渲染并冻结浏览器。它还会增加内存消耗,并且每个元素应用,而不是每个图像,因此问题成倍增加。

  如果您的域名是www.example.org,您可以托管您的静态组件static.example.org。但是,如果您已经在顶级域上设置了cookie example.org而不是www.example.org,则所有请求都 static.example.org将包含这些cookie。在这种情况下,您可以购买一个全新的域,在那里托管您的静态组件,并保持此域无cookie。雅虎 用途yimg.com,YouTube使用ytimg.com,亚马逊使用images-amazon.com等。

  CSS Sprites是减少图像请求数量的首选方法。将背景图像合并为单个图像,并使用CSSbackground-imagebackground-position属性显示所需的图像片段。

document.getElementsByTagName('*').length

  Apache 1.3和2.x的ETag格式是inode-size-timestamp。虽然给定文件可以跨多个服务器驻留在同一目录中,并且具有相同的文件大小,权限,时间戳等,但它的inode在服务器与下一个服务器之间是不同的。

  Ajax的一个优点是它为用户提供即时反馈,因为它从后端Web服务器异步请求信息。但是,使用Ajax并不能保证用户不会在等待那些异步JavaScript和XML响应返回时大拇指。在许多应用程序中,用户是否保持等待取决于Ajax的使用方式。例如,在基于Web的电子邮件客户端中,用户将一直等待Ajax请求的结果,以查找符合其搜索条件的所有电子邮件。重要的是要记住“异步”并不意味着“瞬时”。

欲了解更多信息,请查看Wayne Shea和Tenni Theurer的“ 性能研究,第5部分:iPhone可缓存性 - 让它坚持下去 ”。

  混淆是可以应用于源代码的替代优化。它比压缩更复杂,因此更容易因混淆步骤本身而产生错误。在对美国十大顶级网站的调查中,压缩规模缩小了21%,而混淆缩小了25%。尽管混淆具有更高的大小缩减,但压缩JavaScript的风险较小。

  为什么这种行为不好?

  那到底有多少DOM元素才算少?检查具有良好标记的其他类似页面。例如雅虎!主页是一个非常繁忙的页面,仍然不到700个元素(HTML标记)。

  • 它很小,最好不到1K。
  • 使用您感觉舒适的设置Expires标头(因为如果您决定更改它,则无法重命名)。您可以在将来几个月安全地设置Expires标头。您可以查看当前favicon.ico的上次修改日期,以做出明智的决定。
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

<iframe> 缺点:

       脚本引起的问题是它们阻止了并行下载。HTTP / 1.1规范建议的浏览器下载不超过两种组分在每主机名平行。如果您从多个主机名提供图像,则可以并行执行两次以上的下载。但是,在下载脚本时,即使在不同的主机名上,浏览器也不会启动任何其他下载。

  这条规则的灵感来自雅虎的JavaScript大师Nicolas C. Zakas。有关更多信息,请查看他的文章“ Empty image src can destroy your site ”。

  •   消除不必要的cookie
  • 保持cookie大小尽可能低,以尽量减少对用户响应时间的影响
  • 请注意在适当的域级别设置cookie,以免其他子域受到影响
  • 适当地设置过期日期。较早的Expires日期或者没有更早删除cookie,从而改善了用户响应时间

  压缩是从代码中删除不必要的字符以减小其大小从而改善加载时间的做法。压缩代码时,将删除所有注释,以及不需要的空格字符(空格,换行符和制表符)。在JavaScript的情况下,这改善了响应时间性能,因为下载文件的大小减小了。用于压缩JavaScript代码的两种流行工具是JSMin和YUI Compressor。YUI压缩器也可以压缩CSS。

       18. 预加载组件

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

  除了压缩外部脚本和样式之外,内联<script><style>块也可以并且也应该压缩。即使你gzip你的脚本和样式,压缩它们仍然会减小5%或更多的大小。随着JavaScript和CSS的使用和大小的增加,压缩代码所节省的成本也会增加。

  IIS 5.0和6.0与ETag有类似的问题。IIS上ETag的格式是Filetimestamp:ChangeNumber。``ChangeNumber是用于跟踪IIS配置更改的计数器。后面整个网站的所有IIS服务器ChangeNumber是相同这是不太可能的。

  您可以仔细查看您的页面并问自己:“页面最初渲染必要的是什么?”。其余的内容和组件可以等待。

  请记住,最终用户响应时间的80-90%用于下载页面中的所有组件:图像,样式表,脚本,Flash等。这是性能黄金规则。而不是从重新设计应用程序架构的艰巨任务开始,最好先分散静态内容。这不仅可以缩短响应时间,而且由于内容交付网络,它更容易实现。

       35. 避免设置空图像的src

  大量的DOM元素可能是一种通症,即应该通过页面标记来改进,而不必删除内容。您是否使用嵌套表进行布局?您是否只是为了解决布局问题而投入更多<div>?也许有一种更好,语义更正确的标记方式。

  不要使用比您需要的更大的图像,因为您可以在HTML中设置宽度和高度。如果您需要,

  有些网站有帮助404“你的意思是X?”,这对用户体验很有好处,但也浪费了服务器资源(比如数据库等)。特别糟糕的是当外部JavaScript的链接错误并且结果是404时。首先,此下载将阻止并行下载。接下来,浏览器可能会尝试解析404响应主体,就像它是JavaScript代码一样,试图找到可用的东西。

<script type =“text/javascript”src =“menu_1.0.17.js”> </script>

  默认情况下,Internet Explorer会将DNS查找缓存30分钟,具体 DnsCacheTimeout取决于注册表设置。Firefox将DNS查找缓存1分钟,由network.dnsCacheExpiration配置设置控制。(Fasterfox将此更改为1小时。)

  将旧网站连接到新网站是重定向的另一种常见用途。其他包括连接网站的不同部分并基于特定条件(浏览器类型,用户帐户类型等)指导用户。使用重定向连接两个网站很简单,只需要很少的额外编码。虽然在这些情况下使用重定向会降低开发人员的复杂性,但会降低用户体验。使用重定向的替代方法包括使用Alias以及mod_rewrite两个代码路径是否托管在同一服务器上。如果域名更改是使用重定向的原因,则另一种方法是创建CNAME(创建从一个域名指向另一个域名的别名的DNS记录)与Alias或组合mod_rewrite

       17. 延迟加载组件

  JavaScript是在onload事件之前和之后拆分的理想候选者。例如,如果您有执行拖放和动画的JavaScript代码和库,则可以等待,因为在初始渲染之后拖动页面上的元素。其他寻找后期加载候选者的地方包括隐藏内容(用户操作后显示的内容)和首屏下方的图像。

  我们来看一个例子。Web 2.0电子邮件客户端可能使用Ajax下载用户的通讯簿以进行自动完成。如果用户自上次使用电子邮件Web应用程序以来未修改过她的地址簿,则可以从缓存中读取先前的地址簿响应,如果该Ajax响应可以使用将来的Expires或Cache-Control标头进行缓存。必须通知浏览器何时使用先前缓存的地址簿响应而不是请求新的地址簿响应。这可以通过向地址簿Ajax URL添加时间戳来完成,该时间戳指示用户上次修改其地址簿的时间,例如,&t=1190241612。如果自上次下载后地址簿尚未被修改,则时间戳将相同,并且将从浏览器的缓存中读取地址簿,从而消除额外的HTTP往返。如果用户修改了地址簿,则时间戳确保新URL与缓存的响应不匹配,浏览器将请求更新的地址簿条目。

       HTML规范明确指出,样式表是被包括在网页的HEAD:“与A,[LINK]可以仅出现在一个文档的HEAD部分,尽管它可能出现任意次数”。这些替代品,空白的白色屏幕或无风格内容的闪光都是值得冒险的。最佳解决方案是遵循HTML规范并在文档HEAD中加载样式表。

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

HTML5添加了标记的src属性的描述,以指示浏览器不要在4.8.2节中提出额外的请求:

  即使您的Ajax响应是动态创建的,并且可能仅适用于单个用户,它们仍然可以缓存。这样做可以使您的Web 2.0应用程序更快。

       12. 删除重复的脚本

  PHP中的另一种选择是创建一个名为insertScript的函数。

  • 对于静态组件:通过设置远期未来Expires标头实现“永不过期”策略
  • 对于动态组件:使用适当的Cache-Control标头来帮助浏览器处理条件请求

  favicon.ico是一个保留在服务器根目录中的映像。这是一个必要的邪恶,因为即使你不关心它,浏览器仍然会请求它,所以最好不要回复404 Not Found。此外,由于它位于同一台服务器上,因此每次请求时都会发送cookie。此图像也会干扰下载顺序,例如在IE中,当您在onload中请求额外组件时,将在这些额外组件之前下载favicon。

       32. 减小favicon.ico的体积并缓存

       浏览器和代理存在已知问题,这些问题可能导致浏览器期望的内容与压缩内容相关的内容不匹配。幸运的是,随着旧浏览器的使用逐渐减少,这些边缘情况正在逐渐减少。Apache模块通过自动添加适当的Vary响应头来提供帮助。

       9. 减少DNS查询

       23. 减小Cookie大小

       25. 最小化DOM的访问次数

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

       31. 不要在HTML中缩放图像

       34. 将组件拆分到多个文档中

  两种形式都会产生相同的效果:浏览器向您的服务器发出另一个请求

  • 缓存对访问元素的引用
  • 更新节点“离线”,然后将它们添加到树中
  • 避免使用JavaScript修复布局

       服务器根据文件类型选择gzip的内容,但通常在他们决定压缩的内容方面受到限制。大多数网站都会gzip他们的HTML文档。gzip你的脚本和样式表也是值得的,但很多网站都错过了这个机会。实际上,压缩包括XML和JSON在内的任何文本响应都是值得的。不应对图像和PDF文件进行gzip压缩,因为它们已经过压缩。试图对它们进行gzip不仅浪费CPU,而且可能会增加文件大小。

       将样式表放在文档底部附近的问题是它禁止在许多浏览器(包括Internet Explorer)中逐行渲染。这些浏览器会阻止渲染,以避免在样式发生变化时重绘页面元素。用户查看空白页面时卡住了。

       表达式的问题在于它们的评估频率高于大多数人的预期。它们不仅在页面呈现和调整大小时进行评估,而且在页面滚动时甚至在用户将鼠标移动到页面上时进行评估。在CSS表达式中添加计数器可以让我们跟踪CSS表达式的计算时间和频率。在页面上移动鼠标可以轻松生成10,000多个评估。

       Gzip是目前最流行,最有效的压缩方法。它由GNU项目开发,并由RFC 1952标准化。您可能会看到的唯一其他压缩格式是deflate,但效果较差且不太受欢迎。

  有关更多信息,请查看Tenni Theurer和Patty Chi的“ 在Carpool Lane中最大化并行下载 ”。

  在雅虎 邮件团队发现,在使用时XMLHttpRequest,POST在浏览器中实现为两步过程:首先发送标头,然后发送数据。因此最好使用GET,它只需要一个TCP数据包发送(除非你有很多cookie)。IE中的最大URL长度为2K,因此如果发送的数据超过2K,则可能无法使用GET。

       请记住,如果您使用远期的Expires标头,则必须在组件更改时更改组件的文件名。在Yahoo! 我们经常将此步骤作为构建过程的一部分:版本号嵌入在组件的文件名中,例如,yahoo_2.0.6.js。

  要记住的主要事情是重定向会降低用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容,因为页面中的任何内容都无法呈现,并且在HTML文档到达之前不会开始下载任何组件。

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

       如果Web服务器在请求中看到此标头,它可能会使用客户端列出的方法之一压缩响应。Web服务器通过响应中的Content-Encoding标头向Web客户端通知此情况。

src属性必须存在,并且必须包含引用非交互式(可选动画)图像资源的有效URL,该资源既不是分页也不是脚本。如果元素的基URI与文档的地址相同,则src属性的值不能是空字符串。

  此限制与iPhone不会缓存大于25K的组件这一事实有关。请注意,这是未压缩的大小。这是缩小很重要的地方,因为单独使用gzip可能还不够。

英文链接:

       28. 避免使用filters

  最终结果是Apache和IIS生成的ETag对于完全相同的组件从一台服务器到另一台服务器不匹配。如果ETag不匹配,则用户不会收到ETag设计的小的,快速的304响应; 相反,他们将获得正常的200响应以及组件的所有数据。如果您只在一台服务器上托管您的网站,这不是问题。但是,如果您有多个服务器托管您的网站,并且您正在使用具有默认ETag配置的Apache或IIS,则您的用户正在变慢页面,您的服务器负载更高,您正在消耗更大的带宽,并且代理服务器没有有效地缓存您的内容。即使您的组件具有远期Expires标头,每当用户点击重新加载或刷新时,仍会发出条件GET请求。

       7. 避免使用CSS中的expressions

  1. 使用内容分发网络(CDN)

       尽可能多地压缩文件类型是减轻页面重量和加速用户体验的简便方法。

  帮助您完成工作的工具:YUI Image Loader允许您将图像延迟到折叠下方,YUI Get实用程序是一种简单的方法,可以动态地包含JS和CSS。在野外的例子看看雅虎!打开Firebug网络面板的主页。

  雅虎 搜索开创性研究和真实用户测试,以证明使用此技术的好处。

  1. 添加Expires或Cache-Control标头

  组合文件是一种通过将所有脚本组合到单个脚本中来减少HTTP请求数量的方法,并且类似地将所有CSS组合到单个样式表中。当脚本和样式表在不同页面之间变化时,组合文件更具挑战性,但使这部分发布过程可以缩短响应时间。

  使用301和302状态代码完成重定向。以下是301响应中HTTP标头的示例:

浏览器(和代理)使用缓存来减少HTTP请求的数量和大小,从而加快网页加载速度。Web服务器使用HTTP响应中的Expires头来告诉客户端可以缓存组件多长时间。这是一个遥远的未来Expires标题,告诉浏览器这个响应在2010年4月15日之前不会过时。

       13. 配置实体标记ETag

       其中许多性能规则都涉及外部组件的管理方式。但是,在出现这些考虑因素之前,您应该提出一个更基本的问题:JavaScript和CSS是否应该包含在外部文件中,还是内嵌在页面中?

  那么您的图像(mycat.jpg)应该是100x100px而不是缩小的500x500px图像。

  您也不需要等待onload事件以便开始使用DOM树执行某些操作。通常,您只需要在树中访问要访问的元素。您不必等待下载所有图像。DOMContentLoaded是您可能考虑使用的事件而不是onload,但在所有浏览器中都可用之前,您可以使用具有方法的YUI事件实用程序onAvailable

<img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 

  除了防止多次插入相同的脚本之外,此函数还可以处理脚本的其他问题,例如依赖性检查和向脚本文件名添加版本号以支持远期的Expires头。

       许多网站都处于这些指标的中间。对于这些站点,最佳解决方案通常是将JavaScript和CSS部署为外部文件。内联的唯一例外是主页,例如Yahoo!的首页和My Yahoo! 。每个会话具有很少(可能只有一个)页面视图的主页可能会发现内联JavaScript和CSS会导致更快的最终用户响应时间。

  预加载可能看起来与延迟加载相反,但它实际上有不同的目标。通过预加载组件,您可以利用浏览器空闲的时间并请求将来需要的组件(如图像,样式和脚本)。这样,当用户访问下一页时,您可以将大部分组件放在缓存中,并且您的页面将为用户加载更快。

  在IE中,@import行为与<link>在页面底部使用相同,因此最好不要使用它。

  之后,如果浏览器必须验证组件,它将使用If-None-Match标头将ETag传递回原始服务器。如果ETag匹配,则返回304状态代码,从而将响应减少12195字节。

使用远期Expires标头仅在用户访问过您的网站后才会影响网页浏览量。当用户第一次访问您的站点并且浏览器的缓存为空时,它对HTTP请求的数量没有影响。因此,此性能改进的影响取决于用户使用已准备好的缓存命中您的页面的频率。(“已准备好的缓存”已包含页面中的所有组件。)我们在Yahoo!上测量了这一点。并发现带有固定缓存的页面查看次数为75-85%。通过使用远期的Expires标头,您可以增加浏览器缓存的组件数量,并在后续页面视图中重复使用,而无需通过用户的Internet连接发送单个字节。

  iframe允许将HTML文档插入父文档中。了解iframe如何运作以便有效使用非常重要。

  带有空字符串src属性的图像会出现多个预期。它以两种形式出现:

       10. 压缩JavaScript和CSS(包括内联<script>和<style>)

  域名系统(DNS)将主机名映射到IP地址,就像电话簿将人们的姓名映射到他们的电话号码一样。当您在浏览器中键入www.yahoo.com时,浏览器联系的DNS解析器将返回该服务器的IP地址。DNS有成本。DNS通常需要20-120毫秒才能查找给定主机名的IP地址。在DNS查找完成之前,浏览器无法从此主机名下载任何内容。

       14. 使Ajax可以缓存

       29. 优化图片

       CSS表达式是一种动态设置CSS属性的强大(且危险)方法。从版本5开始,它们在Internet Explorer中受支持,但从IE8开始不推荐使用。例如,可以使用CSS表达式将背景颜色设置为每小时交替:  

... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->

  在一个页面中两次包含相同的JavaScript文件会损害性能。这并不像你想象的那么不寻常。对美国十大顶级网站的评论显示,其中两个网站包含重复的脚本。两个主要因素会增加脚本在单个网页中重复的几率:团队规模和脚本数量。当它发生时,重复的脚本会通过创建不必要的HTTP请求和浪费的JavaScript执行来损害性能。

  之前的最佳实践之一声明CSS应位于顶部以允许渐进式渲染。

  浏览器自动将用户带到该Location字段中指定的URL 。重定向所需的所有信息都在标题中。响应的主体通常是空的。尽管有其名称,但实际上不会缓存301或302响应,除非其他标题(例如ExpiresCache-Control表示它应该是)。元刷新标记和JavaScript是将用户定向到不同URL的其他方法,但如果必须进行重定向,则首选技术是使用标准3xx HTTP状态代码,主要是为了确保后退按钮正常工作。

  实际上有几种类型的预加载:

  减少页面中组件数量的一种方法是简化页面设计。但有没有办法构建内容更丰富的页面,同时还能实现快速响应时间?以下是一些减少HTTP请求数量的技术,同时仍支持丰富的页面设计。

       33. 保持组件小于25K

       15. 尽早清除缓冲区

       5. 将CSS样式表放在顶部

       减少CSS表达式求值次数的一种方法是使用一次性表达式,其中第一次计算表达式时,它将style属性设置为显式值,这将替换CSS表达式。如果必须在页面的整个生命周期中动态设置样式属性,则使用事件处理程序而不是CSS表达式是另一种方法。如果必须使用CSS表达式,请记住它们可能会被评估数千次,并可能影响页面的性能。

  考虑刷新的好地方就在HEAD之后,因为头部的HTML通常更容易生成,并且它允许您包含任何CSS和JavaScript文件,以便浏览器在后端处理时并行地开始获取。

  缓存DNS查找以获得更好的性能。此缓存可以在由用户的ISP或局域网维护的特殊缓存服务器上进行,但在单个用户的计算机上也存在缓存。DNS信息保留在操作系统的DNS缓存中(Microsoft Windows上的“DNS客户端服务”)。大多数浏览器都有自己的缓存,与操作系统的缓存分开。只要浏览器将DNS记录保存在自己的缓存中,它就不会因操作系统请求记录而烦恼。

       26. 开发巧妙的事件处理程序

       11. 避免重定向

  • 即使空白也要花钱
  • 阻止页面onload
  • 非语义

  有关更多信息,请查看 Julien Lecomte 的YUI影院的 “高性能Ajax应用程序”。

       对于通常是许多页面视图中的第一个的首页,有一些技术可以利用内联提供的HTTP请求的减少,以及通过使用外部文件实现的缓存优势。其中一种技术是在首页中内联JavaScript和CSS,但在页面加载完成后动态下载外部文件。后续页面将引用应该已存在于浏览器缓存中的外部文件。

  1. 直接的HTML

    <img src =“”>

  2. JavaScript的

    var img = new Image(); 
    img.src =“”;

ExpiresDefault "access plus 10 years"

  有关更多信息,请查看 Julien Lecomte 的YUI影院的 “高性能Ajax应用程序”。

作为实现地理位置分散的内容的第一步,请勿尝试重新设计Web应用程序以在分布式体系结构中工作。根据应用程序的不同,更改体系结构可能包括令人生畏的任务,例如同步会话状态和跨服务器位置复制数据库事务。尝试缩短用户与您的内容之间的距离可能会延迟或永远不会通过此应用程序架构步骤。

  • Internet Explorer向页面所在的目录发出请求。
  • Safari和Chrome会向实际页面提出请求。
  • Firefox 3及更早版本的行为与Safari和Chrome相同,但3.5版解决了此问题[错误444931],不再发送请求。
  • 遇到空图像时,Opera不执行任何操作。

  当用户请求页面时,后端服务器可能需要200到500毫秒才能将HTML页面拼接在一起。在此期间,浏览器在等待数据到达时处于空闲状态。在PHP中,您有函数flush()。它允许您将部分准备好的HTML响应发送到浏览器,以便浏览器可以在后端忙于HTML页面的其余部分时开始获取组件。这种好处主要出现在繁忙的后端或轻量级前端。

Accept-Encoding:gzip,deflate
  1. 通过发送大量意外流量来削弱您的服务器,特别是对于每天获得数百万页面浏览量的页面。
  2. 废弃服务器计算周期生成永远不会被查看的页面。
  3. 可能会损坏用户数据。如果您通过cookie或其他方式跟踪请求中的状态,则可能会破坏数据。即使图像请求未返回图像,浏览器也会读取并接受所有标头,包括所有cookie。虽然其余的响应被丢弃,但可能已经造成了损害。

       网页设计越来越丰富,这意味着页面中有更多的脚本,样式表,图像和Flash。您的页面的首次访问者可能必须发出多个HTTP请求,但通过使用Expires标头,您可以使这些组件可缓存。这可以避免后续页面查看中不必要的HTTP请求。Expires头文件通常与图像一起使用,但它们应该用于所有组件,包括脚本,样式表和Flash组件。

       20. 跨域拆分组件

  不必要的HTTP请求在Internet Explorer中发生,但在Firefox中不发生。在Internet Explorer中,如果外部脚本包含两次且不可缓存,则在页面加载期间会生成两个HTTP请求。即使脚本是可缓存的,当用户重新加载页面时也会发生额外的HTTP请求。

  希望浏览器将来不会出现这个问题。不幸的是,<script src =“”>和<link href =“”>没有这样的子句。也许还有时间进行调整以确保浏览器不会意外地实现此行为。

  一些大型互联网公司拥有自己的CDN,但使用CDN服务提供商(如Akamai Technologies,EdgeCast或level3)具有成本效益。对于初创公司和私人网站来说,CDN服务的成本可能过高,但随着您的目标受众变得越来越大并变得更加全球化,CDN对于实现快速响应时间是必要的。在Yahoo!中,将静态内容从其应用程序Web服务器移动到CDN(如上所述的第三方以及Yahoo自己的CDN)的属性将最终用户响应时间提高了20%或更多。切换到CDN是一个相对容易的代码更改,将显著提高您的网站的速度。

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 性能 雅虎 军规 性能优化