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
890
小脚本大世界
lifesinger
April 19, 2012
Tweet
Share
More Decks by lifesinger
See All by lifesinger
前端的云时代
lifesinger
18
1.2k
SeaJS 与 Arale
lifesinger
12
1.3k
基于 SeaJS 的调试实践
lifesinger
19
1.6k
SeaJS 从入门到精通
lifesinger
44
7.6k
Other Decks in Technology
See All in Technology
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
240
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
650
Cracking the KubeCon CfP
inductor
2
240
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
550
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
Building Dashboards as a Hobby
egmc
0
120
私が trocco を推す理由
__allllllllez__
1
220
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
470
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
300
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
132
6.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
How to name files
jennybc
65
93k
Building Applications with DynamoDB
mza
88
5.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Atom: Resistance is Futile
akmur
259
25k
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