Web 架构设计经验分享

不要过设计：never over design

　　web 开发，是个非常敏捷的过程，变化随时都在产生，用户需求千变万化，许多方面偶然性非常高，较之软件开发，希望用一个架构规划以后的所有设计，是不现实的。

web架构生命周期：web architecture‘s life cycle

　　所设计的架构需要在 1－10 倍的增长下，通过简单的增加硬件容量就能够胜任，而在 5－10 倍的增长期间，请着手下一个版本的架构设计，使之能承受下一个 10 倍间的增长。

缓存：Cache

　　其实设计 web 缓存和企业级缓存是非常不同的，企业级缓存偏重于逻辑，而 web 缓存，简单快速为好。

Cache 的常用的策略是：让数据在内存中，而不是在比较耗时的磁盘上。

　　mysql 的 heap 引擎（内存表）和 memcached

核心模块一定要自己开发：DIY your core module

　　一些开源模块，如果不涉及核心模块，确实是可以的，如果涉及核心模块，那么就要小心了。

　　核心出现问题的时候，不能完全掌握其代码是非常可怕的。

　　某些问题在压力较小的情况下表现不出来，当压力放大到一定程度时，出现错误的几率会随之放大。

合理选择数据存储方式：reasonable data storage

　　在设计数据的持久化时，需要根据实际情况来选择存储方式，而数据库不过是其中一个选项。

　　数据库也是对文件进行操作，我们需要数据库关联，排序的能力，这个能力在某些情况下非常重要。

　　使用数据库，意味着数据和表现是完全分离的，当网站具备一定规模的时候，数据库往往成为效率的瓶颈。

　　使用静态文件存储数据，lucene 进行检索。

搞清楚谁是最重要的人：who's the most important guy

　　涉众，就是和你的设计息息相关的人。

　　一个传统的互动社区开发中，最重要的东西是内容，用户产生内容，所以用户就是上帝。

　　至于内容挑选，实际上网站每天产生的内容非常的多，普通人是不可能看完的，而编辑负责把精华的内容推荐到首页上，所以很多用户读到的内容其实都依赖于编辑的推荐，所以设计让编辑工作方便的工具也是非常重要，有时甚至是最重要的。

不要执着于文档：don't be crazy about document

　　web 开发中交流 > 文档

　　而 web 项目从概念到实现的时间是非常短的，而且越短越好。

　　face2face 是一种不错的选择。

团队：team

　　不要专家团队，而要外科手术式的团队，指的是团队中要培养各种类型的成员，与《人月神话》中“外科手术团队”的概念有所不同。

　　

总结

　　0)架构是一种权衡。

　　1)web 开发的特点是是：

　　　　没有太复杂的技术难点，一切在于迅速的把握需求，其实这正式敏捷开发的要旨所在，一切都可以非常快速的建立，非常快速的重构，我们的开发工具，底层库和框架，包括搜索引擎和 web 文档提供的帮助，都提我们供给了敏捷的能力。

　　2)此外，相应的，最有效率的交流方式必须留给 web 开发，那就是 face2face（面对面），不要太担心你的设计不能被完备的文档所保留下来，他们会以交流，代码和小卡片的方式保存下来。

　　3)人的因素会更加重要，无论是对用户的需求，还是开发人员的素质。

Yahoo Yslow 团队提高 Web 性能的 14 条法则

　　01. Make Fewer HTTP Requests

　　　　减少少 HTTP 请求（整合多个分开的 CSS / JavaScript）

　　02. Use a Content Delivery Network

　　　　使用 CDN

　　03. Add an Expires Header

　　　　加入 Expires Header（过期时间标记头） 到 Image、CSS、JavaScript 档案里

　　04. Gzip Components

　　　　页面使用 gzip 压缩 HTML、JavaScript、StyleSheet、XML、JSON，但切记“不要压缩 Images，PDF 档案”

　　05. Put CSS at the Top

　　　　样式代码 css 置于页面顶部 head 标签中，使用 <LINK> 标签，不要使用 @import 语法。

　　　　避免样式改变引起的页面元素重绘。

　　　　link 是一个 html 标签，而 @import 是一个 css 标签，

　　06. Move Scripts to the Bottom

　　　　脚本语言 script 置于页面底部最下方 </body> 之前，所有在 JavaScript 加载以下的 HTML 在 JS 还没读完前，都不会显示画面。

　　　　把 JavaScript 的代码都放在 onload 执行。

　　07. Avoid CSS Expressions

　　　　避免使用 CSS expressions，可能这段 expression 会在每一次 mouse move、resize、scroll、key press 时执行，使用 js 来完成相应的功能。

