关于前端:2022前端开发知识总结归纳

原文链接目录查看

根本类型 ——number、string、undefind、boolean、null;
援用类型——Object;
目前根本类型中增加了一个新成员：symbol;
根本类型和援用类型区别：前者按值拜访，因而为咱们操作的就是存储在变量中的理论值；后者不能间接操作对象所在的内存空间，在操作对象时，实际操作的是该对象的援用。
根本类型存储在 栈中；援用类型的‘变量’名称存储在 栈中，同时存储指针，该指针指向 堆中的实在的值；（栈 、 堆概念能够间接搜寻 “js 中栈和堆的概念和区别 ”）
参考书：犀牛书

箭头函数：this 继承包裹箭头函数的第一个一般函数中的 this；
一般函数：new（this 指向新对象）——bind/apply/call（this 是强制指向的 this）——this 指向函数上下文对象——this 指向 window；
参考文章：https://juejin.cn/post/6844903941021384711
参考书：红宝书

一个函数援用另外一个函数外部变量就会造成闭包，闭包在平时开发中十分的多见；了解作用域链创立和应用的细节对了解闭包十分重要；
参考文章：https://juejin.cn/post/6844903747957719053
参考书：红宝书

每个对象被创立开始，就与另一个对象关联，从另一个对象上继承其属性，这里的另一个对象就是原型；
原型存在的意义就是组成原型链。当范文一个对象属性时，先从对象自身找，找不到就去对象原型上找，如果还找不到，就去对象原型的原型上找，如此类推，直到找到为止；这条由对象及原型组成的查找链条就是原型链；
参考文章：https://juejin.cn/post/6844903936365690894
参考书：红宝书

组合继承：通过 call批改子类 this，将子类原型指向 new 父类();
寄生组合继承：通过 call 批改子类 this，将子类原型指向父类原型（Object.create(父类.prototype)）, 并将子类原型构造函数指向子类；
参考书：红宝书

模块化特点：复用性、可维护性；
commonJs最早作为规范在 NodeJs 中引入，作为 NodeJs 模块化规范；在 commonJs 中，require首次加载就会执行整个脚本，在内存中生成一个对象缓存下来，下次加载时可间接从缓存获取；
对于循环加载，只输入已执行的局部。还未执行局部不输入；
最新 ES6 的 ES Module，是动态加载；脚本被加载时，成为一个指向被加载模块的援用，不会缓存；

区别：并发是两个或多个事件在同一时间距离内产生；并行是指两个或多个事件在同一时刻内产生；
并行通过晋升硬件能力，只须要多核 CPU 即可达到；
并发中最常听到的就是高并发，在肯定工夫，服务器的吞吐量和 QPS 每秒响应申请数都是肯定的。而在这样的状况下，要解决高并发的问题，最简略当然是晋升机器性能，加内存，加硬盘，降级网速。当然，通过架构层面设计，也能够做点货色，部署多台机器，增加负载平衡层，将申请平均；将数据库分库分表并读写拆散；引入消息中间件等；缓存集群引入；

回调函数：在浏览器端，异步问题就是 Ajax 网络申请响应异步，而回调函数能够肯定水平解决这个响应异步的问题，毛病是：不易保护、不易读、不能间接 return；

Generator：封装多个外部状态的异步解决方案，生成器函数；会返回一个迭代器，配合 next()函数，能够管制开始、暂停和复原代码；
场景：控制流治理、异步操作；

Promise：解决异步操作计划，蕴含异步操作后果的对象；外部存在三种状态，一旦开始不可更改状态；问题：无奈勾销，谬误须要回调捕捉；Promise 是链式调用，每次调用 then 之后返回一个 Promise，并且是一个全新的 Promise；
Promise 实现根据 Promise/A+ 标准——
三种状态：pedding、fulfilled、rejected；
（Promise 封装的 Ajax 为例子）进行异步解决流：执行 Promise 回调函数，因为异步操作，外部状态未变动。继续执行 then 回调，外部状态未变动，回调队列中 then 回调临时不执行。此时，异步执行实现（网络申请响应），状态变动，Promise 外部调用 resolve 函数，回调队列执行；
async/await：异步解决方案，须要配套应用；函数增加 async 后，函数会返回一个 Promise；await 外部实现了Generator，await 是异步操作，起初的表达式不返回 Promise 的话，就会包装成 Promise.resolve(返回值)，而后去执行函数外的同步代码；

一个事件循环又一个货多个工作队列；一个工作队列是一组工作；

