把常用的js、css、改动不大的图片存放在里面，第二次访问的时候直接去本地缓存。广泛用于移动设备。

4）CSS和JS放置在正确的位置5）静态资源压缩

图片、CSS、JS 在发布前应该压缩。

6）静态资源多域名

对于图片、CSS、JS，可以使用多个域名，可以同时加载。

7）静态资源使用cdn存储

用户与您的网站服务器的距离会影响响应时间。静态资源可以放在内容分发网络（CDN）中，加快访问速度。

8）预加载

当某个功能没有显示出来时，在空闲时间预加载相关图片或js代码

9）DOM 操作优化

访问 DOM 元素很慢，因此要获取更多页面，您应该这样做：

10）优化算法

优化 js 处理中的搜索和排序算法。谨慎使用嵌套循环。

有时我们会觉得页面运行缓慢，因为附加到 DOM 树元素的事件处理程序太多，并且这些事件被频繁触发。这就是为什么使用事件（事件委托）是一个好主意的原因。如果一个 div 中有 10 个按钮，则只需将事件处理程序附加到 div 一次，而不是为每个按钮添加一个处理程序。您可以在事件冒泡时捕获它并找出发出了哪个事件。您也不必为了操作 DOM 树而等待事件发生。您需要做的就是等待要在树结构中访问的元素出现。您也不必等待所有图像加载。您可能希望在事件应用程序中使用事件而不是方法。

减少主机名的数量也会减少页面中的并行下载数量。减少 DNS 查找次数可以节省响应时间，但减少并行下载会增加响应时间。我的指导方针是将这些页面上的内容分成至少两个但不超过四个。结果是在减少 DNS 查找次数和保持高度并行下载之间进行权衡。

将页面内容分成多个部分可让您最大化并行下载。由于 DNS 查找的影响，您首先需要确保使用 2 到 4 个域。例如，您可以将使用过的 HTML 内容和动态内容放在 和 上，并将页面的各种组件（图像、脚本、CSS）存储在 和 上。

在用户和 HTML 文档之间添加跳转会延迟页面中所有元素的显示，因为在加载 HTML 文件之前不会下载任何文件（图像、Flash 等）。有一种跳转现象经常被web开发者忽略，但往往是浪费响应时间。当 URL 应该有斜杠 (/) 并被忽略时，就会发生这种情况。例如，当我们要访问 时，实际返回的是一个带有 301 代码的跳转（注意尾部斜杠）。这可以通过在服务器中使用 Alias 或 or 来避免。

链接新旧站点是另一种经常使用重定向的情况。在这种情况下，往往需要连接网站的不同内容，然后根据不同的用户类型（如浏览器类型、用户账号类型）进行跳转。使用跳转在两个网站之间切换非常简单，所需的代码量并不多。虽然使用这种方法降低了开发人员的复杂性，但它也降低了用户体验。如果两者都在同一台服务器上，另一种方法是使用别名和实现。如果因为域名不同使用跳转，可以使用别名或者在web服务器上跳转。

在某些情况下，ajax 可以使用缓存来减少网络开销。

让我们看一个例子：一个Web2.0 电子邮件客户端将使用Ajax 自动下载用户的通讯录。如果用户自上次使用 Email web 应用程序后没有对通讯录进行任何更改，并且 Ajax 响应通过或 Cacke- 进行缓存，则可以直接从上次缓存中读取通讯录。必须告知浏览器是使用缓存的地址簿还是发送新请求。这可以通过在读取地址簿的 Ajax URL 中添加一个带有最后编辑时间的时间戳来完成，例如 &t= 等。如果地址簿自上次下载后没有被编辑，则时间戳不变网站优化，并加载它从浏览器的缓存中提取，从而减少了 HTTP 请求过程。如果用户修改了通讯录，将使用时间戳来判断新的 URL 与缓存的响应不匹配，浏览器会发出更新通讯录的重要请求。即使您的 Ajxa 响应是动态生成的，即使它只针对一个用户，也应该缓存它。这样做可以使您的 Web2.0 应用程序更快。

