• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
李成银:前端编译平台
 

李成银:前端编译平台

on

  • 13,463 views

 

Statistics

Views

Total Views
13,463
Views on SlideShare
2,381
Embed Views
11,082

Actions

Likes
24
Downloads
136
Comments
1

7 Embeds 11,082

http://www.d2forum.org 11011
http://cache.baidu.com 55
http://www.itfeed.cn 6
http://www.chengxuyuans.com 3
http://translate.googleusercontent.com 3
http://xianguo.com 2
http://i.chaoxing.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • cool
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    李成银:前端编译平台 李成银:前端编译平台 Presentation Transcript

    • 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 - 能够自动清缓存,且未改动的文件缓存不会清 - 有些代理可能不支持query - 上线过程中可能引起服务不正常
    • • 更好的方式 文件md5值后8位 base.js base_cfa05e53.js
    • • 虽然能自动生成图片,并给出background-position• 但要手工去改对应css文件• 每次都要打包上传• 有改动后要重新一次,还要注意缓存 - 其实也可以自动化,只要个简单的配置即可
    • • 将要合并在一起的小图片放在同一个子文件夹下• 配置• 自动合并图,自动去修改css
    • 合并图小图 配置 修改的css
    • • XSS漏洞检查和自动修复• 图片优化• Smarty3性能优化• CSS背景图片转DataURI
    • • 让工程师减少犯错• 尽量自动化,提高开发效率• 既然不能反抗,那就好好享受吧
    • Thank You