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時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2.1k
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
730
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Side Projects
sachag
455
42k
Designing for Performance
lara
610
69k
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