创建高性能的 Web 页面March 26, 2008

首先,感谢 圆心 和 小马 主持这次的技术交流会。此次关注的是 客户端的效率问题 ,根据 Yahoo 的总结,可以总结下面 14 条「军规」。

  1. 尽可能的减少 HTTP 的请求数 [content]
  2. 使用 CDN(Content Delivery Network) [server]
  3. 添加 Expires 头(或者 Cache-control) [server]
  4. Gzip 组件 [server]
  5. 将 CSS 样式放在页面的上方 [css]
  6. 将脚本移动到底部(包括内联的)[javascript]
  7. 避免使用 CSS 中的 Expressions [css]
  8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css]
  9. 减少 DNS 查询 [content]
  10. 压缩 JavaScript 和 CSS (包括内联的)[javascript] [css]
  11. 避免重定向 [server]
  12. 移除重复的脚本 [javascript]
  13. 配置实体标签(ETags)[css]
  14. 使 Ajax 缓存 [content]

根据,PPT 的内容所示,我使用 Yslow 检查了下本人的主页,才得了个「F 47」(坦白说,与我本人估计的非常有出入)。

http://files.gracecode.com/2009_11_05/1971454c2cf7.jpg

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

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

最后, 提供本次的交流会的 PPT 下载 ,再次感谢他们。

有关更多的信息,可以访问 圆心 同志的 Blog ,他上面有更详实的内容。

正确上传文件January 9, 2008

网站有很多地方需要交互,比方说有时候就需要用户上传文件。大部分的时候我都没有在乎这一点,我个人一向认为正确上传文件是常识。但当我整理某台服务器的时候,我发现有很多不合理的地方,于是写下来说说我的看法。这篇文件仅适合独立开 Blog,和打算珍惜服务器的每 1KB 资源的人阅读。

用户的角度上说,上传正确的文件应是自律为主。上传文件应该遵守两个原则,首先就是确定这个文件一定会使用到才会上传,其次就是是尽量的小。下面,我举例说明一下。

比如用户上传图片,jpg、gif 和 png 图片格式所能展现的效果和内容是不同的,但不建议采用上述格式以外的其他图片格式作为上传文件。 这里,有一个连接详细解释这些内容

个人 Blog 的照片如果需要插图,可以考虑使用 如 Yupoo 等图片共享网站 ,当然前提是内容符合他们的要求。这样你本身就可以每个月就可以减轻一些存储空间,并且更有利于管理。文章插图容量应该控制在 500KB 以内,大小应该控制在 800px 一下(以最宽一边计算)。根据本人的经验,这样最适合阅读。

相同的道理,如果是自己的服务器,如果没有必要,尽量不要上传视频等文件,因为这些文件将会迅速耗费你的空间。你可以将一些公共的视频放到 Youtube 等网站,这样也可以起到分流的作用。

永远不要怀疑蜘蛛的力量,文件一旦上传到服务器上,即便是没有做任何的连接,都有可能被访问到(愚蠢的服务器)。所以千万不要将你的个人资料等上传到服务器上。否则,除了会浪费服务器空间以外,还会引起不必要的麻烦。

上传的文件应该尽量避免空格、中文、全角标点符号等字符,因为服务器不一定能正确处理这些文件(虽然有点小题大作)。最好的做法是建议采用英文、数字和下划线组合而成的便于理解的文件名。

随后,下面是作为一名开发者的一些开发经验。

永远不要怀疑脚本的破坏能力, 小小的脚本可能就会毁了整台服务器 。所以避免 PHP、ASP、JSP 等这些服务器脚本上传,Windows 主机特别要注意避免用户上传可执行文件。*ix 服务器应上传操作以后立即将权限标记为 644 (目录权限为 755)。这个是第一条,而且是最总要的一条。

如果用户不是非常的在意,我们应该帮助他们重新生成上传文件的文件名。文件名应该包含文件上传日期等有规律的名称,这样在便于区分的同时也便于按照特征备份。重命名的文件明建议采用小写(这个是我的个人习惯)。

最后,建议应该适当的放松上传验证的机制。请不要误解我上句话的意思。比如上面我所说的上传的图片格式,在「逃避」了客户端的校验以后,发现用户还是上传了张 BMP 的图片,这个时候应该在适当允许的范围内,可以考虑将其转换成指定的适当格式存储,而不是「迂腐」地报错。

就是这些了,应该还有其他的一些更有用的经验,为了避免以偏概全,欢迎大家一起探讨。

改变你的 User-AgentDecember 24, 2007

很多的时候我们会非常的惊奇为什么网站会知道我们用什么浏览器,什么操作系统。比如 Kaku 的 Blog 上就有一个 插件 就是显示用户区域,浏览器和系统的。

其实你大部分的时候并不用担心这件事情,因为这些信息是浏览器「主动」告诉服务器的。这样是为了让服务器知道,「我在使用某个平台下的某个浏览器,请送给我知道的数据」。而 Agent 的特性不仅仅是浏览器方面有,很多的网络程序都会发送相似的「标识符」,标识自己的身份。有关 User-Agent 更详细的介绍你可以参考 这个连接

但是这种技术有时候会是双刃剑。如果你并不想被别人知道你在使用什么系统、什么浏览器,通常情况下这个时候,就往往显得非常的无能为力(大部分浏览器默认都没有这个选项)。如果你现在正在使用 Firefox,那么恭喜你实现了第一个家庭梦想 -- 你可以通过插件指定你自己喜欢的 User-Agent。

这个帮助我们的 Firefox 插件就是 User Agent Switcher ,你可以从 官方下载 。安装和设置非常的简单,比如我的 Firefox 设置好了以后就是这个样子:

http://files.gracecode.com/2007_12_23/1151185277.jpg

(再推荐一个网站,你可以访问 这个连接 得知你目前的 User-Agent。)

虽然「人肉」根据字符串分析用户的浏览器和系统非常的直观。但由于 User-Agent 没有一个统一的标准(虽然 Mozilla 已经在做 这件事情 ),所以用程序分析该字符串的所使用的系统和浏览器版本还是一件比较复杂的事情。

Javascript 方面可以参考 这个链接 (希望不要被其「冗余」的代码吓到)。相对的,PHP 可以使用

<?php
echo $_SERVER['HTTP_USER_AGENT'];
?>

获得当前客户端的 User-Agent 字符串。

最后请注意,更改 User-agent 会引起服务器对你的浏览器误判,可能会造成不必要的麻烦。PS: 但愿 Kaku 看见我这篇文章不要踹我。

Yahoo 统计