复杂的页面意味着要下载更多的数据，这也意味着更慢的 DOM 遍历。例如，在添加事件处理程序时，循环遍历 500 个和 5000 个 DOM 元素肯定是不一样的。大量 DOM 元素的存在意味着页面的某些部分可以通过简单地替换元素标签来进行修剪而无需删除内容。您是否在页面布局中使用表格？您是否为了布局而引入了更多元素？可能有一个合适的或语义上更合适的标签供您使用。 YUI CSS 对你的布局有很大帮助：grids.css 可以帮助你实现整体布局，font.css 和 reset.css 可以帮助你删除浏览器默认格式。它提供了重新访问页面中标签的机会，例如仅在语义上有意义时才使用它，而不是因为它具有换行效果。 DOM 元素的数量很容易计算，只需在控制台中输入：.('*')。那么有多少 DOM 元素是太多了呢？这可以与标记良好以供使用的类似页面进行比较。例如，雅虎！ 是一个内容非常丰富的页面，但它只使用了 700 个元素（HTML 标签）。

元素在父文档中插入一个新的 HTML 文档。了解它的工作原理很重要，这样您才能更有效地使用它。

好处：解决图标、广告等第三方内容加载缓慢的问题； 并行加载脚本；

缺点：即使内容为空，加载也需要时间；将阻止页面加载；没有语义；

HTTP请求耗时非常大，所以使用HTTP请求得到一个无用的响应（如404页面未找到）是完全没有必要的，只会降低用户体验，没有任何好处。有的网站将404错误响应页面改为“你在找***吗”，提高了用户体验的同时也浪费了服务器资源（如数据库等）。最坏的情况是到外部的链接断开并返回 404 代码。首先，这种加载会破坏并行加载；其次，浏览器会尝试在返回的 404 响应内容中寻找可能有用的部分作为代码来执行。

此规则涵盖两个方面： 对于静态内容：将标头过期时间设置为“Never”（永不过期） 对于动态内容：使用适当的 Cache- 标头来帮助浏览器执行有条件的 Web 内容设计请求现在正在获取更丰富，这意味着页面中包含更多脚本、样式表、图像和 Flash。用户第一次访问您的页面意味着发出多个 HTTP 请求，但通过使用标头，您可以使此内容可缓存。它避免了后续页面访问时不必要的 HTTP 请求。文件头通常用于图像文件，但应用于所有内容，包括脚本、样式表和 Flash。浏览器（和代理）使用缓存来减少 HTTP 请求的大小和数量以加速页面访问。 Web 服务器使用 HTTP 响应中的标头来告诉客户端缓存内容的时间。以下示例是一个较长的标头，它告诉浏览器响应将在 2010 年 4 月 15 日之前过期。 : Thu, 15 Apr 2010 20:00:00 GMT 如果您使用的是服务器，您可以使用它来设置过期时间相对于当前日期。下面是一个使用设置在请求时间后 10 年过期的标头的示例：“加 10 年” 请记住，如果使用标头，则必须在页面内容更改时更改内容的文件名。根据雅虎！我们经常使用这个程序：在内容的文件名中加上版本号，例如.0.6.js。仅当用户已经访问过您的网站时，才可以使用标题。当用户第一次访问您的站点时，这对于减少 HTTP 请求的数量是无效的，因为浏览器的缓存是空的。因此，这种方法将根据您的页面在“预缓存”存在时被点击的频率来提高您网站的性能（“预缓存”已经包含页面上的所有内容）。雅虎！建立了一组测量，我们发现所有页面浏览量的 75-85% 是“预缓存”的。通过使用文件头，您可以增加缓存在浏览器中的内容量，并且可以在用户的​​后续请求中重复使用，甚至无需向用户发送单字节请求。

服务器开启Gzip，可以减少50%以上的传输。

