小脚本大世界

Transcript

1. ⼩小脚本，⼤大世界 —  专业化前端的⾃自我修养 ⽟玉伯  -­‐  ⽀支付宝  -­‐  QCon 2012.04 Monday, September 17, 12
2. 关于我 ⺩王保平  /  lifesinger  /  ⽟玉伯 ⽀支付宝  -­‐  前端开发部 关键词：KISSY、SeaJS、前端布道、翻译 Monday, September 17, 12
3. Monday, September 17, 12
4. 过去⼀一年，哪个产品在国内被效仿得最多？ Monday, September 17, 12
5. 过去⼀一年，借鉴过  Pinterest  的国内⺴⽹网站超过   50  家！   Monday, September 17, 12
6. Monday, September 17, 12
7. Pinterest  与前端相关的两⼤大亮点 1. 瀑布流式图⽚片墙 2. Pin  It  书签 Monday, September 17, 12
8. Pin  It  书签 Monday, September 17, 12
9. Pin  It  书签 Monday, September 17, 12
10. ⼤大纲 ⼀一、书签脚本的引⼊入 ⼆二、书签脚本的优化 三、书签脚本的开发体系 四、  专业化前端的⾃自我修养 Monday, September 17, 12
11. ⼀一、书签脚本的引⼊入 Monday, September 17, 12
12. Pin  It  书签 Monday, September 17, 12
13. Pin  It  书签 Monday, September 17, 12
14. 上⾯面的代码有什么问题， 特别是在中国互联⺴⽹网环境下？ Pin  It  书签 Monday, September 17, 12
15. 场景  1  ：⺴⽹网速慢，连续点击 Monday, September 17, 12
16. 场景  1  的优化⽅方案 Monday, September 17, 12
17. 场景  2  ：同⼀一⻚页⾯面，再次调⽤用 + 多余的请求 Monday, September 17, 12
18. 场景  3  ：不同⻚页⾯面，短时间内多次使⽤用 ⻚页⾯面A 200  请求 ⻚页⾯面B 200  请求 ⻚页⾯面C 200  请求 Monday, September 17, 12
19. 场景  2  与场景  3  的优化⽅方案 10000000  ms  /  (1000  x  60  x  60)  ~=  2.8  h Monday, September 17, 12
20. 优化⽆无⽌止境 Monday, September 17, 12
21. 60 70 80 90 100 初始版本 场景  1  优化 场景  2  和  3  优化 最终优化 70 80 82 85 95 纯技术专业度 How  ? Monday, September 17, 12
22. 类似使⽤用场景 ✤ Google  分析 Monday, September 17, 12
23. 类似使⽤用场景 ✤ Google  分析 ✤ ⼲⼴广告嵌⼊入 Monday, September 17, 12
24. 类似使⽤用场景 ✤ Google  分析 ✤ ⼲⼴广告嵌⼊入 ✤ Ajax  类库 Monday, September 17, 12
25. ✴      为什么要⽤用  insertBefore  代替  appendChild  ? ✴      为什么要加  script.async  =  true  ? ✴      jQuery  为何是  script.async  =  “async”  ? ✴      document.head  是啥新鲜玩意？ ✴      Google  为何保留  ga.type  =  “text/javascript”  ? ✴      charset  是否有必要设置? ✴      插⼊入位置是  body  /  head  还是  firstScript  好? ✴      ... 好奇⼼心是宝 Monday, September 17, 12
26. 上下⽽而求索 http://www.jspatterns.com/the-­‐ridiculous-­‐case-­‐of-­‐adding-­‐a-­‐script-­‐element/ http://www.stevesouders.com/blog/2010/05/11/appendchild-­‐vs-­‐insertbefore/ Monday, September 17, 12
27. 养成总结的好习惯 1. 以上是异步加载脚步的基本代码 2. 实际使⽤用时，需根据具体场景，再做微调，⽐比如 时间戳的有⽆无、charset  的设置、防重复加载的卫 语句等 Monday, September 17, 12
28. ⼩小结：专业化前端的⾃自我修养之⼀一 ✤ 在技术上有追求极致的钻研精神 1. DOM  !important 2. 简单的事情不简单 3. ⼼心静、习惯 Monday, September 17, 12
29.  ⼆二、书签脚本的优化 Monday, September 17, 12
30. 产品需求：获取任意⻚页⾯面的真实标题 如何得到？ demo  演⽰示 Monday, September 17, 12
31. 根据  class,  id,  tag  等信息来筛选 Monday, September 17, 12
32. 根据  class,  id,  tag  等信息来筛选 Monday, September 17, 12
33. 根据  class,  id,  tag  等信息来筛选 Monday, September 17, 12
34. 根据  class,  id,  tag  等信息来筛选 Monday, September 17, 12
35. 根据  class,  id,  tag  等信息来筛选 Monday, September 17, 12
36. 根据  class,  id,  tag  等信息来筛选 Monday, September 17, 12
37. 根据  class,  id,  tag  等信息来筛选 Monday, September 17, 12
38. 根据  class,  id,  tag  等信息来筛选 Monday, September 17, 12
39. 根据与  document.title  的相似度来进⼀一步筛选 http://www.cxybl.com/html/bcyy/java/201107291632.html Monday, September 17, 12
40. 根据与  document.title  的相似度来进⼀一步筛选 http://www.cxybl.com/html/bcyy/java/201107291632.html Monday, September 17, 12
41.  当  candidates  超过  20  个时，速度明显变慢 问题  1  ：速度慢 如何优化  LD  算法？ Monday, September 17, 12
42. 回归需求，⽴立刻柳暗花明 真正的需求不是⽐比较字符串的相似度，⽽而是获取标题。 忽略相似度 不超过  0.3  的 Monday, September 17, 12
43. 问题  2  :  准确度不够⾼高 通过标题相似度算法， 获取标题的准确率约  60% 如何达到  90%  以上？ Monday, September 17, 12
44. 深⼊入分析产品需求 ✴      找出候选元素  candidates ✴      找出⽂文档主体  content ✴      找出与⽂文档主体顶部最接近的   ✴      根据标题特征筛选 ✴      根据⽂文档标题的相似度筛选 ✴        ... = ✴      获取任意⻚页⾯面                的真实标题 Monday, September 17, 12
45. 获取真实标题的当前解决⽅方案 准确率可以达到  95%  以上 Monday, September 17, 12
46. ⼩小结：专业化前端的⾃自我修养之⼆二 ✤ 对产品充满热情、深⼊入理解需求 1. 纯技术研究容易遭遇天花板 2. 优秀往往来⾃自对产品的深⼊入分析 3. 兴趣、坚持 Monday, September 17, 12
47. 三、书签脚本的开发体系 Monday, September 17, 12
48. 很⻓长很⻓长的⼀一个书签脚本 Monday, September 17, 12
49. 很⻓长很⻓长的⼀一个书签脚本 近   6000  ⾏行！   Monday, September 17, 12
50. 很⻓长很⻓长的⼀一个书签脚本 近   6000  ⾏行！   Monday, September 17, 12
51. Monday, September 17, 12
52. 模块化开发利器 http://seajs.org/ ✤ 模块是什么：模块书写规范 ✤ 模块间的交互：require  /  exports ✤ ⾃自动管理依赖 ✤ 简单 Monday, September 17, 12
53. 模块化开发  demo  演⽰示 Monday, September 17, 12
54. ⿇麻雀虽⼩小，五脏俱全 ✤ 书签脚本的模块化开发 ✤ 书签脚本的⾃自动化测试 ✤ 书签脚本的打包部署 ✤ 线上性能与异常监控 ✤ ⽤用户⾏行为监控与分析 Monday, September 17, 12
55. ⽀支付宝前端基础技术体系 Monday, September 17, 12
56. ⼩小结：专业化前端的⾃自我修养之三 ✤ 具有前瞻性、体系化的思维⽅方式 1. 点  -­‐>  线  -­‐>  ⾯面  -­‐>  体 2. 对前沿社区保持关注 3. ⾃自信、创新 Monday, September 17, 12
57. 四、专业化前端的⾃自我修养 Monday, September 17, 12
58. 专业化前端的⾃自我修养 1. 在技术上有追求极致的钻研精神 2. 对产品充满热情、深⼊入理解需求 3. 具有前瞻性、体系化的思维⽅方式 良好 优秀 卓越 Monday, September 17, 12
59. ⾃自我修养背后的⼀一些原则 1. 如⽆无必要、勿增实体。 2. Done  is  better  than  perfect. 3. 保持宁静。 Monday, September 17, 12
60. 像树⼀一样成⻓长 http://lifesinger.wordpress.com/2011/05/13/be-­‐professional-­‐like-­‐a-­‐tree/ Monday, September 17, 12
61. Q  &  A  lifesinger.wordpress.com  @⽟玉伯也叫射雕 Monday, September 17, 12