- 博客(62)
- 收藏
- 关注
RSS订阅原创 事件循环(Event Loop)
具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。，加入到消息队列的末尾排队，等待主线程调度执行。
2025-05-29 13:44:28
897
原创 React fiber架构中 优先级是如何确定的?
React Fiber通过综合考虑任务的类型、紧急程度、用户行为、系统性能等多种因素，动态地确定和调整任务的优先级。这种优先级调度机制使得React能够更加智能地管理任务的执行顺序，在保证用户交互体验的同时，充分利用系统资源，提高应用的整体性能和响应速度。
2025-02-20 15:50:55
574
原创 micro-memoize 缓存计算结果
记忆化是一种优化技术，通过存储复杂计算的结果并在后续计算中重用这些结果，来避免不必要的重复计算。这意味着，一旦某个特定的输入（或一组输入）被传递给被记忆化的函数，其计算结果就会被存储起来，并在未来的调用中直接返回这个存储的结果，而不是重新执行整个计算过程。例如，假设你有一个计算斐波那契数列的函数，这个函数对于较大的输入值可能会非常慢，因为它会进行大量的重复计算。简而言之，micro-memoize 的作用是通过记忆化技术来优化函数执行，避免不必要的重复计算，从而提高程序的整体性能。
2024-10-14 22:55:19
397
原创 前端地图数据开发
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
2024-10-13 18:47:07
492
原创 为什么Vue3双向绑定使用Proxy
一文搞懂Object.defineProperty和Proxy，Vue3.0为什么采用Proxy？vue 3.0 Proxy的使用
2024-01-29 09:37:45
596
原创 变动观察器 MutationObeserver Web API
MutationObserverMutationObserver.observe()config的配置项定义DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。 var observer
2022-04-11 20:56:08
274
1
原创 forEach中的await的执行顺序 与 for of等的区别
forEach中 异步任务的执行顺序.先看代码<script> let promiseTask = (num) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(num * num); resolve(true); }, 1000)
2022-03-10 22:16:14
6290
原创 跨页面通信
同源页面间的跨页面通信BroadCast Channel// 发送广播const bc = new BroadcastChannel('flashPage'); bc.postMessage({ msg: 'flashPage', from: 'index.js',});// 监听广播const bc = new BroadcastChannel('flashPage'); bc.onmessage = (e) => { const data =
2022-01-13 09:49:49
354
原创 单页面路由实现原理-hash
前端开发中的路由,其实就是操作url地址改变浏览器地址内容区切换内容hash的特点改变url的时候, 不会刷新页面当 一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（location.hash）。hashchange 用它来监听url路径变化实现一个最简单的hash单页应用事件委托window.location.hash改变hashchange事件监听改变页面内容<!DOCTYPE html><html
2021-11-10 23:42:16
920
原创 Map与 WeakMap 及WeakMap的主要作用
概念ES6 提供了 Map 数据结构. 它类似与对象,也是键值对的集合. 但是 ‘键’ 的范围不限于字符串,各种类型的值(包括对象) 都可以当作键. Map 也实现了 Iterator接口, 所以可以使用 扩展运算符 和 for...of... 进行遍历.Map 键值对的集合是 对 键去重. 值可以是重复的.Map 的属性和方法如果存在相同的键，则会按照FIFO（First in First Out,先进先出）原则，后面的键值信息会覆盖前面的键值信息。1. size属性: 返回Map的元素的
2021-11-10 22:36:22
656
原创 实战 react-redux 在vite 中的应用
关键点多个reducer 如何统一导出如何在dispatch时 指定对应的reducer如何在每个 reducer 中初始化自己的state.项目githttps://github.com/zsz91/vite-react 欢迎fork直接上代码store.tsimport { createStore,combineReducers } from 'redux';import reducers from '../reducer';export default createStore(
2021-09-16 13:36:28
704
原创 主流前端框架的实现原理
主流前端框架的实现原理StackOverflow 报告 2021热门Web领域框架(前后端)排名SvelteASP.NET CoreFastAPIReact.jsVue框架开发的应用抽象(3层)应用 => 组件 => 节点最小的单位是节点节点+ 业务逻辑 = 组件多个组件 = 应用框架的工作原理UI = f(state) // UI 是视图 state是状态 f是框架内部的运行机制框架之间的区别主要是***更新粒度***的区别 应用级 > 组件级 &
2021-08-31 23:40:23
699
原创 使用commonjs加载React组件模块
为什么要用commonjs 加载组件需求场景: 现在有大量的子组件存放在对应文件夹, 但是我在父组件每次只需加载其中一个即可,我不想一次性导入大量的子组件,然后加判断筛选出对应组件。这样代码可能会非常多、杂( 比如我有20个子组件,那么我要写20个import);于是我通过require动态载入直接上代码import React from 'react';const options = [ // 组件列表 { label: '纯布局组件', value: 'Parent',
2021-08-31 17:41:35
607
原创 MutationObserver 变动观察器
MutationObserverMutationObserver.observe()config的配置项定义DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。 var observer
2021-08-19 10:40:51
391
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人