Welefen2011-09-25
• Welefen / 李成银       百度空间                百度新首页• @welefen in twitter,微博,github• welefen@gmail.com• http://www.welefen.com
热爱标准化建设和前端自动化工具的开发
随着web应用越来越复杂Web Page => Web App
前端开发越来越复杂                   20112004
同时前端人员也越来越多
• 编码规范问题越来越严重• 很多陷阱新人可能并不知道• 很多优化并不是上线前都做了• 多人同时开发冲突的问题• 人多了,开发效率反而低了
尝试过使用guideline和codereivew解决编码规范的问题。但由于时间和人力有限始终没能很好的开展,最终每个人有自己的风格。
也在积极寻找第三方工具• yui compressor• css sprites generator• smush it• jslint• …
额。。。好吧,先这样吧。以后有时间在改。这次图片优化没做啊,下次记得要优化。杯具,静态文件缓存又忘记清。。。
这谁写代码,太2了我这次都没法改了。。。
<img src=“” /><a href=“javascript:void(0)”></a>
A方案行,B方案也支持中纠结A OR B ? 那都支持吧- 我们一直在妥协,时间长了,什么都乱了
开发中不应该妥协,要么0,要么是1。- 上线前强制检测,有错误无法上线 让犯错变得困难- 集成第三方和自主开发工具 能自动化的绝不人工
前端编译平台
即统一的执行脚本(如:build.sh),上线前对代码检测和自动化,发现有error的时候编译不让通过,无法上线。-   开发的时候也可以手工执行这个脚本去检测
• 模块目录结构检查• 文件命名检查• HTML、JS、CSS编码规范检查• JS、CSS文件合并• CSS3样式自动补全• JS、CSS等静态文件清除缓存• HTML、JS、CSS压缩• CSS Sprites
• CSS背景图片转DataURI• 图片优化• XSS漏洞检查和自动修复• JS、CSS代码Beautify• 线下地址替换成线上地址• 线下域名检测• 多域名• Smarty3性能优化
• 图片目录统一为img,不在为到底使用img,imgs, image, images哪一个而纠结• js目录统一为js, 禁止使用javascript,scripts等名称• 检测的时候发现多余的目录,直接编译不通过
• HTML里含有模版语法(如:Smarty)• 不能单靠正则去检测• 词法分析也要考虑各种模版语法的情况
支持模版语法的HTML分析、               检测、压缩工具https://github.com/welefen/Fl
词法分析
检测
WEB SERVER压缩• Web Server动态压缩有性能问题,虽然是ms级别• 不够安全,用户输入的内容,无法完全覆盖测试
• 编译的时候去压缩• 只将安全的内容压缩-   非pre,textarea内的空行,多个空格-   非IE条件注释-   可去除的结束标签-   可删除的标签数据默认值-   无特殊字符属性值的左右引号-   可删除属性值的属性-   。。。
百度新首页:http://www.baidu.com/home
• 单一的文件多人开发时容易出现冲突• js使用document.write• css使用@import url• 开发的时候使用小文件模式• 编译的时候自动合并,去重  -   开发时容易定位问题,且不容易冲突
将document.write封装成  importScript函数
我们终于说服PM,UE在某些地方使用CSS3      样式来渐进增强
虽然有辅助性的工具,但修改起来还是麻烦
编译
• 为了性能,设置了cache-control和expires头• 缓存时间内,正常访问不发生请求• 代码改动后,需要通知客户端清缓存
• 最原始的方法:手工改动版本号 base.js?v=1   base.js?v=2 - 经常发生忘记改的情况
• 后端变量或者编译的时候加时间戳base.js?v={=$var=}   base.js?v=201109121215  - 能够自动清缓存- 每次上线所有的缓存都清了,包括未改动的文件
•   md5方式                          文件md5值后8位      base.js    base.js?v=cfa05e53    - 能够自动清缓存,且未改动的文件缓存不会清    - 有些代理可能不支持qu...
•   更好的方式                       文件md5值后8位     base.js   base_cfa05e53.js
• 虽然能自动生成图片,并给出background-position• 但要手工去改对应css文件• 每次都要打包上传• 有改动后要重新一次,还要注意缓存  - 其实也可以自动化,只要个简单的配置即可
• 将要合并在一起的小图片放在同一个子文件夹下• 配置• 自动合并图,自动去修改css
合并图小图     配置           修改的css
• XSS漏洞检查和自动修复• 图片优化• Smarty3性能优化• CSS背景图片转DataURI
• 让工程师减少犯错• 尽量自动化,提高开发效率• 既然不能反抗,那就好好享受吧
Thank You
李成银:前端编译平台
李成银:前端编译平台
李成银:前端编译平台
李成银:前端编译平台
李成银:前端编译平台
李成银:前端编译平台
Upcoming SlideShare
Loading in...5
×

李成银:前端编译平台

13,267

Published on

1 Comment
25 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
13,267
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
138
Comments
1
Likes
25
Embeds 0
No embeds

No notes for slide

