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

目录
相关文章
|
1月前
Web应用基本架构
Web应用基本架构。
38 6
|
3月前
|
设计模式 缓存 前端开发
单页应用的架构与设计:打造高效可扩展的 Web 应用(下)
单页应用的架构与设计:打造高效可扩展的 Web 应用(下)
单页应用的架构与设计:打造高效可扩展的 Web 应用(下)
|
3月前
|
缓存 JavaScript 前端开发
单页应用的架构与设计:打造高效可扩展的 Web 应用(上)
单页应用的架构与设计:打造高效可扩展的 Web 应用(上)
单页应用的架构与设计:打造高效可扩展的 Web 应用(上)
|
2月前
|
SQL 分布式计算 Hadoop
Azkaban【基础 01】核心概念+特点+Web界面+架构+Job类型(一篇即可入门Azkaban工作流调度系统)
【2月更文挑战第6天】Azkaban【基础 01】核心概念+特点+Web界面+架构+Job类型(一篇即可入门Azkaban工作流调度系统)
96 0
|
4月前
|
前端开发 数据库 Python
Python Web 开发: 解释 Django 框架的 MVC 架构是什么?
Python Web 开发: 解释 Django 框架的 MVC 架构是什么?
|
4月前
|
Java Docker 容器
美团大牛精心整理SpringBoot学习笔记,从Web入门到系统架构
近期慢慢复工,为了准备面试,各路码友们都开始磨拳擦脚,背面试题、知识点。小编最近得一良友赠送了一份关于SpringBoot的学习笔记,简直不要好用,理论解析言简意赅,每一步操作都有图片展示。这么好的东西肯定不能私藏,为了感谢大家在2019年里的支持,我现在将这份笔记赠送给大家,祝大家前程似锦,Offer不断!
|
1月前
|
架构师 前端开发
web全栈架构师第16期教程
互联网时代已进入后半场,行业环境发生了显著变化。互联网人,尤其是技术人员,如何在加速更迭的技术浪潮中持续充电,提升自身价值,是当下必须面对的挑战。课程涉及了现下前端实际开发时所需要的各块内容,并深度对标 阿里 P6+级别所具备的知识储备及开发技能,奠定源码阅读基础和全栈开发能力。
19 3
web全栈架构师第16期教程
|
1月前
|
存储 设计模式 前端开发
请解释 Web 应用程序的 MVC(模型-视图-控制器)架构。
【2月更文挑战第26天】【2月更文挑战第89篇】请解释 Web 应用程序的 MVC(模型-视图-控制器)架构。
|
1月前
|
敏捷开发 前端开发 JavaScript
探索现代Web应用中的微前端架构
【2月更文挑战第25天】在本文中,我们将深入探讨微前端架构的概念、实现方式以及其在现代Web开发中的应用。微前端是一种将大型单一应用拆分成一组小型独立子应用的架构模式,每个子应用负责一个功能模块,并可独立开发、部署和运行。通过这种模块化的方式,团队能够更加灵活地响应市场变化,提高开发效率,同时保持整体应用的稳定性和可维护性。文章将详细介绍微前端的核心原则、技术挑战以及如何在实际项目中实施微前端策略。
|
1月前
|
Java 数据库连接 容器
web后端-SSM快速了解和架构介绍
web后端-SSM快速了解和架构介绍