问白的博客

原创 浏览器与Node事件循环机制解析

时间循环在浏览器和Nodejs中的机制大解析

原创 浏览器页面缓存 - Cache【性能篇】

如果【停用缓存】被勾选了，浏览器发送的请求中就会自带 Cache-Control：no-cache和Pragma：no-cache两个请求头。会强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。假如 Cache-Control 在请求头中不存在的话，Pragma：no-cache的行为与 Cache-Control: no-cache 一致。在Demo演示之前，切记将浏览器中的 【网络 -> 停用缓存】选项不要勾选。否则浏览器不会从本地缓存取数据。

原创 浏览器页面安全-CSRF【安全篇】

CSRF （Cross-site request forgery），又称为“跨站请求伪造”，是指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的已登录状态发起的跨站请求。简单来讲，CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事。目标站点存在漏洞用户要登录过目标站点黑客需要通过第三方站点发起攻击根据这三个必要的条件，介绍了如何避免CSRF。利用Cookie中的 SameSite 属性利用请求头中的Origin来判断请求的来源CSRF Token的方式。

原创 浏览器页面安全-XSS【安全篇】

XSS （Cross Site Scripting），为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。最开始的时候，这种攻击是通过跨域来实现的，所以叫“跨站脚本”。

原创 Lighthouse组合Puppeteer检测页面

如上一篇文章结尾提到的一样，我们在实际使用Lighthouse检测页面性能时，通常需要一定的业务前置条件，比如最常见的登录操作、如果没有登录态就没有办法访问其他页面。再比如有一些页面是需要进行一系列的操作，点击某些按钮，调用某些接口完成一些业务之后才能打开某个页面。

原创 mac终端给常用命令设置别名--让开发变得更方便

在平时开发中会使用终端操作各种命令，比如cd 到某个路径下，用vscode或者sublime或者webstorm 打开某个工程。比如需要cd到某个路径下去干点什么，需要自己查看该路径，这时候我们就可以为自己常用的shell命令设置常用的命令别名，让这一切都变得更加简单。查看本地已登记的别名在登记自己自定义的别名之前，最好查看一下本地中已有的别名，避免重复可以使用 下面的命令开查看本地已登记的...

原创 宝塔配置多个HTML项目

未部署之前，这里是显示的部署，点击之后把准备好的ssl证书对应的key/pem粘贴上去即可。进入宝塔的管理后台，安装好ngxin 然后点击网站->HTML项目->添加HTML项目。首先要购买一个域名和对应的机器，添加DNS解析把域名可以解析到对应的机器中，这里使用的是阿里云服务，添加了对应的域名可以解析到对应的机器上。可以看到一个机器可以配置不同的域名，指向不同的文件。添加好之后会在对应的目录中出现对应的文件。

原创 H5页面调用微信JS-JDK 保姆级教程

这里需要把IP的白名单设置好，本机测试可以使用ngrok，获取了ngrok的几个动态ip都加到白名单里面去了，但我试了一下好像不管用，就直接使用了一个阿里云的服务器。并把弹框中的MP_xx.txt的文件下载，然后在node服务器中启动一个静态文件服务器，保障在配置的域名后面可以直接访问到这个文件。这里注意需要的 AppId以及AppSecret 是一个公众号的AppId以及AppSecret而非小程序的。在公众号后台中的 设置与开发->账号设置->功能设置->JS接口安全域名中添加相关的域名。

原创 通过宝塔配置HTTPS证书

下载证书之后，将key和PEM数据粘贴进去，然后点击保存并启用证书。预先在阿里云上下载自己的证书，这里是先试用了个人测试版本的。我这里是nestJS, 在服务器使用的是3000端口。就可以通过HTTPS访问了。

原创 Postman设置环境变量与Token

原创 面向AI 的前端发展及初识大模型

用一张图来说明什么是开发范式的迁移。目前我们应该正处于第二次的开发范式迁移的阶段，随着AIv0( Vercel 团队推出，主要用于 React 和 Next.js 项目。通过 AI 生成 UI 组件，帮助开发者快速搭建页面。)还有bolt。那以后前端该怎么发展呢？我认为目前有两个方向，一个是制造AI工具的前端，还有一个是使用AI工具的前端正确性维度：返回信息的准确度和可信度，白话文就是让人感觉”说的对“稳定性维度：在不同场景和时间下产生可预期的一致表现，白话文就是让人感觉"靠得住"

