WEB网页性能优化参考.doc

WEB网页性能优化参考v1.0 2011年12月

WEB网页性能优化参考V2. 0
北京八度互联科技有限公司
Copyright © 2005-2011

北京八度互联科技有限公司 第 10页

目 录
第1章 修改记录 2
第2章 文档说明 3
§2.1 阐述 3
§2.2 说明 3
第3章 Google Page Sppeed 分析 4
§3.1 分析 4
§3.2 优化图片 5
§3.3 使用浏览器缓存 5
§3.4 将图片组合为css贴图定位 6
§3.5 内嵌小型javascript和css 7
§3.6 压缩javascript、css 7
§3.7 暂缓javascript解析 7
§3.8 将查询字符串从静态资源中删除 8
§3.9 Favicon.ico要小而且尽量可缓存 8
§3.10 禁用CSS滤镜、ie filter、iframe 8
第4章 总结 9
第5章 规范建议 9

第1章 修改记录
A－增加 * M－修改 * D－删除
版本
日期
作者
说明
1.0
2011-12-22
李博
A1
2.0
2012-04-26
李博
M1

A1：初稿
M1：1-4章为1.0版本输出，2.0结合对官网优化经验，进行详细阐述，最终形成可执行操作手册。

第2章 文档说明
§2.1 阐述
Google过去数年的测试表明，即使网页性能只有小幅度的改进，也会拉动用户大幅度增加，好的网页体验可以留住用户，同样好的网页性能可以给我们的产品锦上添花，本文档通过Google Page Speed 对官网 。进行分析举例、阐述目前业界对网页性能优化的关注点。
§2.2 说明
l Google Page Speed：一款在线应用可以分析网页的缺陷，并提出建议
l css贴图定位：专业名称CSSSprites，在国内很多人叫css精灵。是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了

第3章 Google Page Sppeed 分析
§3.1 分析
通过对Google Page Speed 分析，共得出7个建议，分别为优化图片、使用浏览器缓存,、将图片组合为 CSS 贴图定位、内嵌小型 JavaScrip和css、压缩JavaScriptcss、 暂缓 JavaScript 解析、将查询字符串从静态资源中删除、favicon.ico要小而且可缓存、禁用css滤镜，IE filter，iframe。

图-1
§3.2 优化图片
将图片进行无损压缩既能不损失图片的美感而且又能压缩图片的大小。我们首页的焦点图一般比较大，可以进行图片的专业处理。减小图片体积大小。
优化以下图片可腾出的空间大小为 1,013.3KiB（即缩减 50%）。

§3.3 使用浏览器缓存
一些图片没有使用缓存，导致每次都要重新请求服务器。如。我们可以将一些改变频率很小的资源进行长时间的缓存。

§3.4 将图片组合为css贴图定位
将多个小图片整合到一张大图上去，这样降低了请求次数，不会出现一张一张的显示的情景。当然这需要美术方面配合（会增加美术方面的工作量）。

§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 暂缓javascript解析
载入初始网页时已解析 67.7KiB 的 JavaScript。请暂缓解析 JavaScript 以减小网页显示时出现堵塞的概率。

§3.8 将查询字符串从静态资源中删除

§3.9 Favicon.ico要小而且尽量可缓存
favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found的响应。文件尽量地小，最好小于1K。

§3.10 禁用CSS滤镜、ie filter、iframe
如果可能，尽量避免运用以上技术，慢！慢！慢！

第4章 总结
网页性能评定可以从两个方面进行分析，第一，网页是否符合业界规范。第二，网页加载速度。按照google page 分析，如果良好的话，说明的网页本身是没有太大的问题的，符合第一个规范。那么我们可以把注意力放到网页加载速度上。比如采用CDN(内容分发网络)、对静态资源进行缓存、动态内容静态化等。

第5章 规范建议
1. 将css放入标签内，并尽量合并、压缩css体积，禁用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);
} catch (e) {}
该方法解决 IE的cache bug闪烁问题，并且缓存背景图片。
9. 所有图片要做无损压缩，在上线前用google page speed 进行分析，确保没有出现需要进行无损压缩的图片。
10. 一般图片限制在20k以下，首页广告图片不能超过75k。
11. 在超过一屏浏览器并且图片居多的网页中，要采用异步加载图片的机制。也就是说在浏览器低端碰到图片的时候才真正渲染图片。这样可以大大加速网页的渲染速度，也能节省流量费用，不是每个人都会看完整个网页的内容的。（加载网页时为了提高用户体验一定要用loading加载）

12. 在WEB SERVER如nginx开启gzip压缩（一般的服务器都支持），可以减少网络传输体积
13. 尽量减少网页的空格和换行。
14. 避免导航栏采用js生成，这样会影响SEO效果。
15. 如果有条件，尽量将资源文件放置不同域名的服务器中，并设置静态资源文件的浏览器缓存时间。（因为有的浏览器会现在同一域名的同时下载资源数量，从本地加载资源文件可以有效的加速浏览速度
16. 避免404出现，每个应用都要有对用户友好的404页面，而且一般应用会忽略Favicon.ico的作用，即使没有该文件浏览器也会请求该资源。所以必须设置它Favicon.ico而且尽可能的小。