　　　　 expression  是 CSS 中的行为，IE5 及其以后版本支持在 CSS 中使用 expression，用来把 CSS 属性和 Javascript 表达式关联起来，这里的 CSS 属性可以是元素固有的属性，也可以是自定义属性。就是说 CSS 属性后面可以是一段 Javascript 表达式，CSS 属性的值等于 Javascript 表达式计算的结果。

　　　　微软 IE 官方博客报道：IE8 标准模式下将不再支持 CSS 的 expression 功能。

　　08. Make JavaScript and CSS External

　　　　JS 跟 CSS 独立出文件比较好，首页除外。

　　　　使用 Post-onload download 技巧（download external files after onload）

 window.onload = downloadComponents;

 function downloadComponents() {

  var elem = document.createElement("script");

  document.body.appendChild(elem);

  ...

 }

 在 Server-side 判断使用者 Browser 是否有设定 Cookie["hasPostOnloadDownload"]，

 若没有，就使用 post-onload download 动态下载 CSS & JS；

 若有用，就直接用 <script src="xxxx.js"></script>下载，Browser会抓取 Cache 的版本。

　　09. Reduce DNS Lookups

　　　　在一个页面中，不要使用过多地不同域名解析，建议不要超过 2 - 4 个，不然会降低页面载入速度。

　　　　开启 Keep-Alive 支援，在 pv 不是很高时可以加快客户访问的速度，因为不需要三次握手，pv > 120 万时就不要使用了，有可能导致服务器一直 TIME WAIT 而无响应。

　　10. Minify JavaScript

　　　　减小 Javascript。可以使用工具减少代码量，可以被浏览器更快的下载。

　　　　相关工具：

　　　　　　　　下载后更名成 jsmin.zip 解压缩出 jsmin.exe 即可执行：jsmin.exe < input.js > output.js（注意：所有 UTF-8 编码的 js 档会变成 ANSI as UTF-8 编码）

　　11. Avoid Redirects

　　　　避免重定向：

　　　　　　网址若省略文件时，最后面一定要加上/结尾

　　　　　　追查 Log 档查看 Log Referer。

　　12. Remove Duplicate Scripts

　　　　移出代码中重复的脚本语言。

　　13. Configure ETags（Turn off ETags）

　　　　Etags 是 Web 服务器返回的实体的唯一标识，主要应用在有条件的 Get 请求中，如果 ETags 不匹配，就不能发送 304 码。

　　　　对于服务器之间一个单独的实体的 ETag 总是不同的，对于服务器多余一台机器的 Site，很少返回 304 状态码，所以多台前端服务器时要关闭 ETags 选项。

　　　　ETag format：

　　　　　　Apache: ETag: inode-size-timestamp

　　　　　　IIS: ETag: Filetimestamp:ChangeNumber

　　14. Make Ajax Cacheable

　　　　XHR、JSON、iframe、动态脚本 都是可以被缓存，精简和压缩的，这些不会经常变动的内容，可以缓存它，将最后修改时间标记在 URL 中。

提高 Web 性能的 14 条法则（详细版）

<a href="http://www.cnblogs.com/csharp/archive/2008/08/27/high_performance_web_sites_14_rules.html">http://www.cnblogs.com/csharp/archive/2008/08/27/high_performance_web_sites_14_rules.html</a>

CSS 中的行为——expression

<a href="http://www.blueidea.com/tech/site/2006/3705.asp">http://www.blueidea.com/tech/site/2006/3705.asp</a>

IE8 将不再支持 CSS 中的 expression

<a href="http://www.cnblogs.com/JustinYoung/archive/2008/10/17/ending-expressions.html">http://www.cnblogs.com/JustinYoung/archive/2008/10/17/ending-expressions.html</a>

Dojo 的压缩

<a href="http://pigdogyourmother.ycool.com/post.1684294.html">http://pigdogyourmother.ycool.com/post.1684294.html</a>

提高基于 Dojo 的 Web 2.0 应用程序的性能

<a href="http://www.ibm.com/developerworks/cn/web/wa-lo-dojo-perf/">http://www.ibm.com/developerworks/cn/web/wa-lo-dojo-perf/</a>

常见的 HTTP 状态代码及其原因

<a href="http://leeqianjun.javaeye.com/blog/266866">http://leeqianjun.javaeye.com/blog/266866</a>

使用 ETags 减少 Web 应用带宽和负载

<a href="http://www.infoq.com/cn/articles/etags">http://www.infoq.com/cn/articles/etags</a>

<a href="http://liudaoru.javaeye.com/blog/211975">http://liudaoru.javaeye.com/blog/211975</a>