-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbrowser.html
More file actions
472 lines (466 loc) · 143 KB
/
browser.html
File metadata and controls
472 lines (466 loc) · 143 KB
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<!doctype html>
<html lang="zh-Hans" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-browser" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.8.1">
<title data-rh="true">浏览器底层原理 | 缪斯</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://wooyee.cc/browser"><meta data-rh="true" property="og:locale" content="zh_Hans"><meta data-rh="true" name="docusaurus_locale" content="zh-Hans"><meta data-rh="true" name="docsearch:language" content="zh-Hans"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="浏览器底层原理 | 缪斯"><meta data-rh="true" name="description" content="浏览器架构"><meta data-rh="true" property="og:description" content="浏览器架构"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://wooyee.cc/browser"><link data-rh="true" rel="alternate" href="https://wooyee.cc/browser" hreflang="zh-Hans"><link data-rh="true" rel="alternate" href="https://wooyee.cc/browser" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"浏览器底层原理","item":"https://wooyee.cc/browser"}]}</script><link rel="alternate" type="application/rss+xml" href="/about/rss.xml" title="缪斯 RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/about/atom.xml" title="缪斯 Atom Feed">
<meta name="referrer" content="no-referrer"><link rel="stylesheet" href="/assets/css/styles.edfb6952.css">
<script src="/assets/js/runtime~main.8a790f23.js" defer="defer"></script>
<script src="/assets/js/main.d79500d5.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t="light";var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="跳到主要内容"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">跳到主要内容</a></div><div class="theme-announcement-bar announcementBar_mb4j" style="background-color:#fafbfc;color:#091E42" role="banner"><div class="announcementBarPlaceholder_vyr4"></div><div class="content_knG7 announcementBarContent_xLdY">⭐️ 如果这个网站能帮助到你，欢迎给一个 star 支持我！<a target="_blank" rel="noopener noreferrer" href="https://github.com/miusing/blog">GitHub</a></div><button type="button" aria-label="关闭" class="clean-btn close closeButton_CVFx announcementBarClose_gvF7"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="主导航" class="theme-layout-navbar navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="切换导航栏" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title text--truncate">亲爱的缪斯</b></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><div class="navbar__search searchBarContainer_NW3z" dir="ltr"><input placeholder="搜索" aria-label="Search" class="navbar__search-input searchInput_YFbd" value=""><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div></div></div><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/intro">技术文档</a><a class="navbar__item navbar__link" href="/about">关于我</a><a href="https://github.com/miusing/blog" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="切换浅色/暗黑模式（当前为system mode）"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="回到顶部" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" href="/"><b>亲爱的缪斯</b></a><nav aria-label="文档侧边栏" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/intro">欢迎来到缪斯的技术博客</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/browser">浏览器底层原理</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/HTML">HTML</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/css">CSS</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/javascript/basic">JavaScript</a><button aria-label="展开侧边栏分类 'JavaScript'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/typescript/config">Typescript</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/node/module">Node</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/vue">Vue</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/react">React</a><button aria-label="展开侧边栏分类 'React'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/infra/前端工程化">前端工程化</a><button aria-label="展开侧边栏分类 '前端工程化'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/binary">二进制与编码</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/canvas">Canvas</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/canvas/webgl">WebGL</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/git">Git</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/音视频学习">音视频学习</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/计算机网络">计算机网络</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/前端安全">前端安全</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/异常处理">异常处理</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/编译原理">编译原理</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/rust/setup">Rust</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/网站优化">性能优化</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/数据结构">数据结构</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/排序">排序算法</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/编程题">编程题</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/mongodb">MongoDB</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/mysql">Mysql</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/linux">Linux</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docker">Docker</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/设计模式">设计模式</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/websocket">WebSocket</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/webgl">Three.js</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/php">php</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/写在前面">写在前面</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/其它">其它</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/代码段记录">代码段记录</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/第三方库">第三方库</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/面试题">面试题</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/akara的考验">akara的考验</a></li></ul></nav><button type="button" title="收起侧边栏" aria-label="收起侧边栏" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_kv0_"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="页面路径"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="主页面" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">浏览器底层原理</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">本页总览</button></div><div class="theme-doc-markdown markdown"><header><h1>浏览器底层原理</h1></header>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="浏览器架构">浏览器架构<a href="#浏览器架构" class="hash-link" aria-label="浏览器架构的直接链接" title="浏览器架构的直接链接"></a></h2>
<p>现代浏览器都采用多进程的架构设计，主要包括以下进程：</p>
<ul>
<li>浏览器进程（主进程）</li>
<li>渲染进程（多个）<!-- -->
<ul>
<li>主线程（main thread）：Blink渲染引擎，负责页面的渲染（HTML解析、CSS解析、Layout、Paint）；Blink内置了V8引擎，负责JavaScript的解释执行。</li>
<li>合成器线程（impl thread ）：在早期的Chrome设计中并不存在，后续引入合成器线程主要目的是将布局树拆分为多个图层Layer进行独立的光栅化和渲染，最终再重新合成为一张位图。</li>
</ul>
</li>
<li>GPU进程<!-- -->
<ul>
<li>内部通过2D图形库Skia间接调用OpenGL接口来实现画面的绘制。</li>
</ul>
</li>
<li>网络进程<!-- -->
<ul>
<li>负责网络通信等功能。</li>
</ul>
</li>
<li>插件进程（多个）</li>
</ul>
<blockquote>
<p>HTML和Canvas的渲染，本质都是在主线程产出绘制指令交给GPU进程的Skia来间接OpenGL绘制，这也是为什么他们都能享受到GPU提供的硬件加速能力（如借助GPU执行Shader来快速地实现类似高斯模糊的效果，如果在CPU主线程实现则是巨大的开销 ）</p>
<p>而WebGL则是允许我们直接和GPU进行交互，少去了中间层层封装引入的开销，也允许我们更好的定制化功能。</p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="浏览器渲染流程">浏览器渲染流程<a href="#浏览器渲染流程" class="hash-link" aria-label="浏览器渲染流程的直接链接" title="浏览器渲染流程的直接链接"></a></h2>
<ul>
<li>构建DOM树（Parse HTML）<!-- -->
<ul>
<li>通过HTML解析器实现字符流 -> token流 -> 抽象语法树（即DOM树）</li>
</ul>
</li>
<li>样式计算（Recalculate style）<!-- -->
<ul>
<li>通过CSS解析器生成styleSheets，也被称为CSSOM，可以通过<code>window.styleSheets</code>访问。</li>
<li>属性值标准化，把类似<code>color: red</code>等非标准值转化为<code>color: rgb(255, 0, 0)</code>。</li>
<li>计算出每个DOM节点的最终样式并存在内部的一个被称作ComputedStyle的巨大Map中，可以通过<code>window.getComputedStyle</code>访问特定DOM节点的值。</li>
</ul>
</li>
<li>布局（Layout）<!-- -->
<ul>
<li>我们已经构建了DOM树和所有节点的样式信息，那么就可以生成一个布局树（有的地方也称作渲染树），这一步还会去掉原本DOM树上不可见的节点（比如<code><head /></code>标签或应用了如<code>{ display: none }</code>样式的节点）</li>
<li>使用复杂的算法计算出每个节点的绝对<strong>坐标信息</strong>（x、y、width、height）</li>
</ul>
</li>
<li>分层（Layerise）<!-- -->
<ul>
<li>分层是一个<strong>性能优化</strong>手段，在早期的Chrome架构实现其实是不存在分层这一步骤的。</li>
<li>简单来说的话，分层可以把一颗完整的布局树拆分成多棵子树（Layers），后续再独立光栅化来绘制，最终重新合成为一张完整的位图。这么做的一个好处是避免局部状态更新触发全局的渲染。</li>
<li>怎样的节点会被提升到一个独立的渲 染层当中：（TODO）</li>
</ul>
</li>
<li>预先绘制（Pre Paint）<!-- -->
<ul>
<li>涉及到属性树的生成，暂且不提。</li>
</ul>
</li>
<li>绘制（Paint）<!-- -->
<ul>
<li>这一步的绘制并不是真的把内容绘制到屏幕上。这里说的绘制的本质是对布局树的解释执行，对于每一个待绘制的节点都能得到一组<strong>绘制指令</strong>，这个绘制指令会在后续的流程中用来实现真正的画面绘制。</li>
</ul>
</li>
<li>提交（Commit）<!-- -->
<ul>
<li>主线程Paint生成的绘制指定提交给合成器线程。这一步之前的操作都发生在主线程，这一步之后的操作主要发生在合成器线程，光栅化则是发生在GPU进程当中。</li>
</ul>
</li>
<li>分块（tiling）<!-- -->
<ul>
<li>这也是一个<strong>性能优化</strong>手段。光栅化整个Layer是比较昂贵的开销，特别是我们不需要光栅化可视区域外的内容，因此我们可以把Layer切分成多个图块进行光栅化。</li>
</ul>
</li>
<li>光栅化（raster）<!-- -->
<ul>
<li>光栅化即通过绘制指令生成位图的过程，也就是真正的绘制操作。在Chrome内部这是通过运行在GPU进程中的图形库Skia实现的，而Skia的底层其实是基于OpenGL的。通常光栅器的实现有基于CPU实现的软光栅器，比如使用线性扫描算法实现逐像素的填充；除此之外还有基于GPU实现的光栅器（即硬件加速），通过片段着色器VS实现并行的计算逻辑。</li>
<li>光栅化还包括图像的解码过程，如<code><img src="./cat.png" /></code></li>
</ul>
</li>
<li>合成<!-- -->
<ul>
<li>分块（tile）经过光栅化的产物得到了位图quads，然后通过合成器线程执行<code>draw quads</code>则会把这些位图合并成一张完整的位图写入帧缓冲当中，显卡读取后显示在显示器上被我们看到。</li>
</ul>
</li>
</ul>
<blockquote>
<p>补充：</p>
<p>上述流程是早先的Chrome渲染架构，和最新 版本的实现会有部分细节出入，但整个思想是一致的。最新版本Chromium已经把分层Layerise这一步骤放在绘制Paint这一步之后了，以及光栅化可能也会用一个新的worker线程来跑这些细节差异。</p>
<p>参考：</p>
<ol>
<li><a href="https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.ga884fe665f_64_6" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.ga884fe665f_64_6</a></li>
</ol>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="重排reflow">重排（Reflow）<a href="#重排reflow" class="hash-link" aria-label="重排（Reflow）的直接链接" title="重排（Reflow）的直接链接"></a></h3>
<p>当我们页面渲染完成后，即使我们什么都不操作显示器也会根据特定的频率读取帧缓冲的内容进行显示。为了让用户看到的内容发生变化，我们需要反复触发HTML渲染管线写入新的数据到帧缓冲当中。当然了，我们不需要重新走这个完整流程，而是可以复用之前创建的布局树这个数据源，比如只修改某个渲染层的某个节点的背景颜色，这样就不需要进行重新布局这样的复杂计算了。</p>
<p>但有的时候，比如我们需要新增DOM节点，这样会导致我们的布局信息发生变化，因此我们需要重新执行布局这一步骤。这也被称之为重排Reflow。布局涉及到复杂的坐标计算，是个比较花费性能的操作，频繁触发重排会影响整个页面的渲染体验。</p>
<p>哪些常见操作会触发重排：</p>
<ol>
<li>添加或删除DOM元素</li>
<li>修改DOM元素的几何属性（x、y、width、height）</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="重绘repaint">重绘（Repaint）<a href="#重绘repaint" class="hash-link" aria-label="重绘（Repaint）的直接链接" title="重绘（Repaint）的直接链接"></a></h3>
<p>如果我们只是修改了某个DOM节点的背景颜色，那么我们的布局树只是某个属性发生了变化，不需要重新进行复杂的坐标计算。只是在绘制的步骤中需要解析成一个不同的绘制指令，整体的性能开销是比较小的。</p>
<p>哪些常见操作会触发重绘：</p>
<ol>
<li>修改DOM节点的颜色、背景颜色等非几何信息</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="合成composite">合成（Composite）<a href="#合成composite" class="hash-link" aria-label="合成（Composite）的直接链接" title="合成（Composite）的直接链接"></a></h3>
<p>我们都知道，主线程中可用来渲染一帧的时间是宝贵的16ms。其中一部分时间会被用来执行JS，剩下的时间才是主线程的渲染阶段，渲染所需要花费的时间越长则越可能引起页面的卡顿。那么，我们有没有办法在修改DOM属性时不触发重排或者重绘，来优化页面性能呢？</p>
<p>答案是有的。我们可以把一些操作放到合成器线程中执行，比如CSS3的<code>transform</code>与其在主线程中计算出新的绘制指令，我们可以在合成器线程中实现样式调整，从而缓解主线程的开销。除了<code>transform</code>还有<code>opacity</code>、<code>filter</code>等属性也能享受到一样的性能提升，网上也称之为<strong>CSS硬件加速</strong>，我猜测可能是合成器线程又和渲染进程通信来借助了GPU的并行计算能力来实现的。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="强制同步布局forced-synchronous-layouts">强制同步布局（forced synchronous layouts）<a href="#强制同步布局forced-synchronous-layouts" class="hash-link" aria-label="强制同步布局（forced synchronous layouts）的直接链接" title="强制同步布局（forced synchronous layouts）的直接链接"></a></h3>
<p><img decoding="async" loading="lazy" src="https://web.dev/static/articles/avoid-large-complex-layouts-and-layout-thrashing/image/using-flexbox-layout-0c9955c54a296_1920.jpg" alt="" class="img_ev3q"></p>
<p>渲染一帧的顺序可以简化为上图。当我们通过JavaScript尝试访问某个DOM节点的几何信息时，实际上是通过上次渲染时的布局树拿到的几何信息。当我们先修改了DOM节点的样式后，浏览器会认为节点的几何信息也可能发生变更，因此当我们再去尝试读取节点的几何坐标信息时，浏览器会强制性<strong>重新计算样式并重新布局</strong>来获取到最新的几何信息。这样会带来高昂的性能成本。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// 先写后读。触发了强制同步布局，性能劣化</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">logBoxHeight</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> box</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">classList</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">add</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'super-big'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">box</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">offsetHeight</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre></div></div>
<p>一般来说我们先读后写就好，其实读取到的是上一帧渲染时布局树的几何信息也问题不大。下面的代码也是类似的，整个JS任务执行的过程中出现了多次先写后读，疯狂的重排导致性能劣化更加严重。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">resizeAllParagraphsToMatchBlockWidth</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 第一个循环中写入样式；第二个循环中读取样式</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">for</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> i </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> i </span><span class="token operator" style="color:#393A34"><</span><span class="token plain"> paragraphs</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">length</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> i</span><span class="token operator" style="color:#393A34">++</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> paragraphs</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">i</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">style</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">width</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">box</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation property-access">offsetWidth</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">px</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre></div></div>
<p>当触发强制同步布局时，我们可以在Chrome开发者工具性能面板中对应的样式计算中看到Recalculation forced的标识，以及对应的</p>
<blockquote>
<p>TODO：</p>
<ol>
<li>重排的范围</li>
<li>性能优化</li>
<li>渲染层提升</li>
</ol>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="输入url后发生了什么">输入URL后发生了什么<a href="#输入url后发生了什么" class="hash-link" aria-label="输入URL后发生了什么的直接链接" title="输入URL后发生了什么的直接链接"></a></h2>
<p>经常遇到的问题，我们可以在浏览器渲染流程的基础上展开去聊，简单来说包括以下关键知识点（部分细节有省略）：</p>
<ol>
<li>
<p>网络通信过程</p>
<ol>
<li>
<p>URL解析得到协议、域名、端口、路径</p>
</li>
<li>
<p>DNS域名解析</p>
<ol>
<li>
<p>递归查找缓存。先依次尝试从浏览器缓存、操作系统缓存、Hosts文件、路由器缓存、本地DNS服务器（即本地网络中设置的DNS服务器地址）缓存，解析到域名对应的IP地址。</p>
</li>
<li>
<p>迭代DNS服务器。</p>
<ol>
<li>向根DNS服务器查询顶级域DNS服务器的地址</li>
<li>向顶级域DNS服务器查询权威域名DNS服务器的地址</li>
<li>向权威域名DNS服务器查询目标域名对应的IP地址</li>
</ol>
<p><img decoding="async" loading="lazy" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/30/16ff45e132f02931~tplv-t2oaga2asx-jj-mark:3024:0:0:0:q75.png" alt="" class="img_ev3q"></p>
</li>
</ol>
</li>
<li>
<p>三次握手建立TCP连接</p>
<ol>
<li>客户端发送一个SYN=1，Seq=X的TCP包</li>
<li>服务端返回一个SYN=1，ACK=X+1，Seq=Y的TCP包</li>
<li>客户端发送一个ACK=Y+1，Seq=Y + 1的TCP包</li>
</ol>
</li>
<li>
<p>（可选）如果是HTTPS（具体实现可见计算机网络章节）</p>
<ol>
<li>TLS握手，交换版本信息、加密算法、压缩算法、随机数（浏览器一个，客户端一个）。</li>
<li>服务端发送证书（包括公钥和CA私钥对该公钥的签名）给客户端，客户端使用CA公钥对签名进行验证。</li>
<li>使用服务器公钥生成对称密钥，用户后续的加密解密（实际的实现要复杂亿点点）</li>
</ol>
</li>
<li>
<p>发送HTTP请求并接收响应。</p>
<ol>
<li>查看浏览器内是否有资源的缓存<!-- -->
<ol>
<li>存在缓存，检查缓存是否过期<!-- -->
<ol>
<li> 没过期，使用缓存的内容进入后续的渲染流程</li>
<li>缓存已过期，查询服务端的对应资源是否修改过，如果资源未修改过则使用本地缓存；如果资源修改过则使用更新过的缓存资源</li>
</ol>
</li>
<li>不存在缓存，进入下一步</li>
</ol>
</li>
<li>HTTP报文封装成TLS报文、再打上端口号封装成TCP报文、再打上源IP地址和目标IP地址封装成IP报文。借助路由表查询目标IP地址的下一跳路由，使用ARP查询到路由器的MAC地址，再把IP报文附上MAC地址，最后通过链路层进行传输。</li>
</ol>
</li>
<li>
<p>四次挥手关闭TCP连接</p>
</li>
</ol>
</li>
<li>
<p>浏览器渲染流程。（完整的浏览器渲染流程在上一章节已经介绍了，下面主要介绍一些扩展内容）</p>
<ol>
<li>HTML解码。根据响应头指定的编码方式进行解码，若不存在则根据HTML的<code>meta</code>中指定的编码方式进行解码。</li>
<li>资源预解析。会将HTML中涉及到的网络资源提前加入到请求队列当中。</li>
</ol>
</li>
</ol>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="http缓存">HTTP缓存<a href="#http缓存" class="hash-link" aria-label="HTTP缓存的直接链接" title="HTTP缓存的直接链接"></a></h2>
<p>HTTP缓存分为<strong>强制缓存</strong>和<strong>协商缓存</strong>。</p>
<p>当浏览器向服务器请求资源时：</p>
<ol>
<li>
<p>首先查看浏览器是否有资源的缓存，若不存在缓存则直接向服务器请求资源</p>
</li>
<li>
<p>若存在缓存，根据<strong>资源对应的响应头部</strong><code>Cache-Control: max-age</code>或 <code>Expires</code> 判断资源是否过期。</p>
<p>其中<code>Cache-Control: max-age</code>使用的相对的时间，而<code>Expires</code>指的是某一个具体的时刻，为了避免不同机器中时间误差来带的问题，使用前者更好。</p>
<ol>
<li>若缓存没过期，则浏览器不会向服务器发请求，而是直接读取缓存中的资源，这叫做<strong>强制缓存</strong>。 此时在<code>Network</code>一栏中看到资源对应的状态码为200（虽然实际上并不存在HTTP请求）。如果我们是直接刷新页面，资源会从内存缓存中读取：<code>200(from memory cache)</code>；如果我们是打开了新的页面，资源会从硬盘缓存中读取: <code>200(from disk cache)</code></li>
<li>若缓存已过期，我们需要向服务器查看服务器中的该资源是否有被修改，如果服务器中的资源没有被修改，我们会直接读取本地的缓存资源，这叫做<strong>协商缓存</strong>，状态码为<code>304(Not Modify)</code>；如果服务器中的资源被改动了，那么服务器需要把改动后的资源作为响应体发给浏览器，状态码为<code>200(OK)</code>。<!-- -->
<ol>
<li>如果资源对应的响应头部有<code>Etag</code>，那么我们发送的请求需要带上<code>If-None-Match</code></li>
<li>如果资源对应的响应头部有<code>Last-Modified</code>，那么我们发送的请求需要带上<code>If-Modified-Since</code></li>
<li>服务器收到我们的请求后，根据这两个请求头部来判断资源是否修改过，进而决定是响应304还是200。</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>另外，通常我们不能用HTTP缓存来缓存一个非常大的资源。这种情况或许可以考虑使用<code>IndexedDB</code>来实现本地的存储。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="强制缓存">强制缓存<a href="#强制缓存" class="hash-link" aria-label="强制缓存的直接链接" title="强制缓存的直接链接"></a></h3>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token maybe-class-name">Koa</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"koa"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> app </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Koa</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> bluebird </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'bluebird'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> fs </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> bluebird</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">promisifyAll</span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'fs'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">use</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token parameter">ctx</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">url</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'/'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">111</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> file </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> fs</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">readFileAsync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'./dist/index.html'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">type</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'text/html'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">body</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> file</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">url</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'/image.png'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">222</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> file </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> fs</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">readFileAsync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'./dist/image.png'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Cache-Control'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'max-age=10'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">type</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'image/png'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">body</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> file</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">listen</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">3000</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="协商缓存">协商缓存<a href="#协商缓存" class="hash-link" aria-label="协商缓存的直接链接" title="协商缓存的直接链接"></a></h3>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> getEtag </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'etag'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">use</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token parameter">ctx</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">url</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'/'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> file </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> fs</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">readFileAsync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'./dist/index.html'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">type</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'text/html'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">body</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> file</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">url</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'/image.png'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> file </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> fs</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">readFileAsync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'./dist/image.png'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> hash </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">getEtag</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">file</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> etag </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'If-None-Match'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">etag </span><span class="token operator" style="color:#393A34">&&</span><span class="token plain"> etag </span><span class="token operator" style="color:#393A34">==</span><span class="token plain"> hash</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">status</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">304</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">body</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">etag</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'ETag'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> hash</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">type</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'image/png'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">body</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> file</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="浏览器客户端存储">浏览器客户端存储<a href="#浏览器客户端存储" class="hash-link" aria-label="浏览器客户端存储的直接链接" title="浏览器客户端存储的直接链接"></a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="localstorage">LocalStorage<a href="#localstorage" class="hash-link" aria-label="LocalStorage的直接链接" title="LocalStorage的直接链接"></a></h3>
<p>持久化的本地存储，除非主动删除否则数据将一直存在。一般最大的存储量为5Mb。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token dom variable" style="color:#36acaa">localStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">setItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'my_key'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'my_value'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token dom variable" style="color:#36acaa">localStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'my_key'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token dom variable" style="color:#36acaa">localStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">removeItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'my_key'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token dom variable" style="color:#36acaa">localStorage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">clear</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="sessionstorage">SessionStorage<a href="#sessionstorage" class="hash-link" aria-label="SessionStorage的直接链接" title="SessionStorage的直接链接"></a></h3>
<p>会话级的本地存储，一旦页面被关闭，数据就会被清除。一般最大的存储量为5Mb。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="indexeddb">IndexedDB<a href="#indexeddb" class="hash-link" aria-label="IndexedDB的直接链接" title="IndexedDB的直接链接"></a></h3>
<p>浏览器内部的数据库，可用于存储大容量的结构化（或二进制数据）数据。目前有两个比较好用的库。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="localforage库">localforage库<a href="#localforage库" class="hash-link" aria-label="localforage库的直接链接" title="localforage库的直接链接"></a></h4>
<p>更像容量加强版的LocalStorage，感觉读写性能并不是很高，特点是在不支持IndexedDB的浏览器中会从IndexedDB实现降级成LocalStorage实现。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> keys </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> localforage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">keys</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> hasLocalCache </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> keys</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">includes</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'my_key'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 自定义键名</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">hasLocalCache</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'读取本地缓存'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> data </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> localforage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'my_key'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'读取后端数据'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> data </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'./getData'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">then</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">res</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> res</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">json</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> localforage</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">setItem</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'my_key'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre></div></div>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="dexie库">Dexie库<a href="#dexie库" class="hash-link" aria-label="Dexie库的直接链接" title="Dexie库的直接链接"></a></h4>
<p>更贴近IndexedDB底层操作，读写性能更高。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="用户登录鉴权">用户登录鉴权<a href="#用户登录鉴权" class="hash-link" aria-label="用户登录鉴权的直接链接" title="用户登录鉴权的直接链接"></a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="cookie">Cookie<a href="#cookie" class="hash-link" aria-label="Cookie的直接链接" title="Cookie的直接链接"></a></h3>
<p>通常服务器使用<code>Set-Cookie</code>头部从而在浏览器种下Cookie，Cookie存放的数据不能大于4Kb。</p>
<p>一些常见的Cookie属性：</p>
<ol>
<li><code>expires</code>：Cookie的过期时间</li>
<li><code>domain</code>：只能访问该域名时才会带上Cookie</li>
<li><code>path</code>：表明只有访问该路径时才会带上Cookie</li>
<li><code>httpOnly</code>：为<code>true</code>时，浏览器不能通过代码读取Cookie</li>
<li><code>secure</code>: 为<code>true</code>时，只有发送HTTPS请求时才会带上Cookie</li>
<li><code>SameSite</code>：默认为<code>lax</code>，详细解释见后文</li>
</ol>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="session">Session<a href="#session" class="hash-link" aria-label="Session的直接链接" title="Session的直接链接"></a></h3>
<p>通常使用<code>Session</code>时需要搭配上<code>Cookie</code>。通常单独使用<code>Cookie</code>时，会话数据都储存在<code>Cookie</code>中；使用<code>Session</code>时，<code>Cookie</code>中只存放一个<code>Session_id</code>这样的键，实际的会话数据存放在服务端中，比如可能存放在服务端的<code>redis</code>数据库中。</p>
<p><img decoding="async" loading="lazy" src="https://pic3.zhimg.com/v2-b4c952a1f71313670b94898b2bea4f6a_r.jpg" alt="Session鉴权原理" class="img_ev3q"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="令牌token">令牌Token<a href="#令牌token" class="hash-link" aria-label="令牌Token的直接链接" title="令牌Token的直接链接"></a></h3>
<p>通常在登录成功后服务端会返回一个令牌Token（Access Token），浏览器可以自行进行存储（通常都存在LocalStorage中），后续的接口请求中把该Token放在特定请求头（如<code>Authorization: Bearer ${token}</code>）中进行传输。</p>
<p>我们可以自己指定Token的生成算法，比较主流的方式是下文将要介绍的JSON Web Token。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="jwt">JWT<a href="#jwt" class="hash-link" aria-label="JWT的直接链接" title="JWT的直接链接"></a></h4>
<p>使用JWT来进行用户身份认证时，当我们输入用户名和密码进行登录时，服务器会将用户数据使用<code>Base64</code>转化成一个<code>token</code>字符串返回给前端，通常前端将这个<code>token</code>字符串保存在<code>localStorage</code>或<code>Cookie</code>中以供以后使用，在这之后发请求时会将<code>token</code>提取出来，或是放在<code>Authorization: Bearer ${token}</code>请求头部中，又或是直接作为请求的参数字段发送给后端，以供 后端解析鉴权。</p>
<p>实际上<code>token</code>字符串由两个<code>.</code>分割三个部分：Header、Payload、Signature（签名）。</p>
<ul>
<li>
<p>Header字符串是由一个JSON对象通过<code>Base64</code>编码而来，这个JSON的结构如下：</p>
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"alg"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"HS256"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"typ"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"JWT"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre></div></div>
<p>在这里<code>alg</code>表示的是签名是所使用的算法，默认值为<code>HMAC SHA256</code>。<code>typ</code>表示<code>token</code>的类型，默认为<code>JWT</code>。</p>
</li>
<li>
<p>Payload是由我们的<strong>会话数据</strong>通过<code>Base64</code>编码得到的</p>
</li>
<li>
<p>Signature是对前两个部分的签名，服务端通过前两个部分的值以及密钥生成该签名。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token constant" style="color:#36acaa">HMACSHA256</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">Base64URL</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">header</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">+</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"."</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">+</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#d73a49">Base64URL</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">payload</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> secretOrPrivateKey</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre></div></div>
</li>
</ul>
<p>我们也可以使用Node的<code>jsonwebtoken</code>模块来实现 该功能。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> jwt </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'jsonwebtoken'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> token </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> jwt</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">sign</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'akara'</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'key'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> data </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> jwt</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">verify</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">token</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'key'</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre></div></div>
<p><img decoding="async" loading="lazy" src="https://pic3.zhimg.com/v2-f1556c71042566d4a6f69ee20c2870ae_r.jpg" alt="JWT鉴权原理" class="img_ev3q"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="鉴权方式对比">鉴权方式对比<a href="#鉴权方式对比" class="hash-link" aria-label="鉴权方式对比的直接链接" title="鉴权方式对比的直接链接"></a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="cookie-1">Cookie<a href="#cookie-1" class="hash-link" aria-label="Cookie的直接链接" title="Cookie的直接链接"></a></h4>
<p><strong>优点</strong></p>
<ul>
<li>（相比Session方案）Cookie完全存储在客户端，无服务器资源压力</li>
</ul>
<p><strong>缺点</strong></p>
<ul>
<li>
<p>存在跨域问题</p>
</li>
<li>
<p>存在CSRF问题</p>
</li>
<li>
<p>客户端存储能力有限，无法实现把用户踢下线等能力</p>
</li>
</ul>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="cookiesession">Cookie+Session<a href="#cookiesession" class="hash-link" aria-label="Cookie+Session的直接链接" title="Cookie+Session的直接链接"></a></h4>
<p><strong>优点</strong></p>
<ul>
<li>服务端管理Session，不容易出现盗用的情况，也可以实现把用户踢下线等能力</li>
</ul>
<p><strong>缺点</strong></p>
<ul>
<li>存在跨域问题</li>
<li>存在CSRF问题</li>
<li>增加了服务端的资源占用</li>
</ul>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="token">Token<a href="#token" class="hash-link" aria-label="Token的直接链接" title="Token的直接链接"></a></h4>
<p><strong>优点</strong></p>
<ul>
<li>
<p>（相比Session方案）Token完全存储在客户端，无服务器资源压力</p>
</li>
<li>
<p>（相比Cookie/Session方案）没有跨域问题</p>
</li>
<li>
<p>（相比Cookie/Session方案）没有CRSF问题</p>
</li>
</ul>
<p><strong>缺点</strong></p>
<ul>
<li>客户端存储能力有限，无法实现把用户踢下线等能力</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="浏览器同源策略">浏览器同源策略<a href="#浏览器同源策略" class="hash-link" aria-label="浏览器同源策略的直接链接" title="浏览器同源策略的直接链接"></a></h2>
<p>当<strong>协议</strong>、<strong>域名</strong>、<strong>端口</strong>三者都完全相同，我们将其称为同源或同域。</p>
<p><strong>浏览器</strong>受到同源策略的限制，所谓<strong>同源策略</strong>，即指在<strong>没有授权的情况下</strong>，不同的源无法读写对方的资源。比如，当我们处于<code>A.com</code>时向<code>B.com</code>发送<code>ajax</code>或<code>fetch</code>请求是会失败的。当然，如同<code><script src=""></code>或<code>form</code>表单之类的操作不受同源策略的限制，因此可以请求到对方的资源。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="跨域和跨站">跨域和跨站<a href="#跨域和跨站" class="hash-link" aria-label="跨域和跨站的直接链接" title="跨域和跨站的直接链接"></a></h3>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="跨域cross-origin">跨域（Cross Origin）<a href="#跨域cross-origin" class="hash-link" aria-label="跨域（Cross Origin）的直接链接" title="跨域（Cross Origin）的直接链接"></a></h4>
<p>同源/同域要求两个源的协议、完整域名、端口号都完全相同。</p>
<p><img decoding="async" loading="lazy" src="/assets/images/sameorigin-5a691f504fd9e63a1e3d035fc7cd71d5.png" width="1280" height="498" class="img_ev3q"></p>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="跨站cross-site">跨站（Cross Site）<a href="#跨站cross-site" class="hash-link" aria-label="跨站（Cross Site）的直接链接" title="跨站（Cross Site）的直接链接"></a></h4>
<p><img decoding="async" loading="lazy" src="/assets/images/tld-dcd479144af490f120d1244a68a32099.png" width="1280" height="274" class="img_ev3q"></p>
<p>同站要求两个源的顶级域和一级域都相同，即这里的<code>TLD+1</code>完全相同。</p>
<p><img decoding="async" loading="lazy" src="/assets/images/samesite-94326775d7005256a4f52902da64698e.png" width="1280" height="457" class="img_ev3q"></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="跨域资源共享cors">跨域资源共享（CORS）<a href="#跨域资源共享cors" class="hash-link" aria-label="跨域资源共享（CORS）的直接链接" title="跨域资源共享（CORS）的直接链接"></a></h3>
<p>浏览器同源策略的限制，使得我们无法在<code>qq.com</code>页面调用<code>weixin.com</code>或者<code>mobile.qq.com</code>域下的接口，这在很多时候不符合我们需求的预期，我们期望存在一种方式能绕过这个同源策略的限制，用的最多的就是这里将要介绍的CORS，后文还会介绍JSONP等方式。</p>
<p>想要实现CORS很简单，只需要给服务器的对应接口返回加上响应头部<code>Access-Control-Allow-Origin</code>即可，具体代码如下：</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Access-Control-Allow-Origin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'*'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// *代表任意源都可以请求我们的接口</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// 或者</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Access-Control-Allow-Origin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'http://qq.com:3000'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 只有特定源可以请求我们的接口</span><br></span></code></pre></div></div>
<p>默认情况下CORS发送的请求不会带上目标域对 应的Cookie，想要请求带上Cookie还需要进行额外的配置</p>
<ol>
<li>
<p>首先服务器接口需要再添加一个响应头部<code>Access-Control-Allow-Credentials</code></p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Access-Control-Allow-Credentials'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre></div></div>
</li>
<li>
<p><code>Access-Control-Allow-Origin</code>的值不能使用<code>*</code>，而是必须指定一个特定的源，否则这样就满足了CSRF的攻击条件了。</p>
</li>
</ol>
<p>遗憾的是，即使我们这么配置了，还是可能发现请求中没有携带Cookie，这是因为从Chrome80版本后Cookie新增了一个<code>sameSite</code>的属性，它有三个模式：</p>
<ul>
<li><code>strict</code>是极其严格的，它标志只有<strong>同站</strong>请求才能带上Cookie</li>
<li><code>lax</code>（默认值）。写作宽松，但感觉还是比较严格的，只有像点击导航链接等才做才允许带上Cookie，正常的Fetch请求是不让带的</li>
<li><code>none</code>没有任何限制，即允许<code>qq.com</code>发向<code>weixin.com</code>的请求带上Cookie。设置为<code>none</code>要求Cookie具备<code>secure</code>属性，也就是必须是HTTPS下才可以。</li>
</ul>
<p>在最新的Chrome版本中，已经开始灰度并预期在未来彻底<strong>禁用第三方Cookie</strong>，相当于这里的<code>sameSite=strict</code>，也就是说只有同站的请求才能带上Cookie。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="预检请求">预检请求<a href="#预检请求" class="hash-link" aria-label="预检请求的直接链接" title="预检请求的直接链接"></a></h4>
<p>浏览器把CORS中的跨域请求分成了<strong>简单请求</strong>和<strong>非简单请求</strong>，对于非简单请求浏览器在发送前会增加一次请求方法为Options的HTTP通信，也就是俗称的<strong>预检请求</strong>。</p>
<p>简单请求需要同时满足几个条件：</p>
<ol>
<li>
<p>请求方法为 <code>HEAD</code>或<code>GET</code>或<code>POST</code></p>
</li>
<li>
<p>HTTP头部也有许多限制，比如：</p>
<p><code>Content-Type</code>只限：<code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code>、<code>text/plain</code></p>
<p>只能有像<code>Accept</code>、<code>Accept-Language</code>、<code>Content-Language</code>、<code>Last-Event-ID</code>这类的请求头部。</p>
<p>比如一旦使用自定义头部，那么这么请求就会被视为<strong>非简单请求</strong>。</p>
</li>
</ol>
<p>假设我们发送了一个请求方法是<code>PUT</code>，有一个自定义请求头部<code>x-my-header</code>，很明显这是一个非简单请求。</p>
<p>那么此时会在实际请求前自动发出一个预检请求，请求方法为<code>OPTIONS</code>，含有以下两个请求头：</p>
<div class="language-http codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-http codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Access-Origin-Request-Method: PUT </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Access-Origin-Request-Headers: x-my-header </span><br></span></code></pre></div></div>
<p>当后端收到该预检请求时，返回的响应里要<strong>手动添加</strong>两个响应头部：</p>
<div class="language-http codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-http codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Access-Control-Allow-Method: PUT</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Access-Control-Allow-Headers: x-my-header</span><br></span></code></pre></div></div>
<p>这样子，当前端受到响应后，就视为通过了预检，之后再发送实际的通信请求。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="跨域隔离cross-origin-isolation">跨域隔离（cross-origin isolation）<a href="#跨域隔离cross-origin-isolation" class="hash-link" aria-label="跨域隔离（cross-origin isolation）的直接链接" title="跨域隔离（cross-origin isolation）的直接链接"></a></h3>
<p>为了在我们的项目中使用<code>SharedArrayBuffer</code>来实现多个线程的共享内存，我们需要开启跨域隔离，这要求我们的网站同时开启了跨源开放者政策Cross Origin Opener Policy（COOP）和跨源嵌入程序策略Cross Origin Embedder Policy（COEP），即我们返回顶级文档的响应需要带上这样的响应头：</p>
<div class="language-http codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-http codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Cross-Origin-Opener-Policy: same-origin</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Cross-Origin-Embedder-Policy: require-corp # or credentialless</span><br></span></code></pre></div></div>
<p>我们可以通过<code>window.crossOriginIsolated</code>来检测当前站点是否开启了跨域隔离。</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="cross-origin-opener-policycoop">Cross Origin Opener Policy（COOP）<a href="#cross-origin-opener-policycoop" class="hash-link" aria-label="Cross Origin Opener Policy（COOP）的直接链接" title="Cross Origin Opener Policy（COOP）的直接链接"></a></h4>
<p>通常我们在某个页面通过<code>window.open</code>来打开一个新的页面时，这两个页面是共享一个渲染进程的，被打开页面可以通过<code>window.opener</code>访问父页面的上下文。通过设置COEP能够禁止跨域页面的该行为</p>
<h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="cross-origin-embedder-policycoep">Cross Origin Embedder Policy（COEP）<a href="#cross-origin-embedder-policycoep" class="hash-link" aria-label="Cross Origin Embedder Policy（COEP）的直接链接" title="Cross Origin Embedder Policy（COEP）的直接链接"></a></h4>
<p>我们都知道<code>img</code>、<code>video</code>、<code>script</code>等标签加载资源是不受浏览器同源策略限制的，而通过设置COEP能够禁止这些静态资源的跨域访问。</p>
<p>这个策略几乎使得我们的页面不可用，浏览器提供了两种方式让某个资源可以跨域访问：</p>
<ul>
<li>CORS。服务端给对应资源返回CORS头，同时要求加载资源的标签需要带上<code>crossorigin="anonymous"</code>或者<code>crossorigin="use-credentials"</code>，比如<code><img src="./akara.png" crossorigin="anonymous"/></code></li>
<li><strong>Cross Origin Resource Policy</strong>（CORP）。服务端给对应资源返回CORP头<code>Cross-Origin-Resource-Policy: cross-origin</code></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="jsonp">JSONP<a href="#jsonp" class="hash-link" aria-label="JSONP的直接链接" title="JSONP的直接链接"></a></h3>
<p>简单来讲，JSONP是利用了<code><script></code>加载资源时不受同源策略限制。以往我们在<code>src</code>里写的是资源的地址，但这里我们是在给接口发请求，同时接口返回的文本会被我们当成JS解析。</p>
<p>当然，正是因为如此JSONP只支持GET请求。</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:#00009f">function</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:#d73a49">doSomething</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript parameter">json</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:#999988;font-style:italic">//do something</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">script</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">src</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">http://api.example.com/data?callback=doSomething&parma=a</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token script"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">></span><br></span></code></pre></div></div>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">ctx</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">body</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">doSomething(</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">myJson</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">)</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 传参</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="代理服务器">代理服务器<a href="#代理服务器" class="hash-link" aria-label="代理服务器的直接链接" title="代理服务器的直接链接"></a></h3>
<p>由于同源策略是浏览器的策略。</p>
<p><code>A.com:80</code>不能向<code>B.com:3000</code>发送请求。那我们可以在<code>A.com:8080</code>设置一个代理服务器来代理请求，之后发请求就是<code>A.com:80 -> A.com:8080 -> B.com:3000</code>，此时请求可以成功发过去。</p>
<p>通常我们本地开发项目是使用<code>webpack-dev-server</code>，而它自带了代理服务器的功能（只需要我们在配置文件中加上<code>proxy</code>），所以可以轻松解决跨域问题。除此之外我们也可以使用<code>nginx</code>来进行反向代理。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="postmessage">postMessage<a href="#postmessage" class="hash-link" aria-label="postMessage的直接链接" title="postMessage的直接链接"></a></h3>
<p>跨文档通信。比起<code>window.name</code>和<code>location.hash</code>，该方法更加方便。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token dom variable" style="color:#36acaa">window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">postMessage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'message'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> url</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token dom variable" style="color:#36acaa">window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'message'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">e</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><br></span></code></pre></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="web-worker">Web Worker<a href="#web-worker" class="hash-link" aria-label="Web Worker的直接链接" title="Web Worker的直接链接"></a></h2>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// main.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> worker </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Worker</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'./worker.js'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">worker</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">postMessage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'main.js'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">worker</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method-variable function-variable method function property-access" style="color:#d73a49">onmessage</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'data: '</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> e</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// worker.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">self</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method-variable function-variable method function property-access" style="color:#d73a49">onmessage</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">e</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'data: '</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> e</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">data</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> self</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">postMessage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'worker.js'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="结构化克隆算法"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm" target="_blank" rel="noopener noreferrer">结构化克隆算法</a><a href="#结构化克隆算法" class="hash-link" aria-label="结构化克隆算法的直接链接" title="结构化克隆算法的直接链接"></a></h3>
<p>结构化克隆用来实现复杂JavaScript对象的<strong>深拷贝</strong>，拥有比JSON序列化更强大的能力。在<code>window.postMessage</code>、Web Worker、IndexedDB等场景下的消息默认都会被结构化克隆，我们也可以直接调用<code>structuredClone()</code>来手动克隆对象。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> original </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">array</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Uint8Array</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">10</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">set</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">3</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">map</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Map</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">'name'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'akara'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> target </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">structuredClone</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">original</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">target</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">array</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">original</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">array</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">length</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 10 </span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">original</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">array</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 0</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="可转移对象"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects" target="_blank" rel="noopener noreferrer">可转移对象</a><a href="#可转移对象" class="hash-link" aria-label="可转移对象的直接链接" title="可转移对象的直接链接"></a></h3>
<p>可以看到借助结构化克隆的能力我们可以实现多线程之间复杂对象的传递，但深拷贝对性能的影响是很大的，好消息是ArrayBuffer是<strong>可转移对象</strong>，这意味着我们可以把它从主线程的缓存区转移到Worker线程的缓冲区中，实现快速和高效的零拷贝，此时我们在主线程中将无法再访问该变量。</p>
<p>在结构化克隆当中，默认是不会转移这些可转移对象的所有权的，我们需要手动指定需要转移哪些对象。下面代码介绍了<code>structuredClone</code>方法指定需要转移的对象，其他的场景如Web Worker也都是在消息传递的时候通过额外的参数进行指定。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> original </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">array</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Uint8Array</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">10</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">set</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Set</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">3</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">map</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Map</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">'name'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'akara'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> target </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">structuredClone</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">original</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">transfer</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">original</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">array</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">buffer</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 指 定需要转移的对象</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">target</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">array</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">original</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">array</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">length</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 0 </span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">original</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">array</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// undefined</span><br></span></code></pre></div></div>
<p>常见的可转移对象包括：</p>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" target="_blank" rel="noopener noreferrer"><code>ArrayBuffer</code></a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MessagePort" target="_blank" rel="noopener noreferrer"><code>MessagePort</code></a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream" target="_blank" rel="noopener noreferrer"><code>ReadableStream</code></a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WritableStream" target="_blank" rel="noopener noreferrer"><code>WritableStream</code></a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/TransformStream" target="_blank" rel="noopener noreferrer"><code>TransformStream</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioData" target="_blank" rel="noopener noreferrer"><code>AudioData</code></a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap" target="_blank" rel="noopener noreferrer"><code>ImageBitmap</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame" target="_blank" rel="noopener noreferrer"><code>VideoFrame</code></a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas" target="_blank" rel="noopener noreferrer"><code>OffscreenCanvas</code></a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/RTCDataChannel" target="_blank" rel="noopener noreferrer"><code>RTCDataChannel</code></a></li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="sharedarraybuffer"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer" target="_blank" rel="noopener noreferrer">SharedArrayBuffer</a><a href="#sharedarraybuffer" class="hash-link" aria-label="sharedarraybuffer的直接链接" title="sharedarraybuffer的直接链接"></a></h3>
<p>在上文中，我们介绍了在Web Worker的多线程场景下，借助指定转移对象可以实现ArrayBuffer的零拷贝，这满足了我们部分的使用场景。但在一些情况下，我们期望主线程和Worker线程能够读写同一块内存，SharedArrayBuffer就是用来做这个的。</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> sab </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">SharedArrayBuffer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">1024</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">worker</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">postMessage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">sab</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<p>而在之前的章节中我们也提到过为了开启SharedArrayBuffer的能力，我们需要设置两个 HTTP 消息头以跨域隔离你的站点：COOP和COEP</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token maybe-class-name">Cross</span><span class="token operator" style="color:#393A34">-</span><span class="token maybe-class-name">Origin</span><span class="token operator" style="color:#393A34">-</span><span class="token maybe-class-name">Opener</span><span class="token operator" style="color:#393A34">-</span><span class="token maybe-class-name">Policy</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> same</span><span class="token operator" style="color:#393A34">-</span><span class="token plain">origin</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token maybe-class-name">Cross</span><span class="token operator" style="color:#393A34">-</span><span class="token maybe-class-name">Origin</span><span class="token operator" style="color:#393A34">-</span><span class="token maybe-class-name">Embedder</span><span class="token operator" style="color:#393A34">-</span><span class="token maybe-class-name">Policy</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> require</span><span class="token operator" style="color:#393A34">-</span><span class="token plain">corp</span><br></span></code></pre></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="chrome-插件">Chrome 插件<a href="#chrome-插件" class="hash-link" aria-label="Chrome 插件的直接链接" title="Chrome 插件的直接链接"></a></h2>
<ul>
<li><a href="https://developer.chrome.com/docs/extensions/mv3/intro/" target="_blank" rel="noopener noreferrer">Manifest V3</a>
<ul>
<li>相当于Chrome插件的描述文件，定位类似通常前端项目中的<code>package.json</code>，通过声明Permission可以来访问各种插件能力。</li>
</ul>
</li>
<li><a href="https://developer.chrome.com/docs/extensions/mv3/content_scripts/" target="_blank" rel="noopener noreferrer">Content-Script</a>
<ul>
<li>被注入在所有页面中的插件代码，和页面本身的脚本上下文互相独立，且可以访问部分插件能力。</li>
</ul>
</li>
<li><a href="https://developer.chrome.com/docs/extensions/mv3/service_workers/" target="_blank" rel="noopener noreferrer">Extension Service Worker</a>
<ul>
<li>主要用来响应各种用户事件，负责管理整个插件内外的数据通信，以及处理插件内部的数据存储和读写等逻辑。可以和Content-Script进行消息通信（JSON序列化的形式）</li>
</ul>
</li>
<li><a href="https://developer.chrome.com/docs/extensions/reference/api/offscreen?hl=zh-cn" target="_blank" rel="noopener noreferrer">Offscreen Document</a>
<ul>
<li>Service Worker本身无法访问DOM等文档类API，也无法通过<code>navigator</code>获取到媒体流，因此通过在Service Worker中实例化离屏文档，在它的内部实现媒体流的获取、录屏模块实例的管理和网络接口相关的调用。</li>
</ul>
</li>
</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/miusing/blog/tree/master/docs/browser.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>编辑此页</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="文件选项卡"><a class="pagination-nav__link pagination-nav__link--prev" href="/intro"><div class="pagination-nav__sublabel">上一页</div><div class="pagination-nav__label">欢迎来到缪斯的技术博客</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/HTML"><div class="pagination-nav__sublabel">下一页</div><div class="pagination-nav__label">HTML</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#浏览器架构" class="table-of-contents__link toc-highlight">浏览器架构</a></li><li><a href="#浏览器渲染流程" class="table-of-contents__link toc-highlight">浏览器渲染流程</a><ul><li><a href="#重排reflow" class="table-of-contents__link toc-highlight">重排（Reflow）</a></li><li><a href="#重绘repaint" class="table-of-contents__link toc-highlight">重绘（Repaint）</a></li><li><a href="#合成composite" class="table-of-contents__link toc-highlight">合成（Composite）</a></li><li><a href="#强制同步布局forced-synchronous-layouts" class="table-of-contents__link toc-highlight">强制同步布局（forced synchronous layouts）</a></li></ul></li><li><a href="#输入url后发生了什么" class="table-of-contents__link toc-highlight">输入URL后发生了什么</a></li><li><a href="#http缓存" class="table-of-contents__link toc-highlight">HTTP缓存</a><ul><li><a href="#强制缓存" class="table-of-contents__link toc-highlight">强制缓存</a></li><li><a href="#协商缓存" class="table-of-contents__link toc-highlight">协商缓存</a></li></ul></li><li><a href="#浏览器客户端存储" class="table-of-contents__link toc-highlight">浏览器客户端存储</a><ul><li><a href="#localstorage" class="table-of-contents__link toc-highlight">LocalStorage</a></li><li><a href="#sessionstorage" class="table-of-contents__link toc-highlight">SessionStorage</a></li><li><a href="#indexeddb" class="table-of-contents__link toc-highlight">IndexedDB</a></li></ul></li><li><a href="#用户登录鉴权" class="table-of-contents__link toc-highlight">用户登录鉴权</a><ul><li><a href="#cookie" class="table-of-contents__link toc-highlight">Cookie</a></li><li><a href="#session" class="table-of-contents__link toc-highlight">Session</a></li><li><a href="#令牌token" class="table-of-contents__link toc-highlight">令牌Token</a></li><li><a href="#鉴权方式对比" class="table-of-contents__link toc-highlight">鉴权方式对比</a></li></ul></li><li><a href="#浏览器同源策略" class="table-of-contents__link toc-highlight">浏览器同源策略</a><ul><li><a href="#跨域和跨站" class="table-of-contents__link toc-highlight">跨域和跨站</a></li><li><a href="#跨域资源共享cors" class="table-of-contents__link toc-highlight">跨域资源共享（CORS）</a></li><li><a href="#跨域隔离cross-origin-isolation" class="table-of-contents__link toc-highlight">跨域隔离（cross-origin isolation）</a></li><li><a href="#jsonp" class="table-of-contents__link toc-highlight">JSONP</a></li><li><a href="#代理服务器" class="table-of-contents__link toc-highlight">代理服务器</a></li><li><a href="#postmessage" class="table-of-contents__link toc-highlight">postMessage</a></li></ul></li><li><a href="#web-worker" class="table-of-contents__link toc-highlight">Web Worker</a><ul><li><a href="#结构化克隆算法" class="table-of-contents__link toc-highlight">结构化克隆算法</a></li><li><a href="#可转移对象" class="table-of-contents__link toc-highlight">可转移对象</a></li><li><a href="#sharedarraybuffer" class="table-of-contents__link toc-highlight">SharedArrayBuffer</a></li></ul></li><li><a href="#chrome-插件" class="table-of-contents__link toc-highlight">Chrome 插件</a></li></ul></div></div></div></div></main></div></div></div></div>
</body>
</html>