原创 一文让你明白虚拟滚动原理及其在虚拟列表、虚拟表格和懒加载中的应用

只渲染可见区域的列表项，避免一次性加载所有数据。动态替换渲染内容，随着用户滚动，仅更新当前视图内的数据，而不改变整体的滚动行为。

原创 前端包管理器的发展以及Npm、Yarn和Pnpm对比

在现代前端开发中，包管理器是不可或缺的核心工具。随着 JavaScript 生态的快速发展，开发者经历了从 npm 一统天下到 Yarn 挑战格局，再到 pnpm 创新突破的技术演进。这里将对三种主流包管理器（npm/Yarn/pnpm）进行全方位对比，分析其设计原理、性能表现和适用场景。

原创 Webpack和Vite插件的开发与使用

在现代开发中一般各公司都有自己的监控平台，对前端而言如果浏览器报错的话就可以通过埋点收集错误日志，再结合sourcemap文件可以帮助我们定位到错误代码，帮助我们排查问题。这里就记录一下之前在webpack和vite两个环境中的插件开发，可以在生产构建时将sourcemap上传到内部的文件服务器配合后续的监控日志来一起使用。

原创 Webpack相关优化总结

比如有两个文件分别是util.js和index.js，其中代码分别如下// util.js//index.js以上代码打包之后如下}),})开启了Scope hoisting 之后打包的代码如下})代码体积更小，因为函数申明语句会产生大量代码；代码在运行时因为创建的函数作用域更少了，内存开销也随之变小。

原创 如何在Node环境中调用Python脚本

今天遇到一个需要在Node服务中调用Python脚本的需求，这里就把这个场景单独抽离出来汇总一下方法在node中的child_process中有execSync, exec两个方法来创建一个子进程，然后在子进程里执行对应的python命令，这两个命令可以让我们执行一个脚本命令。

原创 记录一次使用git无权限的问题排查

正常的配置了公私钥之后，在gitlab中也存储了配对的公钥，但当使用git clone 时，总是报无权限。由于在这台机器中添加了多个公私钥，有点复杂，我们可以使用命令 ssh -vvvT 调试一下。

原创 记录一次错误的解决：error: tool ‘xcodebuild‘ requires Xcode, but active developer directory ‘/Library/Develope

xcodebuild找不到Xcode所以会报错类似上面的第一种错误，如果本地安装了两个版本的xCode同时没有指定寻找的路径，也会出现上面的错误，我这里是本地没有安装Xcode软件，所以也是没有找到对应的路径。我们一般是在Node环境下去做开发，有的时候node底层需要调用C++的库的时候，nodeJS会提供一个C++模块的变异工具这个工具就是node-gyp。如果本地gyp安装的有问题，可以先删除掉根目录下的.node-gyp文件夹，重新按照npm包给出的方式全局安装node-gyp；

原创 记一次使用git无权限的问题排查

正常的配置了公私钥之后，在gitlab中也存储了配对的公钥，但当使用git clone 时，总是报无权限。由于在这台机器中添加了多个公私钥，有点复杂，我们可以使用命令 ssh -vvvT 调试一下。

原创 一个好玩的浏览器插件

背景是我们在开发过程中有时需要做一些测试验证，需要修改请求头字段和响应头字段的内容，有时需要在页面做测试，反复请求同一个接口，并修改一些字段。的生产环境获取的(或者其他的一个资源服务)，此时需要从测试环境获取这个配置文件来帮我们快速的做一些验证或者测试的话，那我们就可以使用这个代理，将原本请求A服务的资源重定向到B服务。服务，所以就抽时间开发了一个浏览器插件，只需要安装好这个插件，按需将需要修改的请求地址和修改的请求头/响应头配置之后就可以了。就会被拦截，此时只需要配置一下修改的规则，就可以把。

原创 Hook使用规则的背后原理

在Recat文档中关于Hook的使用有以下说明，今天就来说明下这些规则的背后的具体原因。

