,而不是因为它具有换行效果才使用它。
DOM元素数量很容易计算出来,只需要在Firebug的控制台内输入:
document.getElementsByTagName('*').length
那么多少个DOM元素算是多呢?
这可以对照有很好标记使用的类似页面。
比如Yahoo!
主页是一个内容非常多的页面,但是它只使用了700个元素(HTML标签)。
8、根据域名划分页面内容
把页面内容划分成若干部分可以使你最大限度地实现平行下载。
由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。
例如,你可以把用到的HTML内容和动态内容放在http:
//www.example.org/上,而把页面各种组件(图片、脚本、CSS)分别存放在statics1.example.org和statics.example.org上。
你可在TenniTheurer和PattyChi合写的文章MaximizingParallelDownloadsintheCarpoolLane找到更多相关信息。
9、使iframe的数量最小
ifrmae元素可以在父文档中插入一个新的HTML文档。
了解iframe的工作理然后才能更加有效地使用它,这一点很重要。
解决加载缓慢的第三方内容如图标和广告等的加载问题
Securitysandbox
并行加载脚本
即时内容为空,加载也需要时间
会阻止页面加载
没有语意
10、不要出现404错误
HTTP请求时间消耗是很大的,因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的,它只会降低用户体验而不会有一点好处。
有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。
最糟糕的情况是指向外部JavaScript的链接出现问题并返回404代码。
首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
除了在网站在内容上的改进外,在网站服务器端上也有需要注意和改进的地方,它们包括:
使用内容分发网络
为文件头指定Expires或Cache-Control
Gzip压缩文件内容
配置ETag
尽早刷新输出缓冲
使用GET来完成AJAX请求
11、使用内容分发网络
用户与你网站服务器的接近程度会影响响应时间的长短。
把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
但是首先我们应该做些什么呢?
按地域布置网站内容的第一步并不是要尝试重新架构你的网站让他们在分发服务器上正常运行。
根据应用的需求来改变网站结构,这可能会包括一些比较复杂的任务,如在服务器间同步Session状态和合并数据库更新等。
要想缩短用户和内容服务器的距离,这些架构步骤可能是不可避免的。
要记住,在终端用户的响应时间中有80%到90%的响应时间用于下载图像、样式表、脚本、Flash等页面内容。
这就是网站性能黄金守则。
和重新设计你的应用程序架构这样比较困难的任务相比,首先来分布静态内容会更好一点。
这不仅会缩短响应时间,而且对于内容分发网络来说它更容易实现。
内容分发网络(ContentDeliveryNetwork,CDN)是由一系列分散到各个不同地理位置上的Web服务器组成的,它提高了网站内容的传输速度。
用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。
例如,拥有最少网络跳数(networkhops)和响应速度最快的服务器会被选定。
一些大型的网络公司拥有自己的CDN,但是使用像AkamaiTechnologies,MirrorImageInternet,或者LimelightNetworks这样的CDN服务成本却非常高。
对于刚刚起步的企业和个人网站来说,可能没有使用CDN的成本预算,但是随着目标用户群的不断扩大和更加全球化,CDN就是实现快速响应所必需的了。
以Yahoo来说,他们转移到CDN上的网站程序静态内容节省了终端用户20%以上的响应时间。
使用CDN是一个只需要相对简单地修改代码实现显著改善网站访问速度的方法。
12、为文件头指定Expires或Cache-Control
这条守则包括两方面的内容:
对于静态内容:
设置文件头过期时间Expires的值为“Neverexpire”(永不过期)
对于动态内容:
使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求
网页内容设计现在越来越丰富,这就意味着页面中要包含更多的脚本、样式表、图片和Flash。
第一次访问你页面的用户就意味着进行多次的HTTP请求,但是通过使用Expires文件头就可以使这样内容具有缓存性。
它避免了接下来的页面访问中不必要的HTTP请求。
Expires文件头经常用于图像文件,但是应该在所有的内容都使用他,包括脚本、样式表和Flash等。
浏览器(和代理)使用缓存来减少HTTP请求的大小和次数以加快页面访问速度。
Web服务器在HTTP响应中使用Expires文件头来告诉客户端内容需要缓存多长时间。
下面这个例子是一个较长时间的Expires文件头,它告诉浏览器这个响应直到2010年4月15日才过期。
Expires:
Thu,15Apr201020:
00:
00GMT
如果你使用的是Apache服务器,可以使用ExpiresDefault来设定相对当前日期的过期时间。
下面这个例子是使用ExpiresDefault来设定请求时间后10年过期的文件头:
ExpiresDefault"accessplus10years"
要切记,如果使用了Expires文件头,当页面内容改变时就必须改变内容的文件名。
依Yahoo!
来说我们经常使用这样的步骤:
在内容的文件名中加上版本号,如yahoo_2.0.6.js。
使用Expires文件头只有会在用户已经访问过你的网站后才会起作用。
当用户首次访问你的网站时这对减少HTTP请求次数来说是无效的,因为浏览器的缓存是空的。
因此这种方法对于你网站性能的改进情况要依据他们“预缓存”存在时对你页面的点击频率(“预缓存”中已经包含了页面中的所有内容)。
Yahoo!
建立了一套测量方法,我们发现所有的页面浏览量中有75~85%都有“预缓存”。
通过使用Expires文件头,增加了缓存在浏览器中内容的数量,并且可以在用户接下来的请求中再次使用这些内容,这甚至都不需要通过用户发送一个字节的请求。
13、Gzip压缩文件内容
网络传输中的HTTP请求和应答时间可以通过前端机制得到显著改善。
的确,终端用户的带宽、互联网提供者、与对等交换点的靠近程度等都不是网站开发者所能决定的。
但是还有其他因素影响着响应时间。
通过减小HTTP响应的大小可以节省HTTP响应时间。
从HTTP/1.1开始,web客户端都默认支持HTTP请求中有Accept-Encoding文件头的压缩格式:
Accept-Encoding:
gzip,deflate
如果web服务器在请求的文件头中检测到上面的代码,就会以客户端列出的方式压缩响应内容。
Web服务器把压缩方式通过响应文件头中的Content-Encoding来返回给浏览器。
Content-Encoding:
gzip
Gzip是目前最流行也是最有效的压缩方式。
这是由GNU项目开发并通过RFC1952来标准化的。
另外仅有的一个压缩格式是deflate,但是它的使用范围有限效果也稍稍逊色。
Gzip大概可以减少70%的响应规模。
目前大约有90%通过浏览器传输的互联网交换支持gzip格式。
如果你使用的是Apache,gzip模块配置和你的版本有关:
Apache1.3使用mod_zip,而Apache2.x使用moflate。
浏览器和代理都会存在这样的问题:
浏览器期望收到的和实际接收到的内容会存在不匹配的现象。
幸好,这种特殊情况随着旧式浏览器使用量的减少在减少。
Apache模块会通过自动添加适当的Vary响应文件头来避免这种状况的出现。
服务器根据文件类型来选择需要进行gzip压缩的文件,但是这过于限制了可压缩的文件。
大多数web服务器会压缩HTML文档。
对脚本和样式表进行压缩同样也是值得做的事情,但是很多web服务器都没有这个功能。
实际上,压缩任何一个文本类型的响应,包括XML和JSON,都值得的。
图像和PDF文件由于已经压缩过了所以不能再进行gzip压缩。
如果试图gizp压缩这些文件的话不但会浪费CPU资源还会增加文件的大小。
Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。
14、配置ETag
Entitytags(ETags)(实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制(“实体”就是所说的“内容”,包括图片、脚本、样式表等)。
增加ETag为实体的验证提供了一个比使用“last-modifieddate(上次编辑时间)”更加灵活的机制。
Etag是一个识别内容版本号的唯一字符串。
唯一的格式限制就是它必须包含在双引号内。
原始服务器通过含有ETag文件头的响应指定页面内容的ETag。
HTTP/1.1200OK
Last-Modified:
Tue,12Dec200603:
03:
59GMT
ETag:
"10c24bc-4ab-457e1c1f"
Content-Length:
12195
稍后,如果浏览器要验证一个文件,它会使用If-None-Match文件头来把ETag传回给原始服务器。
在这个例子中,如果ETag匹配,就会返回一个304状态码,这就节省了12195字节的响应。
GET/i/yahoo.gifHTTP/1.1
Host:
If-Modified-Since:
Tue,12Dec200603:
03:
59GMT
If-None-Match:
"10c24bc-4ab-457e1c1f"
HTTP/1.1304NotModified
860612020285285
ETag的问题在于,它是根据可以辨别网站所在的服务器的具有唯一性的属性来生成的。
当浏览器从一台服务器上获得页面内容后到另外一台服务器上进行验证时ETag就会不匹配,这种情况对于使用服务器组和处理请求的网站来说是非常常见的。
默认情况下,Apache和IIS都会把数据嵌入ETag中,这会显著减少多服务器间的文件验证冲突。
Apache1.3和2.x中的ETag格式为inode-size-timestamp。
即使某个文件在不同的服务器上会处于相同的目录下,文件大小、权限、时间戳等都完全相同,但是在不同服务器上他们的内码也是不同的。
IIS5.0和IIS6.0处理ETag的机制相似。
IIS中的ETag格式为Filetimestamp:
ChangeNumber。
用ChangeNumber来跟踪IIS配置的改变。
网站所用的不同IIS服务器间ChangeNumber也不相同。
不同的服务器上的Apache和IIS即使对于完全相同的内容产生的ETag在也不相同,用户并不会接收到一个小而快的304响应;相反他们会接收一个正常的200响应并下载全部内容。
如果你的网站只放在一台服务器上,就不会存在这个问题。
但是如果你的网站是架设在多个服务器上,并且使用Apache和IIS产生默认的ETag配置,你的用户获得页面就会相对慢一点,服务器会传输更多的内容,占用更多的带宽,代理也不会有效地缓存你的网站内容。
即使你的内容拥有Expires文件头,无论用户什么时候点击“刷新”或者“重载”按钮都会发送相应的GET请求。
如果你没有使用ETag提供的灵活的验证模式,那么干脆把所有的ETag都去掉会更好。
Last-Modified文件头验证是基于内容的时间戳的。
去掉ETag文件头会减少响应和下次请求中文件的大小。
微软的这篇支持文稿讲述了如何去掉ETag。
在Ap