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
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
170
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
130
怖くない!はじめてのClaude Code
shinya337
0
390
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
200
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
130
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Rails Girls Zürich Keynote
gr2m
95
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Unsuck your backbone
ammeep
671
58k
A designer walks into a library…
pauljervisheath
207
24k
Making Projects Easy
brettharned
116
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Become a Pro
speakerdeck
PRO
29
5.4k
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