iisphp白屏技巧_Web机能优化

减少页面组件的方法实在便是简化页面设计。
那么有没有一种方法既能保持页面内容的丰富性又能达到加快相应韶光的目的呢？这里有几条减少HTTP要求次数同时又可能保持页面内容丰富的技能。

1、合并文件：合并文件是通过把所有的脚本放到一个文件中来减少HTTP要求的方法，例如可以大略地把所有的CSS文件都放入一个样式表中。
当脚本 或者样式表在不同页面中利用时须要做不同的修正，这可能会相比拟较麻烦，但即便如此也要把这个方法作为改进页面性能的主要一步；

2、CSS Sprites：CSS Sprites是减少图像要求的有效方法。
把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分;

3、图片舆图：图片舆图是把多张图片整合到一张图片中。
虽然文件的总体大小不会改变，但是可以减少HTTP要求次数。
图片舆图只有在图片的所有组成 部分在页面中是紧挨在 一起的时候才能利用，如导航栏。
确定图片的坐标和可能会比较繁琐且随意马虎出错，同时利用图片舆图导航也不具有可读性，因此不推举这种方法；

4、内联图像：内联图像是利用data:URL scheme的方法把图像数据加载页面中，这可能会增加页面的大小。
把内联图像放到样式表（可缓存）中可以减少HTTP要求同时又避免增加页面文件的大小，但是内联图像现在还没有得到主流浏览器的支持。

减少页面的HTTP要求次数是你优化网站性能首先要做的一步，这是改进首次访问用户等待韶光的最主要的方法。
犹如Tenni Theurer的博文《Browser Cahe Usage – Exposed》中所说，HTTP要求在无缓存情形下占去了40%到60%的相应韶光。
改进HTTP要求，会让那些初次访问你网站的人得到更加快速的体验。

域名系统（DNS）供应了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。
当你在浏览器地址栏中输入 www.52maomao.info时，DNS解析做事器就会返回这个域名对应的IP地址。
DNS解析的过程同样也是须要韶光的，一样平常情形下返回给定域名 对应的IP地址会花费20到120毫秒的韶光，而且在这个过程中浏览器什么都不会做直到DNS查找完毕。

缓存DNS查找可以改进页面性能。
这种缓存须要一个特定的缓存做事器，这种做事器一样平常属于用户的ISP供应商或者本地局域网掌握，但是它同样会在用 户利用的打算机上产生缓存。
DNS信息会保留在操作系统的DNS缓存中（微软Windows系统中DNS Client Service），大多数浏览器有独立于操作系统以外的自己的缓存。
由于浏览器有自己的缓存记录，因此在一次要求中它不会受到操作系统的影响。

Internet Explorer默认情形下对DNS查找记录的缓存韶光为30分钟，它在注册表中的键值为DnsCacheTimeout。
Firefox对DNS的查找 记录缓存韶光为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改为了1小时）。

当客户端中的DNS缓存都为空时（浏览器和操作系统都为空），DNS查找的次数和页面中主机名的数量相同，这个中包括页面中URL、图片、脚本文 件、样式表、Flash工具等包含的主机名。
减少主机名的数量可以减少DNS查找次数。
减少主机名的数量还可以减少页面中并行下载的数量。
减少DNS查找 次数可以节省相应韶光，但是减少并行下载却会增加相应韶光。
我的辅导原则是把这些页面中的内容分割成至少两部分但不超过四部分，这种结果便是在减少DNS 查找次数和保持较高程度并行下载两者之间的权衡了。

跳转是利用301和302代码实现的。
下面是一个相应代码为301的HTTP头：

HTTP/1.1 301 Moved Permanently

Location: http://52maomao.info/demo

Content-Type: text/html

浏览器会把用户指向到Location中指定的URL。
头文件中的所有信息在一次跳转中都是必需的，内容部分可以为空。
不管他们的名称，301和302 相应都不会被缓存，除非增加一个额外的头选项，如Expires或者Cache-Control来指定它缓存。

<meat />元素的刷新标签和JavaScript也可以实现URL的跳转，但是如果你必须要跳转的时候，最好的方法便是利用标准的3XXHTTP状态代 码，这紧张是为了确保“退却撤退”按钮可以精确地利用。

但是要记住跳转会降落用户体验。
在用户和HTML文档中间增加一个跳转，会拖延页面中所有元素的显示，由于在HTML文件被加载前任何文件（图像、 Flash等）都不会被下载。

