一． Web前端介绍 二． 核心技术 三． 性能与优化 四． RIA & 移动终端 五． 心得和其他

1. 漫谈web前端
Woody Huang

2. 目录
一． Web前端介绍
二． 核心技术
三． 性能与优化
四． RIA & 移动终端
五． 心得和其他

3. Web前端介绍
概念
Web前端开发是从网页制作演变而来的。网页制作是Web
1.0时代的产物，那时网站的主要内容都是静态的，用户使
用网站的行为也以浏览为主。随着Web 2.0概念的普及和
W3C组织的推广，大量的网站进行重构。人们对用户体验
的要求越来越高，前端开发的技术难度越来越大，于是
Web前端开发慢慢的独立出来。
----百度百科

4. Web前端介绍
前端的职业演化
网页美工
网页设计师
服务器端编程
后台程序员
网页制作
前端开发工程师
Flash工程师
CSS重构工程师JS工程师
页面设计
UI设计师
流程设计
交互设计师

5. Web前端介绍
用户体验设计
随着用户的要求标准逐步的提高， WEB前端也慢
慢的提升到研究用户为中心的新高度，演变为更加
分工细化的协作关系。
设计工作发展：设计组→UED→产品设计中心

6. Web前端介绍
Web前端与UED小组

7. Web前端介绍
UED小组成员
用户体验设计师（UE：User Experience Designer）
主要职责：
需求挖掘、收集、整理、分析。
与需求提出者、方案实施者、项目参与者、典型用户等所有
涉及人员沟通、协调。
组织相关人员讨论并给出最优解决方案，并进行技术可行性、
成本权衡等方面的评估、完善制定方案原型‘实施计划、细
节规范，并保证实施过程的顺利进行。
最终方案模型的评估和改进。

8. Web前端介绍
UED小组成员
交互设计师（ID：Interaction Designer）
主要职责：
协助用户体验设计师进行需求分析、产品可用性评估。
通过任务分解、情景模拟等手段把业务逻辑分解为交互逻辑
在共同和讨论的基础上确定方案原型、基本交互模型及用户
操作流程。
协助用户体验设计师进行方案原型的评估和改进。

9. Web前端介绍
UED小组成员
图形用户界面设计师
（GUI：Graphic User Interface Designer）
主要职责：
在深刻理解方案原型的基础上确定风格样式，并进行图
形界面设计。
在与团队成员沟通和讨论中进行图形界面的优化和改进。
制定界面相关规范和注意事项。
配合网页设计师进行特殊页面的设计和ICON的制作。

10. Web前端介绍
UED小组成员
网页设计师（WD：Web Developer）
主要职责：
基于图形界面，将方案还原为完整的高质量的WEB模型。
以网站重构的思想为指导，保证结构层、表现层和行为层的
完美分离。
注重代码的质量、性能、SEO和可重用度，保证页面的加载
速度、扩展性‘适应性和兼用性。
配合技术开发人员的工作，进行特殊页面的制作。

11. Web前端介绍
用户体验要素

12. Web前端介绍
web体系结构

13. Web前端介绍
主流开发技术
 HTML、XHTML、DHTML、HTML5
 CSS、CSS3
 JavaScript、Ajax、jQuery、YUI
 Flash、RIA（Flex/Air/SilverLight）、ActiveX
 web标准、

14. Web前端介绍
W3C&WEB标准
WEB标准并不是某一个标准，而是一系列标准的集合。
网页主要分成三部分：结构（Structure）、表现
（Presentation）和行为（Behavior）。对应的标准
也分为三个方面：结构化标准语言XHTML和XML，表
现标准语言CSS，行为标准主要包括对象模型（W3C
DOM）、ECMAScript等。这些标准大部分由W3C起
草和发布。

16. 目录
一． Web前端介绍
二． 核心技术
三． 性能与优化
四． RIA & 移动终端
五． 心得和其他

