-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·186 lines (154 loc) · 5.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cheerio</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/solarized.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-transition="zoom">
<h1>Cheerio</h1>
<small>挖掘机技术到底哪家强？</small>
<p>
<small>Created by <a href="https://github.com/hlqf">戴圣翔(水居)</a> / <a href="http://weibo.com/hlqfme">@海浪扬清风</a></small>
</p>
</section>
<section>
<section>
<h2>Cherrio 是什么？</h2>
<p>
</p>
</section>
<section>
<h2>是一种脆谷乐的牌子嚒...WTF?!</h2>
<p>
<img width="280" src="./images/cheerio-box.png" alt="">
</p>
<p>路人甲: 老师！脆谷乐是什么？！</p>
<p>老师: 呃。。。。。。。。。。。</p>
</section>
<section>
<h2>妈蛋，你瞎扯什么呢</h2>
<img width="550" src="./images/baozou-chenglong.png" alt="">
<p>旁白：15分钟要不够用了喂！</p>
</section>
</section>
<section data-transition="zoom">
<h2>Cherrio是...</h2>
<p>
一个更轻量、灵活、快速的，在服务端的Jquery的精益实现。拥有更快的解析器，benchmark综合性能约为JSDOM的8倍。
</p>
<!-- <aside class="notes">
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
</aside> -->
</section>
<section>
<section>
<h2>使用示例</h2>
<p>
API为Jquery API的子集，支持丰富的常用JQ API，格式优雅、上手简单、更适合后端使用。
</p>
<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
var cheerio = require('cheerio');
$ = cheerio.load(body);
$('ul.fruits').html('cucumber');
</code></pre>
</section>
<section>
<h2>完整示例</h2>
<p>
我只想做只安静的小爬虫...
</p>
<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
var request = require('request');
var cheerio = require('cheerio');
var searchTerm = 'porn+sexy';
var url = 'http://www.bing.com/search?q=' + searchTerm;
request(url, function (err, resp, body) {
$ = cheerio.load(body);
links = $('.sb_tlst h3 a');
$(links).each(function (i, link) {
console.log($(link).text() + ':\n ' + $(link).attr('href'));
});
});
</code></pre>
</section>
</section>
<section>
<h2>对比JSDOM</h2>
<img width="200" src="./images/huluwa.jpg" alt="">
<ul>
<li>使用htmlparser2，解析速度有优势，源码错误自纠正</li>
<li>JSDOM构建完整的DOM，Cheerio则不会，随用随取</li>
<li>Cheerio包含JSDOM，会在必要的时候使用</li>
<li>Cheerio的综合处理速度是JSDOM的8x，不服跑个分？</li>
</ul>
</section>
<section>
<h2>再牛也有瓶颈啊...</h2>
<img width="300" src="./images/zhuangbi.png" alt="">
<p>
Cheerio不支持动态插入的DOM操作。
</p>
<p>
正所谓，有得必有失啊
</p>
</section>
<section>
<h1>THE END</h1>
<h3>Thank you for reading</h3>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'zoom', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>