有一种常常被网页开拓者忽略却每每十分摧残浪费蹂躏相应韶光的跳转征象。
这种征象发生在当URL本该有斜杠（/）却被忽略掉时。
例如，当我们要访问 http: //astrology.yahoo.com/astrology 时，实际上返回的是一个包含301代码的跳转，它指向的是http://astrology.yahoo.com/astrology/ （把稳末端的斜杠）。
在Apache做事器中可以利用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

连接新网站和旧网站是跳转功能常常被用到的另一种情形。
这种情形下每每要连接网站的不同内容然后根据用户的不同类型（如浏览器类型、用户账号所属类 型）来进行跳转。
利用跳转来实现两个网站的切换十分大略，须要的代码量也不多。
只管利用这种方法对付开拓者来说可以降落繁芜程度，但是它同样降落用户体 验。

一个可替代方法便是如果两者在同一台做事器上时利用Alias和mod_rewrite和实现。
如果是由于域名的不同而采取跳转，那么可以通过利用 Alias或者mod_rewirte建立CNAME（保存一个域名和其余一个域名之间关系的DNS记录）来替代。

Ajax常常被提及的一个好处便是由于其从后台做事器传输信息的异步性而为用户带来的反馈的即时性。
但是，利用Ajax并不能担保用户不会在等待异步的javascript和XML相应上花费韶光。

在很多运用中，用户是否须要等待相应取决于Ajax如何来利用。
例如，在一个基于Web的Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。
记住一点，“异步”并不虞味着“即时”，这很主要。

为了提高性能，优化Ajax相应是很主要的。
提高Ajxa性能的方法中最主要的方法便是使相应具有可缓存性，详细的谈论可以查看《Add an Expires or a Cache-Control Header》。
其它的几条规则也同样适用于Ajax：

1、gizp压缩文件；

2、减少DNS查找次数；

3、精简JavaScript；

4、避免跳转；

5、配置ETags。

让我们来看一个例子：一个Web2.0的Email客户端会利用Ajax来自动完成对用户地址薄的下载。
如果用户在上次利用过Email web运用程序后没有对地址薄作任何的修正，而且Ajax相应通过Expire或者Cacke-Control头来实现缓存，那么就可以直接从上一次的缓 存中读取地址薄了。
必须奉告浏览器是利用缓存中的地址薄还是发送一个新的要求。
这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑韶光的韶光戳来实现，例如，&t=11900241612等。
如果地址薄在上次下载后没有被编辑过，韶光戳就不变，则 从浏览器的缓存中加载从而减少了一次HTTP要求过程。
如果用户修正过地址薄，韶光戳就会用来确定新的URL和缓存相应并不匹配，浏览器就会主要要求更新 地址薄。

纵然你的Ajxa相应是动态天生的，哪怕它只适用于一个用户，那么它也该当被缓存起来，这样做可以使你的Web2.0运用程序更加快捷。

你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和构造可以稍后再加载？

把全体过程按照onload事宜分隔成两部分，JavaScript是一个空想的选择。
例如，如果你有用于实现拖放和动画的JavaScript， 那么它 就以等待稍后加载，由于页面上的拖放元素是在初始化呈现之后才发生的。
其它的例如隐蔽部分的内容（用户操作之后才显现的内容）和处于折叠部分的图像也可以 推迟加载

工具可以节省你的事情量：YUI Image Loader可以帮你推迟加载折叠部分的图片，YUI Get utility是包含js和CSS的便捷方法，比如你可以打开Firebug的Net选项卡看一下Yahoo的首页。

当性能目标和其它网站开拓实践同等时就会相得益彰。
这种情形下，通过程序提高网站性能的方法见告我们，在支持JavaScript的情形下，可以先 去除用户体验，不过这要担保你的网站在没有JavaScript也可以正常运行。
在确定页面运行正常后，再加载脚本来实现如拖放和动画等更加花哨的效果。

预加载和后加载看起来彷佛正好相反，但实际上预加载是为了实现其余一种目标。
预加载是在浏览器空闲时要求将来可能会用到的页面内容（如图像、样式表和脚本）。
利用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改进访问速率。

下面供应了几种预加载方法：

