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

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

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

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

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

　　请记住，终用户响应时间的80-90％用于下载页面中的所有组件：图像，样式表，脚本，Flash等。这是Performance Golden Rule。而不是从重新设计应用程序架构的艰巨任务开始，首先分散您的静态内容。这不仅可以大大缩短响应时间，而且由于内容交付网络，它更容易实现。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　浪费多的重定向之一经常发生，Web开发人员通常不会意识到这一点。它发生在URL中缺少尾部斜杠（/）时，否则应该有一个斜杠。例如，转到会产生301响应，其中包含重定向到（注意添加的尾部斜杠）。如果您使用的是Apache处理程序，则可以使用Aliasormod_rewrite或DirectorySlash指令在Apache中修复此问题。

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

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

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

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

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

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

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

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

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

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

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

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

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

　　为了提高性能，优化这些Ajax响应非常重要。提高Ajax性能的重要方法是使响应可缓存，如添加过期或缓存控制标头中所述。其他一些规则也适用于Ajax：

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

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

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

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

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

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

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

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

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

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

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

　　预加载 - 只要onload触发，你就可以继续获取一些额外的组件。请访问google.com，了解如何请求加载精灵图像。google.com主页上不需要此精灵图片，但在连续搜索结果页面上需要此精灵图片。

　　预加载 - 基于用户操作，您可以进行有根据的猜测，即用户前进的位置并相应地预加载。在search.yahoo.com上，您可以看到在输入框中开始输入后如何请求一些额外的组件。

　　预加载 - 在重新设计之前提前预加载。经常在重新设计之后听到：“新网站很酷，但比以前慢”。部分问题可能是用户使用完整缓存访问旧网站，但新网站始终是空缓存体验。您可以通过在启动重新设计之前预加载某些组件来缓解此副作用。您的旧站点可以使用浏览器空闲的时间并请求新站点将使用的图像和脚本

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

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

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

　　有多少DOM元素太多了？检查具有良好标记的其他类似页面。例如雅虎！主页是一个非常繁忙的页面，仍然不到700个元素（HTML标记）。

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

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

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

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

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

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

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

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

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

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

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

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

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

　　在IE中，@import行为与link在页面底部使用的行为相同，因此不要使用它。

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

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

　　当你在调色板中看到使用4种颜色和256色“槽”的图像时，还有改进的余地。

　　尝试将GIF转换为PNG并查看是否存在保存。通常，有。由于浏览器的支持有限，开发人员经常对使用PNG犹豫不决，但现在已成为过去。真正的问题是真彩色PNG中的alpha透明度，但同样，GIF不是真彩色，也不支持变量透明度。所以GIF可以做的任何事情，调色板PNG（PNG8）也可以做（除了动画）。这个简单的imagemagick命令导致完全安全的PNG：

　　在精灵中组合相似的颜色可以帮助您保持较低的颜色数，理想情况下在256色以下，以适应PNG8。

　　“适合移动设”并且不要在精灵中留下大的间隙。这不会影响文件大小，但需要较少的内存以便用户代理将图像解压缩为像素图。100x100图像是1万像素，其中1000x1000是100万像素

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

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

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

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

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

　　通过发送大量意外流量来削弱您的服务器，特别是对于每天获得数百万页面浏览量的页面。

　　可能会损坏用户数据。如果您通过cookie或其他方式跟踪请求中的状态，则可能会破坏数据。即使图像请求没有返回图像，浏览器也会读取并接受所有标头，包括所有cookie。虽然其余的响应被丢弃，但损害可能已经完成。

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

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

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

　　这条规则的灵感来自雅虎的JavaScript大师Nicolas C. Zakas。有关更多信息，请查看他的文章“空图像src可以破坏您的网站”。

　　1、减少HTTP请求数量1、从设计实现层面简化页面：尽量将页面设置成百度首页那样，保持页面简洁、减少资源的使用。2、合理设置HTTP缓存：合理设置缓存可以大大地减少HTTP请求，怎么叫合理呢？原则很简单，能缓存越多越好，能缓存越久越好。3、资源合并和压缩：尽可能将外部脚本、样式进行合并，多个合为一个；Css、Javascript、image也可以使用工具进行压......

　　方法，一直是前端开发者不懈努力的事情，获得总结的方法也很多，看了几位大牛的总结，特此与大家共同分享一下。前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端

　　能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为......

　　指标有那些？1、页面加载时间从页面开始加载到页面onload事件触发的时间。一般来说onload触发代表着直接通过HTML引用的CSS，JS，图片资源已经完全加载完毕。2、全部页面加载时间全部页面载入时间指从初启动浏览开始，直到所有元素都被加载完成后，在2秒后仍然没有网络活动的时间。......

　　1. 网络加载⑴ DNS预加载通过dns-prefetch属性可以让浏览器提前解析资源或接口对应的服务器IP地址，避免在请求中发起DNS解析请求，节省请求时间。⑵ CDN加速CDN的优点： 本地Cache加速，加快访问速度 镜像服务，消除运营商之间互联的瓶颈影响，保证不同网络的用户都能得到良好的访问质量 远程加速，自动选择cache服务器 带宽

　　时候能够让页面加载更快，对用户的操作响应更及时，能够给用户提供更为友好的体验2)从服务商角度，

　　的方面可以分为页面级别和代码级别二．页面级别一》减少HTTP请求1原因：1》

　　准则：用户终花相应的10%-20%的时间在接受请求的HTML文档，其他的时间都是花在......

　　,然后我很后悔我误导了她.我给她讲减少http请求是多么重要,如何重要,为什么重要,还举了例子来说明这对于大型

　　来说是多么重要,讲的头头是道,有理有据,后把她说的服服帖帖,一切看起来理所当然.但是….事情没有那么简单,就像做技术一样,其实去了解一个技术很简单,但是要懂得如何运用这个技术就不是每个人都可以做到的了.1．理......

　　有着精彩而丰富的内容，迟缓的浏览体验，也会磨灭用户的关注，如果这是你的

　　，那它被竞品替代也只是时间早晚的事。作为一个每天都需要在网上获取各种信息和服务的人来说，我对于提供信息相差不多的

　　体验的站点上，保留更多的耐心，因为这是对自己时间和注意力的珍惜。显而易见换个角度......

　　今年，我也32了 ，为了不给大家误导，咨询了猎头、圈内好友，以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助，记得帮我点赞哦。目录：你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」一、你以为的人生刚入行时，拿着傲人的工资，想着好好干，以为我们的人生是这样的：等真到了那一天，你会发现，你的人生很可能是这样的：......

　　今天下午在朋友圈看到很多人都在发github的羊毛，一时没明白是怎么回事。后来上百度搜索了一下，原来真有这回事，毕竟资源主义的羊毛不少啊，1000刀刷爆了朋友圈！不知道你们的朋友圈有没有看到类似的消息。这到底是啥情况？微软开发者平台GitHub 的一个区块链项目 Handshake ，搞了一个招募新会员的活动，面向GitHub 上前 25万名开发者派送 4,246.99 HNS币,大约价......
以上信息由常州声谷信息科技有限公司整理编辑，了解更多网站优化,网站优化代理,单词优化,网站优化哪家好,单词优化代理,正规网站优化代理信息请访问http://www.shengguxinxi.com