前端七年之路 - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ecd.tencent.com

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

2001 2004 2005 2008 2010 2011 2012 Nemo.FM

Slide 5

Slide 5 text

{ year: 2005 }

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

小鞋子如何跑得更快

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Neil 和 Winnie 的故事

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

速度、极致、专注

Slide 15

Slide 15 text

⼀一道笔试题

Slide 16

Slide 16 text

多样、思考、产品

Slide 17

Slide 17 text

猜猜我的专业

Slide 18

Slide 18 text

兴趣、团队、榜样

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

在路上低调的嚣张

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

viewport

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

device-width=320

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

.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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

> 320x480 + 2xPic 640x960

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

iOS6 Remote Debug

Slide 37

Slide 37 text

Q：“其他要点？”

Slide 38

Slide 38 text

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;

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Q：“如何优化页面？高质量低K数图片的优化方法？”

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

资源 • 在线页面性能检测 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

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

应用案例

Slide 53

Slide 53 text

应用系统

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

收集创意 http://thecodeplayer.com

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

团队明星

Slide 61

Slide 61 text

Q：“ 多人团队，各项目的静态文件是如何管理的？怎样与开发人员进行协作？”

Slide 62

Slide 62 text

架正则|语义

Slide 63

Slide 63 text

构协作_分享

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

2013 前端未来之路

Slide 68

Slide 68 text

Q：“ 前端工程师的个人职业发展规划？路在何方？”

Slide 69

Slide 69 text

三个趋势

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

响应式设计

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

技术的宿命

Slide 77

Slide 77 text

学习 • 前端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系列 • 浏览器工作原理（中文）

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

交流才会进步

Slide 80

Slide 80 text

Q：“ 如何规避需求反复变更的情况？遇到反复修改的需求，前端工程师该作何应对？”

Slide 81

Slide 81 text

Q：“ 前端团队在互联网公司的角色、定位、价值？”

Slide 82

Slide 82 text

完

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

谢谢猫哥_kaiye @ 2013