Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
小脚本大世界
Search
lifesinger
April 19, 2012
Technology
10
920
小脚本大世界
lifesinger
April 19, 2012
Tweet
Share
More Decks by lifesinger
See All by lifesinger
前端的云时代
lifesinger
18
1.3k
SeaJS 与 Arale
lifesinger
12
1.4k
基于 SeaJS 的调试实践
lifesinger
19
1.7k
SeaJS 从入门到精通
lifesinger
44
7.7k
Other Decks in Technology
See All in Technology
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
110
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
ゼロからはじめる採用広報
yutadayo
3
920
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
OPENLOGI Company Profile
hr01
0
67k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
Connect 100+を支える技術
kanyamaguc
0
200
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Facilitating Awesome Meetings
lara
54
6.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Transcript
⼩小脚本,⼤大世界 — 专业化前端的⾃自我修养 ⽟玉伯 -‐ ⽀支付宝 -‐ QCon 2012.04 Monday,
September 17, 12
关于我 ⺩王保平 / lifesinger / ⽟玉伯 ⽀支付宝 -‐ 前端开发部 关键词:KISSY、SeaJS、前端布道、翻译
Monday, September 17, 12
Monday, September 17, 12
过去⼀一年,哪个产品在国内被效仿得最多? Monday, September 17, 12
过去⼀一年,借鉴过 Pinterest 的国内⺴⽹网站超过 50 家! Monday, September 17,
12
Monday, September 17, 12
Pinterest 与前端相关的两⼤大亮点 1. 瀑布流式图⽚片墙 2. Pin It 书签 Monday, September
17, 12
Pin It 书签 Monday, September 17, 12
Pin It 书签 Monday, September 17, 12
⼤大纲 ⼀一、书签脚本的引⼊入 ⼆二、书签脚本的优化 三、书签脚本的开发体系 四、 专业化前端的⾃自我修养 Monday, September 17, 12
⼀一、书签脚本的引⼊入 Monday, September 17, 12
Pin It 书签 Monday, September 17, 12
Pin It 书签 Monday, September 17, 12
上⾯面的代码有什么问题, 特别是在中国互联⺴⽹网环境下? Pin It 书签 Monday, September 17, 12
场景 1 :⺴⽹网速慢,连续点击 Monday, September 17, 12
场景 1 的优化⽅方案 Monday, September 17, 12
场景 2 :同⼀一⻚页⾯面,再次调⽤用 + 多余的请求 Monday, September 17, 12
场景 3 :不同⻚页⾯面,短时间内多次使⽤用 ⻚页⾯面A 200 请求 ⻚页⾯面B 200 请求 ⻚页⾯面C
200 请求 Monday, September 17, 12
场景 2 与场景 3 的优化⽅方案 10000000 ms / (1000 x
60 x 60) ~= 2.8 h Monday, September 17, 12
优化⽆无⽌止境 Monday, September 17, 12
60 70 80 90 100 初始版本 场景 1 优化 场景
2 和 3 优化 最终优化 70 80 82 85 95 纯技术专业度 How ? Monday, September 17, 12
类似使⽤用场景 ✤ Google 分析 Monday, September 17, 12
类似使⽤用场景 ✤ Google 分析 ✤ ⼲⼴广告嵌⼊入 Monday, September 17, 12
类似使⽤用场景 ✤ Google 分析 ✤ ⼲⼴广告嵌⼊入 ✤ Ajax 类库 Monday,
September 17, 12
✴ 为什么要⽤用 insertBefore 代替 appendChild ? ✴
为什么要加 script.async = true ? ✴ jQuery 为何是 script.async = “async” ? ✴ document.head 是啥新鲜玩意? ✴ Google 为何保留 ga.type = “text/javascript” ? ✴ charset 是否有必要设置? ✴ 插⼊入位置是 body / head 还是 firstScript 好? ✴ ... 好奇⼼心是宝 Monday, September 17, 12
上下⽽而求索 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
养成总结的好习惯 1. 以上是异步加载脚步的基本代码 2. 实际使⽤用时,需根据具体场景,再做微调,⽐比如 时间戳的有⽆无、charset 的设置、防重复加载的卫 语句等 Monday, September
17, 12
⼩小结:专业化前端的⾃自我修养之⼀一 ✤ 在技术上有追求极致的钻研精神 1. DOM !important 2. 简单的事情不简单 3. ⼼心静、习惯
Monday, September 17, 12
⼆二、书签脚本的优化 Monday, September 17, 12
产品需求:获取任意⻚页⾯面的真实标题 如何得到? demo 演⽰示 Monday, September 17, 12
根据 class, id, tag 等信息来筛选 Monday, September 17, 12
根据 class, id, tag 等信息来筛选 Monday, September 17, 12
根据 class, id, tag 等信息来筛选 Monday, September 17, 12
根据 class, id, tag 等信息来筛选 Monday, September 17, 12
根据 class, id, tag 等信息来筛选 Monday, September 17, 12
根据 class, id, tag 等信息来筛选 Monday, September 17, 12
根据 class, id, tag 等信息来筛选 Monday, September 17, 12
根据 class, id, tag 等信息来筛选 Monday, September 17, 12
根据与 document.title 的相似度来进⼀一步筛选 http://www.cxybl.com/html/bcyy/java/201107291632.html Monday, September 17, 12
根据与 document.title 的相似度来进⼀一步筛选 http://www.cxybl.com/html/bcyy/java/201107291632.html Monday, September 17, 12
当 candidates 超过 20 个时,速度明显变慢 问题 1 :速度慢 如何优化 LD
算法? Monday, September 17, 12
回归需求,⽴立刻柳暗花明 真正的需求不是⽐比较字符串的相似度,⽽而是获取标题。 忽略相似度 不超过 0.3 的 Monday, September 17, 12
问题 2 : 准确度不够⾼高 通过标题相似度算法, 获取标题的准确率约 60% 如何达到 90% 以上?
Monday, September 17, 12
深⼊入分析产品需求 ✴ 找出候选元素 candidates ✴ 找出⽂文档主体
content ✴ 找出与⽂文档主体顶部最接近的 ✴ 根据标题特征筛选 ✴ 根据⽂文档标题的相似度筛选 ✴ ... = ✴ 获取任意⻚页⾯面 的真实标题 Monday, September 17, 12
获取真实标题的当前解决⽅方案 准确率可以达到 95% 以上 Monday, September 17, 12
⼩小结:专业化前端的⾃自我修养之⼆二 ✤ 对产品充满热情、深⼊入理解需求 1. 纯技术研究容易遭遇天花板 2. 优秀往往来⾃自对产品的深⼊入分析 3. 兴趣、坚持 Monday,
September 17, 12
三、书签脚本的开发体系 Monday, September 17, 12
很⻓长很⻓长的⼀一个书签脚本 Monday, September 17, 12
很⻓长很⻓长的⼀一个书签脚本 近 6000 ⾏行! Monday, September 17, 12
很⻓长很⻓长的⼀一个书签脚本 近 6000 ⾏行! Monday, September 17, 12
Monday, September 17, 12
模块化开发利器 http://seajs.org/ ✤ 模块是什么:模块书写规范 ✤ 模块间的交互:require / exports ✤ ⾃自动管理依赖
✤ 简单 Monday, September 17, 12
模块化开发 demo 演⽰示 Monday, September 17, 12
⿇麻雀虽⼩小,五脏俱全 ✤ 书签脚本的模块化开发 ✤ 书签脚本的⾃自动化测试 ✤ 书签脚本的打包部署 ✤ 线上性能与异常监控 ✤
⽤用户⾏行为监控与分析 Monday, September 17, 12
⽀支付宝前端基础技术体系 Monday, September 17, 12
⼩小结:专业化前端的⾃自我修养之三 ✤ 具有前瞻性、体系化的思维⽅方式 1. 点 -‐> 线 -‐> ⾯面 -‐>
体 2. 对前沿社区保持关注 3. ⾃自信、创新 Monday, September 17, 12
四、专业化前端的⾃自我修养 Monday, September 17, 12
专业化前端的⾃自我修养 1. 在技术上有追求极致的钻研精神 2. 对产品充满热情、深⼊入理解需求 3. 具有前瞻性、体系化的思维⽅方式 良好 优秀 卓越
Monday, September 17, 12
⾃自我修养背后的⼀一些原则 1. 如⽆无必要、勿增实体。 2. Done is better than perfect. 3.
保持宁静。 Monday, September 17, 12
像树⼀一样成⻓长 http://lifesinger.wordpress.com/2011/05/13/be-‐professional-‐like-‐a-‐tree/ Monday, September 17, 12
Q & A lifesinger.wordpress.com @⽟玉伯也叫射雕 Monday, September 17, 12