17. 核心技术
文档对象模型
DOM（Document Object Model）
根据W3C DOM规范，DOM是HTML与XML的应
用编程接口（API），DOM将整个页面映射为一
个由层次节点组成的文件，DOM共有3个级别。

18. 核心技术
DOM

19. 核心技术
HTML/XHTML/DHTML
HTML是一种基于标准通用置标语言（SGML）的
应用，是一种非常灵活的置标语言，而XHTML则
基于可扩展置标语言（XML）。XML是SGML的一
个子集，但是语法更为严格。
XHTML 1.0在2000年1月26日成为W3C的推荐标
准。

20. 核心技术
HTML与XHTML区别
所有的标记都必须要有一个相应的结束标记
所有标签的元素和属性的名字都必须使用小写
所有的XML标记都必须合理嵌套
所有的属性必须用引号""括起来
把所有<和&特殊符号用编码表示
给所有属性赋一个值
等等……

21. 核心技术
不常用的标签
<b> <i> <em>
<button>
<caption> <col> <colgroup>
<fieldset> <legend>

22. 核心技术
层叠样式表CSS
CSS是Cascading Style Sheet 的缩写。是用于（增强）
控制网页样式并允许将样式信息与网页内容分离的一
种标记性语言。通过设立样式表，可以统一地控制
HTML中各标志的显示属性。层叠样式表可以使人更
能有效地控制网页外观。使用层叠样式表，可以扩充
精确指定网页元素位置，外观以及创建特殊效果的能
力。

23. 核心技术
层叠样式表的继承和冲突
标签可以从任何一个祖先或者标签那里继承属性。
样式冲突计算规则：
• 一个标签选择器值1分；
• 一个类选择器值10分；
• 一个ID选择器值100分；
• 一个行内样式值1000分；
• 如果分数相同，就近原则。

24. 核心技术
CSS2.0盒模型

25. 核心技术
浏览器战争

26. 核心技术
调试工具
IETester（IE6模式并不完全等同于IE6）
IE插件DebugBar
IE89的调试模式
Firefox的插件Firebug
Chrome的调试模式
Adobe的browserlab工具