原创 Redux中间件源码解析与实现

本文中涉及到的关键npm包的版本信息如下：react 的版本为18.2.0redux的版本为4.1.2redux-thunk版本为2.4.2redux-promise版本为0.6.0redux-logger版本为3.0.6在Redux源码解析与实现（一）Redux源码解析与实现（二）这两篇文章中，详细讲解了怎么实现一个Redux的核心功能，而Redux默认只能够处理的参数，所以我们需要引用各种中间件来加强dispatch,使其能够传递异步函数或者是promise。

原创 Webpack原理解析

webpack在前端开发中起着非常重要的角色，我们在使用的过程中，更多的是把它当做一个黑盒，只需要关心它暴露出来的配置就行了，今天就来了解一下webpack背后运行原理的解析。

原创 ReactRedux源码解析与实现

在Redux源码解析与实现（一）Redux源码解析与实现（二）两篇文章中我们知道了通过可以帮助我们在大型复杂的应用中解决状态管理的问题，但我们也发现，只是分析的基本使用和源码之后，梳理了整个逻辑图如下所示：react-redux的基本使用ract-redux的核心实现Redux源码解析与实现（一）Redux源码解析与实现（二）

原创 RC-Field-Form源码解析与实现

本文中涉及到的关键npm包的版本信息如下：react 的版本为18.2.0rc-field-form的版本为1.37.0是一个非常受欢迎的前端表单组件库，AntDesign中的Form表单就是基于实现的。今天就来解析一下的源码部分，并且会自己实现一个相同功能的。

原创 我是怎么从0到1搭建性能门禁系统的

一个常见的场景就是我们自己的产品使用lighthouse进行检测的时候，往往需要用户先登录，此时我们就可以使用Puppeteer来帮助我们先模拟用户登录，登录之后，利用Cookie的同源策略再次检测我们的页面就可以了。这里又会引申出另一个问题，由于我们的业务场景各不相同，导致我们的页面也是各有各的特点，比如音视频类型的网站里面的流媒体比较多，而淘宝、天猫京东，这些电商网站他的图片就非常多还有可能会做成长页面的效果，而一般的业务系统可能表格和弹框比较多。他的性能模型主要采集6个不同的和时间相关的指标。

原创 全链路质量保障体系的实践

我在年终给老板们汇报时画了这一张图来表示我们建设的全链路质量保障系统：圈越大表示越重要，中间是一个三角形，下面的三个大问题分别是：安全、质量、性能问题需要解决。这三个问题如果能够得到解决或者是有效的控制，那就是一个三角形的底座，进而保障我们产品对外的稳定性，对内也表明我们现在的保障流程是有效的。再进一步也就提高了我们产品的整体体验目前所在的公司算是比较传统类型的公司，各个基础设置都比较欠缺，很多基建或者是基建的基建都需要自己去建设。

原创 Redux源码解析与实现（二）

就是一个React的合成事件，React就会对其对应的映射值做以上三步骤的处理。React内部将所有的方法都做了一个映射表。比如我们通常写的业务代码中。，之所有React有自己的合成事件系统可以总结成三个原因。React 中有自己的事件系统模式，通常被称为。，那么在Ract内部的所有方法的映射对象中查找。那就不会走React的合成事件系统了。，发现有在映射对象中有登记，那。映射的结果了，或者使用原生的。那在映射表中自然就找不到。

原创 Redux源码解析与实现（一）

通过自定义Hook的方式我们就解决了组件之间状态共享的问题，没有给原本的组件增加复杂度。2、还有一点就是我们可能在组件的某个生命周期做很多事情，比如在组件加载完成时进行一些事件的订阅，发出一些请求。但这类的方案需要重新组织组件的结构，也就是会影响到我们原本的组件之间的结构。表单数据收集时（比如点击了表单的submit，此时表单组件需要把各个子组件的状态收集放回给你注册的回调事件中）就会比较麻烦。在Antd3中的解决方案其实是把表单内的子组件的转态都存储在顶层的父组件组件。的方式解决的，但也有弊端。

原创 Node中的的util.promisify()方法的介绍和基本实现

