Web 架构设计经验分享

简介: 不要过设计:never over design  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");
  elem.src = "http://.../file1.js";
  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 : http://crockford.com/javascript/jsmin
        下载后更名成 jsmin.zip 解压缩出 jsmin.exe 即可执行:jsmin.exe < input.js > output.js(注意:所有 UTF-8 编码的 js 档会变成 ANSI as UTF-8 编码)
      dojo compressor : http://dojotoolkit.org/docs/shrinksafe

  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 条法则(详细版)
http://www.cnblogs.com/csharp/archive/2008/08/27/high_performance_web_sites_14_rules.html

CSS 中的行为——expression
http://www.blueidea.com/tech/site/2006/3705.asp

IE8 将不再支持 CSS 中的 expression
http://www.cnblogs.com/JustinYoung/archive/2008/10/17/ending-expressions.html

Dojo 的压缩
http://pigdogyourmother.ycool.com/post.1684294.html

提高基于 Dojo 的 Web 2.0 应用程序的性能
http://www.ibm.com/developerworks/cn/web/wa-lo-dojo-perf/

常见的 HTTP 状态代码及其原因
http://leeqianjun.javaeye.com/blog/266866

使用 ETags 减少 Web 应用带宽和负载
http://www.infoq.com/cn/articles/etags

http://liudaoru.javaeye.com/blog/211975

目录
相关文章
|
运维 负载均衡 安全
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
435 0
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
存储 消息中间件 缓存
支持百万人超大群聊的Web端IM架构设计与实践
本文将回顾实现一个支持百万人超大群聊的Web端IM架构时遇到的技术挑战和解决思路,内容包括:通信方案选型、消息存储、消息有序性、消息可靠性、未读数统计。希望能带给你启发。
507 0
支持百万人超大群聊的Web端IM架构设计与实践
|
弹性计算 Java 关系型数据库
Web应用上云经典架构实践教学
Web应用上云经典架构实践教学
335 2
Web应用上云经典架构实践教学
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
376 1
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
前端开发 JavaScript API
探索JAMstack架构:现代Web开发的新范式
【10月更文挑战第28天】JAMstack架构是一种现代Web开发方法,以其高性能、高安全性和易于维护的特点受到开发者青睐。本文深入探讨了JAMstack的核心概念、优势、工具链及其如何改变Web开发方式,包括静态网站生成、API驱动和预渲染等关键技术。
|
前端开发 JavaScript 安全
探索 JAMstack 架构:现代Web开发的新范式
【10月更文挑战第20天】JAMstack(JavaScript、APIs、Markup)架构是一种现代Web开发方法,通过预构建静态页面、动态功能通过APIs实现和依赖JavaScript,提供高性能、安全和可扩展的Web开发新范式。本文深入探讨其核心理念、优势、工具和最佳实践,帮助开发者理解和应用JAMstack。
|
弹性计算 负载均衡 安全
云端问道-Web应用上云经典架构方案教学
本文介绍了企业业务上云的经典架构设计,涵盖用户业务现状及挑战、阿里云业务托管架构设计、方案选型配置及业务初期低门槛使用等内容。通过详细分析现有架构的问题,提出了高可用、安全、可扩展的解决方案,并提供了按量付费的低成本选项,帮助企业在业务初期顺利上云。
390 0