- 博客(946)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 [Vue内容梳理]响应式、虚拟DOM和Diff算法、模板编译、生命周期、实例方法、过滤器、指令和内置组件
在计算属性中直接修改可以吗？不可以会发出警告⚠，通过setter修改会触发响应式。
2025-05-16 09:55:04
1248
原创 流程编辑器Bpmn与LogicFlow学习
基于LogicFlow的可扩展架构，实现自定义节点、插件化开发，并结合BPMN 2.0规范适配器，确保流程数据与Camunda引擎兼容”。• 主导LogicFlow框架深度定制，开发20+符合BPMN规范的节点与连线，支持子流程嵌套、事件触发等复杂场景；• 设计LogicFlow自定义节点（如审批节点、网关节点）的View与Model层逻辑，解决复杂交互问题；• 开发BPMN XML与LogicFlow JSON的数据转换适配器，实现与后端流程引擎的无缝对接。
2025-05-15 14:21:56
703
原创 [推荐！前端性能优化全解]从首屏加载、动画卡顿、状态管理、视图管理和技术选型上分析性能
本文从网络层、资源压缩、缓存、代码拆分、资源加载优化、预渲染与预加载、浏览器渲染原理等多个方面，详细探讨了前端性能优化的策略与技术。网络层部分介绍了HTTP协议的迭代与优化，资源压缩则涵盖了构建时与部署时的压缩技术，缓存策略包括文件名哈希与HTTP缓存机制。代码拆分通过动态导入与公共模块提取优化加载效率，资源加载优化则通过预加载、关键CSS内联与异步JS加载提升首屏速度。预渲染与预加载技术进一步优化了页面跳转体验，而浏览器渲染原理则从解析、样式计算、布局、分层、绘制、合成与光栅化等环节深入剖析了渲染流程。
2025-05-14 20:48:47
1097
原创 0514得物、0509滴滴面试总结&复盘
目前最欠缺的还是，编码不是很熟，很多都遇到过但是就是写不出来，或者靠背先写一点，然后去加，加的过程没考虑逻辑是不是对的，用滴滴面试官的一句话，就是多刷多练多编码！而且编码总出错，目前编码顺利的就是滴滴一面，你熟悉，100%撕出来题目了！技术栈方面：得物面试要求技术栈为React+Typescript，这周先总结好各个数据结构和算法的Map思维导图，下周开始每日10题复盘刷+项目总结。今天是0514 ，距离秋招也就2个多月了，希望这两个多月，在编码和项目以及八股方面你有更加提升！Jinger，加油！
2025-05-14 18:59:21
310
原创 编译原理AST&以Babel为例进行解读、Webpack中自定义loader与plugin
编译原理：高级语言->机器（浏览器）能识别语言 | AST处理过程：1. 词法分析(Lexical Analysis)2.语法分析(Syntax Analysis)3.转换与优化4. 代码生成 | AST在前端应用：1. Vue的模板编译 2.ES6与Babel 3.其他工具链 4.Tree-shaking中的应用 |自定义Loader、Plugin：`Loader` 主要用于对模块的源代码进行转换处理（函数），而 `Plugin` 则用于扩展 Webpack 的打包能力与生命周期管理（类）
2025-05-12 21:19:28
1388
原创 [超详细，推荐！！！]前端性能优化策略详解
1️⃣ 核心指标优化：关注FCP（首次内容渲染）、LCP（最大内容渲染）、CLS（布局稳定性）等首屏性能指标，通过压缩资源（图片WebP/字体子集化）、代码拆分、懒加载等减少首屏资源体积，目标FCP<1.8秒、LCP<2.5秒。2️⃣ 加载策略升级：预加载关键资源（CSS/字体）、服务端渲染（SSR）及静态生成（SSG）加速内容呈现；针对动画卡顿，减少主线程阻塞（Web Worker拆分任务）、启用GPU加速（transform/opacity）。3️⃣ 框架级优化：
2025-05-11 16:39:07
1514
原创 个人网站versionI正式上线了！Personal Website for Jing Liu
本系统采用React+TypeScript为核心的前端工程化方案，集成TailwindCSS+Ant Design构建现代化UI体系，融合ECharts+Three.js+Canvas实现数据可视化与动态交互，并接入百度地图API拓展地理信息服务，形成技术栈完备、响应式的个人网站解决方案。
2025-05-07 16:02:58
1102
原创 前端亮点：大文件上传技术详解及问题解析
• 优化：通过Web Worker多线程计算，避免主线程阻塞（如5GB文件Hash计算可缩短至3.5秒）。• 原理：前端计算文件Hash后，请求服务端校验是否存在相同Hash文件，存在则直接返回URL。• 策略：限制并发数（通常6个并发，避免浏览器TCP连接限制），失败分片自动重试。• 服务端：记录分片Hash和位置（如Redis临时存储），合并时校验完整性。• 容错机制：指数退避重试策略（如首次1秒后重试，第二次2秒，第三次4秒）。• 逻辑：服务端按分片索引顺序合并文件，避免顺序错乱导致文件损坏。
2025-04-20 16:18:04
1242
原创 IntersectionObserver&滚动动画、懒加载、虚拟列表等应用场景&代码实现
IntersectionObserver到阈值时触发回调。• 交叉区域计算：浏览器内部自动计算目标元素与根元素的交集区域，无需开发者手动处理几何信息。• 浏览器级优化：由浏览器底层实现，自动优化计算逻辑，避免主线程阻塞。• 按需执行：元素进入视口时播放 CSS/JS 动画，离开时暂停。• 动态渲染：仅渲染可视区域内的列表项，减少 DOM 节点数量。• 精准监测：记录广告元素进入视口的时间与比例，用于计费分析。：当前是否与根元素交叉（最常用属性）。
2025-04-20 08:30:00
1164
原创 项目难点&亮点
若依项目的核心挑战在于如何高效整合前后端技术栈，实现灵活可扩展的权限管理，同时保障安全性和性能。开发者需深入理解 Spring Security、Vue 组件化、MyBatis 拦截器等核心技术点，并结合实际业务需求进行定制化开发。
2025-04-07 19:54:34
1265
原创 前端性能优化的全方位方案【待进一步结合项目】
优化方向关键技术点收益指标代码质量Tree Shaking/事件委托JS体积减少30%-50%构建优化代码分割/图片压缩构建时间缩短40%网络传输CDN/Gzip压缩/HTTP2首屏加载提速50%-70%渲染性能懒加载/GPU加速FPS提升至60+缓存策略Service Worker/浏览器缓存重复访问速度提升90%扩展建议使用Web Worker处理复杂计算（网页4/8）采用Brotli压缩替代Gzip（网页6）实现虚拟滚动处理长列表（网页8）
2025-04-06 14:02:39
1454
原创 React中Element&Fiber对象、WorkInProgress双缓存、Reconcile&Render&Commit、第一次挂载过程详解
React 的三阶段模型（更新、渲染、提交）清晰地分离了调度逻辑、UI 计算和 DOM 操作，结合 Fiber 架构和时间切片机制，使得 React 能够高效地响应用户交互，同时保持良好的性能表现和一致性。FiberRootNode 是全局调度的核心，而 HostRootFiber 是组件树的根节点。两者紧密配合，共同完成 React 的渲染和更新流程。Fiber 是 React 内部实现的一部分，开发者通常无需直接操作，而是通过 声明式 API（如 JSX 和 hooks）间接影响 Fiber构建与更新
2025-01-13 20:25:48
1346
原创 2024Jinger的前端学习内容总结——前端学习路线（超全）
数据结构与算法、HTML、CSS、Javascript基础、高级以及ES6、Vue2&Vue3、React、Node、前端可视化Cesium|Three
2024-12-31 22:13:44
989
原创 城市灾害应急管理集成系统——系统介绍
本系统是一款集3D GIS、无人机技术、视频GIS、AI GIS 和深度学习算法等技术于一体的仿真模拟与应急预案平台。系统面向多主体（机构领导、领域专家、救援人员与普通公众等）、灾害发展不同时期（灾前、灾中和灾后），支持内涝、团雾、火灾、传染病和地面塌陷五种灾害场景仿真模拟和应急预案，一定程度上能支撑灾前预警预报、灾中资源协调以及灾后救援评估的决策制定。
2024-12-21 15:36:41
1003
原创 前端项目【本科期间】
技术栈：Vue.js|Vuex|ElemntUI|Axios|Cesium|Echarts|Three|Webpack。5.2首页标题列表组件：“栏目管理”》首页》首页栏目主模板》操作下的设置资料来源；2.内容上传：复制上传静态网页到博达网站群（HTML、CSS、JS和相关资料等等）；4.绑定相关组件： 包括系统推荐组件、基本组件和栏目资料组件等组件；5.1导航条内容设置：在“栏目管理”中新建所需栏目；3.新建页面模板：新建首页、列表页和内容页的页面模板；**说明：最初版本为纯HTML页面，无框架**
2024-10-24 21:45:53
630
原创 【WebGIS附源码】从设计层面设计系统
概念模型的E-R图到逻辑模型的映射规则：（1）实体转换：将E-R图中的每个实体转换为一个关系表（或称为关系模式)、实体的属性成为关系表的列(字段)、实体的主键成为关系表的主键。（2）关系的转换：一对一关系通常不需要创建一个新的关系表来表示这种关系，而是可以在其中一个实体的关系表中添加另一个实体的主键作为外键、一对多关系:在"多"的一方的关系表中添加“一"的一方的主键作为外键、多对多关系:必须创建一个新的关系表来表示这种关系，该表至少包含两个外键，分别指向两个相关实体的主键，并可以包含描述关系的属性。
2024-07-12 23:27:15
2765
13
原创 从客户端WebAPI视角下解读前端学习
地图相关：openlayer、leaflets、ArcGIS API for JS、高德、腾讯、百度...应用程序接口（API，Application Programming Interface）是。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。（绘图Canvas->WebGL,2D 3D）（控制浏览器示意图显示内容）JavaScript 库。JavaScript 库。
2024-06-12 17:21:31
1699
1
原创 WebGIS下——焕新
WebGIS入门_GISer_Jing的博客-CSDN博客在WebGIS入门篇，前端使用了纯HTML、CSS、Javascript、Jquery较为传统方式构建，服务器借助ArcGIS Srver发布相关地理服务且涉及到GIS，自行构建后端且涉及到数据库。So,WebGIS进阶来了！！！！本文大概是关于：Vue2+Cesium+Openlayers+Java+MySQL+Tomcat。
2024-05-20 22:35:18
1297
原创 工作流入门这篇就够了！
本文记录自己这大半年老师让学习的工作流，因此本文也是以作者自身学习工作流的过程进行介绍。BPMN->工作设计器->工作流引擎
2024-01-03 23:07:54
7363
原创 博达网站群的入门级指南
笔者初次主导接手一个网站建设项目，该项目是基于博达网站群的Web网站建设。小挣了几千元~~ 在建设过程中，笔者发现网上相关资源虽然还比较多，但是很散，所以决定写一篇入门级的文章供参考。 资源推荐：博达网站：http://www.vsbclub.com/和B站上博达网站建设的相关视频。 文章内容和资源如有侵权请联系笔者，笔者将删除相关内容或整篇文章.........
2022-06-19 14:08:25
8320
5
原创 WebGIS入门
1.关于WebGISWebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是Internet 上地理信息发布、共享和交流协作的基础。互联网深刻地改变了我们的工作和生活,也改变了地理信息系统,两者的融合产生了WebGIS。随着互联网和移动互联网的迅速普及,WebGIS也迅速发展,以其广泛的应用价值和独特的魅力,成为现代生活的日常工具和现代社会的技术支柱。近些年来, We
2022-01-02 14:55:06
18120
原创 CSS-in-JS：现代前端样式管理的革新
CSS-in-JS 通过将样式与组件逻辑紧密结合，解决了传统 CSS 在组件化开发中面临的诸多问题，如样式冲突、动态样式难以实现、样式复用性差等。在 React 和 Vue 中，开发者可以根据项目需求选择合适的 CSS-in-JS 库，如 styled-components、Emotion、vue-styled-components、vue-emotion 等。随着前端技术的发展，CSS-in-JS 将在组件化开发中发挥越来越重要的作用。希望这篇文章能帮助你更好地理解 CSS-in-JS 技术。
2025-05-18 12:19:19
609
原创 深入理解 JavaScript 前端垃圾回收机制
垃圾回收是一种自动内存管理机制，用于识别并释放不再被程序使用的内存空间。在 JavaScript 中，垃圾回收器会定期扫描内存中的对象，标记那些可达对象和不可达对象。可达对象指的是当前代码中正在被使用的对象，而不可达对象指的是已经不再被引用的对象。垃圾回收器会将不可达对象标记为垃圾对象，并将它们从内存中清除。CSDN博客深入理解 JavaScript 的垃圾回收机制，有助于我们编写更高效、稳定的前端应用程序。通过遵循最佳实践，合理管理内存，可以有效避免内存泄漏，提高应用的性能和用户体验。阿里云开发者社区。
2025-05-18 12:15:48
555
原创 AI知识梳理——RAG、Agent、ReAct、LangChain、LangGraph、MCP、Function Calling、JSON-RPC
这种交替进行的思考与行动流程，使模型在处理多步推理或需要外部信息的任务时，表现得更加灵活和高效。LangChain 是一个开源框架，旨在简化基于大型语言模型（LLM）的应用程序的开发。Action（行动）：根据推理结果，选择并调用外部工具（如搜索引擎、计算器等）。处理结果：LLM 处理工具返回的结果，判断是否完成任务，或需进一步操作。Observation（观察）：获取工具返回的结果，作为新的信息输入。（Integrations）：支持与外部数据源、工具和服务的集成，
2025-05-17 21:12:00
820
原创 [前端高频]数组转树、数组扁平化、深拷贝、JSON.stringify&JSON.parse等手撕
通过队列（Queue）实现层级遍历，先处理父节点，再按层级依次处理子节点，适合需要按层级顺序输出ID的场景。递归遍历的核心逻辑是先处理当前节点的ID，再递归处理其子节点，适用于层级较深但数据量适中的场景。要将给定的树形结构数据中的所有节点ID提取到数组中，可以采用。• 性能优化：对超大规模数据，广度优先遍历内存占用更低。• 去重：若树中存在重复ID，可通过。为空数组，需避免遍历错误。• 空值处理：若节点无。
2025-05-17 17:35:07
246
原创 React底层架构深度解析：从虚拟DOM到Fiber的演进之路
React通过JSX语法将组件转换为轻量级JavaScript对象（即虚拟DOM），而非直接操作真实DOM。• 双缓冲技术：维护current（当前树）与workInProgress（构建树），避免渲染过程出现页面闪烁。• 性能飞跃：通过Diff算法对比新旧虚拟DOM差异，仅更新变化部分，减少真实DOM操作次数。• 任务分片：将组件树拆解为可中断的Fiber节点链表，每个节点包含组件类型、状态等信息。• 跨平台能力：抽象出与平台无关的UI描述，支持Web、Native、VR等多端渲染。
2025-05-16 18:12:53
734
原创 前端图形渲染 html+css、canvas、svg和webgl绘制详解，各个应用场景及其区别
技术类型渲染方式交互性缩放性性能适用场景HTML+CSS声明式DOM 渲染高高中基础布局、简单图形SVG声明式矢量图形高高中图表、图标、地图等静态图形Canvas命令式像素渲染低低高动画、游戏、实时数据可视化WebGL命令式GPU 加速渲染中高极高3D 游戏、VR/AR、复杂数据可视化极客时间CSDN博客。
2025-05-15 14:19:39
1010
原创 React useState 的同步/异步行为及设计原理解析
默认是异步更新，这种设计通过批量处理减少渲染次数，优化性能。但在原生事件或异步代码中，由于脱离 React 的调度管控，会表现为同步更新。• 脱离 React 的管控：在原生事件或异步代码中，React 的批处理机制失效，导致同步更新。（Batching）：React 将多个状态更新合并为一次渲染，A：函数式更新直接基于最新状态计算，而非闭包中的旧值。• Q：为什么函数式更新能解决异步更新的闭包问题？• 更新队列：React 将状态变更存入队列，的更新会立即生效，表现为同步更新。
2025-05-14 11:45:01
919
原创 Vue 和 React 状态管理的性能优化策略对比
一、Vue状态管理优化策略1. 合理使用Vuex模块化2.优化计算属性和侦听器3.懒加载与按需加载4.虚拟列表与渲染优化5.减少响应式依赖二、React状态管理优化策略1.选择合适的状态管理方案2.不可变数据与渲染控制3.代码分割与懒加载4.虚拟化与并发模式5. 性能分析与工具三、Vue与 React优化策略对比·状态管理工具：Vuex模块化vs Redux/Recoil·渲染控制：v-if/v-show Vs React.memo 代码加载：动态导入vs React.lazy
2025-05-14 10:56:16
962
原创 浏览器渲染机制中的重排（Reflow）优化策略，你还在多次读写元素宽高属性？
优化建议（结合浏览器机制）缓存布局属性：将需要多次使用的布局属性（如 offsetWidth）存入变量，避免重复访问。批量 DOM 操作：使用 DocumentFragment 或 display: none 将元素脱离文档流后再修改，减少重排影响范围。优先使用合成属性：如 transform 和 opacity，它们仅触发合成阶段（不经过布局和绘制），性能更高。通过理解浏览器的渲染流水线（解析→布局→绘制→合成），可以针对性减少耗时操作（如重排），提升页面性能。
2025-05-14 10:26:59
237
原创 React面试常问问题详解
基础部分包括 React 的定义、JSX、Virtual DOM、组件分类、生命周期方法、受控与非受控组件、事件处理机制、key 和 ref 的作用以及条件渲染。Hooks 部分介绍了 useState、useEffect、useMemo、useCallback 和自定义 Hook 的用法。性能优化部分涉及 React.memo、shouldComponentUpdate、高阶组件（HOC）和代码分割。状态管理部分讨论了状态提升、Context、Redux 核心概念、中间件和 React Router 的
2025-05-13 19:34:00
1379
原创 Webpack&Vite总结篇与进阶
打包优化资源管理和环境注入老版本webpack插件：代码优化plugin：mini-css-estract-plugin（提取）、compression-webpack-plugin（压缩文件）、terser-webpack-plugin(压缩js代码）、cssMinizer（压缩css）、split-chunk-plugin（分割）
2025-05-13 19:27:21
299
原创 Webpack中Compiler详解以及自定义loader和plugin详解
Compiler 是 Webpack 的“大脑”，负责调度整个构建流程，管理生命周期、插件系统和全局资源，单次构建的上下文，由 Compiler 创建。Compilation管理模块、依赖、Chunk 等具体资源。插件：初始化阶段: 在 compiler.run() 前，所有插件通过 apply() 方法注册钩子监听。构建阶段: 各生命周期钩子按顺序触发，执行插件的回调逻辑。
2025-05-12 21:53:50
1103
原创 前端性能指标及优化策略——从加载、渲染和交互阶段分别解读详解并以Webpack+Vue项目为例进行解读
前端性能指标及优化策略——从加载、渲染和交互阶段分别解读详解并以Webpack+Vue项目为例进行解读， 懒加载、代码分割、缓存、压缩和网络优化 一一详解，并给出webapck+vue的配置代码实例
2025-05-11 15:13:21
1353
原创 前端性能优化
通过上述技术体系的实施，可将首屏加载时间缩短40-60%，交互流畅度提升2-3倍。• 图片压缩策略：WebP/AVIF格式在同等质量下比JPEG/PNG减少30-50%体积，配合Base64内联小图标。• 时间函数：采用cubic-bezier(0.25,0.1,0.25,1)替代ease-in-out获得更平滑效果。• 字体优化：使用font-display: swap避免FOIT，通过子集化减少字体文件体积。DNS预解析 <link rel="dns-prefetch"> 跨域资源预解析。
2025-05-10 22:06:47
1171
原创 前端性能优化全攻略：从基础体验到首屏加载的深度实践
前端性能优化是持续演进的系统工程，既要把握打开速度、交互流畅等基础体验，也要深入框架底层实施精细化优化。通过构建"基础四维模型+首屏专项优化"的双层体系，配合完善的监控系统，方能打造出高性能的现代Web应用。本文将从基础交互优化和首屏加载专项两个维度，系统梳理前端性能优化的关键策略。这篇文章完整覆盖了图片中的技术要点，并进行了适当的技术扩展，采用"总-分-总"结构增强可读性，适合作为前端性能优化的专题参考文档。（对应图片1的四维优化体系，补充技术实现细节）• 服务端渲染（SSR）与静态生成（SSG）
2025-05-10 22:05:09
420
原创 前端工程化和性能优化问题详解
前端工程化是通过工具链和规范化流程，将开发、测试、构建、部署等环节标准化、自动化的实践体系。◦ 代码质量：ESLint（语法检查）+ Prettier（代码格式化）+ Husky（Git钩子强制检查）。面试中需通过具体案例体现系统性思维，并展示对新技术的持续关注（如ESM、HTTP/3、Rust工具链）。◦ 构建工具：Webpack（复杂项目）、Vite（轻量快速）、Rollup（库开发）。◦ 测试体系：Jest（单元测试）、Cypress（端到端测试）确保功能稳定性。
2025-05-09 19:36:57
965
原创 Vue3 中 ref 与 reactive 的区别及底层原理详解
ref和reactive是 Vue3 响应式系统的两大核心 API：•ref通过.value封装简化基本类型响应式，兼顾对象类型的灵活性。•reactive利用Proxy实现深度监听，适合复杂状态管理。开发者应根据数据类型、更新频率及使用场景选择最合适的 API，必要时结合toRefs优化代码结构。
2025-05-09 19:23:48
718
【WebGIS系统古村古镇数字化平台源码】古村古镇数字化平台，作者热门文章[WebGIS入门、WebGIS期末作业等]的源码
2024-07-17
Lisflood-FP 5软件包
2024-03-01
水文模型SWMM和Lisflood
2024-01-26
基于博达网站建设群的网站搭建
2022-06-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人