多进程与多线程Nodejs 是单线程通过指的是他的JavaScript代码执行逻辑是单线程模型异步非阻塞的，但实际上Nodejs本身是一个复杂的多线程架构，其架构图简易如下 最上层：JavaScript应用层，以单线程模型运行 中间层：负责搭建JavaScript与底层内核C/C++沟通的桥梁 最下层：NodeJs真正的核心，其中Libuv提供了跨平台，线程池，事件池，异步IO，网络开销等底层的机制 进程和线程进程运行一个可执行文件，这个文件会装载在内存中，CPU会执行程序中的每条指令，运行中的程序即是进程(Process) 进程是可中断，多个程序交替执行，在一段时间内能执行多个进程，这样就是并发 进程的状态 进程中主要是用PCB(process control block)数据结构来描述的，其中包含各种信息，以链表的形式连接在一起，进程的控制中存在创建、终止、阻塞、唤醒等几种过程去完成进程的状态切换 进程的上下文切换各个进程之间是共享CPU资源的，在不同的进程之间需要切换，让不同的进程在CPU执行，从一个进程执行切换到另一个进程，即进程的上下文切换 CPU的信息中包括CP ...

React 框架内部的更新机制原理详解基本架构React16之后架构分为三层 在框中的执行过程中，随时可能会被打断，异步的可中断更新(由于更新都是不断在内存中，并不会去执行页面DOM更新，用户是无感的) 有其他更高优先级的任务 当前帧的没有剩余时间的时候(requestdleCallback) Scheduler(调度器) – 根据任务的优先级调度React在浏览器每一帧的时间中，会预留一定时间给JS线程计算更新，当预留时间不够，会将线程控制权交还给浏览器，等待下一帧时间来到，继续被中断的工作 因此需要有一种机制去完成这样一套调度，即React中的**Scheduler(调度器)**，除了在空闲的时触发回调的功能，Scheduler还提供了多种调度优先级供任务设置 组件的更新流程如下 React 组件状态更新，向 Scheduler 中存入下一个任务，该任务为 React 更新算法，Scheduler提供pushTask()方法，React 通过该方法存入任务 Scheduler 调度该任务，执行 React 更新算法，提供ScheduleTack()方法，用于调度任务。 Re ...

状态管理的实现机制在React中我们是数据驱动视图，可以用一个公式来描述状态和UI的关系，即： 1UI = f(state) React中的一个核心概念就是幂等，即是在React Component中，输入相同的props & state & context 总是会得到相同的UI 通常状态管理库是可以不结合任何框架用来使用，即为vanilla，可以在(zustand、jotai)等库中清晰的看到vanila实现，这些包含了基本的JavaScript实现，而我们平常中使用的react框架，则是这些实现的积类 + Hooks，即(useMemo & useCallback & useState & useEffect) 中触发更新UI的hooks 状态管理库的整个变动流程基于如下的过程 其中订阅的含义是组件需要定于 Store 状态的变化，这样当状态发生改变时可以触发组件完成re-render，订阅和更新 UI 是结合React中的useState / useReducer / useSyncExternalStore 来 ...

