feat: web worker

y
terence1988 · Mar 7, 2021 · 9bbc244 · 9bbc244
1 parent e5dba09
commit 9bbc244
Show file tree

Hide file tree

Showing 12 changed files with 144 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/docs/.vuepress/public/assets/jsasvanced/worker-err.png b/docs/.vuepress/public/assets/jsasvanced/worker-err.png
diff --git a/docs/.vuepress/public/assets/network/http3.0.png b/docs/.vuepress/public/assets/network/http3.0.png
diff --git a/docs/.vuepress/public/assets/network/worker-info.png b/docs/.vuepress/public/assets/network/worker-info.png
diff --git a/docs/computerNetwork/network-actual.md b/docs/computerNetwork/network-actual.md
@@ -87,7 +87,7 @@ http缓存，主要是通过协议头，分别为协商缓存和强制缓存。
 强制使用缓存，不去服务器对比；（缓存生效不再发送请求）
 
 ```js
-Cache-control:max-age=600
+Cache-control:max-age=600 // 600秒
 Expires:<最后期限> // 写一个具体日期，到什么时候失效，现在基本不用了
 ```
 案例：

diff --git a/docs/computerNetwork/protocal.md b/docs/computerNetwork/protocal.md
@@ -262,7 +262,7 @@ cdn用于存变化不大的文件
    - TSL-传输层安全性协议
    - 需要在客户端安装证书
 
-![](~@/network/https.png)
+<img width="300px" src="~@/network/https.png">
 
 ### 1.4.3 Node.js实战http请求
 
@@ -877,7 +877,17 @@ http2.0的解决，把3个请求打包成一个小块发送过去，即使第一
 
 ### 1.8.3 HTTP3.0
 
-<input></input>
-::: v-pre
-`{{ This will be displayed as-is }}`
-:::
+<img width="500px" src="~@/network/http3.0.png">
+
+http3.0现在还属于一个实验阶段，上面是一个体系图，理解了TCP和UDP的关系，就会理解为什么有个3.0。
+
+从网络层（ip）->链接层->物理层这里是基本不变的，传输层是TCP或UDP，在这个TCP之上构建了HTTP1.1/HTTTP2.0的体系，0.9、1.0大家已经不用了，现在基本都是2.0。
+
+3.0直接把TCP换成UDP了，换成UDP后就出问题了，可靠性和安全性上出了问题，那么就自己做一层，这个叫`QUIC`，就是快的意思；谷歌的作品，这个谷歌说给http提高了很大的一部分空间，因为TCP到UDP本来就有很大的性能差距。
+
+http1.1/http2.0中间还有一个加密层，还要对数据的压缩，`QUIC`自己层承担了这部分工作，优化做的非常足，所以速度很快；3.0不再改协议了，也没有这么多的概念，它是整个层重写了，是基于UDP的，因为要保证可靠性，它是基于文件传输做的重写；文本传输做的重写，这就是3.0。
+
+### 总结
+
+- UDP把自由度给了用户，使用的人少，TCP自由度，用的人多。
+- HTTP2.0/HTTP3.0都兼容HTTP1.1
diff --git a/docs/computerNetwork/tools.md b/docs/computerNetwork/tools.md
@@ -93,3 +93,6 @@
 
 请求合并也可以发生在浏览器端，建议发生在服务端，做到的极致就是服务端渲染。
 
+#### 6. webp格式的图片
+
+如果一个网站图片过多，采用webp格式的图片，体积能优化20%-50%；不支持webp格式的图片采用png、jpg等格式；一般安卓都支持，ios14以下会有问题如果是混合开发的app，native可以在不支持的手机上进行转换成支持的格式。
diff --git a/docs/engineering/git.md b/docs/engineering/git.md
@@ -75,7 +75,7 @@ scope | commit影响的范围
 ```bash
 # cz-conventional-changelog changelog插件 
 npm install -g commitizen cz-conventional-changelog
-# 命令行中输入以下命令，配置到czrc目录下
+# 命令行中输入以下命令，配置到czrc目录下,也可以用vim编辑~/.czrc添加到文件中去{ "path": "cz-conventional-changelog"}
 echo '{ "path": "cz-conventional-changelog"}' > ~/.czrc
 git cz
 ```

