前端七年之路

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

Transcript

1. 前端七年之路 kaiye @ 腾讯ecd 摄于扬州棺材巷
2. ecd.tencent.com
3. @猫哥_kaiye 腾讯电商ecd前端开发leader，负责 拍拍网、QQ商城、QQ网购等产品的 前端 开发工作。 01年开始接触网页设计，05年加入中国大学 生在线 化成天下团队，华中科技大学注 册中心、网管开发团队成员。08年加入支付宝， 主导个人版 支付宝项目前端开发工作。10 年5月离开支付宝，加入BetaCafe Nemo创业团 队。10年11月加入腾讯，从事电商业务网页重构 工作。 博客地址：http://yekai.net
4. 2001 2004 2005 2008 2010 2011 2012 Nemo.FM
5. { year: 2005 }
6. • Ajax: A New Approach to Web Applications • Web前端工程师技能列表 • Professional Frontend Engineering
7. •小鞋子 最重要的前端基本素质 •在路上 前端开发经验分享 •2013 前端职业发展之路 提纲
8. 小鞋子 如何跑得更快
9. 前端攻城师知识结构图 克军 @ 豆瓣
11. Neil 和 Winnie 的故事
14. 速度、极致、专注
15. ⼀一道笔试题
16. 多样 、思考、产品
17. 猜猜我的专业
18. 兴趣、团队、榜样
19. • 兴趣驱动，借助团队与榜样来提升 • 追求极致，培养技术深度树立权威领域 •关注产品，做有思想的前端
21. 在路上 低调的嚣张
22. 前端重点技术之 • 触屏版网站开发 • 常用网页性能优化方法 • HTML5 & CSS3技术应用 • 个人与团队的前端架构
23. 触屏版网站开发 LAYOUT / DEBUG / TIPS
24. Q：“触屏版网站利用 width=device- width自适应布局的好经验和技巧？”
25. viewport <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum- scale=1.0, width=device- width" />
26. 不同设备/浏览器的Viewport不同 BROWSER VIEWPORT WIDTH apple safari mobile opera android webkit windows phone 7 IE 980px 850px 800px 974px/1024px
27. device-width=320
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
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
31. Layout • float 只有⼀一列具备自适应性、性能不好 • display:inline-block safari下间距问题（font-size:0不能解决） • display:table dom结构复杂、table-cell的自适应不可控 • display:box (display:flex) 支持多列等宽、定宽+变宽、变宽+变宽等各种自适 应情形
32. > 320x480 + 2xPic 640x960
33. Q：“触屏版网站前端开发过程中如何 更便捷地进行代码调试？”
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)
35. DEBUG • iOS6 Remote Debug 需要iOS6/Mac/Safari/USB or Wifi • Chrome Dev Tools 本地调试阶段，模拟UA • Weinre 支持Win/Mac/Linux 支持Android/iOS 需要搭建服务器环境 • Proxy + Fiddler 请求抓包
36. iOS6 Remote Debug
37. Q：“其他要点？”
38. TIPS • 充分利用CSS3 / HTML5 / Feature ::before / ::after / transform <input type=”email” /> Smart App Banners • 禁止选中等 -webkit-user-select:none;user-select:none; 禁止长按链接后的处理 -webkit-touch-callout:none; 禁止电话号码显示 <meta name="format-detection" content="telephone=no"/> • 性能问题 使用canvas+dataURI+localStorage保存图片 减少DOM嵌套，图片数量 CSS3 transform卡顿问题 -webkit-backface-visibility:hidden;
39. 肩膀 • 《朋友网touch版项目分享》 by 小李刀刀 • 《Rethink - Mobile Web Rebuild》 by seektan • 《终端开发技巧分享》 by hertzhu • 《朋友网触屏版开发分享》 by woodsrong
40. 常用网页性能优化方法 Compress / Cache / Preload / Lazyload
41. 电商网站WPO核心 • 图片质量与大小的平衡 • 海量并发下的请求优化 • 实时更新下的缓存策略
42. Q：“如何优化页面？高质量低K数图片 的优化方法？”
43. 图片质量与大小的平衡 •工具 PNGOUT (FTools) jpegtran (Page Speed) •系统 监控图片上线入口 自研压缩系统（jpegmini） •技巧
44. 图片优化技巧 • 合适的图片格式 带渐变的使用JPG 图片格式与设计那点事儿 • 压缩比与导出项 PS品质50色度抽样临界值 关于PS导出“连续”选项的讨论 • 设计师的优化 PNG图片优化技术 JPG图片优化技术
45. Compress • 图片压缩 • CSS / JS 压缩 • 服务器Gzip压缩
46. Cache • 离线存储与本地存储 MANIFEST LocalStorage / UserData • 长Cache Cache-Control: max-age=31536000 • AJAX缓存 • 服务器缓存 反向代理缓存 / CMEM Cache
47. Cache-Control:max-age + Last-Modified 当cache 时间超过max-age值时，通过 请求头If-Modified-Since与响应头Last- Modified 比较，若相同，则直接返回304， 重复使用Cache资源。 怎样减少304？
48. 延迟加载与预加载 • 延迟加载 定时器延迟：轮播 按需触发：鼠标响应浮层 滚屏加载：非首屏模块及商品图 • 预加载 搜索页预加载商详页样式 平衡流量峰值
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
52. 应用案例
53. 应用系统
54. • http://chong.qq.com/home/mobile_v2.shtml • http://www.paipai.com/promote/2013/ springfestival.shtml
55. 技术只有在应用的时 候才能体现其价值
56. 收集创意 http://thecodeplayer.com
57. 工具与系统 • 半透明层生成器 • Tencent ecd CSS3资源库 • Tencent Alloyteam资源库 • Tencent ISUX 字体库
58. 国外资源 • http://ademilter.com/lab/liffect/ • http://mrdoob.com/lab/javascript/threejs/ css3d/periodictable/ • http://one-div.com/ • http://daneden.me/animate/
59. 个人与团队的前端架构 Star / Team / Semantic / Share
60. 团队明星
61. Q：“ 多人团队，各项目的静态文件是如何管理的？ 怎样与开发人员进行协作？”
62. 架 正则|语义
63. 构 协作_分享
64. “制造规范是为了打破规范”
65. “最好的规范就是没有规范” COC&DSL&规范&系统
66. • 周爱民《前端，架构，框架与库》http:// v.youku.com/v_playlist/f4262628o1p0.html • 克军《从YUI2到YUI3看前端的演变》 http://www.slideshare.net/kejun/yui2yui3
67. 2013 前端未来之路
68. Q：“ 前端工程师的个人职业发展规 划？路在何方？”
69. 三个趋势
73. 响应式设计
75. 指路 • 前端开发工程师如何在2013年里提升自己 • 拔赤《十日谈》
76. 技术的宿命
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系列 • 浏览器工作原理（中文）
79. 交流 才会进步
80. Q：“ 如何规避需求反复变更的情况？遇到反复修改 的需求，前端工程师该作何应对？”
81. Q：“ 前端团队在互联网公司的角色、 定位、价值？”
82. 完
83. •小鞋子 最重要的前端基本素质 •在路上 前端开发经验分享 •2013 前端职业发展之路 提纲
84. 谢谢 猫哥_kaiye @ 2013