无条件加载：触发onload事宜时，直接加载额外的页面内容。
以Google.com为例，你可以看一下它的spirit image图像是若何在onload中加载的。
这个spirit image图像在google.com主页中是不须要的，但是却可以在搜索结果页面中用到它。

有条件加载：根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。
在search.yahoo.com中你可以看到如何在你输入内容时加载额外的页面内容。

有预期的加载：载入重新设计过的页面时利用预加载。
这种情形常常涌如今页面经由重新设计后用户抱怨“新的页面看起来很酷，但是却比以前慢”。
问题可 能出在用户对付你的旧站点建立了完全的缓存，而对付新站点却没有任何缓存内容。
因此你可以在访问新站之前就加载一部内容来避免这种结果的涌现。
在你的旧站 中利用浏览器的空余韶光加载新站中用到的图像的和脚本来提高访问速率。

一个繁芜的页面意味着须要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。
比如当你增加一个事宜句柄时在500和5000个DOM元素中循环效果肯定是不一样的。

大量的DOM元素的存在意味着页面中有可以不用移除内容只须要更换元素标签就可以精简的部分。
你在页面布局中利用表格了吗？你有没有仅仅为告终构而引入更多的<div>元素呢？大概会存在一个适宜或者在语意是更贴切的标签可以供你利用。

YUI CSS utilities可以给你的布局带来巨大帮助：grids.css可以帮你实现整体布局，font.css和reset.css可以帮助你移除浏览器默 认格式。
它供应了一个重新核阅你页面中标签的机会，比如只有在语意上故意义时才利用<div>，而不是由于它具有换行效果才利用它。

DOM元素数量很随意马虎打算出来，只须要在Firebug的掌握台内输入：

document.getElementsByTagName(‘’).length

那么多少个DOM元素算是多呢？这可以对照有很好标记利用的类似页面。
比如Yahoo!主页是一个内容非常多的页面，但是它只利用了700个元素（HTML标签）。

把页面内容划分成多少部分可以使你最大限度地实现平行下载。
由于DNS查找带来的影响你首先要确保你利用的域名数量在2个到4个之间。
例如，你可以 把用到的HTML内容和动态内容放在www.52maomao.info上，而把页面各种组件（图片、脚本、CSS)分别存放在 statics1.52maomao.info和statics.52maomao.info上。

ifrmae元素可以在父文档中插入一个新的HTML文档。
理解iframe的事情理然后才能更加有效地利用它，这一点很主要。

<iframe>优点：

1、办理加载缓慢的第三方内容如图标和广告等的加载问题；

2、Security sandbox；

3、并行加载脚本。

<iframe>的缺陷：

1、即时内容为空，加载也须要韶光；

2、会阻挡页面加载；

3、没有语意。

HTTP要求韶光花费是很大的，因此利用HTTP要求来得到一个没有用处的相应（例如404没有找到页面）是完备没有必要的，它只会降落用户体验而不会有一点好处。

有些站点把404缺点相应页面改为“你是不是要找”，这虽然改进了用户体验但是同样也会摧残浪费蹂躏做事器资源（如数据库等）。
最糟糕的情形是指向外部 JavaScript的链接涌现问题并返回404代码。
首先，这种加载会毁坏并行加载；其次浏览器会把试图在返回的404相应内容中找到可能有用的部分当 作JavaScript代码来实行。

用户与你网站做事器的靠近程度会影响相应韶光的是非。
把你的网站内容分散到多个、处于不同地域位置的做事器上可以加快下载速率。
但是首先我们该当做些什么呢？

按地域支配网站内容的第一步并不是要考试测验重新架构你的网站让他们在分发做事器上正常运行。
根据运用的需求来改变网站构造，这可能会包括一些比较繁芜 的任务，如在做事器间同步Session状态和合并数据库更新等。
要想缩短用户和内容做事器的间隔，这些架构步骤可能是不可避免的。

要记住，在终端用户的相应韶光中有80%到90%的相应韶光用于下载图像、样式表、脚本、Flash等页面内容。
这便是网站性能黄金守则。
和重新设 跟你的运用程序架构这样比较困难的任务比较，首先来分布静态内容会更好一点。
这不仅会缩短相应韶光，而且对付内容分发网络来说它更随意马虎实现。

内容分发网络（Content Delivery Network，CDN）是由一系列分散到各个不同地理位置上的Web做事器组成的，它提高了网站内容的传输速率。
用于向用户传输内容的做事器紧张是根据 和用户在网络上的靠近程度来指定的。
例如，拥有最少网络跳数（network hops）和相应速率最快的做事器会当选定。