1. 每个事件循环是一个正在运行的工作，它能够是一个工作或 null；2. 每个事件循环具备 microtask 队列（微工作队列），最后为空；3. 每个事件循环都有一个执行微工作检查点的布尔值，该布尔值最后为 false；

浏览器事件循环执行程序：

首先执行 script 脚本同步代码，属于宏工作；

当执行完以后所有同步工作后，执行栈为空，查问是否有异步工作代码须要执行；

执行以后宏工作下的所有微工作；

微工作执行完之后，如有必要会渲染页面；

而后开始下一轮事件循环；

宏工作：script、setTimeout、setInterval、setImmediate、I/O、UI Render；
微工作：process.nextTick、promise、MutationObsever；

Nodejs 和浏览器端，宏工作和微工作交替执行，调用程序基本相同。Nodejs 执行会进行阶段辨别，分为 6 个阶段：参考：Node.js 事件循环文档，每进入某个阶段，会从回调队列中取出函数执行。当队列为空或回调函数达到零碎设定阈值，就进入下一个阶段。

能够把 ajax 异步回调作为浏览器端的最后的异步解决方案，异步回调 ———> Promise 实例 ——> Generator ——> async/await，大抵是一个这样的线，咱们须要关注的可能次要就是 Promise 和 async/await 的计划。

Promise 是异步解决方案，蕴含异步操作后果的对象，特点：外部存在三种状态，状态一旦变动不可更改状态；Promise 是链式调用，每次调用 then 回调函数都会返回一个新的 Promise，并且是一个全新的 Promise；
Promise 异步解决流：执行 Promise 实例回调函数，因为异步申请或者操作，此时状态未变动。继续执行 then 回调，因为状态未变动回调会被放入回调数组中。直到 Promise 实例中异步申请或者操作实现，状态发生变化，调用 resolve 函数，回调数组遍历执行，then 回调函数拿到相干数据。

参考：
Promise 原理解析
图解 Promise 流程

浏览器是多过程利用，每关上一个 Tab 页，就相当于创立了一个独立的浏览器过程。浏览器过程有：Browser 过程(主过程)、插件过程、GPU 过程、渲染过程(浏览器内核)。主过程只有一个是负责协调利用，同时默认每个 Tab 页面一个渲染过程，互不影响。咱们常说的 Js 线程、GUI 渲染线程就蕴含在渲染过程之中，还包含异步 http 申请线程、事件触发线程等。

1. DNS 服务查问域名对应的指标服务 IP 地址；2. 依据指标 IP 地址查找到指标服务器，并建设 TCP 连贯；3. 服务器响应返回数据或文本信息等；4. 客户端获取到数据之后进行页面渲染；

1. 申请 html 文件解决 html 标记构建 DOM 树；2. 申请 css 文件解决 css 标记构建 CSSOM 树；3. 将 DOM 和 CSSOM 合并成一个渲染树；4. 依据渲染树布局，以计算每个节点的几何信息；5. 将各节点绘制在屏幕上；

存在阻塞的 css 资源时，浏览器会提早 JS 的执行和 DOM 的构建；

重绘 是当节点须要更改外观而不影响布局；回流 是布局或几何属性须要扭转；
参考：渲染性能
参考：
从浏览器多过程到 JS 单线程
你不晓得的浏览器页面渲染机制