diff --git a/docs/jsadvanced/asyncpro.md b/docs/jsadvanced/asyncpro.md
@@ -1673,10 +1673,103 @@ Promise.race=function(promises){
 
 [完整代码](https://github.com/hejialianghe/Senior-FrontEnd/tree/master/examples/jsadvanced/promise)
 
+
+## 3.8 Web Workers的多线程机制（上）
+
+### 3.8.1 Web Workers介绍
+
+- web Workers
+  - 一个Web API-> 浏览器能力 -> 提供一个js可以运行的环境
+  - Web应用程序可以在独立于主线层的后台线程中，运行一个脚本操作
+  - 关键点：性能考虑
+
+web Workers主要处理一些耗时的任务，比如一家公司老板忙不来，肯定会招一些人，这些会承担一些公司的脏活累活，占用时间比较多的活，老板只做一些核心的事情。所以web worker是来分担主线程的负担的，所以web worker的意义在于一些耗时的任务从主线层剥离出来，让worker做这些耗时的处理；
+那么主线程专注于页面的渲染和交互，那么我们访问的页面的性能会更好。
+
+#### :tomato: worker线程和主线程的通信
+
+
+<img width="500px" src="~@/network/worker-info.png">
+
+我们知道worker是一个线程，那么主线程指派任务给worker线程是怎样通信的呢？就设计到2个线程之间的通信。
+
+主线程有一个`postMessage`方法用来通知worker线程任务，worker有一个`onMessage`的方法用来接收主线程的任务，接收到主线程的消息之后就去工作，工作完之后worker也有一个`postMessage`方法用来通知主线程干完了；主线程也有一个`onMessage`方法，能获取到worker的工作已经做完了，以及结果是什么。
+
+### 3.8.1 实战一个web worker的案例
+
+这个案例是我们把耗时的斐波那契数列放到worker里计算
+
+1. index.html
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script src="./main.js"></script>
+</body>
+</html>
+```
+
+2. main.js
+
+```js
+//  new Worker 之后，worker进行工作
+const worker = new Worker("worker.js")
+
+worker.onmessage = function (e) {
+ console.log('拿到worker通知的数据',e)
+ worker.postMessage("message收到了")
+}
+```
+
+3. worker.js
+
+worker线程去计算斐波那契数列
+
+```js
+function fibonacci (n) {
+    if(n===1 || n ==2) {
+        return 1
+    }
+    return fibonacci(n-2) + fibonacci(n-1)
+}
+// 告诉主线程
+postMessage(fibonacci(40))
+
+// 收到主线程的消息
+onmessage = function (e) {
+    console.log('好的，拿到了就好',e);
+}
+```
+#### 当你点开index.html会出现报错
+
+![](~@/jsasvanced/worker-err.png)
+
+这个报错是什么原因呢？
+
+因为我们用worker是限制的，不是本地跑一个html就行，`new Worker("worker.js")`里的参数不能通过本地路径去取的，不支持file协议；需要起一个静态资源服务，我们可以用`browser-sync`。
+
+```bash
+npm install -g browser-sync # 下载
+
+browser-sync -s # 启动，注意启动服务要在index.html这个文件夹
+```
+
+启动完之后，访问http://localhost:3000/index.html
+
+源代码地址：Senior-FrontEnd/examples/jsadvanced/1.8/
+
 ##  总结
 
 这章我们学习了异步编程的解决方法
 
 回调->发布订阅->promise->Generator->async/await
 
- 
+
+
diff --git a/examples/jsadvanced/1.8/index.html b/examples/jsadvanced/1.8/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script src="./main.js"></script>
+</body>
+</html>
diff --git a/examples/jsadvanced/1.8/main.js b/examples/jsadvanced/1.8/main.js
@@ -0,0 +1,6 @@
+const worker = new Worker("worker.js")
+
+worker.onmessage = function (e) {
+console.log('拿到worker通知的数据',e)
+ worker.postMessage("message收到了")
+}
diff --git a/examples/jsadvanced/1.8/worker.js b/examples/jsadvanced/1.8/worker.js
@@ -0,0 +1,12 @@
+function fibonacci (n) {
+    if(n===1 || n ==2) {
+        return 1
+    }
+    return fibonacci(n-2) + fibonacci(n-1)
+}
+
+postMessage(fibonacci(40))
+
+onmessage = function (e) {
+    console.log('好的，知道主线程拿到了数据',e);
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -93,3 +93,6 @@

		请求合并也可以发生在浏览器端，建议发生在服务端，做到的极致就是服务端渲染。

		#### 6. webp格式的图片

		如果一个网站图片过多，采用webp格式的图片，体积能优化20%-50%；不支持webp格式的图片采用png、jpg等格式；一般安卓都支持，ios14以下会有问题如果是混合开发的app，native可以在不支持的手机上进行转换成支持的格式。