其实我们做的事情只是将回调函数的逻辑做了修改，原本是直接在回调中处理业务逻辑，这里我们修改为在回调函数中把异步事件处理的结果通过给返回出去我们也可以看一下在NodeJS。

原创 将node服务打包成可执行文件-PKG

有时我们需要写一些node的服务或者是工具，但这些工具&服务可以运行的前提条件是当前环境需要安装好node，有时候我们把这些工具&服务发送给别人，在别人的电脑中未必有安装好的node版本，即便有也可能不是期望的指定的Node版本，在这样的场景下我们可以把写好的node 服务 & 工具打包成一个可执行文件发送给对方，将程序需要依赖的所有的东西，比如node环境，再比如跑RPA需要的浏览器环境也可以打包到我们自己的可执行文件中。也一起打包进我们的可执行文件，这样才能在运行。是一个很强大的打包工具，这里是以。

原创 HTML5 WebSocket介绍与基本使用（解析服务端返回的二进制数据）

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

原创 设计模式之装饰者模式-TS中装饰器介绍

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。装饰器使用@expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。成员的名字。成员的属性描述符。类装饰器在类声明之前被声明（紧靠着类声明）。

原创 阿里的一道面试题按需求写代码 - 【函数】

先过滤，在排序，最后在分组，然后得到这个处理之后的数据。原题大意是接受一个数组，然后一顿捯饬之后对入参。我们使用面向对象，使用class的写法。

原创 并发数为N，最快完成任务 -【Promise】

代码运行的结果也是符合预期的，最开始并发n个请求任务，在每个请求任务完成后再发送一个新的请求，使用递归方法直至全部请求都发送完成（递归的出口）。并按照发送的顺序收集了每个请求的响应结果。并发数为n，意味着同一时间可以处理n个请求任务。这些任务中有完成的，就可以从未完成的任务中选择一个发送，直至所有请求发送完即可。比如有若干个请求，设置最大的并发数为n。怎样才能最快的完成这一批请求。函数就可以获得n个异步任务，这些任务的完成时间在。内，下面我们看看怎么最快的完成上面的这些任务。

原创 异步的终极方案Async-Await 和Generator

之前解决异步我们一直使用Promise的方案，虽然解决了回调地狱的情况，但使用链式写法也并不特别优雅。比如看下面的代码。所以就出现了一种号称异步的终极方案AsyncAwait。我们看他的定义async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用promise。

原创 深入了解Promise机制并使用JS实现一个Promise（二）

Promise 实例的 catch() 方法用于注册一个在 promise 被拒绝时调用的函数。它会立即返回一个等效的 Promise 对象，这可以允许你链式调用其他 promise 的方法。此方法是 Promise.prototype.then(undefined, onRejected) 的一种简写形式。我们看下原生promise.catch的效果finally() 方法返回一个 Promise。

原创 深入了解Promise机制并使用JS实现一个Promise（一）

关于为什么会有Promise以及Promise的一些用法和基本机制可以参考之前的文章JS中的异步与Promise使用整体来说，Promise可以帮助我们很好的解决异步的问题，号称是异步的终极解决方案。在浏览器中Promise是使用C++实现的，今天就使用js来实现一个JS版本的Promise。这样可以更深层次的帮助我们理解Promise每一个Promise对象都有三种状态： pending 、resolve 和 rejectPENDING : 进行中，Promise 对象的初始状态。

原创 JS中的异步与Promise使用

Promise是JavaScript异步编程的一种流行解决方案（号称是终极解决方案），掌握Promise的使用是js开发者不可或缺的一项基本技能。但是要想熟练掌握并深入的理解它，还是必须要知道它的实现原理的。在浏览器中Promise的实现是通过C++实现的，我们这里就使用js来实现一个js版本的Promise。

原创 Electron中启动node服务

在electron 应用启动之后，会调用startServer方法，在这个方法中会使用exec执行npm run server命令，这个命令会启动一个koa的node 服务。记一次遇到的问题，我们知道Electron 中主进程是在node环境中，所以打算在node环境中再启动一个node服务。但是会发现electron应用的窗口没有正常打开，但这个node 服务已近启动起来了。后来发现是应为使用了同步的命令导致的，只需要把execSync命令缓存exec或者是spawn就可以解决了。