简介跨端又称为跨平台，我们通常希望是能够写一套代码，不仅能够在安卓、ISO、Windows、Macos 等等等的操作系统上面运行，希望能用统一的技术栈去构建适用于多个平台的应用 hybrid 方案 && Webview 视图层简单理解即是浏览器套壳，浏览器本来就是一个跨端的产品，我们能够在不同的环境中运行浏览器并且浏览网页基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用WebView 容器的工作原理是基于 Web 技术来实现界面和功能，通过将原生的接口封装，暴露给 JavaScript 调用，JavaScript 编写的接口可以运行在系统自带的 WebView 中优点就是对前端开发比较友好同样可以调用原生的能力，通过搭建桥接层和原生去交互缺点是跨端的能力受限于桥接层，浏览器内核的渲染独立于系统组件，无法保证原生体验，渲染效果能力较差 浏览器浏览器就是一种悠久的跨平台方案，浏览器提供了一个容器，屏蔽了底层差异，提供了统一的 DOM API，这样就可以实现同一份代码在不同的平台跑在同一份容器中，容器即使浏览器引擎 PWAPWA(Pro ...

前端登录详解在网页上，登录几乎是每个网站都具备的功能，业界常用的方式有下面几种 Cookie + Session 登录 Token 登录 SSO 单点登录 OAuth 第三方登录 Cookie + Session 登录基本概念Cookie : HTTP 是一种无状态的协议，客户端每次发送请求时，首先要和服务端建立一个连接，在请求完成后会断开这个连接，这样能够节省传输时的资源，但是每次请求都是独立的，无法识别请求是否来自同一个用户，Cookie 出现了，由客户端保存的小型 key value 文件由 HTTP 服务器设置的，可以随着请求发送，交互信息 Session： 有了 Cookie，服务端可以知道用户的传来消息，但是要对这个消息进行验证，需要通过 Session，在客户端请求服务器的时候，为这次 Session 开辟内存空间，这样就可能进行登录验证了，Session 应该存在服务端中，避免客户端 Cookie 中存储敏感数据，可以存在内存中，也可以存在 redis 中 认证：Cookie/Session 认证机制就是为一次请求认证在服务端创建一个 Session 对象 ...

XSS(跨站脚本攻击)XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等 XSS 本质是因为网站没有对恶意代码进行过滤，浏览器不能分辨那些脚本是可信的，从而导致了恶意代码的执行 获取页面数据 & DOS 攻击 & 破坏页面结构 & 流量劫持 反射性 XSS攻击者诱导用户访问一个带有恶意的 URL，服务端接受数据处理后，将代码发送给浏览器，浏览器端解析这段带有 XSS 代码的数据后当做脚本执行 存储性 XSS恶意脚本会存储在目标服务器上，当浏览器请求数据时，脚本从服务器传回并执行 DOM-Based XSS修改页面的 DOM 节点形成的 XSS 防御 静态网站 & 对插入 HTML 部分做充分的转义 使用 CSP ，CSP 的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。 对一些敏感信息进行保护，比如 cookie 使用 http-only，使得脚本无法获取。也可以使用验证码，避免脚本伪装成用户执行一些操作。 CSRF ...

SSR 介绍什么是 SSR指 HTML 在服务端渲染完成，发送到浏览器，由浏览器去绑定事件状态和交互，形成现代前端的完整页面，给浏览器 http 请求直接提供有内容的 html 结果页面比起 传统 CSR(Client Slider Rendering) 首先要请求 html，请求 js，再次请求数据最终形成 html 页面，SSR 让其页面直出的效果体验很好 在现代的 SSR 一般指的是同构 SSR 的解决方案比如 Nextjs 或者 Nuxtjs 等的，下面我们的讨论以 React 框架中的 server 为代表 为了完成直接渲染的 React 组件转成 HTML 在 node 端，我们要使用到 React 中提供的renderToString API, 如下 123456789101112131415161718192021222324252627import { useState } from 'react'import {renderToString} from 'react-dom/server' ...

性能优化性能优化是老生常谈的问题，比如页面首屏渲染时间，丝滑程度等在现在的 web 应用中都显示十分重要，决定你的产品能否有更好的体验 度量核心的 web 指标Largest Contentful Paint(LCP)： 最大内容绘制，测量加载性能，为了有良好的体验，LCP 在页面首次开始加载后的 2.5s 内出现 First Input Delay(FID)： 首次输入延迟，测量交互性，100ms 内 Cumulative Layout Shift(CLS)： 积累布局偏移，测量视觉稳定性，0.1s 内 FCP(First Contentful Paint)： 首次内容绘制 TBT(总阻塞时间)、TTI(可交互时间) 等等等 可以通过浏览器的 performance API 获取，也可以调用一些包去获取上传 页面流畅度页面流畅度一般使用流畅度(FPS)衡量，一般 50-60 会很流畅 Lighthouse & Chrome DevtoolsLighthouse 是谷歌开源的一款 Web 前端性能测试工具，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告，可以直接 ...

工程治理工程管理GITssh key configssh(secure shell)是一种加密网络传输协议，用于在不安全的网络环境中提供安全的方式来访问网络服务，SSH 协议主要是用来远程登录、管理系统、安全传输文件等，在数据传输的过程中采用加密保证数据的安全性和完整性 ssh 协议通信的基本流程： SSH 版本协商阶段：服务器监听 22 端口信息，客户端发送 TCP 连接，建立请求，服务端返回一个 SSH 信息给客户端判断 密钥和算法协商阶段 客户端认证 会话请求 交互会话 ssh：SSH 客户端实现 & scp, sftp：rcp 的替代方案，传输文件 & sshd：SSH 服务端的视线 & ssh-keygen：产生 RSA 或 ECDSA 密钥，用来认证 & ssh-agent, ssh-add：帮助用户不需要每次输入密钥或密码的工具 & ssh-keysacn：收集大量主机的 ssh 主机公钥 Ssh-keygen 参数：-C (comment) - 提供一个注释 -t (type) - 提供生成的密钥类型 -b (bits) - ...