1. 聊聊前端攻城师
by 黄文杰

2. 【诞生】
2005年之前，制作HTML网页用table布局。
table布局的
• 优点：良好的兼容性，在ie5ie5.5ie6下有良好的兼容性
• 缺点：代码臃肿，可读性差，套版困难，维护不便。

3. W3C提出WEB标准化布局，采用Xhtml + CSS（俗称
div+css），于是“前端攻城师”这个职位诞生了。
web标准布局
• 优点：代码简洁清晰，可读性强，套版方便，容易维护
• 缺点：需要为不同的浏览器写css hack以达到浏览器显示
效果的一致性。

4. 【发展】
For a long time...
• 还原设计稿，切个图
• 日常工作中,大部分时间与HTMLCSSJS 编辑器 浏览器
打交道，

5. 随着浏览器的增多，我们的工作要兼容更多的浏览器，
ie6-9 Firefox Safari Chrome Opera
还有：
遨游、QQ浏览器、360浏览器、搜狗浏览器、世界之窗
T_T@#*$ 坑爹阿.....

6. 渐渐地，前端开始要实现一些页面动态的效果
• Slider（图片轮换） “淡入淡出” “移动动画”
• Dialog（弹开层） “弹出动画” “移动”“AJAX”
……
对JS的要求越来越高，且要兼容多个浏览器，于是jQuery之类
的JS库诞生了。

7. jQuery
• 优点：开源，浏览器兼容性强，提供大量接口，文档详细，
有大量的插件。
• 缺点：依赖库文件（1.6.4-min 90k），久了对原生的JS写
法不适应。

8. 随着标准浏览器的发展，浏览器原生支持的视觉效果越来
越多，CSS3 { 圆角 阴影 半透明 旋转 动画}大量使用
CSS3浏览器支持情况：http://www.findmebyip.com/litmus/

9. ie6-8的CSS3支持相当不给力，但国内2011仍占据50%以
上的份额(http://www.chinaz.com/news/2011/0909/209565.shtml)
如何在项目中权衡地使用CSS3？
折中的办法： 渐进式增强

10. 渐进式增强
• 支持CSS3的浏览器（Firefox/Chrome/Safari/Opera）使用CSS3
的属性，不支持的浏览器（ie6/7/8）不使用，在不影响用户
体验的不前体下，牺牲部分效果。

11. 我们能做的还远不止这些...

12. 【新的挑战】
挑战1 - 前端性能优化
慢 500ms = 20% 将放弃访问（Google）
慢 400ms = 5-9% 将放度访问（Yahoo!）
慢 100ms = 1% 将放弃交易(Amazon)

13. 需要我们：
• 基于Yslow定点优化（Yahoo提高网站访问速度的34条军
规）
• 提高缓存使用率
• 优化CSS选择器
• Javascript性能优化
使用JSON进行数据交互
缩短最快可交互时间（TTI）
TTI是指从浏览器开始访问网页，到网页可以正确处理UI事件交互的时间
• 异步无阻塞脚本下载
• 高效的JavaScript
第三方代码检测相关性能(dynaTrace Ajax)

14. 挑战2 - 页面越来越复杂
一个页面塞入越来越多的元素，大量的模块，AJAX模块，
ICON，隐藏显示内容，弹出层，内容切换。

15. 需要我们：
• HTML/CSS 高度模块化，可重复使用。
• 封装更多的JS组件库重复调用。
• 代码品质自动校验，自动化测试。
• 管理好代码版本，自动化发布。
• 团队建设，你懂的 （前端攻城师+ + ）

16. 挑战3 - 更多的终端屏幕
台式机、笔记本、平版电脑、手机

17. 需要我们：
• 页面需适应更多的屏幕分辨率，流式布局、自适应宽度。
• 触屏、多点触控、重力感应、本地存储、地理位置。
• 产品 WebAPP 界面
• HTML5/CSS3

18. 前端开发在设计部门是过去时，现在更适合在技术部门
张克军（豆瓣）

19. 谢谢
(FAQ)