对于 TCP 和 UDP 的介绍、TCP 的三次握手和四次挥手就不细说，相干文章能够参考：[传输层协定 TCP 和 UDP
](https://juejin.cn/post/684490…)，TCP 三次握手和四次挥手；
http 协定是罕用的网络传输协定，全称是超文本传输协定，它规定了 http 申请和响应的具体构造，当然还蕴含其余货色，例如：缓存、文件类型、参数、申请类型、状态等。它是建设在传输层 TCP 协定之上的，TCP 握手胜利之后，才能够进行网络数据传输。

http 是 TCP/IP 协定应用层协定，次要负责数据或文本图片等内容的传输，它是建设在传输层 TCP 协定之上的。http 分为申请报文和响应报文，从 Web 客户端发往 Web 服务器的 HTTP 报文称为申请报文（request message）。从服务器发往客户端的报文称为响应报文，报文分为：起始行、首部字段、主体等；

http 和 https 从字面的区别就是一个 s，这个 s 就是 SSL/TCL 加密协议。说到加密协议就绕不开加密技术，在 SSL/TCL 加密协议中既有用到非对称加密，也有用到对称加密。SSL/TCL 加密协议相当于是在应用层和传输层之间加了一层，可称为加密层。
大抵流程：客户端向服务器端索要加密证书获取公钥等证书信息；单方协商生成 ” 对话密钥 ”；单方采纳 ” 对话密钥 ” 进行加密通信。非对称加密保障 ” 对话密钥 ” 的平安传输，对称加密保障客户端和服务端对数据的加解密。

如果须要开启强缓存和协商缓存，可在服务端 nginx web 服务器进行对应的配置，开启对应的网络缓存。其余服务端 web 服务器也可配置。(配置细节网上一大堆)

强缓存 ：Cache-Control，罕用属性有 max-age、no-cache、no-store 等。max-age 示意绝对工夫内的缓存，在这个绝对工夫内不会再去申请对应资源；no-cache 示意不意味着不缓存，它的意思是在应用缓存资源之前，它必须通过服务器的查看；
no-store 示意不缓存。
协商缓存 ：Last-modified 和 ETag，这两个相似，能够了解为文件标识。也能够将 ETag（你抉择的版本 ID）或者 Last-modified 日期增加到响应首部中。客户端下次获取资源时，他会别离通过 If-None-Match（与 ETage 对应）和 If-Modified-Since（与 Last-Mofied 对应）两个申请首部将值发送给服务器。如果服务器发现两次值都是对等的，就是返回一个 HTTP 304。它们之间的区别：ETag 只有资源变动，它就会扭转；Last-modified 不辨认秒单位里的批改。
如何应用—————前端中保障 HTML 资源是最新的，设置如：max-age=300、ETag、Last-modified，当然也可思考应用 no-cache、ETag、Last-modified 配合。而 CSS 和 JS 找资源曾经被注入到 HTML 中，资源文件地址通常应用哈希值退出文件名中保障资源是最新，css 和 js 文件可设置：max-age=31536000 或 last-modified 配合应用。

http2.0 基于二进制分帧层，http2.0 能够在共享 TCP 连贯的根底上同时发送申请和响应。在 http1.x 中，是通过文本的形式传输数据，基于文本的形式传输数据存在很多缺点，文本的表现形式有多样性，因而要做到健壮性思考的场景必然有很多，然而二进制则不同，只有 0 和 1 的组合，因而抉择了二进制传输，实现不便且强壮。
为了保障 http 不受影响，那就须要在应用层（HTTP2.0）和传输层（TCP or UDP）之间减少一个二进制分帧层。在二进制分帧层上，http2.0 会将所有传输的信息分为更小的音讯和帧，并采纳二进制格局编码，其中 http1.x 的首部信息会被封装到 Headers 帧，而 Request Body 则封装到 Data 帧。在传输中会共用一个 TCP 流（TCP 连贯中的一个虚构通道，能够承载双向的音讯），不至于反复连贯。

参考：
书籍：HTTP 权威指南
SSL/TLS 协定运行机制的概述

前端框架目前市面支流就是 React 和 Vue，对于框架的应用和学习，后期倡议多翻翻文档，中期依据本人在应用过程中遇到的问题学习，前期就能够思考翻源码了。因为工作起因，我对 react 理解更多，所以分享次要就是 React。
React 和 Vue 作为前端框架在实质上做的是雷同的事，在浏览器和开发操作之间加了一个中间层，来进我的项目的辅助治理和开发。

JSX是类 HTML 的语法结构，本质是 JS 的语法扩张。它语法结构简洁，通俗易懂，对于研发效率和体验有大的晋升。

JSX通过 babel 语法转换之后，理论就是通过 React.createElement 函数来创立 React 元素。createElement接管三个参数 type 类型，config配置，children子元素。通过 createElement 就可创立出虚构 DOM 对象。

去掉 ComponentWillMount 和CompoentWillReceiveProps
降级为getDeicvedStateFromProps，保障生命周期更加繁多，更可控；去掉 ComponentWillUpdate 新增 getSnapshotDeforeUpdate；

React16+ 引入 Fiber 架构，Fiber会将一个大的更新工作拆解为多个小工作，而且它是可停止，可复原的。React16+ 生命周期被划分为 render 和commit两个阶段。render阶段在执行过程中容许被打断，而 commit 阶段操作波及实在 DOM 渲染，是不可打断的。
ComponentWillMount、
ComponentWillUpdate、
ComponentWillReceiveProps
这些生命周期，它们都处于 render 阶段，而在 Fiber 架构中，render阶段会被打断，反复被执行。在这些生命周期可能习惯做的事件可能有：setState、异步申请、操作实在 DOM 等。而在 Fiber 异步渲染管制下，这些生命周期可能会导致十分重大的 bug（例如在这些废除的生命周期中调用领取接口）。

react 是自上而下的单向组件数据流

1. 父 - 子组件通过 prop 属性传递数据，子 - 父组件可通过函数；2. 兄弟组件共享同一个父组件，达到兄弟组件通信；3.Context API 实现全局通信；（目前还没试过）4.redux 数据状态容，进行可预测的状态治理；5. 公布 / 订阅模式实现任意组件通信；

绝对于 Class 组件，函数组件更加轻量，更加合乎 UI=render(data)特点。同时在 Fiber 架构的加持下，Hooks 的实现不是问题。配合函数组件的倒退，Hooks 应运而生，从而是函数组件真正把数据和渲染绑定到一起。当然 Hooks 也还是存在局部有余：局部周期不存在；不能很好的消化“简单”，组件的拆分和组织是一个大的挑战，不易把握。

Hooks 实质是链表。例如应用 useText、useState 创立 state 时，hook 创立的 state 会以单链表模式保留，更新时，函数组件从新调用，hooks 会顺次遍历单链表，读取数据并更新，这一过程齐全依照创立时的程序来的。因而当更新时，地位一旦扭转，执行程序被替换，运行就会呈现 bug。

和谐指的是虚构 DOM 映射到实在 DOM 的过程。和谐过程并不能喝 diff 画等号。和谐是“使统一”的过程，而 diff 是“找不同”的过程，它只是“使统一”过程中的一个环节。(当然常说的和谐相干问题多半就是 diff 过程的)

1. 因为工夫付扎渡的起因，diff 过程只针对同层的节点作比拟；2. 对于同类型的组件，才有进一步比照的必要性；3. 对于列表组件，通过 key 属性来维持节点的稳定性，防止总是生产新节点；

非并发 (concurrent) 模式：setState会呈现异步和同步的景象。在生命周期和合成事件中是同步，而在 setTimeout、setInterval、DOM 原生函数等函数中是同步的。那么这是为什么尼？在合成事件或生命周期执行时，批量更新的工作锁就被开启了，咱们所做的 setState 操作会被放入到批量更新队列中，直到函数执行完，批量更新的工作锁才会被敞开。批量更新的工作锁是一个同步操作，而一旦你在 setTimeout 函数应用 setState，此时 setTimeout 函数回调会被放入下一个宏工作执行，而当 setState 执行时，批量更新的工作锁时敞开的，它就不会放入到批量更新队列中，而是间接执行。

并发 (concurrent) 模式：setState不会呈现异步和同步的景象。因为存在工夫切片，只有以后工夫片没有完结，仍旧能够将多个 setState 合并成一个，即便是在 setTimeout 中被调用。而对于超过以后工夫片的操作，会通过 MessageChannel 放入到下一个宏工作中继续执行。（MessageChannel接管音讯的机会比 Promise 所在的 microTask 要晚，然而早于 setTimeout）

浏览器中 Js 线程和渲染线程是互斥的。这两个线程不能交叉执行，必须串行。而当 Js 线程长时间占用主线程，那么渲染线程的更新就不得不长时间的期待，这时就会导致页面卡顿。
Stack Reconciler栈和谐是一个同步递归过程，虚构 DOM 树 diff 算法遍历是深度优先遍历。因为它是同步的，不可在被打断。当解决结构复杂，体量宏大的虚构 DOM 树时，Stack Reconciler工夫会很长，认为这 Js 主线程长时间占用主线程，进而导致上述中说道的渲染卡顿 / 页面卡死。

特点：可中断、可复原、存在优先级。

 Scheduler ————> Reconciler ————> Renderer
 更新优先级         找不同         渲染不同

在 Fiber 架构模式下，每个更新工作会被赋予一个优先级。当然有工作 A 进入调度器，这个工作优先级更高，而 Reconciler 中已有工作 B 在执行，那么，Reconciler会将工作 B 终止，更高优先级的工作 A 被推入Reconciler。当 A 工作实现之后，新一轮调度会将之前中断的工作 B 从新推入Reconciler，持续它的渲染之旅。

render 开始 ——————> (工作单元 | 工作单元 | 工作单元) ——————> commit 提交渲染

初始化阶段：会创立 root 对象这个对象挂载 _internalRoot 属性，而 _internalRoot 也就是 FiberRoot。FiberRoot 的实质是一个 FiberRootNode 对象，其中蕴含 current 属性，current 对象是一个 FiberNode 实例。current 对象就是一个 Fiber 节点，并是 Fiber 树的头部节点；确定 Fiber 的优先级，联合优先级创立以后 Fiber 的 update 对象，并将其入队调度 FiberRoot；接下来进入 render 阶段；(此时相当于只有一个 Fiber 头部节点)

render 阶段：通过 createWorkInProgress 函数，创立 rootFiber 节点的正本 workInProgress 节点树 (即 current 节点的正本节点)，他们通过 alternate 相互援用；接着会触发 beginWork 函数，进而实现对新的 Fiber 节点的创立。循环遍历，组件元素 Fiber 会一直被创立(每个元素节点对应一个 Fiber 节点)，直到创立到最初一个为止，此时 Fiber 树(单链表) 根本实现；重点，此时曾经遍历到了单链表的最底部节点，而后会 由下自上 的顺次生成实在 DOM 节点，同时被它的父组件副作用链，这个副作用链也是一个单链表，直遍历到根节点，此时的根节点上的副作用链就蕴含的全副的 DOM 更新。那么剩下的只须要拿到 root 下的副作用链更新即可了。

参考：
修言深入浅出搞定 React
React 架构的演变 – 从同步到异步
React 架构的演变 – 从递归到循环
React 架构的演变 – 更新机制
React 架构的演变 – Hooks 的实现

可应用 Chrome Lighthouse 进行性能测评，依据测评后果也能够得出一些改良的点：
react 框架层面能够做的优化方向外围点：缩小从新 render 的次数 ； 缩小计算的量，次要是缩小反复计算。有下列具体计划：

1. 拆分公共组件和业务组件，依据具体业务拆散，升高组件颗粒度；2. shouldComponentUpdate 中拦挡非不要渲染；3. 对于简略的数据类型，可思考应用 React.PureComponent；4. 函数组件思考应用 React.meno，React.memo 与 React.PureComponent 十分类似；(版本 React 16.6.0)
5. React Hooks 组件应用 useCallback 缓存函数，防止每次返回一个新的函数；(版本 React v16.8)
6. React Hooks 组件应用 useMemo 缓存计算值；(版本 React v16.8)

一个前端我的项目下通用的优化技巧：应用缓存、节流、压缩、按需加载、全局治理等办法或技巧。如下：

1. 防止频繁渲染更新，即便必须的状况下，也须要思考是否应用节流函数；2. 对于长列表页面，思考翻页加载、点击下一页或者虚构长列表，防止数据量过大，渲染卡顿；3. 对立管制我的项目中的定时器函数，防止定时器偷跑；4. 拆分 Js 文件，可思考按需加载，晋升加载速度；5. 保障首屏必要数据渲染，可减少过渡图片，晋升用户体验；6. 对于后端接口多余数据可思考荡涤数据，只保留必要数据；7. 防止过多的数据申请，可思考应用数据缓存，晋升用户体验；8. 对于大图思考 CDN 图片加载，也可思考图片懒加载；9. 防止应用过多 css 选择器嵌套；10. 代码文件 gzip 压缩等，服务器相干缓存配置；

以上更多的是各种技巧和准则，如果要晓得具体的规范，能够参考 google 为 Web 性能体现提供的文档developers.google.cn/Web Performance

参考文章：
JavaScript 设计模式

js 根底

数据类型 5 +1

this 指向

闭包

原型

继承

模块化

并发和并行

异步计划

事件循环

1. js 的事件循环如何环执行？

2. 宏工作和微工作有哪些？

3. Nodejs 的事件循环和浏览器事件循环区别？

异步计划

1. Promise 外部实现理解嘛？它的具体工作流程是怎么样的？

2. 说一说 async/await

浏览器渲染原理

1. 地址栏输出域名地址之后产生了什么？

2. 浏览器渲染的流程？

3. 重绘和回流？

网络协议

HTTP/HTTPS

1. 什么是 http 协定？它是怎么样的？

2. http 和 https 的区别？

3. http 网络缓存如何配置？

4. 强缓存和协商缓存的区别？

5. 理解 http2.0 嘛？为什么说 http2.0 更好？

前端框架

React 框架

1. JSX 实质是什么，它和 JS 的关系是什么？为什么应用 JSX？

2. JSX 背地的功能模块是什么，这个功能模块做了哪些事件？

3. react16.3 新旧生命周期，隐没的旧生命周期有哪些？

4. React 团队为什么要去掉旧的生命周期函数？

5. React 组件数据如何流动？实现数据通信的计划有哪些？

6. 为什么是 React Hooks？

7. 为什么 Hooks 执行程序如此重要？

8. 和谐 (协调) 和 diff 的关系或区别？

9. react 的 diff 逻辑和思路？

10. setState 的工作流是怎么样的？

11. Stack Reconciler 栈和谐 有怎么样的局限性？

12. 说一说 Fiber 架构？

13. ReactDOM.render 调用栈的初始化阶段、render 阶段

性能优化

设计模式

11. Stack Reconciler 栈和谐有怎么样的局限性？