1. Welefen
2011-09-25

2. • Welefen / 李成银
百度空间 百度新首页
• @welefen in twitter，微博，github
• welefen@gmail.com
• http://www.welefen.com

3. 热爱标准化建设和
前端自动化工具的开发

4. 随着web应用越来越复杂
Web Page => Web App

5. 前端开发越来越复杂
2011
2004

7. 同时前端人员也越来越多

8. • 编码规范问题越来越严重
• 很多陷阱新人可能并不知道
• 很多优化并不是上线前都做了
• 多人同时开发冲突的问题
• 人多了，开发效率反而低了

9. 尝试过使用guideline和codereivew解
决编码规范的问题。但由于时间和人力
有限始终没能很好的开展，最终每个人
有自己的风格。

10. 也在积极寻找第三方工具
• yui compressor
• css sprites generator
• smush it
• jslint
• …

11. 额。。。好吧，先这样吧。以后有时间
在改。
这次图片优化没做啊，下次记得要优化。
杯具，静态文件缓存又忘记清。。。

12. 这谁写代码，太2了
我这次
都没法改了。。。

13. <img src=“” />
<a href=“javascript:void(0)”></a>

14. A方案行，B方案也支持中纠结
A OR B ？ 那都支持吧
- 我们一直在妥协，时间长了，什么都
乱了

16. 开发中不应该妥协，要么0，要么是1。
- 上线前强制检测，有错误无法上线
让犯错变得困难
- 集成第三方和自主开发工具
能自动化的绝不人工

17. 前端编译平台

18. 即统一的执行脚本（如：build.sh），
上线前对代码检测和自动化，发现有
error的时候编译不让通过，无法上线。
- 开发的时候也可以手工执行这个脚本去检测

20. • 模块目录结构检查
• 文件命名检查
• HTML、JS、CSS编码规范检查
• JS、CSS文件合并
• CSS3样式自动补全
• JS、CSS等静态文件清除缓存
• HTML、JS、CSS压缩
• CSS Sprites

21. • CSS背景图片转DataURI
• 图片优化
• XSS漏洞检查和自动修复
• JS、CSS代码Beautify
• 线下地址替换成线上地址
• 线下域名检测
• 多域名
• Smarty3性能优化

23. • 图片目录统一为img,不在为到底使用img,
imgs, image, images哪一个而纠结
• js目录统一为js, 禁止使用javascript,
scripts等名称
• 检测的时候发现多余的目录，直接编译不
通过

24. • HTML里含有模版语法（如：Smarty）
• 不能单靠正则去检测
• 词法分析也要考虑各种模版语法的情况

25. 支持模版语法的HTML分析、
检测、压缩工具
https://github.com/welefen/Fl

26. 词
法
分
析

27. 检
测

28. WEB SERVER压缩
• Web Server动态压缩有性能问题，虽然是ms级别
• 不够安全，用户输入的内容，无法完全覆盖测试

29. • 编译的时候去压缩
• 只将安全的内容压缩
- 非pre,textarea内的空行，多个空格
- 非IE条件注释
- 可去除的结束标签
- 可删除的标签数据默认值
- 无特殊字符属性值的左右引号
- 可删除属性值的属性
- 。。。

30. 百度新首页：http://www.baidu.com/home

31. • 单一的文件多人开发时容易出现冲突
• js使用document.write
• css使用@import url
• 开发的时候使用小文件模式
• 编译的时候自动合并，去重
- 开发时容易定位问题，且不容易冲突

32. 将document.write封装成
importScript函数

33. 我们终于说服PM，UE在某些地方使用CSS3
样式来渐进增强

34. 虽然有辅助性的工具，但修改起来还是麻烦

35. 编
译

37. • 为了性能，设置了cache-control和
expires头
• 缓存时间内，正常访问不发生请求
• 代码改动后，需要通知客户端清缓存

38. • 最原始的方法：手工改动版本号
base.js?v=1 base.js?v=2
- 经常发生忘记改的情况

39. • 后端变量或者编译的时候加时间戳
base.js?v={=$var=} base.js?v=201109121215
- 能够自动清缓存
- 每次上线所有的缓存都清了，包括未改动的文
件

40. • md5方式
文件md5值后8位
base.js base.js?v=cfa05e53
- 能够自动清缓存，且未改动的文件缓存不会清
- 有些代理可能不支持query
- 上线过程中可能引起服务不正常

41. • 更好的方式
文件md5值后8位
base.js base_cfa05e53.js

43. • 虽然能自动生成图片，并给出background-position
• 但要手工去改对应css文件
• 每次都要打包上传
• 有改动后要重新一次，还要注意缓存
- 其实也可以自动化，只要个简单的配置即可

44. • 将要合并在一起的小图片放在同一个子文件
夹下
• 配置
• 自动合并图，自动去修改css

45. 合并图
小图
配置
修改的css

46. • XSS漏洞检查和自动修复
• 图片优化
• Smarty3性能优化
• CSS背景图片转DataURI

47. • 让工程师减少犯错
• 尽量自动化，提高开发效率
• 既然不能反抗，那就好好享受吧

48. Thank You