一些大型的网络公司拥有自己的CDN，但是利用像Akamai Technologies，Mirror Image Internet， 或者Limelight Networks这样的CDN做事本钱却非常高。
对付刚刚起步的企业和个人网站来说，可能没有利用CDN的本钱预算，但是随着目标用户群的不断扩大和更加 环球化，CDN便是实现快速相应所必需的了。
以Yahoo来说，他们转移到CDN上的网站程序静态内容节省了终端用户20%以上的相应韶光。
利用CDN是 一个只须要相对大略地修正代码实现显著改进网站访问速率的方法。

为文件头指定Expires或Cache-Control

这条守则包括两方面的内容：

对付静态内容：设置文件头过期韶光Expires的值为“Never expire”（永不过期）；

对付动态内容：利用恰当的Cache-Control文件头来帮助浏览器进行有条件的要求。

网页内容设计现在越来越丰富，这就意味着页面中要包含更多的脚本、样式表、图片和Flash。
第一次访问你页面的用户就意味着进行多次的HTTP请 求，但是通过利用Expires文件头就可以使这样内容具有缓存性。
它避免了接下来的页面访问中不必要的HTTP要求。
Expires文件头常常用于图像 文件， 但是该当在所有的内容都利用他，包括脚本、样式表和Flash等。

浏览器（和代理）利用缓存来减少HTTP要求的大小和次数以加快页面访问速率。
Web做事器在HTTP相应中利用Expires文件头来见告客户端 内容需 要缓存多永劫光。
下面这个例子是一个较永劫光的Expires文件头，它见告浏览器这个相应直到2010年4月15日才过期。

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

如果你利用的是Apache做事器，可以利用ExpiresDefault来设定相对当前日期的过期韶光。

下面这个例子是利用 ExpiresDefault来设定要求韶光后10年过期的文件头：

ExpiresDefault “access plus 10 years”

要牢记，如果利用了Expires文件头，当页面内容改变时就必须改变内容的文件名。
咦Yahoo!来说我们常常利用这样的步骤：在内容的文件名中加上版本号，yahoo_2.0.6.js。

利用Expires文件头只有会在用户已经访问过你的网站后才会起浸染。
当用户首次访问你的网站时这对减少HTTP要求次数来说是无效的，由于浏览 器的缓存是空的。
因此这种方法对付你网站性能的改进情形要依据他们“预缓存”存在时对你页面的点击频率（“预缓存”中已经包含了页面中的所有内容）。
Yahoo!建立了一套丈量方法，我们创造所有的页面浏览量中有75~85%都有“预缓存”。
通过利用Expires文件头，增加了缓存在浏览器中内容的 数量，并且可以在用户接下来的要求中再次利用这些内容，这乃至都不须要通过用户发送一个字节的要求。

网络传输中的HTTP要乞降应答韶光可以通过前端机制得到显著改进。
的确，终端用户的带宽、互联网供应者、与对等交流点的靠近程度等都不是网站开拓者所能决定的。
但是还有其他成分影响着相应韶光。
通过减小HTTP相应的大小可以节省HTTP相应韶光。

从HTTP/1.1开始，web客户端都默认支持HTTP要求中有Accept-Encoding文件头的压缩格式：

Accept-Encoding: gzip, deflate

如果web做事器在要求的文件头中检测到上面的代码，就会以客户端列出的办法压缩相应内容。
Web做事器把压缩办法通过相应文件头中的Content- Encoding来返回给浏览器。

Content-Encoding: gzip

Gzip是目前最盛行也是最有效的压缩办法。
这是由GNU项目开拓并通过RFC 1952来标准化的。
其余仅有的一个压缩格式是deflate，但是它的利用范围有限效果也稍稍逊色。

Gzip大概可以减少70%的相应规模。
目前大约有90%通过浏览器传输的互联网交流支持gzip格式。
如果你利用的是Apache，gzip模块配置和你的版本有关：Apache 1.3利用mod_zip，而Apache 2.x利用moflate。

浏览器和代理都会存在这样的问题：浏览器期望收到的和实际吸收到的内容会存在不匹配的征象。
幸好，这种分外情形随着旧式浏览器利用量的减少在减少。
Apache模块会通过自动添加适当的Vary相应文件头来避免这种状况的涌现。

