前端七年之路

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

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(img@1.5x.png); /* 480x720 */}
    }
    @media screen and (-webkit-min-device-pixel-ratio:2) {
    ! .class {
    background-image:url(img@2x.png); /* 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