-
Notifications
You must be signed in to change notification settings - Fork 0
/
thread.html
173 lines (169 loc) · 6.98 KB
/
thread.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frontend ppts</title>
<meta name="description" content="Create beautiful presentations using Markdown">
<meta name="keyword"
content="前端, 前端大世界, frontend, javascript, es6, css, html, react, webpack, jquery, 前端开发, http, 个人博客, web">
<meta name="author" content="Cycle263">
<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, minimal-ui">
<link rel="shortcut icon" href="../cycle.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/css/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/css/theme/black.min.css"
id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/lib/css/zenburn.min.css">
<script>
// print pdf
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ?
'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/css/print/pdf.css' :
'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/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 id="index">
<h3>浏览器线程，线程之间的合作</h3><br />
<h3>宏任务(macrotasks) vs 微任务(microtasks)</h3><br />
<h3>浏览器线程与js异步处理之间的关系</h3>
</section>
<section id="thread">
<h3>JavaScript是单线程的</h3><br />
<h3>浏览器线程呢？</h3>
<p class="fragment">浏览器内核是多线程的，线程之间相互配合并保持同步</p>
</section>
<section id="types">
<h2>浏览器主要线程</h2>
<p class="fragment">js引擎线程</p>
<p class="fragment">GUI渲染线程</p>
<p class="fragment">http网络请求线程</p>
<p class="fragment">定时触发器线程</p>
<p class="fragment">事件处理线程</p>
</section>
<section id="js thread">
<h2>js引擎线程的任务</h2>
<p class="fragment">解析执行 Javascript 脚本</p>
<pre class="fragment">
<code>
<!-- 不阻碍DOM下载和解析，阻碍渲染，因为css加载是由单独的下载线程异步下载的 -->
<link href="/css/test.css" />
<script>
function test(){
console.log('something');
}
test();
</script>
<!-- async 阻塞页面解析和渲染，下载解析完脚本立即执行 -->
<script src="/js/bar.js"></script>
<!-- async 不阻塞页面解析和渲染，下载完立即执行，顺序难以保证 -->
<script async src="/js/boo.js"></script>
<!-- defer 不阻塞页面解析和渲染，下载后等DOM解析完才执行 -->
<script defer src="/js/foot.js"></script>
</code>
</pre>
<p class="fragment">只有一个 JS 线程在运行脚本</p>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/lib/js/head.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js"></script>
<!-- cnd加载，避免highlight回调加载hljs异常问题，猜测原因hightlight第二批并行加载导致 -->
<script src="https://cdn.jsdelivr.net/npm/reveal.js@3.7.0/plugin/highlight/highlight.js"></script>
<script>
// Just press »Esc / o« on your keyboard to toggle the overview mode
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
mouseWheel: true,
slideNumber: 'c/t',
transition: 'slide', // none/fade/slide/convex/concave/zoom
transitionSpeed: 'default', // default/fast/slow
backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
menu: {
numbers: true,
openSlideNumber: true,
themes: true,
themesPath: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/css/theme/',
transitions: true,
custom: false
},
chalkboard: {
toggleChalkboardButton: {
left: "80px"
},
toggleNotesButton: {
left: "130px"
}
},
// Optional reveal.js plugins
dependencies: [{
src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/plugin/markdown/marked.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/plugin/markdown/markdown.min.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: '../plugin/menu/menu.js',
async: true
},
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/plugin/notes/notes.min.js',
async: true
},
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0/plugin/zoom-js/zoom.min.js'
},
{
src: '../plugin/chalkboard/chalkboard.js',
async: true
}
],
// Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
keyboard: {
67: function () {
RevealChalkboard.toggleNotesCanvas()
}, // toggle chalkboard when 'c' is pressed
66: function () {
RevealChalkboard.toggleChalkboard()
}, // toggle chalkboard when 'b' is pressed
46: function () {
RevealChalkboard.clear()
}, // clear chalkboard when 'DEL' is pressed
8: function () {
RevealChalkboard.reset()
}, // reset all chalkboard data when 'BACKSPACE' is pressed
68: function () {
RevealChalkboard.download()
}, // downlad chalkboard drawing when 'd' is pressed
},
});
hljs.initHighlightingOnLoad();
</script>
<a class="fork-cycle263" href="https://github.com/cycle263/PPTS">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
alt="Fork cycle263 on GitHub">
</a>
</body>
</html>