性能优化减少Http请求：1.尽量减少HTTP请求数量 80%的终端用户响应时间花在了前端，大部分时间都花在了前端关于下载页面网页上的各种组件：图片、样式表、脚本、Flash等。减少组件数量必然会减少页面提交的HTTP请求数量。这是使页面更快的关键。2.减少页面组件数量的一种方法是简化页面设计。但是有没有办法在构建复杂页面时加快响应时间呢？好吧，确实有一种方法既能吃蛋糕又能吃。3.合并文件通过将所有脚本放在一个文件中来减少请求的数量。当然，你也可以合并所有的CSS。如果脚本和样式因页面而异，合并文件可能会很麻烦，但是将此作为网站发布过程的一部分确实可以缩短响应时间。4.CSSSprites是减少图像请求数量的首选方式。将背景图片整合为一张图片，然后使用CSSbackground-image和background-position属性定位要显示的部分。5.图片映射可以将多张图片组合成一张图片，总大小相同，但减少了请求次数，加快了页面加载速度。图像映射仅在图像在页面上连续存在时才有用，例如导航栏。为图片地图设置坐标的过程比较枯燥且容易出错，使用图片地图导航也不是很方便，所以不推荐这种方式。6.内联图片（Base64编码）使用data:URL模式在页面中嵌入图片。这会增加HTML文件的大小，将内联图像放入（缓存的）样式表中是一个好主意，并且可以成功地防止页面变得“沉重”。但是，目前的主流浏览器对内联图片的支持不是很好。7、减少页面的HTTP请求数是一个出发点，这是提高网站首次访问速度的重要指导原则。减少DNS查找：1.域名系统在主机名和IP地址之间建立一个映射，就像电话簿中名字和号码的映射一样。当你在浏览器中输入www.yahoo.com时，浏览器会联系DNS解析器返回服务器的IP地址。DNS有成本，查找给定主机名的IP地址需要20到120毫秒。在DNS查找完成之前，浏览器无法从主机名下载任何内容。2.DNS查找缓存更有效，由用户的ISP（Internet服务提供商）或本地网络存储在特殊的缓存服务器上，但也可以缓存在个人用户的计算机上。DNS信息存储在操作系统的DNS缓存中（MicrosoftWindows上的“DNS客户端服务”）。大多数浏览器都有自己的独立于操作系统的缓存。只要浏览器将这条记录保存在自己的缓存中，它就不会向操作系统查询DNS。3.IE默认缓存DNS查询30分钟，这写在DnsCacheTimeout注册表设置中。Firefox缓存1分钟，可以通过network.dnsCacheExpiration配置项设置。（Fasterfox将缓存时间改为1小时P.S.Fasterfox是FF的加速插件）4.如果客户端的DNS缓存为空（包括浏览器和操作系统），则DNS查找次数等于页面上不同主机名的数量，包括页面URL、图像、脚本文件、样式表、Flash对象和其他组件中的主机名，减少不同主机名的数量可以减少DNS查找。5.减少不同主机名的数量也减少了页面上可以并行下载的组件数量，避免DNS查找减少了响应时间，同时减少并行下载的数量增加了响应时间。我的原则是将组件分散在2到4个主机名下，这是减少DNS查找和允许高并发下载之间的折衷。避免重定向重定向使用301和302状态代码，这是一个带有301状态代码的HTTP标头：1.HTTP/1.1301永久移动位置：http://example.com/newuri内容类型：text/html 浏览器将自动跳转到Location字段中指定的URL。重定向所需的所有信息都在HTTP标头中，响应主体通常为空。事实上，额外的HTTP标头，例如Expires和Cache-Control也表示重定向。重定向还有其他方式：刷新meta标签和JavaScript，但如果非要重定向，最好使用标准的3xxHTTP状态码，主要是让后退按钮正常工作。2.请记住，重定向会减慢用户体验，在用户和HTML文档之间插入重定向会延迟页面上的所有内容，页面不会呈现，组件不会开始下载，直到HTML文档传送到浏览器。3.Web开发人员通常没有意识到的一种常见且极其浪费的重定向是URL末尾缺少斜线。例如，对http://astrology.yahoo.com/as...://astrology.yahoo.com/astrology/的301响应（注意结尾的斜杠）。Alias、mod_rewrite或DirectorySlash指令可用于Apache中以取消不必要的重定向。4、重定向最常见的用途是将旧站点连接到新站点，也可以连接同一站点的不同部分，针对用户的不同情况（浏览器类型、用户账户类型等）做一些处理。).使用重定向连接两个站点是最简单的，只需要少量的额外代码。虽然在这些时候使用重定向可以降低开发人员的开发复杂性，但它会降低用户体验。另一种方法是使用Alias和mod_rewrite，前提是两个代码路径都在同一台服务器上。如果因为域名改变而使用重定向，可以结合Alias或mod_rewrite指令创建CNAME（创建指向另一个域名的DNS记录作为别名）。使Ajax可缓存：1.Ajax的好处之一是它可以向用户提供即时反馈，因为它可以从后台服务器异步请求信息。但是，使用Ajax无法保证用户在等待异步JavaScript和XML响应返回时不会感到无聊。在许多应用程序中，用户等待的能力取决于Ajax的使用方式。例如，在基于Web的电子邮件客户端中，用户将关注Ajax请求返回的结果，以便找到符合他们搜索条件的电子邮件消息。重要的是要记住“异步”并不意味着“即时”。2.要提高性能，优化这些Ajax响应至关重要。提高Ajax性能的最重要方法是使响应可缓存，如添加过期或缓存控制HTTP标头中所述。以下其他规则适用于Ajax：3.Gzip组件减少DNS查找压缩JavaScript避免重定向配置ETags 让我们看一个例子，一个Web2.0电子邮件客户端使用Ajax下载用户的地址簿以实现自动完成.如果用户自上次使用后没有修改过她的地址簿，并且Ajax响应是可缓存的，带有未过期的Expires或Cache-ControlHTTP标头，则可以从缓存。必须通知浏览器它是应该继续使用以前缓存的地址簿响应，还是请求一个新的。可以通过在通讯录的AjaxURL中添加一个表示用户通讯录最后修改时间的时间戳来实现，例如&t=1190241612。如果通讯录自上次下载后没有被修改，时间戳保持不变，则直接从浏览器缓存中读取通讯录，从而避免额外的HTTP往返消耗。如果用户修改了地址簿，时间戳还确保新的URL不会匹配缓存的响应，浏览器将请求新的地址簿条目。4.尽管Ajax响应是动态创建的并且可能只适用于单个用户，但它们可以被缓存，这将使您的Web2.0应用程序更快。延迟加载组件：仔细观察页面并问问自己：首先渲染页面需要什么？剩下的可以等等。1.JavaScript是分离onload事件前后的理想选择。例如，如果您有支持拖放和动画的JavaScript代码和库，这些可以等待一段时间，因为拖放元素发生在页面最初呈现之后。其他可以延迟加载的部分包括隐藏内容（交互后出现的内容）和折叠图像。2.工具可以帮助您减少工作量：YUIImageLoader可以延迟加载折叠图像，YUIGet实用程序是导入JS和CSS的简便方法。雅虎！主页就是一个例子，你可以打开Firebug的网络面板仔细看看。3.最好将性能目标与其他Web开发最佳实践保持一致，例如“渐进式增强”。如果客户端支持JavaScript，可以提升用户体验，但必须保证页面在没有JavaScript支持的情况下也能正常工作。因此，在确定您的页面工作正常后，您可以使用一些延迟加载脚本来增强它，以支持一些奇特的效果，如拖放和动画。预加载组件：预加载可能看起来与延迟加载相反，但它实际上有不同的目标。通过预加载组件，可以充分利用浏览器的空闲时间来请求以后要用到的组件（图片、样式和脚本）。当用户访问下一个页面时，大部分组件已经在缓存中，因此页面在用户看来会加载得更快。实际应用中有几种预加载：1.无条件预加载——尽快开始加载以获得一些额外的组件。google.com是sprite图像预加载的一个很好的例子。google.com主页不需要此精灵图像，但搜索结果页面上的内容需要此精灵图像。条件预加载——根据用户操作猜测用户将跳转到哪里，并相应地进行预加载。在search.yahoo.com输入框中键入内容后，您可以看到如何请求加载这些附加组件。提前预加载-在推出新设计之前预加载它们。我经常在重新设计后听到：“这个新网站不错，但比以前慢”，部分原因是用户访问了之前使用旧缓存的页面，而新的却处于空缓存状态的体验。这种负面影响可以通过在新设计即将推出之前预加载一些组件来减轻，并且旧站点可以利用浏览器的空闲时间来请求新站点需要的图像和脚本。减少DOM元素的数量：复杂的页面意味着需要下载更多的字节，并且使用JavaScript访问DOM的速度更慢。例如，在页面上循环遍历500个DOM元素与尝试添加事件处理程序时遍历5000个DOM元素之间存在差异。1.大量的DOM元素是一个症状——页面上的一些非内容标记需要清理。你在布置嵌套表格吗？或者只是添加一堆