27. 核心技术
兼用型和hack
.a{color:#F00; *color:#0F0;_color:#00F ;color:#0F00; }

28. 核心技术
兼用型和hack
强制使用IE7模式显示
<meta http-equiv=“x-ua-compatible”content=“ie=7”/>
条件注释判断
<!-- [if !IE]>除IE外<![endif]-->
<!-- [if IE]>所有IE<![endif] -->
<!-- [if lt IE 6]>IE6以下<![endif] -->
<!-- [if gte IE 6]>IE6以及以上版本<![endif] -->

29. 核心技术
CSS Reset
在HTML标签在浏览器里有默认的样式，例如p 标签有上下边距，
strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的
默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的
缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现
的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，
影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全
部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS
默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这
就是CSS Reset。
最简单的CSS Reset * { padding: 0; margin: 0; border: 0; }

30. 核心技术
CSS布局
常用技术：
• 浮动float
• 负边距negative margin
• 相对定位relative position
布局中要注意：
• 实现了内容与布局的分离.
• 确保任何一栏为最高栏时不会出问题。
• 良好的兼容性。
• 易于修改。
• 重要的内容放前面。

31. 核心技术
CSS布局：24栅格化布局
常用6+13+5/6+10+8/5+12+7 三栏，5+19/6+18 两栏
淘宝部分样式命名.grid-c3-s5e7 .grid-c3-s9e6
新浪微博使用32栅格，即（20+10）*32-10=950px

32. 核心技术
CSS布局：圣杯布局

33. 核心技术
CSS布局：双飞翼布局

34. 核心技术
CSS布局：瀑布流布局
通常为两种实现方式：
• 通过绝对定位瀑布流内模块实现
• N列布局方式
铺满第一行，计算各列高度，选择最小高度，绝对定位格子/插
入该列格子，累加当前列高度，再次计算最小高度，重复。
布局上不是难点，主要是数据读取过程、中间的计算过程和插入
瀑布过程的效率。

35. 核心技术
CSS布局：
• 常规浮动布局；
• 负边距布局；
• 塌陷式布局；
• 绝对定位布局；
• Table布局；
• 等等……

36. 核心技术
CSS禅意花园（ CSS Zen Garden ）
原版http://www.csszengarden.com/
中文版http://www.csszengarden.com/tr/chinese/
固定的XHTML结构，通过CSS样式展示不同的页面。发挥
想象力练习CSS
*DW的良好设置优化代码。

37. 核心技术
JavaScript
JavaScript语言前身叫做Livescript。自从Sun公司推出著名的
java语言之后，Netscape公司引进了Sun公司有关java的程序概
念，将自己原有的Livescript重新进行设计，并改名为
JavaScript。JavaScript是一种基于对象和事件驱动并具有安全
性能的脚本语言，其实现在一个网页中连接多个对象，与网络客
户交互作用，从而可以开发客户端的应用程序，它是通过嵌入或
者调入在标准的HTML语言中实现的。

38. 核心技术
JavaScript
2012年8月份编程语言
排行榜--

39. 核心技术
JavaScript兼容性
DOCTYPE 声明标准HTML 4.0 和XHTML 1.0 的差异
IE 浏览器和Firefox 浏览器中间的差异

40. 核心技术
JavaScript库
常用的库：
• jQuery：简单，上手快，提供css和xpath选择符查找元素，
ajax，动画效果。
• Dojo：一个巨大的库，包括的东西很多，dijit和jojox是dojo
的扩展，几乎各种JavaScript程序都包括了
• Prototype：非常流行的库，使用原型链向JavaScript中添加
了很多不错的函数。
• YUI：yahoo！用户界面，提供丰富的解决方案
• Extjs：组件、皮肤、动画效果非常丰富

41. 核心技术
AJAX
AJAX即“Asynchronous JavaScript and XML”（异步
JavaScript和XML) 是一种创建交互式网页应用的网页开发技术。
主要包含：
• 基于web标准XHTML+CSS的表示
• 使用DOM进行动态显示及交互
• 使用XML和XSLT进行数据交换和相关操作
• 使用XMLHttpRequest 进行异步数据查询、检索
• 使用javascript将所有东西绑定在一起

42. 目录
一． Web前端介绍
二． 核心技术
三． 性能与优化
四． RIA & 移动终端
五． 心得和其他

43. 性能与优化
前端需要优化内容
据统计，用户相应时间中，80-90%的内容都是下载页面上
面的所有组件，如图片、flash等等，所以相对后端来说，
前端优化只需要较少的事件和资源，就能取得较大的效果，
大体来说包括修改web服务器配置文件、在不减少内容的
情况下优化结构代码、优化首屏时间内的对象数、将脚本
和样式表放在特定位置、控制精简页面元素（合并图片、
合并脚本）、等等

44. 性能与优化
如何优化
• 减少http请求
• 设置缓存
• 利用浏览器并行下载
• 减小文件的大小
• 等等

45. 性能与优化
减少http请求
• CSS Sprites。
• 图片地图
• 内联图片，如下例子
<IMG
SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7" ALT="Larry">
• 在不破坏模块化开发的原则下，合并脚本和样式表。

46. 性能与优化
设置缓存
• 设置Expires头。
HTTP 1.1引入了“Cache-Control”头，可以用
“max-age”来设置缓存的时间长度
• 移除ETag或者对ETag进行专门配置，以免影响缓存调
取
• 延时下载。

47. 性能与优化
并行下载
• 使用多个主机名。常见的多个域名存放图片
• 脚本防止底部最后下载，在下载脚本时，并行下载是静
止的。

48. 性能与优化
减少文件的大小
• 去除页面不必要的代码。重构页面。
• 优化CSS，合并相同类，采用缩写、简写。避免使用
CSS表达式。
• 精简脚本。去除空格、换行和注释，采用算法进行压缩。
（要求JS较高的规范编写水平，在去除所有空格、换行
和注释后能正常运行）
• Gzip压缩。