做事器根据文件类型来选择须要进行gzip压缩的文件，但是这过于限定了可压缩的文件。
大多数web做事器会压缩HTML文档。
对脚本和样式表进行 压缩同 样也是值得做的事情，但是很多web做事器都没有这个功能。
实际上，压缩任何一个文本类型的相应，包括XML和JSON，都值得的。
图像和PDF文件由于 已经压缩过了以是不能再进行gzip压缩。
如果试图gizp压缩这些文件的话不但会摧残浪费蹂躏CPU资源还会增加文件的大小。

Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的大略方法。

更多详细的GZIP压缩信息请参考我的其余两篇文章：《GZIP页面压缩事理》和《WEB性能优化之GZIP压缩》

Entity tags（ETags）（实体标签）是web做事器和浏览器用于判断浏览器缓存中的内容和做事器中的原始内容是否匹配的一种机制（“实体”便是所说的“内 容”，包括图片、脚本、样式表等）。
增加ETag为实体的验证供应了一个比利用“last-modified date（上次编辑韶光）”更加灵巧的机制。
Etag是一个识别内容版本号的唯一字符串。
唯一的格式限定便是它必须包含在双引号内。
原始做事器通过含有 ETag文件头的相应指定页面内容的ETag。

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传回给原始做事器。
在这个例子中，如果ETag匹配，就会返回一 个304状态码，这就节省了12195字节的相应。

GET /i/yahoo.gif HTTP/1.1

Host: love.52maomao.info

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

If-None-Match: “10c24bc-4ab-457e1c1f”

HTTP/1.1 304 Not Modified

ETag的问题在于，它是根据可以辨别网站所在的做事器的具有唯一性的属性来天生的。
当浏览器从一台做事器上得到页面内容后到其余一台做事器上进行 验证时ETag就会不匹配，这种情形对付利用做事器组合处理要求的网站来说是非常常见的。
默认情形下，Apache和IIS都会把数据嵌入ETag中，这 会显著减少多做事器间的文件验证冲突。

Apache 1.3和2.x中的ETag格式为inode-size-timestamp，纵然某个文件在不同的做事器上会处于相同的目录下，文件大小、权限、韶光戳等都完备相同，但是在不同做事器上他们的内码也是不同的。

IIS 5.0和IIS 6.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。
在Apache中，只须要在配置文件中大略添加下面一行代 码就可以了：FileETag none。

当用户要求一个页面时，无论如何都会花费200到500毫秒用于后台组织HTML文件。
在这期间，浏览器会一贯空闲等待数据返回。
在PHP中，你可 以利用flush()方法，它许可你把已经编译得好的部分HTML相应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容（脚本等）而后台同时处理 剩余的 HTML页面。
这样做的效果会在后台烦恼或者前台较空闲时更加明显。

输出缓冲运用最好的一个地方便是紧跟在<head />之后，由于HTML的头部分随意马虎天生而且头部每每包含CSS和JavaScript文件，这样浏览器就可以在后台编译剩余HTML的同时并行下载它们。
例子：

… <!– css, js –>

</head>

<body>

… <!– content –>

当利用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。
因此利用 GET最为恰当，由于它只需发送一个TCP包（除非你有很多cookie）。
IE中URL的最大长度为2K，因此如果你要发送一个超过2K的数据时就不能 利用GET了。

一个有趣的不同便是POST并不像GET那样实际发送数据。
根据HTTP规范，GET意味着“获取”数据，因此当你仅仅获取数据时利用GET更加故意义（从语意上讲也是如此），相反，发送并在做事端保存数据时利用POST。

在研究性能表现时，我们创造把样式表放到文档的<head />内部彷佛会加快页面的下载速率。
这是由于把样式表放到<head />内会使页面有步骤的加载显示。

看重性能的前端做事器每每希望页面有秩序地加载。
同时，我们也希望浏览器把已经吸收到内容尽可能显示出来。
这对付拥有较多内容的页面和网速较慢的用户来说 特殊主要。
向用户返回可视化的反馈，比如进程指针，已经有了较好的研究并形成了正式文档。
在我们的研究中HTML页面便是进程指针。
当浏览器有序地加载文 件头、导航栏、顶部的logo等对付等待页面加载的用户来说都可以作为可视化的反馈。
这从整体上改进了用户体验。

