<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/vnd.wap.wml; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-cache"/></head>
<card title="创建高性能的 Web 页面 - Gracecode.com">
<p>首先，感谢 <a href="http://www.planabc.net/" title="http://www.planabc.net/">圆心</a> 和 小马 主持这次的技术交流会。此次关注的是 客户端的效率问题 ，根据 Yahoo 的总结，可以总结下面 14 条“军规”。</p>

<ol>
    <li>尽可能的减少 HTTP 的请求数 [content]</li>
    <li>使用 CDN（Content Delivery Network） [server]</li>
    <li>添加 Expires 头（或者 Cache-control） [server]</li>
    <li>Gzip 组件 [server]</li>
    <li>将 CSS 样式放在页面的上方 [css]</li>
    <li>将脚本移动到底部（包括内联的）[javascript]</li>
    <li>避免使用 CSS 中的 Expressions      [css]</li>
    <li>将 JavaScript 和 CSS 独立成外部文件      [javascript] [css]</li>
    <li>减少 DNS 查询 [content]</li>
    <li>压缩 JavaScript 和 CSS （包括内联的）[javascript] [css]</li>
    <li>避免重定向 [server]</li>
    <li>移除重复的脚本 [javascript]</li>
    <li>配置实体标签（ETags）[css]</li>
    <li>使 Ajax 缓存 [content]</li>
</ol>

<p>根据，PPT 的内容所示，我使用 <a href="http://developer.yahoo.com/yslow/" title="http://developer.yahoo.com/yslow/">Yslow</a> 检查了下本人的主页，才得了个“F 47”（坦白说，与我本人估计的非常有出入）。</p>

<p><img src="http://pic.yupoo.com/posuring/1971454c2cf7/medium.jpg" alt="http://pic.yupoo.com/posuring/1971454c2cf7/medium.jpg" title="http://pic.yupoo.com/posuring/1971454c2cf7/medium.jpg" /></p>

<p>主要的问题就是没有开启 Gzip 压缩，以及没有设置 HTTP 头缓存。看来折腾了那么久，除了服务器端的性能，客户端的缓存还是不能忽视的。</p>

<p>想想看，如果淘宝首页没有缓存，即便是多了 1KB 的页面容量，乘以每天上亿的 PV，这个数字将是多么的庞大。</p>

<p>最后，<a href="http://www.box.net/shared/g8u4t7uo0s" title="http://www.box.net/shared/g8u4t7uo0s">提供本次的交流会的 PPT 下载</a>，再次感谢他们。</p>

<p>有关更多的信息，可以访问 <a href="http://www.planabc.net/" title="http://www.planabc.net/">圆心 同志的 Blog</a>，他上面有更详实的内容。</p>


<p>
<a href="http://www.gracecode.com/wap/">Gracecode.com</a> |
<a href="http://www.gracecode.com/wap/d/1218 ">Permalink</a>(<a href="http://www.gracecode.com/Archive/Display/1218 ">xHTML</a>) |
<a href="http://www.gracecode.com/Trackback/Recieve/1218/otuzi5">Trackback</a> |
<a href="http://rss.gracecode.com">Rss</a>
</p>
</card>
</wml>