当用户请求页面时，在后台组织 HTML 文件需要 200 到 500 毫秒。在此期间，浏览器将保持空闲等待数据返回。在 PHP 中，可以使用 flush() 方法，它允许你先将编译好的部分 HTML 响应文件发送到浏览器，然后浏览器可以下载文件的内容（脚本等），而后台处理剩余的HTML 页面。当背景烦人或前台空闲时，这样的效果会更加明显。

雅虎！邮件团队发现，在使用时，浏览器中的 POST 方法是一个“两步”过程：首先发送标头，然后发送数据。所以使用 GET 是最合适的，因为它只需要发送一个 TCP 数据包（除非你有很多）。 IE中一个URL的最大长度是2K，所以如果要发送超过2K的数据，就不能使用GET。一个有趣的区别是 POST 实际上并不像 GET 那样发送数据。根据 HTTP 规范，GET 表示“获取”数据，因此在获取数据时使用 GET 更有意义（在语义上），反之，在服务器上发送和保存数据时使用 POST。

CSS 表达式是动态设置 CSS 属性的一种强大（但危险）的方法。从版本 5 开始支持 CSS 表达式。在以下示例中，可以使用 CSS 表达式每隔一小时切换一次背景颜色： -color: ( (new Date()).()%2 ? "#" : "#" );如上图，使用表达式。 CSS 属性根据表达式的评估结果进行设置。该方法在其他浏览器中不起作用，因此在跨浏览器设计中单独定位设置很有用。

问题

表达式是它们被评估的频率比我们想象的要高。不仅在页面显示和缩放的时候，在页面滚动的时候，甚至在鼠标移动的时候。向 CSS 表达式添加计数器可以跟踪表达式的计算频率。只需在页面上移动鼠标即可轻松实现10000次以上的计算。

减少 CSS 表达式求值次数的一种方法是使用一次性表达式，在第一次运行时将结果分配给指定的样式属性，并用该属性替换 CSS 表达式。如果必须在页面循环期间动态更改样式属性，则使用事件处理程序而不是 CSS 表达式是一个可行的解决方案。如果您必须使用 CSS 表达式网站优化，请记住，它们会被计算数千次，并且会对您的页面产生性能影响。

许多性能规则都是关于如何处理外部文件的。但是，在您采取这些步骤之前，您可能会问一个更基本的问题：CSS 和 CSS 应该放在外部文件中还是页面本身中？在实际应用程序中使用外部文件可以提高页面速度，因为 CSS 和 CSS 文件都缓存在浏览器中。并且内置在 HTML 文档中的 CSS 会在每次请求时与 HTML 文档一起重新下载。这减少了 HTTP 请求的数量，但增加了 HTML 文档的大小。另一方面，如果外部文件和 CSS 被浏览器缓存，则可以在不增加 HTTP 请求数量的情况下减小 HTML 文档的大小。关键是外部和 CSS 文件被缓存的频率与 HTML 文档被请求的次数有关。虽然有一定的难度，但还是有一些指标可以衡量的。如果用户在单个会话中浏览您网站上的多个页面，并且在这些页面中重复使用相同的脚本和样式表，则缓存外部文件会更加有益。许多网站没有建立这些指标的功能。对于这些网站，最好的方法是引用 CSS 和 CSS 作为外部文件。使用内置代码的一个很好的例外是网站的主页，例如 Yahoo!主页和我的 Yahoo!。主页在会话中的浏览量较少（可能只有一个），您可能会发现内置和 CSS 来加快最终用户的响应时间。对于具有高页面浏览量的主页，有一种技术可以平衡内置代码减少的 HTTP 请求和通过使用外部文件进行缓存的好处。其中之一是在首页有内置和CSS，但是在页面下载完成后动态下载外部文件，当这些文件在子页面中使用时，已经缓存在浏览器中了。

之前最好的实现提到CSS应该放在顶部以便有序的加载和渲染。在IE中，在页面底部@并使用