把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会终止内容的有序呈现。
浏览器中止呈现是为了避免样式改变引起的页面元素重绘，用户不得不面对一个空缺页面。

HTML规范清楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能涌如今文档的<head />区域内，只管它可以多次利用它”。
无论是引起白屏还是涌现没有样式化的内容都不值得去考试测验。
最好的方案便是按照HTML规范在文 档<head />内加载你的样式表。

CSS表达式是动态设置CSS属性的强大（但危险）方法。
Internet Explorer从第5个版本开始支持CSS表达式。
下面的例子中，利用CSS表达式可以实现隔一个小时切换一次背景颜色：

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

如上所示，expression中利用了JavaScript表达式。
CSS属性根据JavaScript表达式的打算结果来设置。
expression方法在其它浏览器中不起浸染，因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。

表达式的问题就在于它的打算频率要比我们想象得多。
不仅仅是在页面显示和缩放时，便是在页面滚动、乃至移动鼠标时都会要重新打算一次。
给CSS表达式增加一个计数器可以跟踪表达式的打算频率。
在页面中随便移动鼠标都可以轻松达到10000次以上的打算量。

一个减少CSS表达式打算次数的方法便是利用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。
如果样 式属性必须在页面周期内动态地改变，利用事宜句柄来代替CSS表达式是一个可行办法。
如果必须利用CSS表达式，一定要记住它们要打算成千上万次并且可能 会对你页面的性能产生影响。

很多性能规则都是关于如何处理外部文件的。
但是，在你采纳这些方法前你可能会问到一个更基本的问题：JavaScript和CSS是该当放在外部文件中呢还是把它们放在页面本身之内呢？

在实际运用中利用外部文件可以提高页面速率，由于JavaScript和CSS文件都能在浏览器中产生缓存。
内置在HTML文档中的 JavaScript和CSS则会在每次要求中随HTML文档重新下载。
这虽然减少了HTTP要求的次数，却增加了HTML文档的大小。
从另一方面来说， 如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP要求次数的同时可以减少HTML文档的大小。

关键问题是，外部JavaScript和CSS文件缓存的频率和要求HTML文档的次数有关。
虽然有一定的难度，但是仍旧有一些指标可以一丈量它。
如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复利用相同的脚本和样式表，缓存外部文件就会带来更大的益处。

许多网站没有功能建立这些指标。
对付这些网站来说，最好的办理方法便是把JavaScript和CSS作为外部文件引用。
比较适宜利用内置代码的例 这便是网站的主页，如Yahoo!主页和My Yahoo!。
主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以创造内置JavaScript和CSS对付终端用户来说会加快相应韶光。

对付拥有较大浏览量的首页来说，有一种技能可以平衡内置代码带来的HTTP要求减少与通过利用外部文件进行缓存带来的好处。
个中一个便是在首页中内 致 JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中利用到这些文件时，它们已经缓存到浏览器了。

精简是指从去除代码不必要的字符减少文件大小从而节省下载韶光。
消减代码时，所有的注释、不须要的空缺字符（空格、换行、tab缩进）等都要去掉。
在 JavaScript中，由于须要下载的文件体积变小了从而节省了相应韶光。
精简JavaScript中目前用到的最广泛的两个工具是JSMin和YUI Compressor。
YUI Compressor还可用于精简CSS。

稠浊是其余一种可用于源代码优化的方法。
这种方法要比精简繁芜一些并且在稠浊的过程更易产生问题。
在对美国前10大网站的调查中创造，精简也可以缩 小原来代码体积的21%，而稠浊可以达到25%。
只管稠浊法可以更好地缩减代码，但是对付JavaScript来说精简的风险更小。

除消减外部的脚本和样式表文件外，<script>和<style>代码块也可以并且该当进行消减。
纵然你用Gzip压缩 过脚本和样式表，精简这些文件仍旧可以节省5%以上的空间。
由于JavaScript和CSS的功能和体积的增加，消减代码将会得到益处。

前面的最佳实现中提到CSS该当放置在顶端以利于有序加载呈现。

在IE中，页面底部@import和利用<link>浸染是一样的，因此最好不要利用它。

IE独占属性AlphaImageLoader用于改动7.0以下版本中显示PNG图片的半透明效果。
这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。
在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。

