WEB网页性能优化参考.doc

1、 WEB 网 页 性 能 优 化 参 考 V2. 0北京八度互联科技有限公司Copyright 2005-2011 http:/WEB 网 页 性 能 优 化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 1 页目 录第 1 章 修改记录 .2第 2 章 文档说明 .32.1 阐述 .32.2 说明 .3第 3 章 Google Page Sppeed 分析 .43.1 分析 .43.2 优化图片 .53.3 使用浏览器缓存 .53.4 将图片组合为 css 贴图定位 .63.5 内嵌小型 javascript 和 css .73.6 压缩 javas

2、cript、css .73.7 暂缓 javascript 解析 .73.8 将查询字符串从静态资源中删除 .83.9 Favicon.ico 要小而且尽量可缓存 .83.10 禁用 CSS 滤镜、 ie filter、iframe .8第 4 章 总结 .9第 5 章 规范建议 .9WEB 网 页 性 能 优 化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 2 页第 1 章 修改记录A增加 * M修改 * D删除版本 日期 作者 说明1.0 2011-12-22 李博 A12.0 2012-04-26 李博 M1A1：初稿M1：1-4 章为 1.0

3、 版本输出， 2.0 结合对官网优化经验，进行详细阐述，最终形成可执行操作手册。WEB 网 页 性 能 优 化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 3 页第 2 章 文档说明2.1 阐述Google 过去数年的测试表明，即使网页性能只有小幅度的改进，也会拉动用户大幅度增加，好的网页体验可以留住用户，同样好的网页性能可以给我们的产品锦上添花，本文档通过 Google Page Speed 对官网 http:/。进行分析举例、阐述目前业界对网页性能优化的关注点。2.2 说明 Google Page Speed：一款在线应用可以分析网页的缺陷，并提

4、出建议 css 贴图定位：专业名称 CSSSprites， 在 国 内 很 多 人 叫 css 精 灵 。 是 一 种 网 页图 片 应 用 处 理 方 式 。 它 允 许 你 将 一 个 页 面 涉 及 到 的 所 有 零 星 图 片 都 包 含 到 一张 大 图 中 去 ， 这 样 一 来 ， 当 访 问 该 页 面 时 ， 载 入 的 图 片 就 不 会 像 以 前 那 样 一幅 一 幅 地 慢 慢 显 示 出 来 了WEB 网 页 性 能 优 化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 4 页第 3 章 Google Page Sppee

5、d 分析3.1 分析通过对 Google Page Speed 分析，共得出 7 个建议，分别为优化图片、使用浏览器缓存,、将图片组合为 CSS 贴图定位、内嵌小型 JavaScrip 和 css、压缩JavaScript，css、 暂缓 JavaScript 解析、将查询字符串从静态资源中删除、favicon.ico 要小而且可缓存、禁用 css 滤镜，IE filter，iframe。图-1WEB 网 页 性 能 优 化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 5 页3.2 优化图片将图片进行无损压缩既能不损失图片的美感而且又能压缩图片的大小

6、。我们首页的焦点图一般比较大，可以进行图片的专业处理。减小图片体积大小。优化以下图片可腾出的空间大小为 1,013.3KiB（即缩减 50%） 。3.3 使用浏览器缓存一些图片没有使用缓存，导致每次都要重新请求服务器。如 。我们可以将一些改变频率很小的资源进行长时间的缓存。WEB 网 页 性 能 优 化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 6 页3.4 将图片组合为 css 贴图定位将多个小图片整合到一张大图上去，这样降低了请求次数，不会出现一张一张的显示的情景。当然这需要美术方面配合（会增加美术方面的工作量） 。WEB 网 页 性 能 优

7、化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 7 页3.5 内嵌小型 javascript 和 css虽然 js、css 建议放到外部文件中，但是加载的时候会有些阻塞。一些非常短小的javascript、css 其实可以内嵌在网页中。3.6 压缩 javascript、css启用 gzip 压缩和实际压缩物理文件可以增加网络传输速度。目前 CSS 压缩工具有Page Speed、YUI Compressor；JS 压缩工具有中 JSMIn、Page Speed、YUI Compressor、JavaScriptCompressor；3.7 暂缓 j

8、avascript 解析载入初始网页时已解析 67.7KiB 的 JavaScript。请暂缓解析 JavaScript 以减小网页显示时出现堵塞的概率。WEB 网 页 性 能 优 化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 8 页3.8 将查询字符串从静态资源中删除3.9 Favicon.ico 要小而且尽量可缓存favicon.ico 是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个 404 Not Found 的响应。文件尽量地小，最好小于 1K。3.10 禁用 C

9、SS 滤镜、ie filter、iframe如果可能，尽量避免运用以上技术，慢！慢！慢！WEB 网 页 性 能 优 化 参 考 v1.0 2011年 12月北 京 八 度 互 联 科 技 有 限 公 司 第 9 页第 4 章 总结网页性能评定可以从两个方面进行分析，第一，网页是否符合业界规范。第二，网页加载速度。按照 google page 分析，如果良好的话，说明的网页本身是没有太大的问题的，符合第一个规范。那么我们可以把注意力放到网页加载速度上。比如采用 CDN(内容分发网络)、对静态资源进行缓存、动态内容静态化等。第 5 章 规范建议1. 将 css 放入 标签内，并尽量合并、压缩 cs

10、s 体积，禁用 css 滤镜,css表达式、IE filter。2. 尽量采用 css 贴图定位方式将网页内多个图片合并一张图片，减少图片下载连结数。3. 避免 css 引用甚至是交叉引用。4. 避免使用 import 导入样式表。5. Js 全部放入页面的底部，并且根据需要进行 js 合并、压缩，因为加载 Js会阻塞浏览器。6. 虽然 js、css 建议放到外部文件中，但是加载的时候会有些阻塞。一些非常短小的 javascript、css 可以内嵌在网页中。7. 虽然 IE8，IE9 都已经出来，但是建议让浏览器用 IE7 的引擎去渲染页面，因为 IE8，IE9 在某些方面做得不尽如人意。8. try document.execCommand(“BackgroundImageCache“, false, true);