shuxiaoxii的博客

原创 node的模块查找策略

【代码】node的模块查找策略。

原创 typescript-常用代码

【代码】typescript-常用代码。

原创 React-useEffect的闭包陷阱(stale closure)

【代码】React-useEffect的闭包陷阱(stale closure)

原创 aync await深度理解

async await

原创 浏览器的渲染原理

/ 等效于以下代码 这里就不会再发送网络请求了。

原创 事件循环(Event Loop)

具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。，加入到消息队列的末尾排队，等待主线程调度执行。

原创 不建议在useEffect中进行数据获取的理由

原创 CSS-跟随图片变化的背景色

【代码】CSS-跟随图片变化的背景色。

原创 SSE与websocket

原创 监控页面卡顿PerformanceObserver

【代码】监控页面卡顿PerformanceObserver。

原创 class的访问器成员

【代码】class的访问器成员。

原创 requestAnimationFrame 深度理解

【代码】requestAnimationFrame 深度理解。

原创 消除异步的传染性(代数效应)

【代码】消除异步的传染性(代数效应)

原创 响应式图片img标签中srcset和sizes的使用

widthsizes。

原创 多行文本溢出自动加省略号

* 旧版弹性布局*/

原创 react: styled-components实现原理 标签模版

【代码】react: styled-components实现原理 标签模版。

原创 最快的找出100个RTT中耗时最短的IP地址(最大并发数为10)

【代码】findShortRTT 返回请求时间最短的ip。

原创 浏览器防截屏,录屏.

防截屏,录屏.

原创 CSS元素层叠顺序规则

CSS元素层叠顺序规则

原创 React fiber架构中 优先级是如何确定的?

React Fiber通过综合考虑任务的类型、紧急程度、用户行为、系统性能等多种因素，动态地确定和调整任务的优先级。这种优先级调度机制使得React能够更加智能地管理任务的执行顺序，在保证用户交互体验的同时，充分利用系统资源，提高应用的整体性能和响应速度。

原创 八股文-2025-02-12

一些面试问题

原创 eslint 安装与使用-基础教程

【代码】eslint 安装与使用-基础教程。

原创 micro-memoize 缓存计算结果

记忆化是一种优化技术，通过存储复杂计算的结果并在后续计算中重用这些结果，来避免不必要的重复计算。这意味着，一旦某个特定的输入（或一组输入）被传递给被记忆化的函数，其计算结果就会被存储起来，并在未来的调用中直接返回这个存储的结果，而不是重新执行整个计算过程。例如，假设你有一个计算斐波那契数列的函数，这个函数对于较大的输入值可能会非常慢，因为它会进行大量的重复计算。简而言之，micro-memoize 的作用是通过记忆化技术来优化函数执行，避免不必要的重复计算，从而提高程序的整体性能。

原创 前端地图数据开发

基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。

原创 js树形结构递归 常用函数

【代码】js树形结构递归 常用函数。

原创 umi3.x layout 右侧公共header头设置

【代码】umi3.x layout 右侧公共header头设置。

原创 ResizeObserver视图观察器

监测DOM元素尺寸改变. 替换 resize事件监听。

原创 使用 jsQR 识别图片中的二维码

jsQR 二维码图片识别 webworker

原创 为什么Vue3双向绑定使用Proxy

一文搞懂Object.defineProperty和Proxy，Vue3.0为什么采用Proxy？ vue 3.0 Proxy的使用

原创 将html字符串中的base64图片转换成file并上传

【代码】将html字符串中的base64图片转换成file并上传。

原创 React前端解析excel文件,获取excel文件中的数据

【代码】React前端解析excel文件,获取excel文件中的数据。

原创 umi2.x(webpack4.x)打包优化

umi打包优化 webpack 打包优化

原创 浏览器打印长table时按页拆分

js解决 长table 打印 拆分问题.

原创 变动观察器 MutationObeserver Web API

MutationObserver MutationObserver.observe() config的配置项 定义 DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。 var observer

原创 forEach中的await的执行顺序 与 for of等的区别

forEach中 异步任务的执行顺序. 先看代码 <script> let promiseTask = (num) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(num * num); resolve(true); }, 1000)

原创 Base64的js 实现

base64的js实现

原创 元素拖拽与定位

拖拽, js

原创 跨页面通信

同源页面间的跨页面通信 BroadCast Channel // 发送广播 const bc = new BroadcastChannel('flashPage'); bc.postMessage({ msg: 'flashPage', from: 'index.js', }); // 监听广播 const bc = new BroadcastChannel('flashPage'); bc.onmessage = (e) => { const data =

原创 单页面路由实现原理-hash

前端开发中的路由,其实就是操作url地址 改变浏览器地址 内容区切换内容 hash的特点 改变url的时候, 不会刷新页面 当 一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（location.hash）。 hashchange 用它来监听url路径变化 实现一个最简单的hash单页应用 事件委托 window.location.hash改变 hashchange事件监听 改变页面内容 <!DOCTYPE html> <html

原创 Map与 WeakMap 及WeakMap的主要作用

概念 ES6 提供了 Map 数据结构. 它类似与对象,也是键值对的集合. 但是 ‘键’ 的范围不限于字符串,各种类型的值(包括对象) 都可以当作键. Map 也实现了 Iterator接口, 所以可以使用 扩展运算符 和 for...of... 进行遍历. Map 键值对的集合是 对 键去重. 值可以是重复的. Map 的属性和方法 如果存在相同的键，则会按照FIFO（First in First Out,先进先出）原则，后面的键值信息会覆盖前面的键值信息。 1. size属性: 返回Map的元素的