本文共 1972 字，大约阅读时间需要 6 分钟。

虽然不是做前端开发的，但是了解一些也是有用的。例如js脚本和css脚本是应该放在页面顶部吗？…

规则1、 较少HTTP请求

性能黄金法则：只有10%-20%的最终用户响应时间花在了下载HTML文档上。其余的80%-90%时间花在了下载页面的所有组件上。

实现技术：

• 图片地图（Image map）：当在导航栏或者其他超链接中使用多个图片时，使用图片地图在一个图片上关联多个URL，可以减少HTTP请求加速页面。
• CSS Sprites：将多个图片合并到一个单独的图片中，然后使用CSS的background-positon属性为span,div等设置背景图片。通过合并图片减少了HTTP请求，并且比  图片地图更加灵活。
• 合并脚本和样式表：如果页面引用了多个样式表和脚本那就需要合并了，最好一个页面不多于一个脚本和样式表。

规则2、 使用内容发布网络CDN

CDN是一组分布在多个不同地理位置的web服务器，可以更加有效的向用户发布内容。

规则3、添加Expires头

我们利用浏览器的缓存来改善网站性能，Web服务器使用Expires头来告诉web客户端它可以使用一个组件的当前副本，直到指定的时间为止，例如。  

两外还可以用Cache-Control的max-age来指定组件缓存的秒数。例如：

文件名：添加缓存后，那么相应的组件更新时用户也获取不到新版本，为了解决这个问题可以在文件名中添加版本号。

规则4：压缩组件

通常的做法是用gzip压缩脚本和样式表。

规则5：将样式表放在顶部

为了避免白屏现象，请使用LINK标签将样式表放在文档顶部的head中，这样无论页面是在新窗口打开、重新加载还是作为主页，页面都是逐步呈现的。

规则6：将脚本放在底部

HTTP1.1规范检疫浏览器从每个主机名并行下载两个组件，这样可以提高性能。但为了保证脚本正确的执行顺序，下载脚本时

不是并行的。因此脚本对web页面会有以下影响：

• 脚本会阻塞对其后面内容的呈现；
• 脚本会阻塞对其后面组件的下载。

将脚本移到页面底部可以加速web页面。

规则7：避免是用CSS表达式

CSS表达式允许动态设置CSS属性，例如

问题是表达式求值的频率过高，除了页面加载和改变大小外，当页面滚动、鼠标移动时都会重新求值。

解决方式：

• 一次性表达式：可以将上面例子中计算背景色的部分提取到js中，然后在css中调用一次该方法。
• 事件处理器：可以将需要计算的部分提取到单独的方法中，并写明调用该方法的事件，例如window.resize等等，这样就能减少不必要的求值。

规则8：使用外部Javascript和css

如果纯粹比较javascript和css的内联外联的话，可能内联会快一些。但在实际应用时，由于外联文件可以被浏览器缓存起来，因此使用外部文件会产生较快的页面。

规则9：减少DNS查找

DNS将主机名映射到IP地址上，当用户请求一个主机名之后，DNS信息会留在操作系统的DNS缓存中来提高性能。通过使用Keep-Alive和较少的域名来减少DNS查找。

规则10：精简Javascript

精简是从代码中移除不必要的字符以减小其大小，进而改善加载时间。常用的javascript精简工具有JSMin,DojoCompressor等。

规则11：避免重定向

重定向用于将用户从一个URL重新路由到另一个URL，实现重定向可能有很多原因，包括网站重新设计、跟踪流量、记录广告点击、建立便于记忆的URL等。但实际上重定向会使页面变慢，下面是几种常见的替代方案：

• URL结尾斜线：如果网站包含目录并且使用了自动索引，那么当URL结尾缺少应有的斜线时，可能会发送重定向。
• 跟踪内部流量：重定向经常用于跟踪用户流量的流向。也可以用Referer日志来跟踪流量，避免给向用户发送重定向，从而改善响应时间。
• 美化URL：为了向user展现便于记忆的URL，有时需要重定向。其实可以利用Alias,mod_rewrite和直接链接代码等来避免。

规则12：移除重复脚本

由于团队大小和脚本数量的影响，网站中的脚本是可能重复的，这可能导致不必要的HTTP请求和执行Javascript时浪费时间。要避免重复使用脚本，可以在模板系统中实现脚本管理模块，处理脚本的依赖性和版本。

规则13：配置或移除ETag

ETag(Entity Tag)实体标签，是Web服务器和浏览器用于确认缓存组件的有效性机制之一。它是唯一标识了一个组件的特定版本的字符串，格式约束是该字符串要用引号引起来。例如：

如果网站时放在同一台服务器是没有问题的，但是如果使用了服务器集群，则组件的下载次数会增多，导致性能下降。

规则14：使用Ajax可缓存

确保Ajax请求遵守性能指导，尤其应具有长久的Expires头。

转载地址：http://wxdqz.baihongyu.com/