BFC 两栏布局
27 |28 | 左侧块浮动到左边，但是因为是浮动块，右侧块高度一旦超过左侧块后文字就会出现在左侧的下方，因为没有块把它挡住。 29 |
30 |31 | 解决办法： 32 | 让右侧块变为BFC文字就不会横过去。因为BFC元素不与Float元素相重叠。 33 |
34 |
6 |
7 | ### 有什么用？
8 |
9 | 作为**适配层**、**API聚合层**。
10 |
11 | **适配层**
12 |
13 | 如果我们的接口同时提供给`web`、`移动端`使用，`移动端`仅用来采集数据以及数据的展示，而`web`端大多数场景是用来管理数据，因为不同端点的业务有所不同，所以每一个端的接口复用度不会太高。
14 |
15 | 例子：比如PC端页面设计的API需要支持移动端，发现现有接口从设计到实现都与桌面UI展示需求强相关，无法简单适应移动端的展示需求 ，就好比PC端一个新闻推荐接口，接口字段PC端都需要，而移动端呢H5不需要，这个时候根据不同终端在BFF层做调整，同时也可以进行不同的（或更少的）API调用（聚合）来减少http请求。
16 |
17 | **API聚合层**
18 |
19 | 后端同学追求解藕，因为后端可能不止一个服务，但多个服务之间有时只是有简单的业务上关系，如果能引入BFF这中间层，就使得两边可以独立变化。
20 |
21 | 例子1：用户上传头像后，用户信息的头像信息要更新，用户的头像图片需要存。如果存图片是单独一个服务，头像信息又是另一个服务，通过 BFF 就可以解决。
22 |
23 | 例子2：比如一个用户进入页面时往往都会拉很多数据，比如他会先打请求拉自己的用户信息，再打请求拉用户的一些配置，然后页面再渲染，这样页面的首屏时间就变得缓慢。而如果引入BFF这中间层，让 BFF 层把该拿的数据合并为一个请求就返回回来，那么首屏速度就会加快。
24 |
25 | ### BFF的痛点
26 |
27 | - 维护问题：需要维护各种 BFF 应用。以往前端也不需要关心并发，现在并发压力却集中到了 BFF 上
28 | - 链路复杂：流程变得繁琐，BFF引入后，要同时走前端、服务端的研发流程，多端发布、互相依赖，导致流程繁琐
29 |
30 | ### 有什么方案可以解决传统BFF痛点？
31 |
32 | - 包括解决前端需要关心应用的负载均衡、备份冗灾、监控报警等一些列运维部署的操作
33 | - 如何统一管理和运维，提高发布速度、降低运维成本
34 |
35 | 答案是：`Serverless`
--------------------------------------------------------------------------------
/1-前端框架与库/React/基础/lazy与suspense.md:
--------------------------------------------------------------------------------
1 | # Lazy 与 Suspense
2 |
3 | ## lazy
4 |
5 | React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。
6 |
7 | ```js
8 | const OtherComponent = React.lazy(() => import("./OtherComponent"));
9 | ```
10 |
11 | lazy 函数用来将组件模块的导入行为封装为 React 组件。封装的是组件导入行为，而不是组件本身。而且导入意味着网络请求。
12 |
13 | ## Suspense
14 |
15 | lazy 必须配合 Suspense 来一起使用，因为在异步加载的过程中，这个空白档必须要给 React 提供一个 loading 的组件
16 | 注意：
17 |
18 | - Suspense 的 fallback 属性必须传入一个 React 实例，即一个 JSX
19 |
20 | ## ErrorBoundary
21 |
22 | 当 React 的异步组件加载出错时，页面就会报错。它利用了`componentDidCatch`这个生命周期函数来。
23 |
24 | ## 例子
25 |
26 | ```jsx
27 | const About = lazy(
28 | () =>
29 | new Promise((resolve, reject) => {
30 | setTimeout(() => {
31 | resolve(import(/* webpackChunkName:"about" */ "./About.jsx"));
32 | }, 2000);
33 | })
34 | );
35 |
36 | class App extends Component {
37 | render() {
38 | return (
39 |
40 | Loading...
}>
41 |
33 |
34 |
35 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/0-前端基础/CSS/布局/三栏-flex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 表格布局
36 |父元素display: table;并且宽度为100%
37 |每一个子元素display: table-cell;
38 |左右两侧添加宽度，中间不加宽度
39 |
37 |
38 |
39 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 胡耀
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/1-前端框架与库/React/Hooks/组件复用例子/HOC.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * 高阶组件复用逻辑
3 | *
4 | * 调用方便
5 | */
6 |
7 | function resizeable(Child) {
8 | return class Wrapper extends React.Component {
9 | state = {
10 | size: [window.innerWidth, window.innerHeight],
11 | };
12 |
13 | onResize = () => {
14 | this.setState({
15 | size: [window.innerWidth, window.innerHeight],
16 | });
17 | };
18 |
19 | componentDidMount() {
20 | window.addEventListener("resize", this.onResize);
21 | document.title = this.state.size.join("x");
22 | }
23 |
24 | componentWillUnmount() {
25 | window.removeEventListener("resize", this.onResize);
26 | }
27 |
28 | componentDidUpdate() {
29 | document.title = this.state.size.join("x");
30 | }
31 |
32 | render() {
33 | const size = this.state.size;
34 | return flex布局解决方案
40 |包裹这个3个块的父元素display: flex; 中间的元素flex: 1;
41 |
44 | {width} x {height}
45 |
46 | );
47 | }
48 | }
49 |
50 | const WrapperedFoo = resizeable(Foo);
51 |
--------------------------------------------------------------------------------
/0-前端基础/CSS/布局/三栏-浮动方案.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 浮动解决方案
39 |方法：left和right写在center前面，并且分别左右浮动；
40 |41 | 中间的这个div因为是块级元素，所以在水平方向上按照他的包容块自动撑开。 42 |
43 |简单，但是中心部分过长下面会溢出，然后文字就会跑到两边去。
44 |绝对定位解决方案
39 |左右区域分别postion：absolute，固定到左右两边
40 |中间区域postion：absolute；left：300px; right: 300px
41 |给总的宽度加一个min-width，不然缩小窗口会有毛病
42 |
38 |
39 |
40 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/0-前端基础/CSS/布局/双飞翼布局.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 表格布局
41 |父元素display: table;并且宽度为100%
42 |每一个子元素display: table-cell;
43 |左右两侧添加宽度，中间不加宽度
44 |中心区
left
49 | right
50 |
51 |
52 |
--------------------------------------------------------------------------------
/2-计算机基础/网络/CDN.md:
--------------------------------------------------------------------------------
1 | # CDN
2 |
3 | CDN（Content Delivery Network，内容分发网络）是构建在现有互联网基础之上的一层智能虚拟网络，通过在网络各处部署节点服务器，实现将源站内容分发至所有 CDN 节点，使用户可以就近获得所需的内容。CDN 服务缩短了用户查看内容的访问延迟，提高了用户访问网站的响应速度与网站的可用性，解决了网络带宽小、用户访问量大、网点分布不均等问题。
4 |
5 | ## 加速原理
6 |
7 | 当用户访问使用 CDN 服务的网站时，本地 DNS 服务器通过 CNAME 方式将最终域名请求重定向到 CDN 服务。CDN 通过一组预先定义好的策略(如内容类型、地理区域、网络负载状况等)，将当时能够最快响应用户的 CDN 节点 IP 地址提供给用户，使用户可以以最快的速度获得网站内容。使用 CDN 后的 HTTP 请求处理流程如下：
8 |
9 | ### CDN 节点有缓存场景
10 |
11 | 
12 |
13 | 1. 用户在浏览器输入要访问的网站域名，向本地 DNS 发起域名解析请求。
14 | 2. 域名解析的请求被发往网站授权 DNS 服务器。
15 | 3. 网站 DNS 服务器解析发现域名已经 CNAME 到了 www.example.com.c.cdnhwc1.com。
16 | 4. 请求被指向 CDN 服务。
17 | 5. CDN 对域名进行智能解析，将响应速度最快的 CDN 节点 IP 地址返回给本地 DNS。
18 | 6. 用户获取响应速度最快的 CDN 节点 IP 地址。
19 | 7. 浏览器在得到速度最快节点的 IP 地址以后，向 CDN 节点发出访问请求。
20 | 8. CDN 节点将用户所需资源返回给用户。
21 |
22 | ### CDN 节点无缓存场景
23 |
24 | 
25 |
26 | 1. 用户在浏览器输入要访问的网站域名，向本地 DNS 发起域名解析请求。
27 | 2. 域名解析的请求被发往网站授权 DNS 服务器。
28 | 3. 网站 DNS 服务器解析发现域名已经 CNAME 到了 www.example.com.c.cdnhwc1.com。
29 | 4. 请求被指向 CDN 服务。
30 | 5. CDN 对域名进行智能解析，将响应速度最快的 CDN 节点 IP 地址返回给本地 DNS。
31 | 6. 用户获取响应速度最快的 CDN 节点 IP 地址。
32 | 7. 浏览器在得到速度最快节点的 IP 地址以后，向 CDN 节点发出访问请求。
33 | 8. CDN 节点回源站拉取用户所需资源。
34 | 9. 将回源拉取的资源缓存至节点。
35 | 10. 将用户所需资源返回给用户。
36 |
37 | PS：CNAME 别名解析是将域名指向一个网址（域名）
38 |
--------------------------------------------------------------------------------
/0-前端基础/CSS/布局/圣杯布局.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
50 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/3-编程能力/编程题与分析题/闭包.md:
--------------------------------------------------------------------------------
1 | # 闭包问题
2 |
3 | ### 循环中赋值为引用的问题
4 |
5 | ```js
6 | for (var i = 1; i < 5; i++) {
7 | setTimeout(function timer() {
8 | console.log(i);
9 | }, i * 1000);
10 | }
11 | ```
12 |
13 | 解决方法有 3 种
14 |
15 | 第一种，使用`立即执行函数`方式
16 |
17 | ```js
18 | for (var i = 1; i < 5; i++) {
19 | (fuction(j){
20 | setTimeout(function timer() {
21 | console.log(j)
22 | }, j * 1000)
23 | })(i)
24 | }
25 | ```
26 |
27 | 第二种，使用 ES6 的`let`
28 |
29 | ```js
30 | for (let i = 1; i < 5; i++) {
31 | setTimeout(function timer() {
32 | console.log(i);
33 | }, i * 1000);
34 | }
35 | ```
36 |
37 | 第三种，使用`setTimeout的第三个参数`
38 |
39 | ```js
40 | for (var i = 1; i < 5; i++) {
41 | setTimeout(
42 | function timer(j) {
43 | console.log(j);
44 | },
45 | i * 1000,
46 | i
47 | );
48 | }
49 | ```
50 |
51 | ### 计数器
52 |
53 | 实现一个 foo 函数 可以这么使用:
54 |
55 | ```js
56 | a = foo();
57 | b = foo();
58 | c = foo();
59 | // a === 1;b === 2;c === 3;
60 | foo.clear();
61 | d = foo(); //d === 1;
62 | ```
63 |
64 | ```js
65 | function myIndex() {
66 | var index = 1;
67 |
68 | function foo() {
69 | return index++;
70 | }
71 |
72 | foo.clear = function () {
73 | index = 1;
74 | };
75 | return foo;
76 | }
77 |
78 | var foo = myIndex();
79 | ```
80 |
--------------------------------------------------------------------------------
/5-性能优化/雅虎军规.md:
--------------------------------------------------------------------------------
1 | # 雅虎军规
2 |
3 | [雅虎军规](https://developer.yahoo.com/performance/rules.html?guccounter=1)
4 |
5 | - 网络部分
6 | - 尽量减少 HTTP 请求数
7 | - 合并文件
8 | - 雪碧图
9 | - 小图 Base64
10 | - 减少 DNS 查找
11 | - 开启 DNS 预解析
12 | - 使用 CND 静态资源服务器
13 | - 避免重定向
14 | - 杜绝 404
15 | - 缓存
16 | - 配置 ETags
17 | - 实体标签（ETags），是服务器和浏览器用来决定浏览器缓存中组件与源服务器中的组件是否匹配的一种机制
18 | - 添上 Expires 或者 Cache-Control HTTP 头
19 | - 使用外链的方式引入 JS 和 CSS（缓存）
20 | - 内容部分
21 | - 按需加载组件
22 | - 预加载组件
23 | - 减少 DOM 元素的数量
24 | - 尽量少用 iframe
25 | - 压缩 JavaScript 和 CSS（代码层面）
26 | - CSS 部分
27 | - 避免使用 CSS 表达式
28 | - 选择``而不是`@import`
29 | - 避免使用滤镜
30 | - 把样式表放在顶部
31 | - JS 部分
32 | - 把脚本放在底部
33 | - 去除重复脚本
34 | - 减少 DOM 访问
35 | - 图片部分
36 | - 选用合适的图片格式
37 | - 雪碧图中间少留空白
38 | - 不要用 HTML 缩放图片，要小图就去加载小图
39 | - 用小的可缓存的 favicon.ico
40 | - cookie
41 | - 给 cookie 减肥
42 | - 清除不必要的 cookie
43 | - cookie 尽可能小
44 | - 设置好合适的域
45 | - 合适的有效期
46 | - 把静态资源放在不含 cookie 的域下
47 | - 当浏览器发送对静态图像的请求时，cookie 也会一起发送，而服务器根本不需要这些 cookie。
48 | - 移动端
49 | - 保证所有组件都小于 25K
50 | - 把组件打包到一个复合文档里
51 | - 服务器
52 | - 开启 Gzip 等压缩
53 | - 避免图片 src 属性为空（为空浏览器也会向服务器发送另一个请求）
54 | - 对 Ajax 用 GET 请求
55 | - 尽早清空缓冲区
56 | - 使用 CDN（内容分发网络）
57 | - 内容分发网络（CDN）是一组分散在不同地理位置的 web 服务器，用来给用户更高效地发送内容。
58 |
--------------------------------------------------------------------------------
/2-计算机基础/网络/README.md:
--------------------------------------------------------------------------------
1 | # 网络知识
2 |
3 | ## [Ajax](Ajax.md)
4 |
5 | ## [HTTP](HTTP.md)
6 |
7 | ## [TCP](TCP.md)
8 |
9 | ## [UDP](UDP.md)
10 |
11 | ## [跨域](./跨域.md)
12 |
13 | ## [缓存](缓存.md)
14 |
15 | ## [cookie 和 session](cookie和session.md)
16 |
17 | ## [从输入 URL 到页面加载完成的过程](从输入URL到页面加载完成的过程.md)
18 |
19 | ## [HTTPS](HTTPS.md)
20 |
21 | ### OSI 七层协议
22 |
23 | - 应用层
24 | - 为应用提供通信服务
25 | - 表示层
26 | - 定义数据格式以及加密
27 | - 会话层
28 | - 定义了如何开始、控制、结束一个会话，包括对多个双向消息的控制和管理。
29 | - 传输层
30 | - 选择差错恢复协议还是无差错恢复协议
31 | - TCP、UDP
32 | - 网络层
33 | - 端到端包传输。
34 | - 路由选择、包分解成更小的包
35 | - 数据链路层
36 | - 定义单个链路上如何传输数据
37 | - 物理层
38 | - 传输介质相关
39 |
40 | ### DNS 解析
41 |
42 | DNS 的作用就是通过域名查询到具体的 IP。
43 |
44 | 1. 操作系统会首先在本地缓存中查询
45 | 2. 没有的话会去系统配置的 DNS 服务器中查询
46 | 3. 如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器
47 | 4. 然后去该服务器查询 google 这个二级域名
48 | 5. 接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP
49 |
50 | 以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。
51 |
52 | ### 前后端如何通信
53 |
54 | - Ajax
55 | - WebSocket
56 | - CORS
57 |
58 | ### websocket
59 |
60 | 在单个 TCP 连接上进行全双工通讯的协议。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建**持久性**的连接，并进行**双向**数据传输。
61 |
62 | - Socket.onopen 连接建立时触发
63 | - Socket.onmessage 客户端接收服务端数据时触发
64 | - Socket.onerror 通信发生错误时触发
65 | - Socket.onclose 连接关闭时触发
66 |
--------------------------------------------------------------------------------
/0-前端基础/CSS/居中元素/README.md:
--------------------------------------------------------------------------------
1 | # 居中
2 |
3 | ### 如何竖直居中一个元素
4 |
5 | 参考代码: [CSS/居中元素/垂直居中](https://github.com/huyaocode/webKnowledge/tree/master/CSS/%E5%B1%85%E4%B8%AD%E5%85%83%E7%B4%A0/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD)
6 |
7 | #### 被居中元素宽高固定
8 |
9 | 1. 绝对定位，top 和 left 为 50%， margin 的 left 和 top 为自身宽高一半
10 |
11 | ```css
12 | .center {
13 | position: absolute;
14 | top: 50%;
15 | left: 50%;
16 | margin-left: -9rem;
17 | margin-top: -5rem;
18 | }
19 | ```
20 |
21 | 2. 绝对定位，top 和 lefe 为父元素一半剪自身一半
22 |
23 | ```css
24 | .center {
25 | position: absolute;
26 | top: calc(50% - 5em);
27 | left: calc(50% - 9em);
28 | }
29 | ```
30 |
31 | #### 被居中元素宽高不定
32 |
33 | 3. 使用 CSS3 的 `transform`将位置在中心点平移自身宽高一半
34 |
35 | ```css
36 | .center {
37 | position: absolute;
38 | top: 50%;
39 | left: 50%;
40 | transform: translate(-50%, -50%);
41 | }
42 | ```
43 |
44 | 4. 使用 flex 布局居中
45 |
46 | ```css
47 | .wrapper {
48 | display: flex;
49 | }
50 | .center {
51 | margin: auto;
52 | }
53 | ```
54 |
55 | 5. flex 布局，父元素指定子元素居中。
56 |
57 | ```css
58 | .wrapper {
59 | display: flex;
60 | align-items: center;
61 | justify-content: center;
62 | }
63 | ```
64 |
65 | #### 在浏览器窗口中居中
66 |
67 | 基于视口的垂直居中。不要求原生有固定的宽高，但是这种居中是在整个页面窗口内居中，不是基于父元素
68 |
69 | ```css
70 | .center {
71 | margin: 50vh auto;
72 | transform: translateY(-50%);
73 | }
74 | ```
75 |
--------------------------------------------------------------------------------
/0-前端基础/Web安全/CSRF.md:
--------------------------------------------------------------------------------
1 | # CSRF 跨站请求伪造
2 |
3 | （Cross Site Request Forgy）
4 | 打开同一浏览器时其他的网站对本网站造成的影响。原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。
5 | 
6 |
7 | 举个例子，用户同时打开了 A 网站和钓鱼网站。 假设 A 网站中有一个通过 GET 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口。
8 |
9 | ```html
10 | main
51 | left
52 | right
53 |
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 |
--------------------------------------------------------------------------------
/5-性能优化/testDemo/slowServer/js-header.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
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 |
--------------------------------------------------------------------------------
/杂项/优雅代码.md:
--------------------------------------------------------------------------------
1 | # 优雅代码
2 |
3 | ### If 语句
4 |
5 | bad
6 |
7 | ```js
8 | if (value === "duck" || value === "dog" || value === "cat") {
9 | // ...
10 | }
11 | ```
12 |
13 | good
14 |
15 | ```js
16 | const options = ["duck", "dog", "cat"];
17 | if (options.includes(value)) {
18 | // ...
19 | }
20 | ```
21 |
22 | ### 提前退出机制
23 |
24 | ```js
25 | function handleEvent(event) {
26 | if (event) {
27 | const target = event.target;
28 | if (target) {
29 | // ...
30 | }
31 | }
32 | }
33 | ```
34 |
35 | 使用提前退出，减少嵌套
36 |
37 | ```js
38 | function handleEvent(event) {
39 | if (!event || !event.target) {
40 | return;
41 | }
42 | // ...
43 | }
44 | ```
45 |
46 | ### 返回数组
47 |
48 | 如果一个函数只有少量几个返回值，但调用方在使用此函数时大概率会将返回的值改名，那就返回数组
49 |
50 | bad
51 |
52 | ```js
53 | const useState = () => {
54 | return {
55 | state,
56 | setState,
57 | };
58 | };
59 | ```
60 |
61 | good
62 |
63 | ```js
64 | // 函数
65 | const useState = () => {
66 | return [state, setState];
67 | };
68 |
69 | // 调用
70 | const [data, setData] = useState();
71 | ```
72 |
73 | ### 使用 Map 来代替静态的 switch case
74 |
75 | 如果明确知道映射关系，如 TS 类型定义好了。并且没有什么计算逻辑，就可以使 Map 提示代码整洁度。
76 |
77 | bad
78 |
79 | ```js
80 | const getTranslate = (en) => {
81 | switch (en) {
82 | case "apple":
83 | return "苹果";
84 | case "banana":
85 | return "香蕉";
86 | case "orange":
87 | return "橘子";
88 | }
89 | };
90 | ```
91 |
92 | good
93 |
94 | ```js
95 | const translateMap = {
96 | apple: "苹果",
97 | banana: "香蕉",
98 | orange: "橘子",
99 | };
100 | const getTranslate = (en) => {
101 | return translateMap[en];
102 | };
103 | ```
104 |
--------------------------------------------------------------------------------
/0-前端基础/JS/ServiceWorker.md:
--------------------------------------------------------------------------------
1 | # Service Worker
2 |
3 | Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker 的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。
4 |
5 | Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。以下是这个步骤的实现：
6 |
7 | ```js
8 | // index.js
9 | if (navigator.serviceWorker) {
10 | navigator.serviceWorker
11 | .register("sw.js")
12 | .then(function (registration) {
13 | console.log("service worker 注册成功");
14 | })
15 | .catch(function (err) {
16 | console.log("servcie worker 注册失败");
17 | });
18 | }
19 | // sw.js
20 | // 监听 `install` 事件，回调中缓存所需文件
21 | self.addEventListener("install", (e) => {
22 | e.waitUntil(
23 | caches.open("my-cache").then(function (cache) {
24 | return cache.addAll(["./index.html", "./index.js"]);
25 | })
26 | );
27 | });
28 |
29 | // 拦截所有请求事件
30 | // 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
31 | self.addEventListener("fetch", (e) => {
32 | e.respondWith(
33 | caches.match(e.request).then(function (response) {
34 | if (response) {
35 | return response;
36 | }
37 | console.log("fetch source");
38 | })
39 | );
40 | });
41 | ```
42 |
43 | 打开页面，可以在开发者工具中的 Application 看到 Service Worker 已经启动了
44 | 
45 |
46 | 在 Cache 中也可以发现我们所需的文件已被缓存
47 | 
48 |
49 | 当我们重新刷新页面可以发现我们缓存的数据是从 Service Worker 中读取的
50 | 
51 |
52 | ### 好文链接
53 |
54 | - https://www.zcfy.cc/article/service-worker-what-are-you-mariko-kosaka-1927.html
55 | - https://juejin.im/post/5ba0fe356fb9a05d2c43a25c
56 | - https://juejin.im/post/5bf3f656e51d45338e084044
57 | - https://juejin.im/post/5bf3f6b2e51d45360069e527
58 |
--------------------------------------------------------------------------------
/1-前端框架与库/React/Hooks/README.md:
--------------------------------------------------------------------------------
1 | # React Hooks
2 |
3 | Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用
4 |
5 | ### Hook 使用规则
6 |
7 | - 只能在函数最外层调用 Hook。不可在循环、条件判断或者子函数中调用。
8 | - 调用`useState`时，大家都是调用这个函数，React 怎么知道应该在渲染的时候给你返回哪个值呢？ 其
9 | - 只能在 React 的函数组件或自定义的 Hook 中调用 Hook。不要在其他 JavaScript 函数中调用。
10 |
11 | 可以使用`eslint-plugin-react-hooks`来检测，在 Webpack 中添加配置如下：
12 |
13 | ```json
14 | "eslintConfig": {
15 | "extends": "react-app",
16 | "plugins": [
17 | "react-hooks"
18 | ],
19 | "rules": {
20 | "react-hooks/rules-of-hooks":"error"
21 | }
22 | },
23 | ```
24 |
25 | ### Hook 如何把调用和组件联系起来的？
26 |
27 | React 保持对当先渲染中的组件的追踪。多亏了 Hook 规范，我们得知 Hook 只会在 React 组件中被调用（或自定义 Hook —— 同样只会在 React 组件中被调用）。
28 |
29 | 每个组件内部都有一个「记忆单元格」列表。它们只不过是我们用来存储一些数据的 JavaScript 对象。当你用 useState() 调用一个 Hook 的时候，它会读取当前的单元格（或在首次渲染时将其初始化），然后把指针移动到下一个。这就是多个 useState() 调用会得到各自独立的本地 state 的原因。
30 |
31 | ### 类组件不足
32 |
33 | - 状态逻辑难以复用
34 | - 缺少复用机制
35 | - 不方便封装逻辑，使用渲染属性和高阶组件也有缺点
36 | - 渲染属性和高阶组件导致层级冗余
37 | - 无论是高阶组件还是渲染属性，都相当与在原来的组件之上增加了新的组件层次。尤其是在 Chrome 调试器上会看到为了服用逻辑而添加的狠多组件层级，显得十分臃肿。不仅是调试体验问题、也存在着运行性能的问题
38 | - 趋向复杂时难以维护
39 | - 生命周期函数函数混杂不相干逻辑
40 | - 相关逻辑代码经常会打散到不同生命周期中
41 | - this 指向困扰
42 | - 内联函数需要绑定 this, 否则每次渲染都创建一个箭头函数
43 | - 类成员函数不能保证 this
44 |
45 | ### hooks 优势
46 |
47 | - 函数组件无类实例 this 问题
48 |
49 | - hooks 是函数组件环境，所有逻辑都在函数内部，没有实例化概念，无复杂的 this 问题
50 |
51 | - 自定义 Hook 函数方便复用状态逻辑
52 |
53 | - hooks 指的是在函数内部调用的特殊函数，我们可以自定义 hooks 函数，在 hooks 函数内部，依旧可以调用 useState 和 useEffect 等 hooks 函数。这样就可以非常高效的将可复用逻辑提取出来
54 |
55 | - 副作用的关注点分离
56 | - hooks 天生优化了副作用代码逻辑
57 | - 每个 useEffect 来实现一个逻辑，不同逻辑写在不同的 useEffect 中，比冗在同一生命周期中好很多
58 | - 以前副作用大都是写在生命函数周期中
59 | - 副作用：
60 | - 发送网络请求
61 | - 访问原始 DOM 元素
62 | - 访问本地存储
63 | - 绑定解绑事件
64 |
--------------------------------------------------------------------------------
/3-编程能力/编程题与分析题/this指向.md:
--------------------------------------------------------------------------------
1 | # this 指向
2 |
3 | ### 头条一面
4 |
5 | 请分别写出下面题目的答案。
6 |
7 | ```js
8 | function Foo() {
9 | getName = function () {
10 | console.log(1);
11 | };
12 | return this;
13 | }
14 | Foo.getName = function () {
15 | console.log(2);
16 | };
17 | Foo.prototype.getName = function () {
18 | console.log(3);
19 | };
20 | var getName = function () {
21 | console.log(4);
22 | };
23 |
24 | function getName() {
25 | console.log(5);
26 | }
27 |
28 | //请写出以下输出结果：
29 | Foo.getName(); //-> 2 Foo对象上的getName() ，这里不会是3，因为只有Foo的实例对象才会是3，Foo上面是没有3的
30 | getName(); //-> 4 window上的getName，console.log(5)的那个函数提升后，在console.log(4)的那里被重新赋值
31 | Foo().getName(); //-> 1 在Foo函数中，getName是全局的getName，覆盖后输出 1
32 | getName(); //-> 1 window中getName();
33 | new Foo.getName(); //-> 2 Foo后面不带括号而直接 '.'，那么点的优先级会比new的高，所以把 Foo.getName 作为构造函数
34 | new Foo().getName(); //-> 3 此时是Foo的实例，原型上会有输出3这个方法
35 | ```
36 |
37 | ### 箭头函数中的 this 判断
38 |
39 | 箭头函数里面的 this 是继承它作用域父级的 this， 即声明箭头函数处的 this
40 |
41 | ```js
42 | let a = {
43 | b: function () {
44 | console.log(this);
45 | },
46 | c: () => {
47 | console.log(this);
48 | },
49 | };
50 |
51 | a.b(); // a
52 | a.c(); // window
53 |
54 | let d = a.b;
55 | d(); // window
56 | ```
57 |
58 | ### this 判断 下面输出为多少？
59 |
60 | ```js
61 | var name1 = 1;
62 |
63 | function test() {
64 | let name1 = "kin";
65 | let a = {
66 | name1: "jack",
67 | fn: () => {
68 | var name1 = "black";
69 | console.log(this.name1);
70 | },
71 | };
72 | return a;
73 | }
74 |
75 | test().fn(); // ?
76 | ```
77 |
78 | 答案： 输出 1
79 |
80 | 因为 fn 处绑定的是箭头函数，箭头函数并不创建 this，它只会从自己的作用域链的上一层继承 this。这里它的上一层是 test()，非严格模式下 test 中 this 值为 window。
81 |
82 | - 如果在绑定 fn 的时候使用了 function，那么答案会是 'jack'
83 | - 如果第一行的 var 改为了 let，那么答案会是 undefind， 因为 let 不会挂到 window 上
84 |
--------------------------------------------------------------------------------
/1-前端框架与库/TypeScript/接口.md:
--------------------------------------------------------------------------------
1 | # 接口
2 |
3 | 描述对象、函数、类，接口中描述的属性都必须包含，但对象有其他一些属性、接口未定义不会报错。
4 |
5 | ```js
6 | interface LabelledValue {
7 | label: string;
8 | }
9 |
10 | function printLabel(labelledObj: LabelledValue) {
11 | console.log(labelledObj.label);
12 | }
13 | ```
14 |
15 | ### 可选属性
16 |
17 | ```js
18 | interface SquareConfig {
19 | color?: string
20 | width?: number
21 | }
22 | ```
23 |
24 | ### 只读属性
25 |
26 | ```js
27 | interface Point {
28 | readonly x: number
29 | readonly y: number
30 | }
31 | ```
32 |
33 | ### 可索引的类型
34 |
35 | 描述了对象索引的类型，还有相应的索引返回值类型。
36 |
37 | ```js
38 | interface StringArray {
39 | [index: number]: string;
40 | }
41 |
42 | let myArray: StringArray;
43 | myArray = ["Bob", "Fred"];
44 | ```
45 |
46 | ### 继承接口
47 |
48 | 继承接口，使得接口可分割到更多重用的模块里。
49 |
50 | ```js
51 | interface Shape {
52 | color: string;
53 | }
54 |
55 | interface Square extends Shape {
56 | sideLength: number;
57 | }
58 | ```
59 |
60 | ### 混合类型
61 |
62 | 在函数上定义一些属性
63 |
64 | ```js
65 | interface Counter {
66 | (start: number): string
67 | interval: number
68 | reset(): void
69 | }
70 |
71 | function getCounter(): Counter {
72 | let counter = (function (start: number) { }) as Counter
73 | counter.interval = 123
74 | counter.reset = function () { }
75 | return counter
76 | }
77 |
78 | let c = getCounter()
79 | c(10)
80 | c.reset()
81 | c.interval = 5.0
82 | ```
83 |
84 | ### 类继承接口
85 |
86 | 实现接口
87 |
88 | ```js
89 | interface ClockInterface {
90 | currentTime: Date;
91 | }
92 |
93 | class Clock implements ClockInterface {
94 | currentTime: Date;
95 | constructor(h: number, m: number) {}
96 | }
97 | ```
98 |
99 | ### 接口继承类
100 |
101 | 会继承类的成员但不包括其实现。 接口同样会继承到类的 private 和 protected 成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。
102 |
--------------------------------------------------------------------------------
/3-编程能力/编程题与分析题/PromiseAll.md:
--------------------------------------------------------------------------------
1 | # Promise.all
2 |
3 | Promise.all 接收一个 promise 对象的数组作为参数，当这个数组里的所有 promise 对象全部变为 resolve 或 有 reject 状态出现的时候，它才会去调用 .then 方法,它们是并发执行的。
4 |
5 | ### Promise.all 简介
6 |
7 | Promise.all(promiseArray) 方法是 Promise 对象上的静态方法，该方法的作用是将多个 Promise 对象实例包装，生成并返回一个新的 Promise 实例。
8 |
9 | 参数：promiseArray，是一个 Promise 实例数组
10 |
11 | ```js
12 | var p1 = Promise.resolve(1),
13 | p2 = Promise.reject(2),
14 | p3 = Promise.resolve(3);
15 | Promise.all([p1, p2, p3])
16 | .then(function (results) {
17 | //then方法不会被执行
18 | console.log(results);
19 | })
20 | .catch(function (e) {
21 | //catch方法将会被执行，输出结果为：2
22 | console.log(2);
23 | });
24 | ```
25 |
26 | promise 数组中所有的 promise 实例都变为 resolve 的时候，该方法才会返回，并将所有结果传递 results 数组中。promise 数组中任何一个 promise 为 reject 的话，则整个 Promise.all 调用会立即终止，并返回一个 reject 的新的 promise 对象。
27 |
28 | ### 总结 promise.all 的特点
29 |
30 | 1. 接收一个 Promise 实例的数组或具有 Iterator 接口的对象，
31 | 2. 如果元素不是 Promise 对象，则使用 Promise.resolve 转成 Promise 对象
32 | 3. 如果全部成功，状态变为 resolved，返回值将组成一个数组传给回调
33 | 4. 只要有一个失败，状态就变为 rejected，返回值将直接传递给回调
34 | all() 的返回值也是新的 Promise 对象
35 |
36 | ### 实现 Promise.all 方法
37 |
38 | ```js
39 | function promiseAll(promises) {
40 | return new Promise(function (resolve, reject) {
41 | if (isArray(promises)) {
42 | return reject(new Error("Promises must be an array"));
43 | }
44 | var resolvedCount = 0;
45 | var promiseNum = promises.length;
46 | var resloveValue = [];
47 | for (let i = 0; i < promiseNum; i++) {
48 | Promise.resolve(promises[i]).then(
49 | (value) => {
50 | resloveValue[i] = value;
51 | resolvedCount++;
52 | if (resolvedCount === promiseNum) {
53 | return resloveValue;
54 | }
55 | },
56 | (reason) => {
57 | return reject(reason);
58 | }
59 | );
60 | }
61 | });
62 | }
63 | ```
64 |
--------------------------------------------------------------------------------
/0-前端基础/NodeJS/npm.md:
--------------------------------------------------------------------------------
1 | # 包与 npm
2 |
3 | ### 包结构
4 |
5 | 包实际上是一个存档文件，及一个目录直接打包为.zip 或 tar.gz 格式的文件，安装后解压还原为目录。完全符合 CommonJS 规范的包目录应该包含如下这些文件。
6 |
7 | - package.json
8 | - 包描述文件
9 | - bin
10 | - 存放可执行二进制文件的目录
11 | - lib
12 | - 用于存放 JavaScript 代码目录
13 | - doc
14 | - 用于存放文档的目录
15 | - test
16 | - 用于存放单元测试用例的代码
17 |
18 | ### package.json
19 |
20 | CommonJS 为起定义了一些必需的字段。
21 |
22 | - name
23 | - 包名。唯一的，避免对外发布时命名冲突
24 | - description
25 | - 包简介
26 | - version
27 | - 版本号
28 | - keywords
29 | - 关键词数组，用于做分类搜索
30 | - maintainers
31 | - 包维护者列表
32 |
33 | 权限认证
34 |
35 | - contributors
36 | - 贡献者列表
37 | - bugs
38 | - 一个可以反馈 bug 的页面或邮件
39 | - licenses
40 | - 包所使用的许可证列表
41 | - repositories
42 | - 托管源代码的文件位置
43 | - **dependencies**
44 | - 当前包所依赖的包列表
45 | - directories
46 | - 包目录说明
47 | - implements
48 | - 实现规范的列表
49 | - scripts
50 | - 脚本说明对象
51 | - 被包管理器永安里安装、编译、测试、卸载包
52 |
53 | 补充
54 |
55 | - author
56 | - 包作者
57 | - bin
58 | - 一些包作者希望包可以作为命令行工具使用。配置好 bin 字段后，可通过 `npm install ... -g`将脚本添加到执行路径
59 | - main
60 | - 模块引入方法 require()在引入包时，会优先检查这个字段，并将其作为包中其余模块的入口。
61 | - devDependencies
62 | - 一些模块只在开发时需要依赖。可配置这个属性
63 |
64 | ### npm 常用功能
65 |
66 | - 查看帮助
67 |
68 | - npm -v
69 | - npm
70 | - npm {count}
; 18 | } 19 | ``` 20 | 21 | 页面上的 count 永远是 1，因为 useEffect 的依赖数组重没有包含 count。导致定时器中 count 永远是第一次渲染时的值，即 0 。页面上一直为 0+1 = 1 22 | 23 | ```js 24 | function Counter() { 25 | let [count, setCount] = useState(0); 26 | 27 | useEffect(() => { 28 | setInterval(() => { 29 | setCount(count + 1); 30 | }, 1000); 31 | }, [count]); 32 | 33 | return{count}
; 34 | } 35 | ``` 36 | 37 | 现在在依赖数组中加入了 count，页面上的数值不一直为 1 了， 38 | 但是过不了一会儿，页面上的数字就会开始闪烁。 39 | 这是因为每次 count 变化后，都重新去运行了一遍 useEffect，导致生成了非常多的定时器。页面上结果为： 40 | 41 | - 0 + 1 42 | - 1 + 1 43 | - 2 + 1 44 | - 3 + 1 45 | - 4 + 1 46 | - ... 47 | 48 | 所以数字在闪烁。 49 | 50 | ## 正确的定时器设置 51 | 52 | ```js 53 | function Counter() { 54 | let [count, setCount] = useState(0); 55 | 56 | useEffect(() => { 57 | let id = setInterval(() => { 58 | setCount(count + 1); 59 | }, 1000); 60 | 61 | return () => clearInterval(id); 62 | }, [count]); 63 | 64 | return{count}
; 65 | } 66 | ``` 67 | 68 | 每下一次渲染前都用 useEffect 的 return 销毁掉之前生成的 定时器。 69 | 70 | 不过这样是比较耗费性能的，每一次加一都要执行一遍创建和销毁定时器。可以使用箭头函数的方式来更新 count。 71 | 72 | ```js 73 | function Counter() { 74 | let [count, setCount] = useState(0); 75 | 76 | useEffect(() => { 77 | let id = setInterval(() => { 78 | setCount((count) => count + 1); 79 | }, 1000); 80 | 81 | return () => clearInterval(id); 82 | }, []); 83 | 84 | return{count}
; 85 | } 86 | ``` 87 | 88 | ## 思考这样能不能实现定时器效果？ 89 | 90 | ```js 91 | function Counter() { 92 | let [count, setCount] = useState(0); 93 | 94 | useEffect(() => { 95 | let id = setInterval(() => { 96 | setCount(count + 1); 97 | }, 1000); 98 | return () => clearInterval(id); 99 | }); 100 | 101 | return{count}
; 102 | } 103 | ``` 104 | 105 | 答案是：会。 106 | 看似没有把 count 放入依赖数组中，但不使用依赖数组的情况下，useEffect 会在第一次渲染之后和每次更新之后都会执行。这就使得每次渲染都能拿到最新的 count 值，这样就能实现定时器效果了。 107 | 108 | 不过，这会导致一个非常隐蔽的 BUG，参见 Dan 的博客：https://overreacted.io/zh-hans/making-setinterval-declarative-with-react-hooks/#%E7%AC%AC%E4%B8%80%E6%AC%A1%E5%B0%9D%E8%AF%95 109 | 110 | 原因： setInterval 和它们不一样。当我们执行 clearInterval 和 setInterval 时，它们会进入时间队列里，如果我们频繁重渲染和重执行 effects，interval 有可能没有机会被执行！ 111 | -------------------------------------------------------------------------------- /2-计算机基础/操作系统/死锁与银行家算法.md: -------------------------------------------------------------------------------- 1 | ## 死锁 2 | 3 | ### 死锁概念、产生原因 4 | 5 | 死锁是指多个进程循环等待彼此占有的资源而无限期的僵持等待下去的局面。原因是： 6 | 7 | - 系统提供的资源太少了，远不能满足并发进程对资源的需求 8 | - 进程推进顺序不合适，互相占有彼此需要的资源，同时请求对方占有的资源，往往是程序设计不合理 9 | 10 | ### 死锁产生的必要条件 11 | 12 | 需要同时具有以下四个条件： 13 | 14 | - 互斥条件：即某个资源在一段时间内只能由一个进程占有，不能同时被两个或两个以上的进程占有 15 | - 不可抢占条件：进程所获得的资源在未使用完毕之前，资源申请者不能强行的从资源占有者手中夺取资源，而只能由该资源的占有者进程自行释放 16 | - 占有且等待条件：进程至少已经占有了一个资源，但又申请了一个新的被其他进程所占有的资源，此时处于等待状态 17 | - 循环等待条件：若干个进程形成环形链，每个都占用对方申请的下一个资源 18 | 19 | ## 死锁的处理策略 20 | 21 | 为使系统不发生死锁，必须设法破坏产生死锁的四个必要条件之一，或者允许死锁产生，但当死锁发生时能检测出思索，并有能力实现恢复。 22 | 一般有死锁的预防、死锁避免、死锁的检测与恢复三种方法。 23 | 24 | 1. 死锁预防：破坏导致死锁必要条件中的任意一个就可以预防死锁。例如，要求用户申请资源时一次性申请所需要的全部资源，这就破坏了保持和等待条件；将资源分层，得到上一层资源后，才能够申请下一层资源，它破坏了环路等待条件。预防通常会降低系统的效率。 25 | 2. 死锁避免：避免是指进程在每次申请资源时判断这些操作是否安全，例如，使用银行家算法。死锁避免算法的执行会增加系统的开销。 26 | 3. 死锁检测：死锁预防和避免都是事前措施，而死锁的检测则是判断系统是否处于死锁状态，如果是，则执行死锁解除策略。 27 | 4. 死锁解除：这是与死锁检测结合使用的，它使用的方式就是剥夺。即将某进程所拥有的资源强行收回，分配给其他的进程。 28 | 29 | ### 死锁预防： 30 | 31 | - 打破互斥条件：允许进程同时访问资源（有些资源就是不可以同时访问的，无实用价值） 32 | - 打破不可抢占条件：比如给进程设置优先级，高优先级的可以抢占资源(实现困难，降低系统性能) 33 | - 打破占有且等待条件：实行资源预分配策略，即进程在运行前一次性的向系统申请它所需要的全部资源(不可预测资源的使用，利用率低，降低并发性) 34 | - 破坏循环等待条件：采用这种策略，即把资源事先分类编号，按号分配，使进程在申请，占用资源时不会形成环路。所有进程对资源的请求必须严格按资源序号递增的顺序提出（限制和编号实现困难，增加系统开销，有些资源暂时不用也需要先申请，增加了进程对资源的占用时间） 35 | 36 | ### 死锁避免 37 | 38 | 允许进程动态的申请资源，但系统在进行资源分配前，应先计算此次资源分配的安全性。若此次分配不会导致系统进入不安全状态，则将资源你分配给进程，否则，让进程等待。 39 | 40 | 所谓安全状态，是指系统能按某种进程推进顺序，为每个进程分配其所需的资源，直至满足每个进程对资源的最大需求，是每个进程都可以顺序的完成。此时成 P1P2P3...为安全序列，如果系统无法找到一个安全序列，则称系统处于不安全状态。 41 | 42 | 并非所有的不安全状态都是死锁状态，但当系统进入不安全状态后，便可能进入死锁状态；反之，只要系统处于安全状态，系统便可以避免进入死锁状态。 43 | **银行家算法**是最著名的死锁避免算法。 44 | 45 | ### 死锁的检测 46 | 47 | 资源分配图&&死锁定理 48 | 49 | ### 死锁解除 50 | 51 | 1. 资源剥夺法。挂起某些思索进程，并抢占它的资源，将这些资源分配给其他的死锁进程。但应防止被挂起的进程长时间得不到资源时，而处于资源匮乏的状态。 52 | 2. 进程撤销法。强制撤销一个或一部分进程并剥夺这些进程的资源。撤销的原则可以按进程的优先级和撤销进程代价的高低进行。 53 | 3. 进程回退法。让一个或多个进程回退到足以回避死锁的地步，进程回退时资源释放资源而不是被剥夺。要求系统保持进程的历史信息，设置还原点。 54 | 55 | ## 银行家算法 56 | 57 | 当一个进程申请使用资源的时候，银行家算法通过先**试探分配**给该进程资源，然后通过安全性算法**判断分配后的系统是否处于安全状态**，若不安全则试探分配作废，让该进程继续等待。 58 |  59 | 60 | - 银行家算法中的进程： 61 | 62 | - 包含进程 Pi 的需求资源数量（也是**最大需求资源数量**，MAX） 63 | - **已分配**给该进程的资源 A（Allocation） 64 | - **还需要**的资源数量 N（Need=M-A） 65 | 66 | - Available 为**空闲资源数量**，即资源池（注意：资源池的剩余资源数量+已分配给所有进程的资源数量=系统中的资源总量） 67 | 68 | 假设资源 P1 申请资源，银行家算法先试探的分配给它（当然先要看看当前资源池中的资源数量够不够）。 69 | 若申请的资源数量小于等于 Available，然后接着判断分配给 P1 后剩余的资源，能不能使进程队列的某个进程执行完毕，若没有进程可执行完毕，则系统处于不安全状态（即此时没有一个进程能够完成并释放资源，随时间推移，系统终将处于死锁状态）。 70 | 71 | 若有进程可执行完毕，则假设回收已分配给它的资源（剩余资源数量增加），把这个进程标记为可完成，并继续判断队列中的其它进程，若所有进程都可执行完毕，则系统处于安全状态，并根据可完成进程的分配顺序生成安全序列。 72 | 73 | 如{P0，P3，P2，P1}表示将申请后的剩余资源 Work 先分配给 P0 74 | –> 75 | 回收（Work+已分配给 P0 的 A0=Work） 76 | –> 77 | 分配给 P3–>回收（Work+A3=Work） 78 | –> 79 | 分配给 P2 80 | –> 81 | ······ 82 | 满足所有进程 83 | 84 | 如此就可避免系统存在潜在死锁的风险。 85 | -------------------------------------------------------------------------------- /2-计算机基础/网络/Ajax.md: -------------------------------------------------------------------------------- 1 | # Ajax 2 | 3 | [Ajax | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX) 4 | 5 | AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。 6 | 7 | ### 创建一个简单的 Ajax 8 | 9 | - 创建 XMLHttpRequest 对象 10 | 11 | ```js 12 | if (window.XMLHttpRequest) { 13 | // Mozilla, Safari, IE7+ ... 14 | httpRequest = new XMLHttpRequest(); 15 | } else if (window.ActiveXObject) { 16 | // IE 6 and older 17 | httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 18 | } 19 | ``` 20 | 21 | - 绑定 onreadystatechange 事件 22 | 23 | ```js 24 | httpRequest.onreadystatechange = function () { 25 | // Process the server response here. 26 | }; 27 | ``` 28 | 29 | - 向服务器发送请求 30 | 31 | ```js 32 | httpRequest.open("GET", "http://www.example.org/some.file", true); 33 | httpRequest.send(); 34 | ``` 35 | 36 | 完整的例子 37 | 38 | ```js 39 | function ajax(url, cb) { 40 | let xhr; 41 | if (window.XMLHttpRequest) { 42 | xhr = new XMLHttpRequest(); 43 | } else { 44 | xhr = ActiveXObject("Microsoft.XMLHTTP"); 45 | } 46 | xhr.onreadystatechange = function () { 47 | if (xhr.readyState == 4 && xhr.status == 200) { 48 | cb(xhr.responseText); 49 | } 50 | }; 51 | xhr.open("GET", url, true); 52 | xhr.send(); 53 | } 54 | ``` 55 | 56 | ### httpRequest.readyState 的值 57 | 58 | - 0 (未初始化) or (请求还未初始化) 59 | - 1 (正在加载) or (已建立服务器链接) 60 | - 2 (加载成功) or (请求已接受) 61 | - 3 (交互) or (正在处理请求) 62 | - 4 (完成) or (请求已完成并且响应已准备好) 63 | 64 | ### 访问服务端返回的数据 65 | 66 | - httpRequest.responseText 67 | - 服务器以文本字符的形式返回 68 | - httpRequest.responseXML 69 | - 以 XMLDocument 对象方式返回，之后就可以使用 JavaScript 来处理 70 | 71 | ### GET 注意事项 72 | 73 | - 如果不设置响应头 `Cache-Control: no-cache` 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 [bypassing the cache](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache)) 74 | 75 | ### POST 请求 76 | 77 | POST 请求则需要设置`RequestHeader`告诉后台传递内容的编码方式以及在 send 方法里传入对应的值 78 | 79 | ```js 80 | xhr.open("POST", url, true); 81 | xhr.setRequestHeader(("Content-Type": "application/x-www-form-urlencoded")); 82 | xhr.send("key1=value1&key2=value2"); 83 | ``` 84 | 85 | ### Ajax 与 cookie 86 | 87 | - ajax 会自动带上同源的 cookie，不会带上不同源的 cookie 88 | - 可以通过前端设置 withCredentials 为 true， 后端设置 Header 的方式让 ajax 自动带上不同源的 cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。 89 | 90 | [withCredentials | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials) 91 | 92 | ```js 93 | var xhr = new XMLHttpRequest(); 94 | xhr.open("GET", "http://example.com/", true); 95 | xhr.withCredentials = true; 96 | xhr.send(null); 97 | ``` 98 | -------------------------------------------------------------------------------- /3-编程能力/编程题与分析题/以下代码输出值.md: -------------------------------------------------------------------------------- 1 | ### 对象引用问题 - 1 2 | 3 | ```js 4 | var a = { n: 1 }; 5 | var b = a; 6 | a.x = a = { n: 2 }; 7 | 8 | console.log(a.x); // --> undefined 9 | console.log(b.x); // --> {n: 2} 10 | ``` 11 | 12 | 1. **优先级**。`.`的优先级高于`=`，所以先执行 a.x，堆内存中的{n: 1}就会变成{n: 1, x: undefined}，改变之后相应的 b.x 也变化了，因为指向的是同一个对象。 13 | 2. **赋值操作是从右到左**，所以先执行 a = {n: 2}，a 的引用就被改变了，然后这个返回值又赋值给了 a.x，需要注意的是这时候 a.x 是第一步中的{n: 1, x: undefined}那个对象，其实就是 b.x，相当于 b.x = {n: 2} 14 | 15 | ### 对象引用问题 - 2 16 | 17 | ```js 18 | function changeObjProperty(o) { 19 | o.siteUrl = "http://www.baidu.com"; 20 | o = new Object(); 21 | o.siteUrl = "http://www.google.com"; 22 | } 23 | let webSite = new Object(); 24 | changeObjProperty(webSite); 25 | console.log(webSite.siteUrl); 26 | ``` 27 | 28 | 答案： "http://www.baidu.com" 29 | 原因： o = new Object() 这句代码切断了原本对 o 的引用 30 | 31 | ### ['1', '2', '3'].map(parseInt) 答案是多少？ 32 | 33 | 答案 [1, NaN, NaN] 34 | 35 | map 会给函数传递 3 个参数： (elem, index, array)，当相与： 36 | 37 | ```js 38 | ["1", "2", "3"].map((item, index) => { 39 | return parseInt(item, index); 40 | }); 41 | ``` 42 | 43 | parseInt 接收两个参数(sting, radix)，其中 radix 代表进制。省略 radix 或 radix = 0，则数字将以十进制解析 44 | 45 | 因此，map 遍历 ["1", "2", "3"]，相应 parseInt 接收参数如下 46 | 47 | ```js 48 | parseInt("1", 0); // 1 49 | parseInt("2", 1); // NaN 50 | parseInt("3", 2); // NaN 51 | ``` 52 | 53 | ### 考 Symble 54 | 55 | ```js 56 | // example 1 57 | var a={}, b='123', c=123; 58 | a[b]='b'; 59 | a[c]='c'; 60 | console.log(a[b]); 61 | 62 | --------------------- 63 | // example 2 64 | var a={}, b=Symbol('123'), c=Symbol('123'); 65 | a[b]='b'; 66 | a[c]='c'; 67 | console.log(a[b]); 68 | 69 | --------------------- 70 | // example 3 71 | var a={}, b={key:'123'}, c={key:'456'}; 72 | a[b]='b'; 73 | a[c]='c'; 74 | console.log(a[b]); 75 | ``` 76 | 77 | ```js 78 | // example 1 79 | var a = {}, 80 | b = "123", 81 | c = 123; 82 | a[b] = "b"; 83 | 84 | // c 的键名会被转换成字符串'123'，这里会把 b 覆盖掉。 85 | a[c] = "c"; 86 | 87 | // 输出 c 88 | console.log(a[b]); 89 | // example 2 90 | var a = {}, 91 | b = Symbol("123"), 92 | c = Symbol("123"); 93 | 94 | // b 是 Symbol 类型，不需要转换。 95 | a[b] = "b"; 96 | 97 | // c 是 Symbol 类型，不需要转换。任何一个 Symbol 类型的值都是不相等的，所以不会覆盖掉 b。 98 | a[c] = "c"; 99 | 100 | // 输出 b 101 | console.log(a[b]); 102 | // example 3 103 | var a = {}, 104 | b = { key: "123" }, 105 | c = { key: "456" }; 106 | 107 | // b 不是字符串也不是 Symbol 类型，需要转换成字符串。 108 | // 对象类型会调用 toString 方法转换成字符串 [object Object]。 109 | a[b] = "b"; 110 | 111 | // c 不是字符串也不是 Symbol 类型，需要转换成字符串。 112 | // 对象类型会调用 toString 方法转换成字符串 [object Object]。这里会把 b 覆盖掉。 113 | a[c] = "c"; 114 | 115 | // 输出 c 116 | console.log(a[b]); 117 | ``` 118 | -------------------------------------------------------------------------------- /2-计算机基础/网络/HTTPS.md: -------------------------------------------------------------------------------- 1 | # HTTPS 2 | 3 | http 默认采用 80 作为通讯端口，对于传输采用不加密的方式，https 默认采用 443，对于传输的数据进行加密传输。 4 | 5 | ## 密码学基础 6 | 7 | 明文： 明文指的是未被加密过的原始数据。 8 | 9 | 密文：明文被某种加密算法加密之后，会变成密文，从而确保原始数据的安全。密文也可以被解密，得到原始的明文。 10 | 11 | 密钥：密钥是一种参数，它是在明文转换为密文或将密文转换为明文的算法中输入的参数。密钥分为对称密钥与非对称密钥，分别应用在对称加密和非对称加密上。 12 | 13 | ### 对称加密 14 | 15 | 对称加密又叫做私钥加密，即信息的发送方和接收方使用同一个密钥去加密和解密数据。对称加密的特点是算法公开、加密和解密速度快，适合于对大数据量进行加密，常见的对称加密算法有 DES、3DES、TDEA、Blowfish、RC5 和 IDEA。 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 | 在非对称加密中使用的主要算法有：RSA、Elgamal、Rabin、D-H、ECC（椭圆曲线加密算法）等。 45 | 46 | ## HTTPS 通信过程 47 | 48 | **HTTPS 协议 = HTTP 协议 + SSL/TLS 协议**，在 HTTPS 数据传输的过程中，需要用 SSL/TLS 对数据进行加密和解密，需要用 HTTP 对加密后的数据进行传输，由此可以看出 HTTPS 是由 HTTP 和 SSL/TLS 一起合作完成的。 49 | 50 | **SSL**的全称是 Secure Sockets Layer，即安全套接层协议，是为网络通信提供安全及数据完整性的一种安全协议。SSL 协议在 1994 年被 Netscape 发明，后来各个浏览器均支持 SSL，其最新的版本是 3.0。 51 | 52 | **TLS**的全称是 Transport Layer Security，即安全传输层协议，最新版本的 TLS（Transport Layer Security，传输层安全协议）是 IETF（Internet Engineering Task Force，Internet 工程任务组）制定的一种新的协议，它建立在 SSL 3.0 协议规范之上，是 SSL 3.0 的后续版本。在 TLS 与 SSL3.0 之间存在着显著的差别，主要是它们所支持的加密算法不同，所以 TLS 与 SSL3.0 不能互操作。虽然 TLS 与 SSL3.0 在加密算法上不同，但是在我们理解 HTTPS 的过程中，我们可以把 SSL 和 TLS 看做是同一个协议。 53 | 54 | HTTPS 为了兼顾安全与效率，**同时使用了对称加密和非对称加密**。数据是被对称加密传输的，对称加密过程需要客户端的一个密钥，为了确保能把该密钥安全传输到服务器端，采用非对称加密对该密钥进行加密传输，总的来说，**对数据进行对称加密，对称加密所要使用的密钥通过非对称加密传输**。 55 | 56 |  57 | 58 | HTTPS 在传输的过程中会涉及到三个密钥： 59 | 60 | - 服务器端的公钥和私钥，用来进行非对称加密 61 | - 客户端生成的随机密钥，用来进行对称加密 62 | 63 | 一个 HTTPS 请求实际上包含了两次 HTTP 传输，可以细分为 8 步。 64 | 65 | 1. 客户端向服务器发起 HTTPS 请求，连接到服务器的 443 端口 66 | 2. 服务器端有一个密钥对，即公钥和私钥，是用来进行非对称加密使用的，服务器端保存着私钥，不能将其泄露，公钥可以发送给任何人。 67 | 3. 服务器将自己的公钥发送给客户端。 68 | 4. 客户端收到服务器端的公钥之后，会对公钥进行检查，验证其合法性，如果发现发现公钥有问题，那么 HTTPS 传输就无法继续。严格的说，这里应该是验证服务器发送的数字证书的合法性。如果公钥合格，那么客户端会生成一个随机值，这个随机值就是用于进行对称加密的密钥，我们将该密钥称之为 client key，即客户端密钥，这样在概念上和服务器端的密钥容易进行区分。然后用服务器的公钥对客户端密钥进行非对称加密，这样客户端密钥就变成密文了，至此，HTTPS 中的第一次 HTTP 请求结束。 69 | 5. 客户端会发起 HTTPS 中的第二个 HTTP 请求，将加密之后的客户端密钥发送给服务器。 70 | 6. 服务器接收到客户端发来的密文之后，会用自己的私钥对其进行非对称解密，解密之后的明文就是客户端密钥，然后用客户端密钥对数据进行对称加密，这样数据就变成了密文。 71 | 7. 然后服务器将加密后的密文发送给客户端。 72 | 8. 客户端收到服务器发送来的密文，用客户端密钥对其进行对称解密，得到服务器发送的数据。这样 HTTPS 中的第二个 HTTP 请求结束，整个 HTTPS 传输完成。 73 | 74 | 原文链接：https://www.jianshu.com/p/14cd2c9d2cd2 75 | -------------------------------------------------------------------------------- /5-性能优化/从输入URL到页面加载完成的过程.md: -------------------------------------------------------------------------------- 1 | ### 从输入 URL 到页面加载完成的过程 2 | 3 | [参考链接](https://segmentfault.com/a/1190000006879700) 4 | 5 |  6 | 7 | 1. 在浏览器地址栏输入 URL 8 | 2. 判断是否有永久重定向(301) 9 | 1. 如果有，直接跳转到对应 URL 10 | 3. 浏览器查看资源是否有**强缓存**，有则直接使用，如果是**协商缓存**则需要到服务器进行校验资源是否可用 11 | 1. 检验新鲜通常有两个 HTTP 头进行控制`Expires`和`Cache-Control`： 12 | - HTTP1.0 提供 Expires，值为一个绝对时间表示缓存新鲜日期 13 | - HTTP1.1 增加了 Cache-Control: max-age=,值为以秒为单位的最大新鲜时间 14 | 4. 浏览器**解析 URL**获取协议，主机，端口，path 15 | 5. 浏览器**组装一个 HTTP（GET）请求报文** 16 | 6. **DNS 解析**，查找过程如下： 17 | 1. 浏览器缓存 18 | 2. 本机缓存 19 | 3. hosts 文件 20 | 4. 路由器缓存 21 | 5. ISP DNS 缓存 22 | 6. DNS 查询（递归查询 / 迭代查询） 23 | 7. **端口建立 TCP 链接**，三次握手如下： 24 | 1. 客户端发送一个 TCP 的**SYN=1，Seq=X**的包到服务器端口 25 | 2. 服务器发回**SYN=1， ACK=X+1， Seq=Y**的响应包 26 | 3. 客户端发送**ACK=Y+1， Seq=Z** 27 | 8. TCP 链接建立后**发送 HTTP 请求** 28 | 9. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用 HTTP Host 头部判断请求的服务程序 29 | 10. 服务器检查**HTTP 请求头是否包含缓存验证信息**如果验证缓存新鲜，返回**304**等对应状态码 30 | 11. 处理程序读取完整请求并准备 HTTP 响应，可能需要查询数据库等操作 31 | 12. 服务器将**响应报文通过 TCP 连接发送回浏览器** 32 | 13. 浏览器接收 HTTP 响应，然后根据情况选择**关闭 TCP 连接或者保留重用，关闭 TCP 连接的四次挥手如下**： 33 | 1. 主动方发送**Fin=1， Ack=Z， Seq= X**报文 34 | 2. 被动方发送**ACK=X+1， Seq=Z**报文 35 | 3. 被动方发送**Fin=1， ACK=X， Seq=Y**报文 36 | 4. 主动方发送**ACK=Y， Seq=X**报文 37 | 14. 浏览器检查响应状态吗：是否为 1XX，3XX， 4XX， 5XX，这些情况处理与 2XX 不同 38 | 15. 如果资源可缓存，**进行缓存** 39 | 16. 对响应进行**解码**（例如 gzip 压缩） 40 | 17. 根据资源类型决定如何处理（假设资源为 HTML 文档） 41 | 18. **解析 HTML 文档，构件 DOM 树，下载资源，构造 CSSOM 树，执行 js 脚本**，这些操作没有严格的先后顺序，以下分别解释 42 | 19. **构建 DOM 树**： 43 | 1. **Tokenizing**：根据 HTML 规范将字符流解析为标记 44 | 2. **Lexing**：词法分析将标记转换为对象并定义属性和规则 45 | 3. **DOM construction**：根据 HTML 标记关系将对象组成 DOM 树 46 | 20. 解析过程中遇到图片、样式表、js 文件，**启动下载** 47 | 21. 构建**CSSOM 树**： 48 | 1. **Tokenizing**：字符流转换为标记流 49 | 2. **Node**：根据标记创建节点 50 | 3. **CSSOM**：节点创建 CSSOM 树 51 | 22. **[根据 DOM 树和 CSSOM 树构建渲染树](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)**: 52 | 1. 从 DOM 树的根节点遍历所有**可见节点**，不可见节点包括：1）`script`,`meta`这样本身不可见的标签。2)被 css 隐藏的节点，如`display: none` 53 | 2. 对每一个可见节点，找到恰当的 CSSOM 规则并应用 54 | 3. 发布可视节点的内容和计算样式 55 | 23. **js 解析如下**： 56 | 1. 浏览器创建 Document 对象并解析 HTML，将解析到的元素和文本节点添加到文档中，此时**document.readystate 为 loading** 57 | 2. HTML 解析器遇到**没有 async 和 defer 的 script 时**，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用 document.write()把文本插入到输入流中。**同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作 script 和他们之前的文档内容** 58 | 3. 当解析器遇到设置了**async**属性的 script 时，开始下载脚本并继续解析文档。脚本会在它**下载完成后尽快执行**，但是**解析器不会停下来等它下载**。异步脚本**禁止使用 document.write()**，它们可以访问自己 script 和之前的文档元素 59 | 4. 当文档完成解析，document.readState 变成 interactive 60 | 5. 所有**defer**脚本会**按照在文档出现的顺序执行**，延迟脚本**能访问完整文档树**，禁止使用 document.write() 61 | 6. 浏览器**在 Document 对象上触发 DOMContentLoaded 事件** 62 | 7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些**内容完成载入并且所有异步脚本完成载入和执行**，document.readState 变为 complete,window 触发 load 事件 63 | 24. **显示页面**（HTML 解析过程中会逐步显示页面） 64 | -------------------------------------------------------------------------------- /0-前端基础/CSS/动画/README.md: -------------------------------------------------------------------------------- 1 | # CSS 动画 2 | 3 | - 位置 - 平移 4 | - 方向 - 旋转 5 | - 大小 - 缩放 6 | - 透明度 7 | - 其他 - 线形变换 8 | 9 | ### 前端动画怎么做 10 | 11 | - animation 过渡动画 12 | - transition 过渡动画 13 | - JS 原生控制 DOM 位置 14 | - canvas 绘制动画 15 | 16 | ### transition 过渡动画 17 | 18 | 用来控制过渡的时间，使用过渡的属性，过渡效果曲线，过渡的延时 19 | 20 | 要求元素的状态必须有变化，即某 CSS 值变化时发生的动画 21 | 22 | - transition-property 23 | - 规定设置过渡效果的 CSS 属性的名称。 24 | - transition-duration 25 | - 规定完成过渡效果需要多少秒或毫秒。 26 | - transition-timing-function 27 | - 规定速度效果的速度曲线。 28 | - transition-delay 29 | - 定义过渡效果何时开始 30 | 31 | 在 chrome 的调试窗口按下 esc 在下面出现一个框框，选择 animation 就可以看到动画面板了 32 | 33 | ```css 34 | div { 35 | width: 100px; 36 | height: 100px; 37 | background: blue; 38 | transition: width 2s, background 1s; 39 | } 40 | div:hover { 41 | background: orange; 42 | width: 300px; 43 | } 44 | ``` 45 | 46 | ### transition-timing-function 47 | 48 | - ease 慢速开始，然后变快，然后慢速结束 49 | - ease-in 慢速开始 50 | - ease-out 慢结束 51 | - ease-in-out 52 | - linear 53 | - cubic-bezier(a,b,c,d) 54 | 55 | bezier 曲线在线效果网址 [cubic-bezier.com](http://cubic-bezier.com) 56 | 57 | ### animation 关键帧动画 58 | 59 | 相当于多个补间动画组合到一起 60 | 61 | 与 transition 不同的是，他可以让元素自己动，而不要求某值的改变来触发动画 62 | 63 | `animation: name duration timing-function delay iteration-count direction;` 64 | 65 | - animation-name 66 | - 规定需要绑定到选择器的 keyframe 名称。 67 | - animation-duration 68 | - 规定完成动画所花费的时间，以秒或毫秒计 69 | - animation-timing-function 70 | - 动画的速度曲线 71 | - animation-delay 72 | - 动画开始之前的延迟 73 | - animation-iteration-count 74 | - n | infinit 75 | - 动画应该播放的次数 76 | - animation-direction 77 | - normal | alternate 78 | - 是否应该轮流反向播放动画 79 | - animation-play-state 80 | - 可用于暂停动画 81 | - animation-fill-mode 82 | - forwards 动画停了就保持最后的那个状态 83 | - backwards 动画停了还得反着做一遍回去 84 | - 在动画执行之前和之后如何给动画的目标应用样式。 85 | 86 | ```css 87 | #one { 88 | width: 50px; 89 | height: 50px; 90 | background-color: orange; 91 | animation: run; 92 | animation-delay: 0.5s; 93 | animation-duration: 2s; 94 | animation-fill-mode: forwards; 95 | } 96 | @keyframes run { 97 | 0% { 98 | width: 100px; 99 | } 100 | 50% { 101 | width: 400px; 102 | background-color: blue; 103 | } 104 | 100% { 105 | width: 800px; 106 | } 107 | } 108 | ``` 109 | 110 | ### 逐帧动画 111 | 112 | 关键帧之间是有补间的，会选一个效果过渡过去，而逐帧动画则是每个 keyframe 之间没有过渡，直接切换过去 113 | 参考[猎豹奔跑](./animal.html) 114 | 关键是使用下面这行 CSS 115 | `animation-timing-function: steps(1);` 116 | 这个 step 是指定关键帧之间需要有几个画面 117 | 118 | ### 过渡动画和关键帧动画的区别 119 | 120 | - 过渡动画需要有状态变化 121 | - 关键帧动画不需要状态变化 122 | - 关键帧动画能控制更精细 123 | 124 | ### CSS 动画的性能 125 | 126 | - CSS 动画不差 127 | - 部分情况下优于 JS 128 | - JS 可以做到更精细 129 | - 含高危属性，会让性能变差 (如 box-shadow) 130 | 131 | ### display 属性 132 | 133 | 当改变元素 display 属性时，过渡属性 transition 失效。 134 | 135 | 原因： 136 | display:none 的时候，页面文档流中将不会存在该元素。transition 无法对一个从有到无的元素产生过渡效果。 137 | 138 | 解决方法： 139 | 140 | 1. 改变元素的宽/高为 0px,达到隐藏的目的。 141 | 2. 使用 visibility 替代 display。 142 | 3. react 使用 react-transition-group 实现 143 | -------------------------------------------------------------------------------- /0-前端基础/CSS/CSS选择器.md: -------------------------------------------------------------------------------- 1 | ### CSS 选择器分类 2 | 3 | - 标签选择 4 | - id 选择器 5 | - class 选择器 6 | - 后代选择 （div a） 7 | - 子代选择 （div > p） 8 | - 相邻选择 （div + p） 9 | - 通配符选择 （\*） 10 | - 否定选择器 :not(.link){} 11 | - 属性选择器 12 | - 伪类选择器 13 | - 伪元素选择器 ::before{} 14 | 15 | ### CSS3 属性选择器 16 | 17 | | 选择器 | 描述 | 18 | | ------------------- | ------------------------------------------------------------ | 19 | | [attribute] | 用于选取带有指定属性的元素。 | 20 | | [attribute=value] | 用于选取带有指定属性和值的元素。 | 21 | | [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 | 22 | | [attribute\|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 | 23 | | [attribute^=value] | 匹配属性值以指定值开头的每个元素。 | 24 | | [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 | 25 | | [attribute*=value] | 匹配属性值中包含指定值的每个元素。 | 26 | 27 | ### CSS3 伪类选择器 28 | 29 | [伪类 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes#%E6%A0%87%E5%87%86%E4%BC%AA%E7%B1%BB%E7%B4%A2%E5%BC%95) 30 | 常用： 31 | 32 | - :hover 33 | - :focus 34 | - :after 在元素之前添加内容,也可以用来做清除浮动。 35 | - :before 在元素之后添加内容 36 | - :enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。 37 | - :disabled 控制表单控件的禁用状态。 38 | - :checked 单选框或复选框被选中 39 | - ::selection 用户选中的区域 40 | - :empty 一般用来隐藏内部什么都没有的元素 41 | - :not(selecter) 42 | - 43 | - p:first-of-type 44 | - p:last-of-type 45 | - p:only-of-type 46 | - p:nth-of-type(n) 47 | - p:nth-last-of-type(n) 48 | - 49 | - :nth-child(n) 50 | - :nth-last-child(n) 51 | - p:only-child 52 | 53 | ### 伪类和伪元素区别 54 | 55 | - 伪类值一种状态 比如:hover 56 | - 伪元素是一个真实存在的元素，他可以有样式有内容 57 | 58 | ### iconfont 原理 59 | 60 | - 利用编码让图标编为一个字符 61 | - 引入字体 62 | - 利用 before 伪元素向页面中插入一个文字 63 | 64 | ### css 定义的权重 65 | 66 | - !important 优先级最高，但也会被权重高的 important 所覆盖 67 | - 行内样式总会覆盖外部样式表的任何样式(除了!important) 68 | - 单独使用一个选择器的时候，不能跨等级使 css 规则生效 69 | - 如果两个权重不同的选择器作用在同一元素上，权重值高的 css 规则生效 70 | - 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则 71 | - 权重相同时，与元素距离近的选择器生 72 | 73 | 一句话总结： 74 | !important > 行内样式 > ID 选择器 > (类选择器 | 属性选择器 | 伪类选择器 ) > 元素选择器 > \* 75 |  76 | 77 | ### 浏览器解析 CSS 78 | 79 | `.wrapper div > p` CSS 中，浏览器查找元素是通过选择权从后往前找的， 这样做的目的是加快 CSS 解析速度，从后往前，排除法 80 | 81 | [浏览器解析 css 选择器的规则](https://blog.csdn.net/qq_21397815/article/details/72874932) 82 | 83 | ### 怎样美化一个 checkbox ? 84 | 85 | - 让原本的勾选框隐藏 86 | - `input + label` 背景图没选中 87 | - `input:checked + label` 背景图选中 88 | 89 | ```css 90 | .checkbox input { 91 | display: none; 92 | } 93 | .checkbox input + label { 94 | background: url(./没选中.png) left center no-repeat; 95 | background-size: 20px 20px; 96 | padding-left: 20px; 97 | } 98 | .checkbox input:checked + label { 99 | background-image: url(./选中.png); 100 | } 101 | ``` 102 | 103 | ```html 104 |
105 |
106 |
107 |
108 | ```
109 |
--------------------------------------------------------------------------------
/3-编程能力/编程题与分析题/异步编程.md:
--------------------------------------------------------------------------------
1 | ### promise 与 setTimeout 判断执行顺序
2 |
3 | promise 和 setTimeout 都会将事件放入异步队列，但 setTimeout 即便是写 0，也会有 4ms 的延迟
4 |
5 | ```js
6 | console.log("begin");
7 |
8 | setTimeout(() => {
9 | console.log("setTimeout 1");
10 |
11 | Promise.resolve()
12 | .then(() => {
13 | console.log("promise 1");
14 | setTimeout(() => {
15 | console.log("setTimeout2");
16 | });
17 | })
18 | .then(() => {
19 | console.log("promise 2");
20 | });
21 |
22 | new Promise((resolve) => {
23 | console.log("a");
24 | resolve();
25 | }).then(() => {
26 | console.log("b");
27 | });
28 | }, 0);
29 | console.log("end");
30 | ```
31 |
32 | 答案
33 |
34 | ```
35 | begin
36 | end
37 | setTimeout 1
38 | a
39 | promise 1
40 | b
41 | promise 2
42 | setTimeout2
43 | ```
44 |
45 | ### async 函数的使用
46 |
47 | ```js
48 | function repeat(func, times, wait) {}
49 | // 输入
50 | const repeatFunc = repeat(alert, 4, 3000);
51 |
52 | // 输出
53 | // 会alert4次 helloworld, 每次间隔3秒
54 | repeatFunc("hellworld");
55 | // 会alert4次 worldhellp, 每次间隔3秒
56 | repeatFunc("worldhello");
57 | ```
58 |
59 | 我自己的实现，没有成功。这种实现是 setTimeout 新建了两个，然而只清理了一个。
60 |
61 | ```js
62 | function repeat(func, times, wait) {
63 | var timer = null;
64 | var count = 0;
65 | return function (...args) {
66 | timer = setInterval(function () {
67 | func.apply(null, args);
68 | count++;
69 | console.log("count", count, "times", times);
70 | if (count >= times) {
71 | clearInterval(timer);
72 | }
73 | }, wait);
74 | };
75 | }
76 | // 输入
77 | const repeatFunc = repeat(console.log, 4, 3000);
78 | // 输出
79 | // 会alert4次 helloworld, 每次间隔3秒
80 | repeatFunc("hellworld");
81 | // 会alert4次 worldhellp, 每次间隔3秒
82 | repeatFunc("worldhello");
83 | ```
84 |
85 | 正确解法：使用 async/await 来实现
86 |
87 | ```js
88 | async function wait(seconds) {
89 | return new Promise((res) => {
90 | setTimeout(res, seconds);
91 | });
92 | }
93 |
94 | function repeat(func, times, s) {
95 | return async function (...args) {
96 | for (let i = 0; i < times; i++) {
97 | func.apply(null, args);
98 | await wait(s);
99 | }
100 | };
101 | }
102 |
103 | let log = console.log;
104 | let repeatFunc = repeat(log, 4, 3000);
105 | repeatFunc("HelloWorld");
106 | repeatFunc("WorldHello");
107 | ```
108 |
109 | ### async 执行练习
110 |
111 | - await 后面的才是异步的，之前都是同步的
112 |
113 | ```js
114 | async function async1() {
115 | console.log("async1 start"); // 2
116 | await async2();
117 | console.log("async1 end"); // 6
118 | }
119 |
120 | async function async2() {
121 | console.log("async2"); // 3
122 | }
123 |
124 | console.log("script start"); // 1
125 |
126 | setTimeout(function () {
127 | console.log("setTimeout"); // 8
128 | }, 0);
129 |
130 | async1();
131 |
132 | new Promise(function (resolve) {
133 | console.log("promise1"); // 4
134 | resolve();
135 | }).then(function () {
136 | console.log("promise2"); // 7
137 | });
138 |
139 | console.log("script end"); // 5
140 | ```
141 |
--------------------------------------------------------------------------------
/1-前端框架与库/TypeScript/装饰器.md:
--------------------------------------------------------------------------------
1 | # 装饰器
2 |
3 | 装饰器函数(Decorator)用于给对象在运行期间动态的增加某个功能，职责等，装饰器本身是一个函数。
4 |
5 | ## 类装饰器
6 |
7 | 类装饰器接受的参数是构造函数。通过下面的方法可以让装饰后的类获取到装饰器中定义的方法，否则无此方法提示。
8 |
9 | ```ts
10 | function testDecorator() {
11 | return function {battery}
; 36 | } 37 | } 38 | ``` 39 | 40 | ## demo 41 | 42 | ```jsx 43 | import React, { Component, createContext } from "react"; 44 | 45 | // Battery 电池 46 | const BatteryContext = createContext(); 47 | const OnlineContext = createContext(); 48 | 49 | function Extra() { 50 | return ( 51 |
54 | 测试已经 consumer 过的属性是否还能继续使用 Online: {String(online)}
55 |
56 | )}
57 | {battery}
; 66 | } 67 | } 68 | 69 | function Leaf() { 70 | return ( 71 |
74 |
75 | {(online) => (
76 |
85 |
86 | )}
87 |
77 |
83 | )}
84 | 78 | Battery: {battery}, Online: {String(online)} 79 |
80 |
53 | 选择文件：
54 |
55 |
56 | ```
57 |
58 | JS 代码
59 |
60 | ```javascript
61 | // 逐字节比对工具函数
62 | function check(headers) {
63 | return (buffers, options = { offset: 0 }) =>
64 | headers.every(
65 | (header, index) => header === buffers[options.offset + index]
66 | );
67 | }
68 | // 检测 PNG 函数
69 | const isPNG = check([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
70 |
71 |
72 | const realFileElement = document.querySelector("#realFileType");
73 |
74 | async function handleChange(event) {
75 | const file = event.target.files[0];
76 | const buffers = await readBuffer(file, 0, 8);
77 | const uint8Array = new Uint8Array(buffers);
78 | realFileElement.innerText = `${file.name}文件的类型是：${
79 | isPNG(uint8Array) ? "image/png" : file.type
80 | }`;
81 | }
82 | ```
83 |
84 | 检测 JEPG 类型 `isJPEG` 函数：
85 |
86 | ```javascript
87 | const isJPEG = check([0xff, 0xd8, 0xff])
88 | ```
89 |
90 | 检测 PDF 类型
91 |
92 | PDF 文件的头 4 个字节的是 **0x25 50 44 46**，对应的字符串是 **%PDF**。为了让用户能更直观地辨别出检测的类型，可定义了一个 `stringToBytes` 函数：
93 |
94 | ```javascript
95 | function stringToBytes(string) {
96 | return [...string].map((character) => character.charCodeAt(0));
97 | }
98 | ```
99 |
100 | 基于 `stringToBytes` 函数，我们就可以很容易的定义一个 `isPDF` 函数，具体如下所示：
101 |
102 | ```javascript
103 | const isPDF = check(stringToBytes("%PDF"));
104 | ```
105 |
106 |
--------------------------------------------------------------------------------