完备避免利用AlphaImageLoader的最好方法便是利用PNG8格式来代替，这种格式能在IE中很好地事情。
如果你确实须要利用 AlphaImageLoader，请利用下划线_filter又使之对IE7以上版本的用户无效。

脚本带来的问题便是它阻挡了页面的平行下载。
HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。
如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。
但是当下载脚本 时，浏览器就不会同时下载其它文件了，即便是主机名不相同。

在某些情形下把脚本移到页面底部可能不太随意马虎。
比如说，如果脚本中利用了document.write来插入页面内容，它就不能被往下移动了。
这里可能还会有浸染域的问题。
很多情形下，都会碰着这方面的问题。

一个常常用到的替代方法便是利用延迟脚本。
DEFER属性表明脚本中没有包含document.write，它见告浏览器连续显示。
不幸的 是，Firefox并不支持DEFER属性。
在Internet Explorer中，脚本可能会被延迟但效果也不会像我们所期望的那样。
如果脚本可以被延迟，那么它就可以移到页面的底部，这会让你的页面加载的快一点。

在同一个页面中重复引用JavaScript文件会影响页面的性能。
你可能会认为这种情形并不多见。
对付美国前10大网站的调查显示个中有两家存在 重复引用脚本的情形。
有两种紧张成分导致一个脚本被重复引用的奇怪征象发生：团队规模和脚本数量。
如果真的存在这种情形，重复脚本会引起不必要的HTTP 要乞降无用的JavaScript运算，这降落了网站性能。

在Internet Explorer中会产生不必要的HTTP要求，而在Firefox却不会。
在Internet Explorer中，如果一个脚本被引用两次而且它又不可缓存，它就会在页面加载过程中产生两次HTTP要求。
即时脚本可以缓存，当用户重载页面时也会产 生额外的HTTP要求。

除增加额外的HTTP要求外，多次运算脚本也会摧残浪费蹂躏韶光。
在Internet Explorer和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

一个避免偶尔发生的两次引用同一脚本的方法是在模板中利用脚本管理模块引用脚本。
在HTML页面中利用<script />标签引用脚本的最常见方法便是：

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

在php中可以通过创建名为insertScript的方法来替代：

为了防止多次重复引用脚本，这个方法中还该当利用其它机制来处理脚本，如检讨所属目录和为脚本文件名中增加版本号以用于Expire文件头等。

利用JavaScript访问DOM元素比较慢，因此为了得到更多的该当页面，该当做到：

1、缓存已经访问过的有关元素；

2、线下更新完节点之后再将它们添加到文档树中；

3、避免利用JavaScript来修正页面布局。

有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章《高性能Ajax程序》。

有时候我们会觉得到页面反应迟缓，这是由于DOM树元素中附加了过多的事宜句柄并且些事宜句病被频繁地触发。
这便是为什么说利用event delegation（事宜代理）是一种好方法了。
如果你在一个div中有10个按钮，你只须要在div上附加一次事宜句柄就可以了，而不用去为每一个按 钮增加一个句柄。
事宜冒泡时你可以捕捉到事宜并判断出是哪个事宜发出的。

你同样也不用为了操作DOM树而等待onload事宜的发生。
你须要做的便是等待树构造中你要访问的元素涌现。
你也不用等待所有图像都加载完毕。

你可能会希望用DOMContentLoaded事宜来代替事宜运用程序中的onAvailable方法。

HTTP coockie可以用于权限验证和个性化身份等多种用场。
coockie内的有关信息是通过HTTP文件头来在web做事器和浏览器之间进行互换的。
因此保持coockie尽可能的小以减少用户的相应韶光十分主要。

有关更多信息可以查看Tenni Theurer和Patty Chi的文章《When the Cookie Crumbles》。
这们研究中紧张包括：

1、去除不必要的coockie；

2、使coockie体积只管即便小以减少对用户相应的影响；

3、把稳在适应级别的域名上设置coockie以便使子域名不受影响。

设置合理的过期韶光，较早的Expire韶光和不要过早去打消coockie，都会改进用户的相应韶光。

当浏览器在要求中同时要求一张静态的图片和发送coockie时，做事器对付这些coockie不会做任何地利用。
因此他们只是由于某些负面成分而创建的 网络传输。
所有你该当确定对付静态内容的要求是无coockie的要求。
创建一个子域名并用他来存放所有静态内容。

