Web前端优化3-基础复习-Cookie篇，Css篇，JavaScript篇，图片篇，移动篇

1. 缩小 Cookie (Reduce Cookie Size)

每个客户端最多保持 300 个 Cookie，针对每个域名最多 20 个 Cookie (实际上多数浏览器现在都比这个多，比如 Firefox 是 50 个) ，每个 Cookie 最多 4K，注意这里的 4K 根据不同的浏览器可能不是严格的 4096 ，对于 Cookie 最重要的就是，尽量控制 Cookie 的大小，不要塞入一些无用的信息。

2. 针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)

 Web 组件(Component)，多指静态文件，比如图片 CSS 等，减少 Cookie 的反复传输对主域名 (yahoo.com) 的影响。

1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)

和用户访问期望有关。CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。

2. 避免 CSS 表达式 (Avoid CSS Expressions)

3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

方便进行压缩或者缓存策略。

4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

语法精简

5. 使用 <link> 而不是@importChoose <link> over @import

在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。

6. 避免使用Filter (Avoid Filters)

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

当一个脚本在下载的时候，浏览器干不了其它的事(串行了)。所以，把它扔到最后面去处理。对于一些功能性的脚本，可能实现起来有些两难。 不过对于国内网站来说，有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说，绝对可行的建议，放到页面最底下。

2. 移除重复脚本 (Remove Duplicate Scripts)

对于一些历史遗留站点或是论坛类的网站来说，这倒是比较常见的。

3. 减少 DOM 访问 (Minimize DOM Access)

有三条指导建议:

• 缓存已经访问过的元素 (Cache references to accessed elements)
• "离线"更新节点, 再将它们添加到树中 (Update nodes "offline" and then add them to the tree)
• 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿 (Avoid fixing layout with JavaScript)

6. Develop Smart Event Handlers

 Java Script 内存泄漏

另外推荐一篇《如何优化 JavaScript 脚本的性能》，关于 Ajax 优化指导原则，可以参见 提高 Ajax 应用程序性能，避开 Web 服务漏洞。

1. 优化图片 (Optimize Images)

使用 GIF 、JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片，更多的功能，更小的尺寸(与 GIF 相比)。

对于 PNG 图片，考虑用 Pngcrush 或类似的工具进行优化。常见的工具如下表:

• pngcrush http://pmt.sourceforge.net/pngcrush/
• pngrewrite http://www.pobox.com/~jason1/pngrewrite/
• OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程)
• PNGOut http://advsys.net/ken/utils.htm

另请参见: Five Tips For the Effective Use of PNG Images

对 JPEG 图片的优化工具：

• jpegtran (http://jpegclub.org/)

注意控制图片大小，推荐在 200K 以下。

2. 使用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites)

使用 CSS Sprites 的副作用是客户端将消耗更多内存(参考)。

3. 不要在 HTML 中使用缩放图片 (Don‘t Scale Images in HTML)

 ImageMagic 命令（convert ）

4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)

更小，可缓存，这两条可能都不是问题。问题是，太多站点根本没有 favicon.ico 。判断独立域名的 Blog 是否专业，是否有 favicon.ico 。

1. 单个数据对象小于 25K (Keep Components under 25K)

这个似乎只是针对 iPhone 研究的。因为 Apple 可缓存到内存中的 Web 对象是 25K 左右。

2. Pack Components into a Multipart Document

把Web 页面组件打包成一个多部分组成的文档。其目的是减少 HTTP 请求。。