李成银:前端编译平台

  1. 1. Welefen2011-09-25
  2. 2. • Welefen / 李成银 百度空间 百度新首页• @welefen in twitter,微博,github• welefen@gmail.com• http://www.welefen.com
  3. 3. 热爱标准化建设和前端自动化工具的开发
  4. 4. 随着web应用越来越复杂Web Page => Web App
  5. 5. 前端开发越来越复杂 20112004
  6. 6. 同时前端人员也越来越多
  7. 7. • 编码规范问题越来越严重• 很多陷阱新人可能并不知道• 很多优化并不是上线前都做了• 多人同时开发冲突的问题• 人多了,开发效率反而低了
  8. 8. 尝试过使用guideline和codereivew解决编码规范的问题。但由于时间和人力有限始终没能很好的开展,最终每个人有自己的风格。
  9. 9. 也在积极寻找第三方工具• yui compressor• css sprites generator• smush it• jslint• …
  10. 10. 额。。。好吧,先这样吧。以后有时间在改。这次图片优化没做啊,下次记得要优化。杯具,静态文件缓存又忘记清。。。
  11. 11. 这谁写代码,太2了我这次都没法改了。。。
  12. 12. <img src=“” /><a href=“javascript:void(0)”></a>
  13. 13. A方案行,B方案也支持中纠结A OR B ? 那都支持吧- 我们一直在妥协,时间长了,什么都乱了
  14. 14. 开发中不应该妥协,要么0,要么是1。- 上线前强制检测,有错误无法上线 让犯错变得困难- 集成第三方和自主开发工具 能自动化的绝不人工
  15. 15. 前端编译平台
  16. 16. 即统一的执行脚本(如:build.sh),上线前对代码检测和自动化,发现有error的时候编译不让通过,无法上线。- 开发的时候也可以手工执行这个脚本去检测
  17. 17. • 模块目录结构检查• 文件命名检查• HTML、JS、CSS编码规范检查• JS、CSS文件合并• CSS3样式自动补全• JS、CSS等静态文件清除缓存• HTML、JS、CSS压缩• CSS Sprites
  18. 18. • CSS背景图片转DataURI• 图片优化• XSS漏洞检查和自动修复• JS、CSS代码Beautify• 线下地址替换成线上地址• 线下域名检测• 多域名• Smarty3性能优化
  19. 19. • 图片目录统一为img,不在为到底使用img,imgs, image, images哪一个而纠结• js目录统一为js, 禁止使用javascript,scripts等名称• 检测的时候发现多余的目录,直接编译不通过
  20. 20. • HTML里含有模版语法(如:Smarty)• 不能单靠正则去检测• 词法分析也要考虑各种模版语法的情况
  21. 21. 支持模版语法的HTML分析、 检测、压缩工具https://github.com/welefen/Fl
  22. 22. 词法分析
  23. 23. 检测
  24. 24. WEB SERVER压缩• Web Server动态压缩有性能问题,虽然是ms级别• 不够安全,用户输入的内容,无法完全覆盖测试
  25. 25. • 编译的时候去压缩• 只将安全的内容压缩- 非pre,textarea内的空行,多个空格- 非IE条件注释- 可去除的结束标签- 可删除的标签数据默认值- 无特殊字符属性值的左右引号- 可删除属性值的属性- 。。。
  26. 26. 百度新首页:http://www.baidu.com/home
  27. 27. • 单一的文件多人开发时容易出现冲突• js使用document.write• css使用@import url• 开发的时候使用小文件模式• 编译的时候自动合并,去重 - 开发时容易定位问题,且不容易冲突
  28. 28. 将document.write封装成 importScript函数
  29. 29. 我们终于说服PM,UE在某些地方使用CSS3 样式来渐进增强
  30. 30. 虽然有辅助性的工具,但修改起来还是麻烦
  31. 31. 编译
  32. 32. • 为了性能,设置了cache-control和expires头• 缓存时间内,正常访问不发生请求• 代码改动后,需要通知客户端清缓存
  33. 33. • 最原始的方法:手工改动版本号 base.js?v=1 base.js?v=2 - 经常发生忘记改的情况
  34. 34. • 后端变量或者编译的时候加时间戳base.js?v={=$var=} base.js?v=201109121215 - 能够自动清缓存- 每次上线所有的缓存都清了,包括未改动的文件
  35. 35. • md5方式 文件md5值后8位 base.js base.js?v=cfa05e53 - 能够自动清缓存,且未改动的文件缓存不会清 - 有些代理可能不支持query - 上线过程中可能引起服务不正常
  36. 36. • 更好的方式 文件md5值后8位 base.js base_cfa05e53.js
  37. 37. • 虽然能自动生成图片,并给出background-position• 但要手工去改对应css文件• 每次都要打包上传• 有改动后要重新一次,还要注意缓存 - 其实也可以自动化,只要个简单的配置即可
  38. 38. • 将要合并在一起的小图片放在同一个子文件夹下• 配置• 自动合并图,自动去修改css
  39. 39. 合并图小图 配置 修改的css
  40. 40. • XSS漏洞检查和自动修复• 图片优化• Smarty3性能优化• CSS背景图片转DataURI
  41. 41. • 让工程师减少犯错• 尽量自动化,提高开发效率• 既然不能反抗,那就好好享受吧
  42. 42. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×