Skip to content

Commit 0b45663

Browse files
MoMeak9MoMeak9
committed
docs: ✏️ Webpack coderwhy
1 parent 8ddb4c3 commit 0b45663

File tree

9 files changed

+185
-36
lines changed

9 files changed

+185
-36
lines changed

‎README.en.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# [MyBlogDoc](https://yihuiblog.top/)
2+
3+
### 这是什么？
4+
5+
这个是我的[个人博客](https://yihuiblog.top/)，使用了社区比较新的技术实现，并且重新整理了过去在社区和文档库的文章放到这里。有别于旧版本文档库，旧的文档库已经不进行更新了，现在主要维护这个仓库。
6+
7+
因为最近大部分时间都在准备秋招，所以工作相关的多一点，你可以访问[这里](https://yihuiblog.top/campusRec/needToKnown.html) 快速浏览我准备的知识大纲。
8+
9+
如果对你有帮助，期待您的:star:！
10+
11+
### 为什么要写？| 为什么要开源？
12+
13+
我觉得个人的记忆能力还是有限的，而前端的知识点又杂而广，并且社区有很多优秀的实践和观点都可以吸纳总结，所以我通过将这个站点作为我的第二大脑，搜罗总结各种知识点和最佳实践。
14+
15+
同时，将笔记（文章）开源，则是希望能帮助比如你这样素不相识的“路人”，同时能够接收到你们的指正和建议。
16+
17+
18+
### 写了点啥？
19+
20+
- 个人心得，总结和思考
21+
- 前端知识大仓库
22+
23+
- 我的大厂面经
24+
- 一堆八股文（bushi）
25+
- codeTop刷题记录
26+
- [优秀社区文章集合](https://yihuiblog.top/skills/article.html)
27+
28+
### 功能支持
29+
30+
- SEO
31+
32+
- 评论
33+
34+
- MD 语法增强
35+
36+
- 博客主题
37+
38+
- 站点地图
39+
40+
- 监控埋点
41+
42+
......
43+
44+
### 建设和部署
45+
46+
- VuePress 2 + Vite + TS （VitePress）
47+
- [vuepress-theme-hope 主题](https://vuepress-theme-hope.github.io/v2/zh/)
48+
49+
**部署：**
50+
51+
- Github Action 自动构建并部署 Github Page （见deploy分支），国内源已挂载CDN，请放心访问。
52+
53+
### Git 提交
54+
55+
commitizen+git-cz 实现的有趣而规范的commits信息
56+
57+
### ❓ 问题与交流 | Issue
58+
59+
- 如果您想参与贡献，非常抱歉目前这是我的个人笔记库，可能暂时没法儿接受其他人的笔记合入。
60+
- 如果您有相关问题，或希望我加速填坑，请直接在文章下方留言或提 issues。我看到会尽快回复。
61+
62+
**欢迎提 issues 或者 联系 [[email protected]](mailto:[email protected])**

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
这个是我的[个人博客](https://yihuiblog.top/)，使用了社区比较新的技术实现，并且重新整理了过去在社区和文档库的文章放到这里。有别于旧版本文档库，旧的文档库已经不进行更新了，现在主要维护这个仓库。
66

7-
因为最近大部分时间都在准备秋招，所以工作相关的多一点，你可以访问[这里](https://yihuiblog.top/campusRec) 快速浏览我准备的知识大纲。
7+
因为最近大部分时间都在准备秋招，所以工作相关的多一点，你可以访问[这里](https://yihuiblog.top/campusRec/needToKnown.html) 快速浏览我准备的知识大纲。
88

99
如果对你有帮助，期待您的:star:！
1010

‎src/.vuepress/theme.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,11 @@ export default hopeTheme({
9999
},
100100
},
101101
copyright: {
102-
hostname: "https://yihuiBlog.top",
102+
hostname: "https://yihuiblog.top",
103103
author: 'YihuiBlog',
104-
license: 'MIT',
104+
license: 'CC-BY 4.0',
105105
global: true,
106106
triggerWords: 20,
107-
disableCopy: true,
108-
disableSelection: true,
109107
},
110108
copyCode: {},
111109
},

‎src/JavaScript/SetMapArray.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44

55

66

7-
8-
97
## Map 字典
108

119
> `Map` 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。

‎src/JavaScript/Workers.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
date: 2022-10-22
3+
category:
4+
- 前端
5+
- JavaScript
6+
---
7+
8+
# 怎么总有人混淆Service Worker 和 Web Worker?
9+
10+
Web技术日新月异，我们可以发现21世纪初和现在的网页之间的巨大差异。随着我们对性能提升的体验越好，浏览器或应用程序所需处理的多线程任务就越多。
11+
12+
## Service Worker 是如何工作的?
13+
14+
在Service Worker的帮助下，你的浏览器在后台工作，但令人惊讶的是，它不会将当前网页捆绑到后台任务中。Service Worker通常被安装到JavaScript 中，作为脚本在后台运行，并且在脱机时执行。它帮助浏览器处理缓存，并部署从缓存中检索到的合适函数。例如，加载离线博客改善用户体验。
15+
16+
Service Worker 基本上是用于充当代理服务器，位于web应用程序、浏览器和网络之间。它们的目的是创建有效的离线应用体验和拦截网络请求，并根据网络是否可用和更新来自服务器上的新资源而采取适当的操作。它们还被允许访问推送通知和后台同步API。
17+
18+
![image-20221022155138648](https://cdn.yihuiblog.top/images/202210221551702.png)
19+
20+
在概述了Service Worker之后，让我们来看看Web Worker及其工作方式。
21+
22+
## Web Worker 是如何工作的?
23+
24+
Web Worker 和 Service Worker 的工作流程完全不同，但类似的是，它们都有助于卸载复杂的任务，并帮助平稳地运行主线程。
25+
26+
Web Worker，也被称为“Dedicated Workers”（专用工作者），是在应用程序中用JavaScript进行的多线程操作。
27+
28+
Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。Web Worker可以在不干扰用户界面的情况下执行任务。此外，它们可以使用`XMLHttpRequest`执行I/O（尽管`responseXML`和通道属性总是空的）。一旦创建，Worker就可以将消息发送到创建它的JavaScript代码（线程），方法是将`message`发送到代码指定的事件处理程序(反之亦然)。
29+
30+
![Diagram of web worker as separate to main thread, with postMessage as communication](https://cdn.yihuiblog.top/images/202210221558354.jpeg)
31+
32+
这使得Web Worker将它与主线程完全隔离开来。JavaScript中的`postMessage()`允许JavaScript应用程序用我们提供的值的副本在另一个作用域中触发事件，基本上是用结构化克隆算法完成的。
33+
34+
![image-20221022155321596](https://cdn.yihuiblog.top/images/202210221553655.png)
35+
36+
## 总结一下：
37+
38+
**Web Workers :**
39+
40+
- 主要用于运行沉重而复杂的脚本
41+
- 可以安装在脚本中使用
42+
43+
```js
44+
const webworker = new Worker(‘worker.js’);
45+
```
46+
47+
**Service Workers :**
48+
49+
- 处理网络请求及其响应，更像一个代理。
50+
- 主要用于在应用程序或网页中创建离线操作。
51+
- Service Workers 必须注册才能使用它。
52+
53+
```js
54+
if ('serviceWorker' in navigator) {
55+
window.addEventListener('load', function () {
56+
navigator.serviceWorker.register('/service-worker.js');
57+
});
58+
}
59+
```
60+
61+
> **参考：**
62+
>
63+
> [Web workers vs Service workers vs Worklets](https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/)
64+
>
65+
> [What can service workers do that web workers cannot?](https://stackoverflow.com/questions/38632723/what-can-service-workers-do-that-web-workers-cannot)
66+
>
67+
> [深入分析Web worker, Service worker, Worklet](https://www.jianshu.com/p/e2cdc78ff47c)
68+

‎src/JavaScript/interview/part1.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,7 @@ NaN 是一个特殊值，它和自身不相等，**是唯一一个非自反（
400400

401401
|| 和 && 返回它们其中一个操作数的值，而非条件判断的结果
402402

403-
### 16. Object.is() 与比较操作符 “=\==”、“==” 的区别？:star::star:
403+
### 16. Object.is() 与比较操作符 “===”、“==” 的区别？:star::star:
404404

405405
> 基本等同，但是Object.is() 可以区分 +0-0
406406

‎src/Webpack/README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Webpack 学习指北
2+
3+
## Webpack 核心配置
4+
5+
6+
7+
8+
9+
## Loader 和 Plugin 深入学习
10+
11+
12+
13+
## 自定义Loader 和 Plugin
14+
15+
16+
17+
18+
19+
## Babel用法
20+
21+
22+
23+
## ESLint配置和使用
24+
25+
26+
27+
## 性能优化方案
28+
29+
30+
31+
32+
33+
## Webpack 模块化原理解析、打包原理实现
34+
35+
36+
37+
38+
39+
## 其他流行构建工具
40+

‎src/campusRec/needToKnown.md

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,6 @@ editLink: false
8484
- [性能优化](/Webpack/better)
8585
- [配置](/Webpack/config)
8686

87-
## 开发调试
88-
89-
90-
9187
## 数据库
9288

9389
- [Redis 学习笔记](/DB/Redis.html)
@@ -127,14 +123,4 @@ editLink: false
127123
## 面试干货 :school:
128124
- [三方、两方等 应知应会](/campusRec/need.html)
129125

130-
### 面试经验分享
131-
- [阿里]
132-
- [腾讯]
133-
- [字节]
134-
- [拼多多]
135-
- [美团]
136-
- [锐捷网络]
137-
- [浩鲸科技]
138-
- [顶点软件]
139-
140126
### [企业名录](/campusRec/company.html) :computer:

‎src/skills/article.md

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,10 @@ comment: false
88

99
# 精选文章列表
1010

11-
> **来源：**
12-
>
13-
> [写给初中级前端的高级进阶指南](https://juejin.cn/post/6844904103504527374)
14-
>
15-
> 之后会归类更多的文章到此
16-
1711
## 牛人博客
1812

1913
- [Kent C. Dodds](https://kentcdodds.com/)
20-
-
14+
- [fi3ework](https://github.com/fi3ework/blog)
2115

2216
## JavaScript
2317

@@ -122,7 +116,8 @@ comment: false
122116

123117
## TypeScript
124118

125-
119+
- 类型体操练习
120+
- 深入理解TypeScript
126121

127122
## 构建工具
128123

@@ -139,16 +134,18 @@ comment: false
139134
- [详谈层合成（composite）](https://juejin.im/entry/59dc9aedf265da43200232f9)
140135
- [让你的网页更丝滑](https://zhuanlan.zhihu.com/p/66398148)
141136

142-
[Why remove time slicing from vue3?](https://github.com/vuejs/rfcs/issues/89)
143-
137+
- [Why remove time slicing from vue3?](https://github.com/vuejs/rfcs/issues/89)
138+
- [前端性能优化之浏览器渲染优化 —— 打造60FPS页面](https://github.com/fi3ework/blog/issues/9)
144139

140+
## DevOps
145141

146-
## 网站推荐
142+
- [CI/CD是什么？如何理解持续集成、持续交付和持续部署](https://www.redhat.com/zh/topics/devops/what-is-ci-cd)
147143

148-
dev.to
149-
medium
150144
## 计算机基础
151145

152146
- [小林coding](https://xiaolincoding.com/)
153147

154-
逐步完善ing...
148+
149+
150+
> 逐步完善ing...
151+

0 commit comments

Comments
 (0)