web性能优化

1. web 性能优化

合并图片（如 css sprites，内置图片使用数据）、合并 CSS、JS(JsCssZip)，这一点很重要，但是要考虑合并后的文件体积。 可见每次请求都会带上一些额外的信息进行传输(这次请求中还没有带 cookie)，当请求的资源很小，比如 1 个不到 1k 的图标，可能 request 带的数据比实际图标的数据量还大。 所以当请求越多的时候，在网络上传输的数据自然就多，传输速度自然就慢了。 其实 request 自带的数据量还是小问题，毕竟 request 能带的数据量还是有限的。

2、为文件头指定 Expires 或 Cache-Control，使内容具有缓存性。 区分静态内容和动态内容，避免以后页面访问中不必要的 HTTP 请求。

3、避免空的 src 和 href 留意具有这两个属性的标签如 link，script，img，iframe 等；

4、使用 gzip 压缩内容 Gzip 压缩所有可能的文件类型以来减少文件体积

5、把 CSS 放到顶部 实现页面有秩序地加载，这对于拥有较多内容的页面和网速较慢的用户来说更为重要，同时，HTML 规范清楚指出样式表要放包含在页面的区域内；

6、把 JS 放到底部 HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同

7、避免使用 CSS 表达式 页面显示和缩放，滚动、乃至移动鼠标时，CSS 表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替 CSS 表达式。

8、将 CSS 和 JS 放到外部文件中 我们需要权衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处的折中点。

9、精简 CSS 和 JS 目的就是减少下载的文件体积，可考虑压缩工具 JSMin 和 YUI Compressor。

10、剔除重复的 JS 和 CSS(代码的复用性) 重复调用脚本，除了增加额外的 HTTP 请求外，多次运算也会浪费时间。在 IE 和 Firefox 中不管脚本是否可缓存，它们都存在重复运算 JavaScript 的问题。

11、使 AJAX 可缓存 利用时间戳，更精巧的实现响应可缓存与服务器数据同步更新。

12、尽早刷新输出缓冲 尤其对于 css，js 文件的并行下载更有意义

13、使用 GET 来完成 AJAX 请求 当使用 XMLHttpRequest 时，浏览器中的 POST 方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。在 url 小于 2K 时使用 GET 获取数据时更加有意义。

14、延迟加载 确定页面运行正常后，再加载脚本来实现如拖放和动画，或者是隐藏部分的内容以及折叠内容等。

15、预加载 关注下无条件加载，有条件加载和有预期的加载。

16、尽量减少 iframe 的个数 考虑即使内容为空，加载也需要时间，会阻止页面加载，没有语意，注意 iframe 相对于其他 DOM 元素高出 1-2 个数量级的开销，它会在典型方式下阻塞 onload 事件，IE 和 Firefox 中主页面样式表会阻塞它的下载。

17、避免 404 HTTP 请求时间消耗是很大的，有些站点把 404 错误响应页面改为“你是不是要找*”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。

18、减少 Cookie 的大小 去除不必要的 coockie 使 coockie 体积尽量小以减少对用户响应的影响，设置合理的过期时间。较早地 Expire 时间和不要过早去清除 coockie，都会改善用户的响应时间。

19、优化图像 尝试把 GIF 格式转换成 PNG 格式，看看是否节省空间。在所有的 PNG 图片上运行 pngcrush（或者其它 PNG 优化工具） 利用 sumshit 无损压缩图片。

20、不要在 HTML 中缩放图像——须权衡 不要为了在 HTML 中设置长宽而使用比实际需要大的图片。

21、使用 CDN（内容分发网络） 这里可以关注 CDN 的三类实现：镜像、高速缓存、专线，以及智能路由器和负载均衡；

22、避免跳转 为了确保“后退”按钮可以正确地使用，使用标准的 3XXHTTP 状态代码；同域中注意避免反斜杠 “/” 的跳转； 跨域使用 Alias 或者 mod_rewirte 建立 CNAME（保存一个域名和另外一个域名之间关系的 DNS 记录）

23、配置 ETags Entity tags（ETags）（实体标签）是 web 服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内 容”，包括图片、脚本、样式表等），是比 last-modified date 更更加灵活的机制，单位时间内文件被修过多次，Etag 可以综合 Inode(文件的索引节点(inode)数)，MTime(修改时间)和 Size 来精准的进行判断，避开 UNIX 记录 MTime 只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用 ETags 减少 Web 应用带宽和负载。

24、减少 DOM 访问 缓存已经访问过的有关元素 线下更新完节点之后再将它们添加到文档树中 避免使用 JavaScript 来修改页面布局

25、开发智能事件处理程序 有时候我们会感觉到页面反应迟钝，这是因为 DOM 树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用 event delegation（事件代理）是一种好方法了。如果你在一个 div 中有 10 个按钮，你只需要在 div 上附加一次事件句柄就可以了，而不用去为每一个按 钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。 你同样也不用为了操作 DOM 树而等待 onload 事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。 你可能会希望用 DOMContentLoaded 事件来代替 事件应用程序中的 onAvailable 方法。

26、用代替@import 在 IE 中，页面底部@import 和使用作用是一样的，因此最好不要使用它。

27、避免使用滤镜 完全避免使用 AlphaImageLoader 的最好方法就是使用 PNG8 格式来代替，这种格式能在 IE 中很好地工作。如果你确实需要使用 AlphaImageLoader，请使用下划线_filter 又使之对 IE7 以上版本的用户无效。

28、favicon.ico 要小而且可缓存 favicon.ico 是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一 个 404 Not Found 的响应。由于是在同一台服务器上，它每被请求一次 coockie 就会被发送一次。这个图片文件还会影响下载顺序，例如在 IE 中当你在 onload 中请求额外的文件时，favicon 会在这些额外内容被加载前下载。 因此，为了减少 favicon.ico 带来的弊端，要做到： 文件尽量地小，最好小于 1K 在适当的时候（也就是你不要打算再换 favicon.ico 的时候，因为更换新文件时不能对它进行重命名）为它设置 Expires 文件头。你可以很安全地 把 Expires 文件头设置为未来的几个月。你可以通过核对当前 favicon.ico 的上次编辑时间来作出判断。 Imagemagick 可以帮你创建小巧的 favicon。

29、保持单个内容小于 25K 因为 iPhone 不能缓存大于 25K 的文件。注意这里指的是解压缩后的大小。由于单纯 gizp 压缩可能达不要求，因此精简文件就显得十分重 要。

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