tree shaking

react错误边界

lc 两数之和

lc 字母异位词分组

sort

Map Set

lc 字母异位词分组

lc 最长连续序列

lc 最长连续序列

lc 移动零

lc 盛最多水的容器

lc 三数之和

CORS preflight

Author: realgeoffrey

工具使用/Docker使用/README.md

@@ -1,3 +1,8 @@
+## 目录
+1. [Docker使用](#docker使用)
+1. [Docker优势、劣势](#docker优势劣势)
+
+---
 ### [Docker](https://www.docker.com/)使用
 >1. 虚拟机：虚拟出一套硬件，运行一个完整的操作系统，然后在这个系统上安装和运行软件。
 >2. 容器：没有自己的内核、没有虚拟出硬件，容器内应用直接运行在宿主机（host machine）的内核（容器化技术并不是模拟的一个完整操作系统）。
@@ -326,7 +331,7 @@
 
     6. 新建、提交镜像
 
-        >[Docker Hub](https://hub.docker.com/)是一个默认的官方的Docker源地址。
+        >Docker源：[Docker Hub](https://hub.docker.com/)是Docker公司官方提供的公共容器镜像注册中心；[harbor](https://github.com/goharbor/harbor)是开源的企业级容器镜像注册中心，提供私有的容器镜像仓库解决方案。
 
         - 登录、登出
 
@@ -496,3 +501,30 @@
             # 扫描镜像
             docker scan 「镜像名」
             ```
+
+### Docker优势、劣势
+1. 轻量级和快速启动：
+
+    （相比传统虚拟机虚拟一整套硬件和操作系统，再在上面安装和运行软件，）Docker容器共享宿主机的操作系统内核，因此更轻量级、启动速度非常快，通常只需几秒钟就能启动一个容器。
+
+    >1. 性能开销：Docker容器运行在宿主机操作系统上，容器与宿主机共享操作系统内核。这种共享机制可能导致一些性能开销，尤其是在高负载和资源密集型应用的情况下。
+    >
+    >2. 不适合全虚拟化应用：Docker容器主要适用于应用程序的封装和部署，但对于某些需要完全虚拟化的应用（如某些操作系统级别的任务），容器化方案可能不太适合。
+2. 高度可移植性：
+
+    Docker容器提供了一致的运行时环境，可以在不同的操作系统、不同的云平台和不同的物理机上运行。容器化应用程序可以在开发、测试和生产环境之间轻松迁移，减少了因环境差异而引起的问题。
+3. 应用程序隔离性：
+
+    每个 Docker 容器运行在独立的用户空间中，相互之间具有良好的应用程序隔离性。这意味着容器中的应用程序不会相互干扰，一个容器中的问题不会影响到其他容器或宿主机。
+
+    >1. 安全性挑战：尽管Docker容器提供了一定的隔离性，但由于容器共享操作系统内核，容器内部的潜在安全漏洞可能会影响整个宿主机系统。
+    >
+    >2. 复杂网络配置：在复杂的网络环境下，容器之间的网络配置和通信可能会变得复杂，需要一些额外的配置和管理。
+4. 灵活的扩展和分发：
+
+    Docker容器使用镜像作为应用程序的构建和分发单元。镜像是一个可重复构建的、可分享的文件，可以快速部署和复制容器。容器可以根据负载需求进行动态伸缩，使应用程序具备弹性和可扩展性。
+
+    >1. 持久化存储管理：Docker容器默认情况下是临时的，容器内部的文件系统和数据通常会随着容器的销毁而消失。对于需要持久化存储的应用程序，需要额外的配置和管理，如：使用数据卷或网络存储解决方案。
+5. 依赖管理和版本控制：
+
+    Docker容器明确定义了应用程序及其依赖的版本关系，使得依赖管理和版本控制更加简单。容器化应用程序可以明确指定所需的软件库、工具和配置，确保在不同环境中的一致性运行。

工具使用/Redis使用/README.md

@@ -20,7 +20,7 @@
 
         1. ~~每次请求都抓取一次「其他资源」~~
         2. ~~使用Redis设置过期时间~~
-        3. Redis相关存储：`{ 内容, 过期时间 }`、`锁`
+        3. Redis相关存储：`{ 内容, 过期时间 }`、`锁`（并发控制）
 
             1. Redis设置长时间存在；
             2. 任何请求都直接返回Redis保存的「内容」（若首次请求没有存入Redis，则获取「其他资源」后存入Redis）；

工具使用/命令行备忘/README.md

@@ -762,7 +762,7 @@ ln -s 「源文件/目录」 「目标文件/目录」  # 软链接，会在 目
     ```shell
     zip 「名.zip」 「文件」
     zip -r 「x.zip」 「源文件夹」
-        # -e
+        -e # 加密码
     ```
 2. 解压缩
 

网站前端/HTTP相关/README.md

@@ -949,7 +949,9 @@
 
     >非简单请求是那种对服务器有特殊要求的请求。先发起的预检请求可以避免跨域请求对服务器数据产生未预期的副作用；得到服务端允许后，浏览器才会发送正式的跨域请求（与简单请求一致）。
 
-    1. 预检请求
+    1. 预检请求（preflight）
+
+        >一般来说预检请求，指的就是`OPTIONS`请求。它会在浏览器认为即将要执行的请求可能会对服务器造成不可预知的影响时，由浏览器自动发出。通过预检请求，浏览器能够知道当前的服务器是否允许执行即将要进行的请求，只有获得了允许，浏览器才会真正执行接下来的请求。通常preflight请求不需要用户自己去管理和干预，它的发出的响应都是由浏览器和服务器自动管理的。HTTP状态码可以是200、204、等2XX，会被浏览器认为预检请求成功。
 
         1. 浏览器判断为非简单请求，自动发出`OPTIONS`方法的HTTP请求：
 

网站前端/Hippy学习笔记/README.md

@@ -98,7 +98,7 @@
     iOS和Android的渲染结果可能不同，样式（截断、遮挡）、事件冒泡情况、等，容易产生区别。
 4. （像RN一样）提供一个JS运行时环境（类似Node.js、WebView），JS运行并通过桥协议与客户端交互，最终客户端渲染视图。
 
-    >前端最终提供一个.js文件在JS运行时环境中执行。
+    >前端最终提供一个.js文件在JS运行时环境中执行。hippy使用的JS引擎：iOS用JSC，Android用V8。
 
     对于不支持的方法（如：window、document、Buffer、等），若需要，则前端人员自己hack（就可以直接使用各种开源库，如：webpack、React库、等）。
 
@@ -638,7 +638,7 @@
 
     >[模块文档](https://hippyjs.org/#/hippy-react/modules)比较简单，更详细的用法在[demo](https://github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo/src/modules)或[源码](https://github.com/Tencent/Hippy/tree/master/packages/hippy-react/src/modules)中。
 
-    1. 动画组件
+    1. <a name="hippy-react-模块-动画组件"></a>动画组件
 
         提供给前端React/Vue渲染使用的按时间变化的style中某样式属性值。
 

网站前端/Hybrid前端开发/README.md

@@ -11,10 +11,12 @@
 ---
 >Hybrid App：狭义上是App内嵌WebView组件，再在WebView上使用页面的方案。广义上包括所有App混合方案，包括WebView方案、其他语言2Native方案、等。
 
->随着技术的发展，有新的技术替代`桥协议`，如：JSI、等。以下内容中描述桥协议的部分，都可以用这些新技术替代。
+>随着技术的发展，有新的技术替代`桥协议`，如：JSI、等。
 >
 >1. `桥协议`：JS和C++互相无感知，只能通过桥协议作为中间层，异步进行序列化/反序列化传输通讯。
->2. [JSI](https://reactnative.dev/architecture/glossary#javascript-interfaces-jsi)：将C++中的常用类型、定义的对象和函数 映射到JS中，支持JS随时调用C++中方法。并且支持其他JS引擎。
+>2. [JSI](https://reactnative.dev/architecture/glossary#javascript-interfaces-jsi)：将C++中的常用类型、定义的对象和函数 映射到JS中，支持JS随时调用C++中方法，有更高的性能、更低的通信开销。并且支持其他JS引擎。
+>
+>约定：本篇内容中描述桥协议的部分，都可以用这些新技术替代（广义的桥协议：JS和原生代码之间互相传递数据、调用方法的技术）。
 
 ## WebView相关
 
@@ -39,7 +41,7 @@
 >1. Android运用的JS引擎：Google的[V8](https://github.com/v8/v8)。
 >2. iOS运行的JS引擎：Apple的[JavaScriptCore](https://developer.apple.com/documentation/javascriptcore)。
 >
->>还有其他JS引擎：SpiderMonkey、Rhino、等。
+>>还有其他JS引擎：SpiderMonkey、Rhino、Hermes等。
 ></details>
 
 Hybrid底层依赖Native提供的容器（WebView），上层使用HTML、CSS、JS进行业务开发。

网站前端/JS学习笔记/README.md

@@ -11,7 +11,7 @@
     1. [继承](#继承)
     1. [内存机制](#内存机制)
     1. [内存泄漏](#内存泄漏)
-    1. [深复制（拷贝）实现思路](#深复制拷贝实现思路)
+    1. [深复制（深拷贝）实现思路](#深复制深拷贝实现思路)
     1. [数据类型转换](#数据类型转换)
     1. [`||`和`&&`](#和)
     1. [事件循环（event loop）](#事件循环event-loop)
@@ -567,7 +567,34 @@
 
     - 类似的有：`setTimeout/setInterval`的第一个参数是字符串、`new Function`的最后一个字符串参数，都能动态生成代码，都能在运行期修改书写期的词法作用域。
 
-    >动态执行JS脚本的方式：`eval`、`new Function`、Node.js的`vm`模块。
+    ><details>
+    ><summary>动态执行JS脚本的方式（执行字符串）：<code>eval</code>、<code>new Function</code>、<code>setTimeout/setInterval</code>、Node.js的<code>vm</code>模块。</summary>
+    >
+    >e.g.
+    >
+    >```javascript
+    >// 全部都极度不安全，不建议使用
+    >
+    >var a = 'console.log("aa")';
+    >var b = 'console.log("bb")';
+    >var c = 'console.log("cc")';
+    >var d = 'console.log("dd")';
+    >
+    >eval(a);
+    >new Function(b)();
+    >setTimeout(c, 0);
+    >setInterval(d, 0);  // 需要clearInterval
+    >```
+    >
+    >```javascript
+    >// Node.js
+    >
+    >var e = 'console.log("ee")';
+    >const vm = require("node:vm");
+    >const script = new vm.Script(e);
+    >script.runInThisContext();
+    >```
+    ></details>
 2. `with`
 
     ```javascript
@@ -833,7 +860,7 @@
 
                     >对象：`obj = Object.assign({}, obj)`（不推荐用：~~`obj = Object.create(obj)`~~）
                 4. 一层[循环遍历](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/JS学习笔记/README.md#循环遍历)赋值
-            2. [深复制](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/JS学习笔记/README.md#深复制拷贝实现思路)。
+            2. [深复制](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/JS学习笔记/README.md#深复制深拷贝实现思路)。
 4. <details>
 
     <summary>存储、值传递步骤举例</summary>
@@ -915,12 +942,12 @@ todo: chrome如何查内存和内存泄漏，Node.js如何查隐蔽的内存泄
 
 - 关于内存优化的重要性
 
-    1. 减少OOM，提高应用稳定性
+    1. 减少OOM（Out Of Memory，内存不足），提高应用稳定性
     2. 减少卡顿，提高应用流畅度
     3. 减少内存占用，提高应用后台运行时的存活率
     4. 减少异常发生和代码逻辑隐患
 
-### 深复制（拷贝）实现思路
+### 深复制（深拷贝）实现思路
 >参考：[深入剖析JavaScript的深复制](http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/)。
 
 1. [递归赋值](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/JS方法积累/废弃代码/README.md#原生js深复制)（最全面方式）
@@ -1872,22 +1899,22 @@ todo: chrome如何查内存和内存泄漏，Node.js如何查隐蔽的内存泄
 1. [CORS](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/HTTP相关/README.md#corscross-origin-resource-sharing跨域资源共享)（服务端需要支持）
 
     >1. 不受同源政策限制。
-    >2. ie9-的jQuery的非jsonp的AJAX跨域，要添加`jQuery.support.cors = true`。
-2. jsonp（服务端需要支持）
+    >2. ie9-的jQuery的非JSONP的AJAX跨域，要添加`jQuery.support.cors = true`。
+2. JSONP（json with padding）（服务端需要支持）
 
     >1. 不受同源政策限制。
     >2. 只支持**GET**请求。
 
     网页通过添加一个`<script>`，向服务器发起文档请求（不受同源政策限制）；服务器收到请求后，将数据放在一个指定名字的回调函数里传回网页直接执行。
 
     ><details>
-    ><summary>jQuery在它的<code>AJAX</code>方法中封装了<code>jsonp</code>功能</summary>
+    ><summary>jQuery在它的<code>AJAX</code>方法中封装了<code>JSONP</code>功能</summary>
     >
     >```javascript
     >$.ajax({
     >    url: '接口地址',
     >    dataType: 'jsonp',
-    >    jsonp: '与服务端约定的支持jsonp方法',  // 前端唯一需要额外添加的内容
+    >    jsonp: '与服务端约定的支持JSONP方法',  // 前端唯一需要额外添加的内容
     >    data: {},
     >    success: function (data) {
     >        // data为跨域请求获得的服务端返回数据
@@ -2705,41 +2732,7 @@ todo: chrome如何查内存和内存泄漏，Node.js如何查隐蔽的内存泄
         ```
 
     - 其他数据类型
-7. 长字符串拼接使用`Array.prototype.join()`，而不使用`+`
-
-    1. `.join()`性能好（建议方式）
-
-        <details>
-        <summary>e.g.</summary>
-
-        ```javascript
-        var arr = [],
-            i;
-
-        for (i = 0; i < 100; i++) {
-            arr[i] = '字符串' + i + '字符串';
-        }
-
-        return arr.join('');
-        ```
-        </details>
-    2. `+`性能差（不推荐）
-
-        <details>
-        <summary>e.g.</summary>
-
-        ```javascript
-        var text = '',
-            i;
-
-        for (i = 0; i < 100; i++) {
-            text = text + '字符串' + i + '字符串';
-        }
-
-        return text;
-        ```
-        </details>
-8. 注释规范
+7. 注释规范
 
     1. 单行注释：`//`后不空格
 
@@ -2779,7 +2772,7 @@ todo: chrome如何查内存和内存泄漏，Node.js如何查隐蔽的内存泄
             return result;
         }
         ```
-9. JS编程风格总结（programming style）
+8. JS编程风格总结（programming style）
 
     >参考：[阮一峰：JavaScript 编程风格](http://javascript.ruanyifeng.com/grammar/style.html)。
 
@@ -2797,12 +2790,12 @@ todo: chrome如何查内存和内存泄漏，Node.js如何查隐蔽的内存泄
     12. 构造函数的函数名，采用首字母大写；其他函数名，一律首字母小写。
     13. 不要使用自增（`++`）和自减（`--`）运算符，用`+= 1`和`-= 1`代替。
     14. 不省略大括号。
-10. JS编码规范
+9. JS编码规范
 
     绝大部分同意[fex-team:tyleguide](https://github.com/fex-team/styleguide/blob/master/javascript.md#javascript编码规范)。
 
     >可以设置为IDEs的**Reformat Code**的排版样式。
-11. 用户体验
+10. 用户体验
 
     1. 平稳退化（优雅降级）：当浏览器不支持或禁用了JS功能后，访问者也能完成最基本的内容访问。
 
@@ -2833,11 +2826,6 @@ todo: chrome如何查内存和内存泄漏，Node.js如何查隐蔽的内存泄
         1. 关于「性能」的写法建议，更多的是一种编程习惯（微优化）：写出更易读、性能更好的代码。
         2. 在解决页面性能瓶颈时，要从URL输入之后就进行[网站性能优化](https://github.com/realgeoffrey/knowledge/blob/master/网站前端/前端内容/README.md#网站性能优化)；避免在处理网页瓶颈时进行~~微优化~~。
 
-            >1. 即时编译（just in time compile，JIT）：JS引擎会在JS运行过程中逐渐重新编译部分代码为机器码，使代码运行更快。
-            >
-            >    运行前编译（ahead of time，AOT）：将较高级别的编程语言或中间表示形式，编译为本机机器代码的行为，生成的二进制文件可以直接在本机上执行。
-            >2. 微优化（micro-optimizations）：尝试写出认为会让浏览器稍微更快速运行的代码或调用更快的方法。
-
 ### 编程实践（programming practices）
 1. UI层的松耦合