- 博客(70)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 集群与分布式
当单独一台主机无法承载现有的用户请求量；或者一台主机因为单一故障导致业务中断的时候，就可以增加服务主机数，这些主机在一起提供服务，就叫集群，而用户所看到的依然是单个的主机，用户并不用知道具体是集群内哪台设备为我提供服务，只需要知道访问集群的入口即可。
2024-10-16 16:57:24
11144
2
原创 【Three.js】入门必读
Three.js的官网在国外, 访问速度比较慢, 而我们需要经常参考和因此, 考虑将Three.js的官网部署到本地。
2024-09-13 10:00:00
25185
1
原创 三、【typescript】必须要掌握的概念、常见TS面试题
TypeScript 中的“abstract”关键字用于定义抽象类和方法。抽象类不能直接实例化；它们只能被延长。抽象方法在抽象类中没有实现，必须在派生类中实现。答案：TypeScript 中的条件类型允许您根据条件执行类型转换。它们使您能够创建依赖于其他类型之间关系的动态类型。这是一个例子：// Result: false 在此示例中，IsString 条件类型检查提供的类型是否为字符串。当您想要基于其他值的类型创建类型安全的映射或过滤器时，条件类型非常有用。
2024-09-13 09:30:00
21659
原创 【React源码解析】深入剖析Scheduler源码
从源码的角度分析时间切片带来了什么样性能，分析Scheduler源码，理解其实现原理。 为什么是MessageChannel，备选方案setTimeout
2024-09-12 10:30:00
21718
原创 二、【typescript】必须要掌握的概念、常见TS面试题
条件类型中的“keyof”关键字用于获取对象类型的键的并集。答案：TypeScript 条件类型中的“keyof T extends K”构造用于使用“extends”关键字根据指定条件过滤对象类型的键。答案：TypeScript 中的“Omit”实用程序类型允许您通过从现有类型中排除特定属性来创建新类型。答案：TypeScript 中的“Pick”实用程序类型允许您通过从现有类型中选择特定属性来创建新类型。答案：条件类型中的“infer”关键字用于从条件类型中的另一种类型推断出类型。
2024-09-12 10:00:00
21522
原创 【React源码解析】React更新优先级
这里就回到了上面提到的多更新并存的问题：哪些更新优先级高，哪些更新优先级低，哪些更新需要立即去执行，哪些更新可以缓一缓再执行。搜索时，我们应该确保用户输入的内容是能够是实时响应的，而根据输入值搜索出来的内容在渲染更新的时候不应该阻塞用户的输入。通过这种优先级，我们就能判断哪些更新优先执行，哪些更新会被中断滞后执行了。在更新的时候就会依次去执行这个链表上的操作，从而计算出最终的。对于用户体验来讲，紧急更新应该是优先于非紧急更新的。的更新优先级，属于哪个更新任务中的操作。实际上，在每次更新时，更新。
2024-09-12 10:00:00
21924
2
原创 一、【typescript】必须要掌握的概念、常见TS面试题
TypeScript 是 JavaScript 的超集，为该语言添加了静态类型。它允许开发人员定义变量、函数参数和返回值的数据类型，这有助于在编译时而不是运行时捕获错误。答案：您可以使用?在接口中定义可选属性。属性名称后面的修饰符。可选属性可能存在于实现该接口的对象中，也可能不存在。age?: number;答案：您可以使用?定义带有可选参数和默认参数的函数。可选参数的修饰符以及为参数分配默认值。i++) {
2024-09-11 11:44:26
23235
原创 【React源码解析】React源码中的几种关键数据结构
jsxs方法就是来生成element对象的，它执行的结果才是element对象。fiber对象是对react执行过程中元素状态的描述，打上一些标记等等。https://babeljs.io/ 可以尝试自己玩一下。worktag是对元素类型的进一步抽象。element对象是对UI的描述。
2024-09-09 10:15:00
23850
原创 （三）【react-router v6】路由相关面试题，带你搞定前端面试
多页面实际上就是多个html，通过window.location互相跳转。缺点： 每个页面跳转都要刷新，重新加载资源，性能会比较慢好处： SEO友好，适合C端项目，隔离性好，每一个页面是一个独立的项目（每个项目可以由单独的团队负责）单页面：好处：在一个html中进行路由跳转，实际上是通过js去控制的。代表性的框架react/vue。比较适合B端的项目，不考虑SEO。页面跳转不用刷新，性能会好一些，用户体验也能好，可以实现代码复用。缺陷： SEO不好。
2024-09-09 10:00:00
23724
原创 （二）【react-router v6】基本用法，带你彻底搞懂前端路由原理、react-router V6带来了什么
【代码】（二）【react-router v6】基本用法，带你彻底搞懂前端路由原理、react-router V6带来了什么。
2024-09-08 23:11:24
36013
原创 （一）【react-router v6】react-router v6基本用法，带你彻底搞懂前端路由原理、react-router V6带来了什么
多页面单页面（react vue）；前端路由原理
2024-09-08 23:06:55
35937
原创 vite是如何实现依赖预构建的，浏览器为什么没有实现从node_modules查找依赖，vite开发环境解决了什么问题
首先vite会找到对应的依赖，然后调用esbuild(对js语法进行处理的一个库)，将其他规范的代码转换成esmodule规范，然后放到当前目录下的node_modules/.vite/deps【注: 缓存目录】，同时对esmodule规范的各个模块进行统一集成。webpack的编译原理，AST抽象语法分析工具，分析出你写的js文件有哪些导入和导出操作，构建工具会监测你的代码文件，及时输出结果。因为webpack支持多种模块化，他一开始必须要统一模块化代码，所以意味着他需要将所有的依赖全部读一遍，
2024-09-07 23:02:49
36102
1
原创 关于宏任务的说法已经过时、事件循环、消息队列、宏任务、微任务
● 每个任务都有一个任务类型，用一个类型的任务必须在一个队列，不同类型的任务可以分属不同的队列。promise.then/catch回调、async/await中的异步函数、Mutation.observe 用于监听dom。定时器、I/O操作（读文件、网络请求）、DOM事件、requestAnimationFram、script标签。● 浏览器必须准备好一个微任务队列，微队列的任务优先所有其他任务执行。● 延时队列（中）、交互队列（高）、微队列（最高）
2024-09-07 22:55:54
35860
原创 带你彻底搞懂useLayoutEffect的使用场景
开篇第一句: useLayoutEffect 可能会影响性能。尽可能使用 useEffect。useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。
2024-08-11 20:51:06
69377
1
原创 React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代
Hoc、render props和hook都是为了解决代码复用的问题，但是hoc和render props都有特定的使用场景和明显的缺点。hook是react16.8更新的新的API，让组件逻辑复用更简洁明了，同时也解决了hoc和render props的一些缺点。
2024-08-11 20:35:32
68919
原创 剖析React18并发模型
Suspense的内部原理都是基于并发的，可想而知在这次更新中并发的重要性。但是，并发究竟是什么？React团队引入并发又是为了解决哪些问题呢？它到底是如何去解决的呢？前面提到的React18新特性与并发之间又有什么关系呢？相信大家在看官方文档或者看其他人描述React新特性时，或多或少可能会对以上几个问题产生疑问。因此，本文将通过分享并发更新的整体实现思路，来帮助大家更好地理解React18这次更新的内容。
2024-08-08 19:54:52
73564
原创 React类组件与函数组件有什么异同
组件是react的最小代码片段，无论函数组件还是类组件 在使用方式 和 最终呈现效果是一致的类组件可以用函数组件重构，同样函数组件也可以用类组件重构（并不推荐），在现代浏览器中闭包 和 类的性能只有在极端场景下才会有差异，所有认为基本一致差异从心智模型上分析，类组件是面向对象编程，核心概念是 继承 和 生命周期； 类组件的内核是函数式编程，主打immutable、没有副作用、引用透明（类中的this有很多自带属性，相对不透明）等之前，在使用场景，如果需要生命周期钩子，则首推类组件
2024-08-07 20:39:47
74166
原创 详谈React中 forwardRef、useImperativeHandle的使用场景
forwardRef(render)用法详解，使用场景，单层传递、多层传递、命令式句柄 useImperativeHandle等。render 函数用法将 DOM 节点暴露给父组件在多个组件中转发 ref暴露命令式句柄而非 DOM 节点疑难解答我的组件使用了 forwardRef，但是它的 ref 总是为 null
2024-08-07 19:39:56
65761
原创 前端优化之懒加载
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。
2024-08-04 17:25:32
59222
原创 centos安装nodejs报错问题，node: /lib64/libm.so.6: version `GLIBC_2.27‘ not found (required by node)
## 1. 使用兼容glibc-217的node包 ## 2. 使用与你的 glibc 版本兼容的 Node.js 版本 ## 3. 使用 Docker ## 4. 升级linux版本
2024-08-01 10:45:21
66214
原创 yum安装指定版本的nodejs
如果你需要特定版本的Node.js，你可能需要添加一个提供该版本Node.js的仓库或者手动下载并安装一个适合你系统架构的Node.js二进制包。如果需要特定版本的Node.js（例如18.x），推荐使用NVM（Node Version Manager）来安装。
2024-07-31 15:22:58
65896
原创 Http协议详解（二）
实际上HTTP协议规范并没有对get方法请求的url长度进行限制，这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。由于IE浏览器对URL长度的允许值是最小的，所以开发过程中，只要URL不超过2083字节，那么在所有浏览器中工作都不会有问题。根据上面的数据，可以知道，get方法中的URL长度最长不超过2083个字符，这样所有的浏览器和服务器都可能正常工作。
2024-07-30 18:32:04
65672
原创 HTTP协议详解（一）
队列里的请求是没有优先级的，只有入队的先后顺序，排在最前面的请求会被最优先处理。如果队首的请求因为处理的太慢耽误了时间，那么队列里后面的所有请求也不得不跟着一起等待，结果就是其他的请求承担了不应有的时间成本，造成了队头堵塞的现象。服务器为了提高网站访问速度，对之前访问的部分页面指定缓存机制，当客户端在此对这些页面进行请求，服务器会根据缓存内容判断页面与之前是否相同，若相同便直接返回304，此时客户端调用缓存内容，不必进行二次下载。标识的资源在请求/响应的通信过程中可以使用的功能选项。
2024-07-30 18:26:39
64336
原创 前端性能优化之CDN加速
CDN一般会用来托管Web资源（包括文本、图片和脚本等），可供下载的资源（媒体文件、软件、文档等），应用程序（门户网站等）。使用CDN来加速这些资源的访问。
2024-07-29 08:46:50
66939
原创 浏览器同源策略详解、主流的跨域解决方案、深入理解跨域请求概念及其根因
跨域问题其实就是浏览器的同源策略造成的。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。协议端口号域名必须一致。下表给出了与 URLURL是否跨域原因同源完全相同同源只有路径不同跨域协议不同跨域端口不同 ( http:// 默认端口是80)跨域主机不同同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。
2024-07-29 08:40:47
66519
原创 浏览器本地存储详解、 cookie、sessionStorage、localStorage、IndexedDB
服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间，domain 是域名、path是路径，domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输，HttpOnly 规定了这个 cookie 只能被服务器访问，不能使用 js 脚本访问。
2024-07-28 18:07:55
65977
原创 浏览器渲染原理
Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。
2024-07-28 17:59:02
53060
原创 进程与线程、僵尸进程和孤儿进程、管道通信、消息队列通信
一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫。如果程序很多时，内存可能会不够，操作系统为每个进程提供一套独立的虚拟地址空间，从而使得同一块物理内存在不同的进程中可以对应到不同或相同的虚拟地址，变相的增加了程序可以使用的内存。**（3）当一个进程关闭之后，操作系统会回收进程所占用的内存，（4）进程之间的内容相互隔离。
2024-07-26 20:25:52
56037
原创 浏览器安全、XSS 攻击、CSRF 攻击、防御攻击、中间人攻击、网络劫持
CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。
2024-07-26 20:21:17
56044
原创 浏览器垃圾回收机制详解
V8 实现了准确式 GC，GC 算法采用了分代式垃圾回收机制。因此，V8 将内存（堆）分为新生代和老生代两部分。新生代中的对象一般存活时间较短，使用 Scavenge GC 算法。在新生代空间中，内存空间分为两部分，分别为 From 空间和 To 空间。在这两个空间中，必定有一个空间是使用的，另一个空间是空闲的。新分配的对象会被放入 From 空间中，当 From 空间被占满时，新生代 GC 就会启动了。算法会检查 From 空间中存活的对象并复制到 To 空间中，如果有失活的对象就会销毁。
2024-07-25 18:56:58
55540
原创 一文彻底搞懂浏览器事件机制、事件委托、事件冒泡、事件循环、Event Loop、react事件池封装、事件触发过程详解
事件是用户操作网页时发生的交互动作，比如 click/move， 事件除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）
2024-07-25 08:06:37
25901
原创 一文带你搞定浏览器缓存机制，强缓存、协商缓存
强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。
2024-07-24 22:35:35
24121
原创 web服务器之nginx配置详解
💡语法: proxy_cache_key string;string为生成Key的规则，如:schemeschemescheme💡语法: proxy_no_cache string…;string为条件，例如$cookie_nocache $arg_nocache $arg_comment;💡语法: proxy_cache_bypass string…
2024-07-24 11:18:45
25607
原创 React事件机制原理、React的事件和普通的HTML事件有什么不同？React 组件中怎么做事件代理？它的原理是什么？
React并不是将click事件绑定到div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。JSX 上写的事件并没有绑定在对应的真实 DOM 上，而是通过事件代理的方式，将所有的事件都统一绑定在了。是无效的，而应该调用。
2024-07-23 22:28:52
20683
原创 node后端项目使用webpack打包教程，target: “node“
webpack 能够为多种环境 或 target构建编辑。想要理解什么是target的详细信息。告知 webpack 为目标(target)指定一个环境。默认值为，如果没有找到的配置，则默认为web。
2024-07-23 10:56:05
20961
原创 常用的简单查询sql语句， nodejs操作mysql
作为一个JavaScript全栈工程师，选择哪个免费数据库呢？当然是MySQL。因为MySQL普及率最高，出了错，可以很容易找到解决方法。而且，围绕MySQL有一大堆监控和运维的工具，安装和使用很方便。
2024-07-22 21:48:26
20315
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人