Upgrade to Pro — share decks privately, control downloads, hide ads and more …

前端七年之路

kaiye
February 01, 2013

 前端七年之路

给上海1号店前端团队的分享

kaiye

February 01, 2013
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

  1. 前端七年之路
    kaiye @ 腾讯ecd
    摄于扬州棺材巷

    View Slide

  2. ecd.tencent.com

    View Slide

  3. @猫哥_kaiye
    腾讯电商ecd前端开发leader,负责
    拍拍网、QQ商城、QQ网购等产品的
    前端
    开发工作。
    01年开始接触网页设计,05年加入中国大学
    生在线
    化成天下团队,华中科技大学注
    册中心、网管开发团队成员。08年加入支付宝,
    主导个人版
    支付宝项目前端开发工作。10
    年5月离开支付宝,加入BetaCafe Nemo创业团
    队。10年11月加入腾讯,从事电商业务网页重构
    工作。
    博客地址:http://yekai.net

    View Slide

  4. 2001 2004 2005
    2008 2010
    2011 2012
    Nemo.FM

    View Slide

  5. { year: 2005 }

    View Slide

  6. • Ajax: A New Approach to Web Applications
    • Web前端工程师技能列表
    • Professional Frontend Engineering

    View Slide

  7. •小鞋子 最重要的前端基本素质
    •在路上 前端开发经验分享
    •2013 前端职业发展之路
    提纲

    View Slide

  8. 小鞋子
    如何跑得更快

    View Slide

  9. 前端攻城师知识结构图
    克军 @ 豆瓣

    View Slide

  10. View Slide

  11. Neil 和 Winnie 的故事

    View Slide

  12. View Slide

  13. View Slide

  14. 速度、极致、专注

    View Slide

  15. ⼀一道笔试题

    View Slide

  16. 多样 、思考、产品

    View Slide

  17. 猜猜我的专业

    View Slide

  18. 兴趣、团队、榜样

    View Slide

  19. • 兴趣驱动,借助团队与榜样来提升
    • 追求极致,培养技术深度树立权威领域
    •关注产品,做有思想的前端

    View Slide

  20. View Slide

  21. 在路上
    低调的嚣张

    View Slide

  22. 前端重点技术之
    • 触屏版网站开发
    • 常用网页性能优化方法
    • HTML5 & CSS3技术应用
    • 个人与团队的前端架构

    View Slide

  23. 触屏版网站开发
    LAYOUT / DEBUG / TIPS

    View Slide

  24. Q:“触屏版网站利用 width=device-
    width自适应布局的好经验和技巧?”

    View Slide

  25. viewport
    content="user-scalable=no,
    initial-scale=1.0, maximum-
    scale=1.0, width=device-
    width" />

    View Slide

  26. 不同设备/浏览器的Viewport不同
    BROWSER VIEWPORT WIDTH
    apple safari
    mobile opera
    android webkit
    windows phone 7 IE
    980px
    850px
    800px
    974px/1024px

    View Slide

  27. device-width=320

    View Slide

  28. View Slide

  29. MOBILE INCH RESOLUTION PPI DPR
    iPhone 3gs
    iPhone 4
    iPhone 4s
    iPhone 5
    Android LDPI
    Android MDPI
    Android HDPI
    Android XDPI
    Windows Phone7
    3.5 320x480 163 1
    3.5 640x960 326 2
    3.5 640x960 326 2
    4 640x1136 326 2
    3.2 240x320 120 0.75
    3.2 320x480 160 1
    3.7 480x800 240 1.5
    4.7 1280x768 320 2
    3.5/3.8/4.3 480x800 160 1
    尺寸/分辨率/PPI/Retina

    View Slide

  30. .class { /* 假设 img.png = 320x480px */
    ! background:url(img.png) no-repeat 0 0;
    ! background-size:320px auto;
    }
    @media screen and (-webkit-min-device-pixel-ratio:1.5) {
    .class {
    background-image:url([email protected]); /* 480x720 */}
    }
    @media screen and (-webkit-min-device-pixel-ratio:2) {
    ! .class {
    background-image:url([email protected]); /* 640x960 */}
    }
    http://yekai.net/demo/background-position.html

    View Slide

  31. Layout
    • float
    只有⼀一列具备自适应性、性能不好
    • display:inline-block
    safari下间距问题(font-size:0不能解决)
    • display:table
    dom结构复杂、table-cell的自适应不可控
    • display:box (display:flex)
    支持多列等宽、定宽+变宽、变宽+变宽等各种自适
    应情形

    View Slide

  32. >
    320x480 + 2xPic 640x960

    View Slide

  33. Q:“触屏版网站前端开发过程中如何
    更便捷地进行代码调试?”

    View Slide

  34. DEBUG
    FRAMEWORK SUPPORTED TARGET PALTFORM SUPPORTED PANELS
    Weinre
    Jsconsole
    Aardwolf
    WebKit Remote
    Debugging protocol
    Chrome v8 debugger
    protocol
    DragonFly
    Iphone app
    (JSConsole app or
    Bugaboo)
    UCweb browser dev
    (android)
    Ios4+, android, other webkit Weinre
    Ios4.2+, android2.2.2+, webos Jsconsole
    Ios, android, WinPhone 7, BlackBerry OS 6+ Aardwolf
    webkit(pc) WebKit Remote Debugging
    protocol
    V8 javascript engine Chrome v8 debugger protocol
    Opera mobile DragonFly
    Ios Iphone app (JSConsole app or
    Bugaboo)
    Ucweb android only UCweb browser dev (android)

    View Slide

  35. DEBUG
    • iOS6 Remote Debug
    需要iOS6/Mac/Safari/USB or Wifi
    • Chrome Dev Tools
    本地调试阶段,模拟UA
    • Weinre
    支持Win/Mac/Linux
    支持Android/iOS
    需要搭建服务器环境
    • Proxy + Fiddler
    请求抓包

    View Slide

  36. iOS6 Remote Debug

    View Slide

  37. Q:“其他要点?”

    View Slide

  38. TIPS
    • 充分利用CSS3 / HTML5 / Feature
    ::before / ::after / transform

    Smart App Banners
    • 禁止选中等
    -webkit-user-select:none;user-select:none;
    禁止长按链接后的处理
    -webkit-touch-callout:none;
    禁止电话号码显示

    • 性能问题
    使用canvas+dataURI+localStorage保存图片
    减少DOM嵌套,图片数量
    CSS3 transform卡顿问题 -webkit-backface-visibility:hidden;

    View Slide

  39. 肩膀
    • 《朋友网touch版项目分享》 by 小李刀刀
    • 《Rethink - Mobile Web Rebuild》 by seektan
    • 《终端开发技巧分享》 by hertzhu
    • 《朋友网触屏版开发分享》 by woodsrong

    View Slide

  40. 常用网页性能优化方法
    Compress / Cache / Preload / Lazyload

    View Slide

  41. 电商网站WPO核心
    • 图片质量与大小的平衡
    • 海量并发下的请求优化
    • 实时更新下的缓存策略

    View Slide

  42. Q:“如何优化页面?高质量低K数图片
    的优化方法?”

    View Slide

  43. 图片质量与大小的平衡
    •工具
    PNGOUT (FTools)
    jpegtran (Page Speed)
    •系统
    监控图片上线入口
    自研压缩系统(jpegmini)
    •技巧

    View Slide

  44. 图片优化技巧
    • 合适的图片格式
    带渐变的使用JPG
    图片格式与设计那点事儿
    • 压缩比与导出项
    PS品质50色度抽样临界值
    关于PS导出“连续”选项的讨论
    • 设计师的优化
    PNG图片优化技术
    JPG图片优化技术

    View Slide

  45. Compress
    • 图片压缩
    • CSS / JS 压缩
    • 服务器Gzip压缩

    View Slide

  46. Cache
    • 离线存储与本地存储
    MANIFEST
    LocalStorage / UserData
    • 长Cache
    Cache-Control: max-age=31536000
    • AJAX缓存
    • 服务器缓存
    反向代理缓存 / CMEM Cache

    View Slide

  47. Cache-Control:max-age + Last-Modified
    当cache 时间超过max-age值时,通过
    请求头If-Modified-Since与响应头Last-
    Modified 比较,若相同,则直接返回304,
    重复使用Cache资源。
    怎样减少304?

    View Slide

  48. 延迟加载与预加载
    • 延迟加载
    定时器延迟:轮播
    按需触发:鼠标响应浮层
    滚屏加载:非首屏模块及商品图
    • 预加载
    搜索页预加载商详页样式
    平衡流量峰值

    View Slide

  49. View Slide

  50. 资源
    • 在线页面性能检测
    http://gtmetrix.com/
    http://zhanzhang.baidu.com/optimization
    • 工具
    http://www.stevesouders.com/blog/
    2012/10/09/webperfdays-performance-tools/
    • CSS性能优化
    http://www.w3cplus.com/blog/605.html

    View Slide

  51. View Slide

  52. 应用案例

    View Slide

  53. 应用系统

    View Slide

  54. • http://chong.qq.com/home/mobile_v2.shtml
    • http://www.paipai.com/promote/2013/
    springfestival.shtml

    View Slide

  55. 技术只有在应用的时
    候才能体现其价值

    View Slide

  56. 收集创意
    http://thecodeplayer.com

    View Slide

  57. 工具与系统
    • 半透明层生成器
    • Tencent ecd CSS3资源库
    • Tencent Alloyteam资源库
    • Tencent ISUX 字体库

    View Slide

  58. 国外资源
    • http://ademilter.com/lab/liffect/
    • http://mrdoob.com/lab/javascript/threejs/
    css3d/periodictable/
    • http://one-div.com/
    • http://daneden.me/animate/

    View Slide

  59. 个人与团队的前端架构
    Star / Team / Semantic / Share

    View Slide

  60. 团队明星

    View Slide

  61. Q:“ 多人团队,各项目的静态文件是如何管理的?
    怎样与开发人员进行协作?”

    View Slide


  62. 正则|语义

    View Slide


  63. 协作_分享

    View Slide

  64. “制造规范是为了打破规范”

    View Slide

  65. “最好的规范就是没有规范”
    COC&DSL&规范&系统

    View Slide

  66. • 周爱民《前端,架构,框架与库》http://
    v.youku.com/v_playlist/f4262628o1p0.html
    • 克军《从YUI2到YUI3看前端的演变》
    http://www.slideshare.net/kejun/yui2yui3

    View Slide

  67. 2013
    前端未来之路

    View Slide

  68. Q:“ 前端工程师的个人职业发展规
    划?路在何方?”

    View Slide

  69. 三个趋势

    View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. 响应式设计

    View Slide

  74. View Slide

  75. 指路
    • 前端开发工程师如何在2013年里提升自己
    • 拔赤《十日谈》

    View Slide

  76. 技术的宿命

    View Slide

  77. 学习
    • 前端BLOG/UED集合
    http://www.ux265.net/
    http://www.alloyteam.com/2012/10/legendary-ghost-group/
    http://www.google.com/reader/bundle/user/
    12808370747855643991/bundle/a:FrontendList
    • 前端教育
    http://www.codecademy.com/zh/#!/exercises/0
    http://v.youku.com/v_show/id_XMTIwMjQ1Njcy.html
    • 深入理解JavaScript系列
    • 浏览器工作原理(中文)

    View Slide

  78. View Slide

  79. 交流
    才会进步

    View Slide

  80. Q:“ 如何规避需求反复变更的情况?遇到反复修改
    的需求,前端工程师该作何应对?”

    View Slide

  81. Q:“ 前端团队在互联网公司的角色、
    定位、价值?”

    View Slide


  82. View Slide

  83. •小鞋子 最重要的前端基本素质
    •在路上 前端开发经验分享
    •2013 前端职业发展之路
    提纲

    View Slide

  84. 谢谢
    猫哥_kaiye @ 2013

    View Slide