如果你的域名是www.52maomao.info，你可以在static.52maomao.info上存在静态内容。
但是，如果你不是在 www.52maomao.info 上而是在顶级域名52maomao.info设置了coockie，那么所有对付static.52maomao.info的要求都包含coockie。
在这种情 况下，你可以再重新购买一个新的域名来存在静态内容，并且要保持这个域名是有coockie的。
Yahoo!利用的是ymig.com，YouTube使 用的是ytimg.com，Amazon利用的是images-anazon.com等等。

利用无coockie域名存在静态内容的其余一个好处便是一些代理（做事器）可能会谢绝对coockie的内容要求进行缓存。
一个干系的建议便是， 如果你想确定该当利用52maomao.info还是www.52maomao.info 作为你的一主页，你要考虑到coockie带来的影响。
忽略掉www会使你除了把coockie设置到.example.org（是泛域名解析，代表 了所有子域名）外没有其它选择，因此出于性能方面的考虑最好是利用带有www的子域名并且在它上面设置coockie。

设计职员完成对页面的设计之后，不要急于将它们上传到web做事器，这里还须要做几件事：

你可以检讨一下你的GIF图片中图像颜色的数量是否和调色板规格同等。
利用imagemagick中下面的命令行很随意马虎检讨：identify-verbose image.gif。

如果你创造图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。

考试测验把GIF格式转换成PNG格式，看看是否节省空间。
大多数情形下是可以压缩的。
由于浏览器支持有限，设计者们每每不太乐意利用PNG格式的图 片，不过这 都是过去的事情了。
现在只有一个问题便是在真彩PNG格式中的alpha通道半透明问题，不过同样的，GIF也不是真彩格式也不支持半透明。
因此GIF能 做到的，PNG（PNG8）同样也能做到（除了动画）。
下面这条大略的命令可以安全地把GIF格式转换为PNG格式：

convert image.gif image.png

“我们要说的是：给PNG一个施展技艺的机会吧！
”

在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。
例如：

pngcrush image.png -rem alla -reduce -brute result.png

在所有的 JPEG图片上运行jpegtran。
这个工具可以对图片中的涌现的锯齿等做无损操作，同时它还可以用于优化和打消图片中的注释以及其它无用信息（如 EXIF信息）：

jpegtran -copy none -optimize -perfect src.jpg dest.jpg

在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；

Spirite 中把颜色较近的组合在一起可以降落颜色数，空想状况是低于256色以便适用PNG8格式；

便于移动，不要在Spirite的图像中间留有较大空隙。
这虽然不大会增加文件大小但对付用户代理来说它须要更少的内存来把图片解压为像素舆图。
100×100的图片为1万像素，而 1000×1000便是100万像素。

不要为了在HTML中设置长宽而利用比实际须要大的图片。
如果你须要：

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

那么你的图片（mycat.jpg）就该当是100×100像素而不是把一个500×500像素的图片缩小利用。

favicon.ico是位于做事器根目录下的一个图片文件。
它是必定存在的，由于纵然你不关心它是否有用，浏览器也会对它发出要求，因此最好不要 返回一 个404 Not Found的相应。
由于是在同一台做事器上，它每被要求一次coockie就会被发送一次。
这个图片文件还会影响下载顺序，例如在IE中当你在 onload中要求额外的文件时，favicon会在这些额外内容被加载前下载。

因此，为了减少favicon.ico带来的弊端，要做到：文件只管即便地小，最好小于1K。

在适当的时候（也便是你不要打算再换 favicon.ico的时候，由于改换新文件时不能对它进行重命名）为它设置Expires文件头。
你可以很安全地把Expires文件头设置为未来的几个月。
你可以通过核对当前favicon.ico的上次编辑韶光来作出判断。

Imagemagick可以帮你创建小巧的favicon。

这条限定紧张是由于iPhone不能缓存大于25K的文件。
把稳这里指的是解压缩后的大小。
由于纯挚gizp压缩可能达不哀求，因此精简文件就显得十分主要。

查看更多信息，请参阅Wayne Shea和Tenni Theurer的文件《Performance Research, Part 5: iPhone Cacheability – Making it Stick》。

把页面内容打包成复合文本就犹如带有多附件的Email，它能够使你在一个HTTP要求中取得多个组件（牢记：HTTP要求是很奢侈的）。
当你利用这条规则时，首先要确定用户代理是否支持（iPhone就不支持）。