49. 性能与优化
性能分析工具
• Fiddler
• IBM Page Detailer
• Yahoo Yslow
• Firebug
• http analyzer

50. 性能与优化
优化工具
• YUI Compressor
• JSMin
• ImageMagick
• smush.it
• CSSTidy
• CSS Sprite Generator

51. 目录
一． Web前端介绍
二． 核心技术
三． 性能与优化
四． RIA & 移动终端
五． 心得和其他

52. RIA & 移动终端
富因特网应用程序RIA
富因特网应用程序（Rich Internet Applications，RIA）利用具
有很强交互性的富客户端技术来为用户提供一个更高和更全方位
的网络体验。RIA集成了桌面应用的交互性和传统Web应用的部
署灵活性与成本分析，以创建单一而完整的用户体验。富客户端
技术使得创建RIA成为可能，他提供一个运行时的环境以承载被
编译的客户端应用程序，该客户端应用程序是一个使用HTTP协
议发布的文件。客户端应用程序使用异步的C/S结构连接到现有
的应用服务器，这是一种安全的、可升级的、具有良好适应性的
面向服务模型，这种模型由当前所采用的web服务驱动。

53. RIA & 移动终端
RIA主流技术
• Adode Flex&Air
• 微软SilverLight
• Sun javaFX

54. RIA & 移动终端
移动终端
• HTML5
• CSS3

55. 目录
一． Web前端介绍
二． 核心技术
三． 性能与优化
四． RIA & 移动终端
五． 心得和其他

56. 心得及其他
Web前端开发规范
• 文件管理规范
• 版本控制规范
• 页面设计规范
• 代码编写规范
• SEO规范
• 等等等等…………

57. 心得及其他
完整的开发流程
需求文档、流程图、低保真原型、设计结果方案、交
互计划方案、高保真原型、交互结果方案、页面风格/
布局/关键页面设计/文字/其他设计、GUI方案确定、
切割页面/HTML、后台编码、a版测试、修复BUG/优
化、优化流程、b版测试、发布、检测报告

58. 心得及其他
• 及时更新工作的工具和软件
• 收集好代码、思想习惯，并加以运用

59. 心得及其他
多看、多学、多练习

60. 心得及其他
网上资源
W3CSchool：www.w3school.com.cn
各大门户的UED博客：Taobao UED、Alipay UED、
Alisoft UED、Tencent isux、Tencent CDC、163
UEDC 、19lou UED 等等
其他网站：
前端翻译小站www.trans4fun.org
CSS森林www.cssforest.org/blog
Web前端开发www.css88.com
等等。。。。

61. 心得及其他
相关书籍
• 中文名: HTML与XHTML
权威指南(第六版)
• 英文名: HTML &
XHTML: The Definitive
Guide

62. 心得及其他
相关书籍
• 中文名: CSS权威指南(第
三版)
• 英文名: CSS: The
Definitive Guide

63. 心得及其他
相关书籍
• 中文名: CSS实战手册
• 英文名: CSS THE
MISSING MANUAL

64. 心得及其他
相关书籍
• 中文名: JavaScript权威
指南(第六版)
• 英文名: JavaScript : The
Definitive Guide

65. 心得及其他
相关书籍
• 中文名: 锋利的jQuery

66. 心得及其他
相关书籍
• 中文名: 高性能网站建设
指南——前端工程师技能
精粹
• 英文名: High
Performance Web Sites:
14 Steps to Faster-
Loading Web Sites

67. 心得及其他
相关书籍
• 中文名: 网站优化
• 英文名: website
optimization：Speed,
Search Engine &
Conversion Rate Secrets

68. 心得及其他
相关书籍
• 中文名: Web信息架构：
设计大型网站
• 英文名: Information
Architecture for the
World Wide Web:
Designing Large-scale
Web Sites

69. 谢谢
2012年8月