效果是一样的，最好不要用。

IE-属性用于修正7.0以下版本显示PNG图片的半透明效果。这个过滤器的问题是它会在浏览器加载图像时停止内容的呈现并冻结浏览器。它对每个元素（不仅仅是图像）进行一次操作，增加了内存成本，因此它的问题是多方面的。完全避免它的最好方法是改用 PNG8 格式，它在 IE 中运行良好。如果确实需要使用，请使用下划线使其对IE7+用户无效。

对同一页面中文件的重复引用会影响页面的性能。你可能认为这种情况很少见。对美国排名前 10 位的网站的一项调查显示，其中两个网站重复引用了脚本。导致一个脚本被重复引用的离奇现象主要有两个因素：团队规模和脚本数量。如果是这种情况，复制脚本会导致不必要的 HTTP 请求和无用的计算，从而降低网站性能。会在 中发出不必要的 HTTP 请求，但不会在 .在 中，如果一个脚本被引用两次并且它不可缓存，它将在页面加载期间发出两次 HTTP 请求。动态脚本可以被缓存，并在用户重新加载页面时生成额外的 HTTP 请求。除了添加额外的 HTTP 请求之外，多次运行脚本也是浪费时间。无论脚本是否可缓存，in 和两者都存在重复问题。避免偶尔两次引用同一脚本的一种方法是使用模板中的脚本管理模块来引用脚本。在 HTML 页面中使用标签来引用脚本的最常见方法是： 在 PHP 中，这可以通过创建一个名为的方法来替换：

为了防止多次重复引用脚本，该方法还应该使用其他机制来处理脚本，例如检查所属目录以及在脚本文件名中添加版本号以获取文件头等。

HTTP 可用于多种用途，例如授权验证和个性化身份。相关信息通过 HTTP 标头在 Web 服务器和浏览器之间进行通信。因此，保持它尽可能小以减少用户的响应时间很重要。有关更多信息，请查看 Tenni 和 Patty Chi 的文章“When the”。这些研究主要包括：

删除不必要的最小化音量以减少对用户响应的影响。注意是在适配级别的域名上设置的，这样子域就不会受到影响。设置合理的过期时间。尽早计时而不是过早清除将改善用户响应时间。

当浏览器请求并在同一个请求中发送静态图像时，服务器对此不做任何事情。因此，它们只是由于某些负面因素而创建的网络传输。您应该确保的只是对静态内容的请求什么都不是。创建一个子域并使用它来托管所有静态内容。

如果您的域名是 ，您可以在 .但是，如果您不是在顶级域上而是在顶级域上设置它，那么所有对 .在这种情况下，您可以重新购买一个新的域名来保存静态内容并保持域名为空。雅虎！使用，使用，使用等等。

不要使用比实际需要更大的图像来设置 HTML 中的长度和宽度。如果您需要：那么您的图片 (mycat.jpg) 应该是 而不是 的图片。

.ico 是位于服务器根目录的图像文件。它必须在那里，因为即使您不关心它是否有用，浏览器也会请求它，因此最好不要返回 404 Not Found 响应。由于它在同一台服务器上，因此每次请求时都会发送它。这个图像文件也会影响下载顺序，例如在 IE 中请求附加文件时，它们会在附加内容加载之前被下载。所以，为了减少.ico带来的弊端，做：

文件尽量小，最好小于1K；在适当的时候为其设置文件头（即，当您不打算再次更改 .ico 时，因为更改新文件时无法重命名）。您可以安全地将标题设置为未来几个月。您可以通过检查当前 .ico 的最后编辑时间来判断。可以帮助你创造小。

此限制主要是由于无法缓存大于 25K 的文件。请注意，这是指未压缩的大小。由于纯gizp压缩可能达不到要求，所以压缩文件很重要。有关详细信息，请参阅 Wayne Shea 和 Tenni 的论文“，第 5 部分：– it Stick”。