- 博客(1009)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 [总结]前端性能指标分析、性能监控与分析、Lighthouse性能评分分析
前端性能指标分析旨在评估网页在加载速度、交互响应和视觉稳定性等方面的表现。常见核心指标包括 LCP（最大内容绘制）、FID（首次输入延迟）和 CLS（累计布局偏移），用于衡量用户体验。性能监控则通过埋点、Web Vitals API 或 Performance API 实时采集数据，识别性能瓶颈。Lighthouse 是 Google 提供的开源工具，可自动评估页面性能、可访问性、SEO 等，生成详细评分和优化建议，帮助开发者持续改进前端质量。
2025-06-01 15:49:37
1468
原创 BPMNJS自定义功能_Palette|Renderer|ContextPad|PropertyPanelPropertyPanel
若你不想使用已有的并在⚠️ 确保该 CSS 文件被引入到页面或项目中。在 bpmn-js 中，自定义 Renderer 是实现流程图元素个性化渲染的关键方式。通过继承或，你可以自定义节点的外观、尺寸、颜色、图标等属性。以下是实现自定义 Renderer 的基本步骤：(腾讯云创建自定义 Renderer 类新建一个类继承自，并实现drawShape// 仅渲染特定类型的元素，例如任务节点rx: 10,ry: 10,});
2025-05-26 09:26:49
902
原创 [项目总结篇]低代码——流程引擎：BPMNJS&Flowable工作流编辑器与引擎实现
本文介绍了一个支持多灾害模型集成的流程编排系统。针对各课题组编码标准不统一的问题，采用BPMN2国际规范，基于bpmn.js开发可视化流程编辑器，支持拖拽设计动态表单和模型流程。后端选用Flowable流程引擎，通过JSON Schema规则实现模型调用，并利用Python中间层解释执行。系统包含三大核心模块：1）流程编辑器，支持自定义属性面板和BPMN/SVG转换；2）流程引擎，提供模型编排与执行监控；3）布局引擎，实现可视化页面设计和组件交互。此外还集成地图开发模块，封装了基于百度SDK的业务地图渲染功
2025-05-24 12:26:01
1701
原创 [全网最全!!!从设计视角查看]BPMN.js流程编辑器底层设计原理
触发import.parse.complete。触发import.parse.start。ElementRegistry注册元素。一、核心类图（继承体系与模块依赖）一、类图（继承关系与核心模块）生成definitions对象。二、架构图（模块依赖关系）二、架构图（功能模块交互）触发import.done。BaseViewer初始化。绑定EventBus事件。BPMN-JS核心架构。Canvas渲染SVG。新增Palette工具。三、XML导入流程图。三、XML导入流程图。
2025-05-20 17:21:07
857
原创 [Vue内容梳理]响应式、虚拟DOM和Diff算法、模板编译、生命周期、实例方法、过滤器、指令和内置组件
在计算属性中直接修改可以吗？不可以会发出警告⚠，通过setter修改会触发响应式。
2025-05-16 09:55:04
1432
原创 流程编辑器Bpmn与LogicFlow学习
基于LogicFlow的可扩展架构，实现自定义节点、插件化开发，并结合BPMN 2.0规范适配器，确保流程数据与Camunda引擎兼容”。• 主导LogicFlow框架深度定制，开发20+符合BPMN规范的节点与连线，支持子流程嵌套、事件触发等复杂场景；• 设计LogicFlow自定义节点（如审批节点、网关节点）的View与Model层逻辑，解决复杂交互问题；• 开发BPMN XML与LogicFlow JSON的数据转换适配器，实现与后端流程引擎的无缝对接。
2025-05-15 14:21:56
852
原创 [推荐！前端性能优化全解]从首屏加载、动画卡顿、状态管理、视图管理和技术选型上分析性能
本文从网络层、资源压缩、缓存、代码拆分、资源加载优化、预渲染与预加载、浏览器渲染原理等多个方面，详细探讨了前端性能优化的策略与技术。网络层部分介绍了HTTP协议的迭代与优化，资源压缩则涵盖了构建时与部署时的压缩技术，缓存策略包括文件名哈希与HTTP缓存机制。代码拆分通过动态导入与公共模块提取优化加载效率，资源加载优化则通过预加载、关键CSS内联与异步JS加载提升首屏速度。预渲染与预加载技术进一步优化了页面跳转体验，而浏览器渲染原理则从解析、样式计算、布局、分层、绘制、合成与光栅化等环节深入剖析了渲染流程。
2025-05-14 20:48:47
1148
原创 0514得物、0509滴滴面试总结&复盘
目前最欠缺的还是，编码不是很熟，很多都遇到过但是就是写不出来，或者靠背先写一点，然后去加，加的过程没考虑逻辑是不是对的，用滴滴面试官的一句话，就是多刷多练多编码！而且编码总出错，目前编码顺利的就是滴滴一面，你熟悉，100%撕出来题目了！技术栈方面：得物面试要求技术栈为React+Typescript，这周先总结好各个数据结构和算法的Map思维导图，下周开始每日10题复盘刷+项目总结。今天是0514 ，距离秋招也就2个多月了，希望这两个多月，在编码和项目以及八股方面你有更加提升！Jinger，加油！
2025-05-14 18:59:21
831
原创 编译原理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
1421
原创 个人网站versionI正式上线了！Personal Website for Jing Liu
本系统采用React+TypeScript为核心的前端工程化方案，集成TailwindCSS+Ant Design构建现代化UI体系，融合ECharts+Three.js+Canvas实现数据可视化与动态交互，并接入百度地图API拓展地理信息服务，形成技术栈完备、响应式的个人网站解决方案。
2025-05-07 16:02:58
1142
原创 前端亮点：大文件上传技术详解及问题解析
• 优化：通过Web Worker多线程计算，避免主线程阻塞（如5GB文件Hash计算可缩短至3.5秒）。• 原理：前端计算文件Hash后，请求服务端校验是否存在相同Hash文件，存在则直接返回URL。• 策略：限制并发数（通常6个并发，避免浏览器TCP连接限制），失败分片自动重试。• 服务端：记录分片Hash和位置（如Redis临时存储），合并时校验完整性。• 容错机制：指数退避重试策略（如首次1秒后重试，第二次2秒，第三次4秒）。• 逻辑：服务端按分片索引顺序合并文件，避免顺序错乱导致文件损坏。
2025-04-20 16:18:04
1268
原创 IntersectionObserver&滚动动画、懒加载、虚拟列表等应用场景&代码实现
IntersectionObserver到阈值时触发回调。• 交叉区域计算：浏览器内部自动计算目标元素与根元素的交集区域，无需开发者手动处理几何信息。• 浏览器级优化：由浏览器底层实现，自动优化计算逻辑，避免主线程阻塞。• 按需执行：元素进入视口时播放 CSS/JS 动画，离开时暂停。• 动态渲染：仅渲染可视区域内的列表项，减少 DOM 节点数量。• 精准监测：记录广告元素进入视口的时间与比例，用于计费分析。：当前是否与根元素交叉（最常用属性）。
2025-04-20 08:30:00
1231
原创 项目难点&亮点
若依项目的核心挑战在于如何高效整合前后端技术栈，实现灵活可扩展的权限管理，同时保障安全性和性能。开发者需深入理解 Spring Security、Vue 组件化、MyBatis 拦截器等核心技术点，并结合实际业务需求进行定制化开发。
2025-04-07 19:54:34
1307
原创 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
1374
原创 2024Jinger的前端学习内容总结——前端学习路线（超全）
数据结构与算法、HTML、CSS、Javascript基础、高级以及ES6、Vue2&Vue3、React、Node、前端可视化Cesium|Three
2024-12-31 22:13:44
1002
原创 城市灾害应急管理集成系统——系统介绍
本系统是一款集3D GIS、无人机技术、视频GIS、AI GIS 和深度学习算法等技术于一体的仿真模拟与应急预案平台。系统面向多主体（机构领导、领域专家、救援人员与普通公众等）、灾害发展不同时期（灾前、灾中和灾后），支持内涝、团雾、火灾、传染病和地面塌陷五种灾害场景仿真模拟和应急预案，一定程度上能支撑灾前预警预报、灾中资源协调以及灾后救援评估的决策制定。
2024-12-21 15:36:41
1049
原创 前端项目【本科期间】
技术栈：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
642
原创 工作流入门这篇就够了！
本文记录自己这大半年老师让学习的工作流，因此本文也是以作者自身学习工作流的过程进行介绍。BPMN->工作设计器->工作流引擎
2024-01-03 23:07:54
7778
原创 博达网站群的入门级指南
笔者初次主导接手一个网站建设项目，该项目是基于博达网站群的Web网站建设。小挣了几千元~~ 在建设过程中，笔者发现网上相关资源虽然还比较多，但是很散，所以决定写一篇入门级的文章供参考。 资源推荐：博达网站：http://www.vsbclub.com/和B站上博达网站建设的相关视频。 文章内容和资源如有侵权请联系笔者，笔者将删除相关内容或整篇文章.........
2022-06-19 14:08:25
8490
5
原创 WebGIS入门
1.关于WebGISWebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是Internet 上地理信息发布、共享和交流协作的基础。互联网深刻地改变了我们的工作和生活,也改变了地理信息系统,两者的融合产生了WebGIS。随着互联网和移动互联网的迅速普及,WebGIS也迅速发展,以其广泛的应用价值和独特的魅力,成为现代生活的日常工具和现代社会的技术支柱。近些年来, We
2022-01-02 14:55:06
18299
原创 JWT授权token前端存储策略
HTTP`无状态`，需要记录登录状态——>常见的有Localstorage和Cookie。Cookie 是浏览器中一种小型数据存储机制，用于客户端与服务端之间的自动身份识别和状态维护。localStorage是 HTML5 提供的浏览器本地存储机制，支持以 key-value形式在客户端长期存储数据。采用「access token + refresh token」机制，access token 存在前端（通常是 memory 或 localStorage），refresh token 后端 HttpOnly
2025-06-12 11:25:52
404
原创 Vue Router知识框架以及面试高频问题详解
Vue Router 的核心考点在于配置、导航、守卫、懒加载、缓存、权限六大模块，围绕这些模块的用法和适用场景展开。history&hash模式区别、params和query参数区别、router与routes区别、路由导航的几种实现方式、懒加载和keep-alive搭配动态组件、前置全局路由守卫应用场景、权限控制实meta元信息判断是否缓存、性能优化问题
2025-06-12 10:13:31
515
原创 [前端]从零到精通：vTable 万级数据渲染不卡顿的秘密（Canvas 渲染原理详解）
vTable 是一个基于 HTML5 Canvas 渲染的高性能表格组件，专注于解决传统 DOM 表格在处理大数据量时的性能瓶颈。它的核心思想是：抛弃大量 DOM 操作，转而使用 Canvas 进行绘制，从源头解决 DOM 渲染效率低的问题。vTable 不仅是一个表格组件，更是一种对前端性能极限挑战的优秀实践。通过 Canvas 技术，我们能够轻松驾驭海量数据的展示需求，为用户带来丝滑体验。
2025-06-11 20:00:15
698
原创 详细分析React中合成事件和js原生事件到底差别在哪
在 React 应用中，合成事件通过事件委托机制提供比原生事件更优的性能和一致性，同时保证与现代 React 架构（Fiber、并发模式）的深度集成。虽然它们表面上看起来与原生事件相似，但底层机制完全不同，理解这些差异对于编写高性能、无内存泄漏的 React 应用至关重要。
2025-06-11 07:30:00
859
原创 React【回顾】 深层次面试详解：函数式组件核心原理与高级优化
一、React核心机制剖析1. Fiber架构深解2. 调和算法(Reconciliation)3.事件系统原理8二、Hooks机制深度解析1. Hooks实现原理2. useState/useReducer 核心3. useEffect 执行细节4.useRef 底层机制三、高级性能优化策略1. 渲染优化进阶2. 并发模式 (Concurrent Mode)3.虚拟化与流式渲染四、设计模式与架构思想1. 状态管理架构2.领域驱动设计应用3.渲染控制模式五、错误处理与调试
2025-06-10 21:09:57
825
原创 Zustand 状态管理库：极简而强大的解决方案
设计理念与开发体验简洁性：Zustand的设计理念更加简洁，减少了样板代码的使用。例如，创建一个计数器功能，Zustand只需要15行代码，而Redux则需要50多行代码。开发效率：Zustand通过减少样板代码，提升了开发效率。性能优化机制精准更新：Zustand能够精准地更新组件，避免了无效渲染，从而提高了应用的性能。灵活性与扩展性渐进式适配：Zustand既适合小型项目，也能扩展至大型应用。它提供了内置的异步支持、持久化功能和DevTools支持，使得开发者可以灵活地根据项目需求进行
2025-06-10 20:49:16
797
原创 前端亮点——大片文件上传解决方案（代码解析）
1. 核心流程分支小文件直传：通过条件判断直接绕过分片逻辑（适用于<100MB文件）·大文件分片：采用动态分片策略（示例中5MB/片），支持并发上传和重试机制·秒传验证：基于文件Hash的服务器校验，避免重复传输62. 容错机制设计·分片重试：单分片失败自动重试（最多3次），失败分片标记隔离·完整性校验：合并前服务端验证分片数量和Hash，防止数据损坏5·错误恢复：支持从断点位置继续上传（依赖本地存储的分片记录）63. 性能优化点·并发控制：浏览器环境下建议3-5个并行线程（避免TCP）
2025-06-09 20:43:58
370
原创 [GIS]从MeshLab到pyMeshLab：3D网格处理的利器全攻略
本文介绍了3D网格处理工具MeshLab及其Python接口pyMeshLab。MeshLab是开源的跨平台软件，支持网格清理、修复、简化等功能。pyMeshLab则提供Python自动化接口，适合批量处理。文章涵盖了两者的安装方法，并展示了pyMeshLab的常见操作示例，如加载网格、简化、法线计算和孔洞修复等。此外，还对比了GUI和脚本化处理的优缺点，并提供了批量处理脚本范例和参考资源。这两个工具为科研和工业领域的3D网格处理提供了高效解决方案。
2025-06-09 16:51:47
876
原创 开发环境的自动刷新机制（livereload 或 HMR）惹的祸——上传大量数据时，传了几片后协议从 HTTP 变成了 WS（WebSocket），导致页面重新加载、上传任务中断
开发环境livereload功能可能导致上传中断问题分析： 当使用IDE的livereload功能时，上传过程中可能触发页面自动刷新，导致上传中断。原因是开发服务器通过WebSocket监控文件变化，上传文件若被写入监控目录会触发重载。解决方案包括：1) 禁用livereload功能；2) 配置开发服务器忽略上传目录；3) 使用生产模式单独测试上传。注意WebSocket连接是正常的livereload通信，不会影响实际上传协议。
2025-06-09 08:00:00
1177
原创 React、Git、计网、发展趋势等内容——前端面试宝典（字节、小红书和美团）
React（生命周期、Hook原理、Fiber原理、受控和非受控表单、无状态组件和状态组件）、Git（常见命令、merge和rehea）、计网（http无状态解决方案）、发展趋势（发展趋势：无虚拟DOM&打包工具）等内容——前端面试宝典（字节、小红书和美团）
2025-06-08 13:23:45
1265
原创 MVC、MVP与MVVM架构详解
本文对比分析了前端开发中三种主流架构模式：MVC、MVP和MVVM。MVC模式允许视图直接访问模型，适用于小型项目但耦合度高；MVP通过presenter中介实现视图与模型解耦，适合复杂界面但可能臃肿；MVVM采用双向数据绑定，广泛应用于Vue.js等现代框架。文章详细阐述了各模式的组成、特点、优缺点及适用场景，并提供了对比表格和框架对应关系，帮助开发者根据项目需求选择合适的架构方案。
2025-06-08 08:30:00
648
原创 Webworker详解&应用场景大片文件Hash计算
Web Worker 是一种在后台线程中运行 JavaScript 的机制，允许将耗时的任务从主线程中分离出来，从而避免阻塞用户界面。通过 Web Worker，开发者可以在不影响页面响应的情况下，执行复杂的计算或数据处理任务。独立线程：运行在主线程之外，避免阻塞 UI。消息通信：通过 postMessage 和 onmessage 实现与主线程的数据交换。受限环境：无法访问 DOM 和某些全局对象，如 window 和 document。
2025-06-08 08:30:00
824
原创 [总结篇]个人网站
摘要： 该项目开发了一个响应式个人网站，整合WebGL粒子特效、ECharts数据可视化与地图API轨迹展示，通过设备监听Hooks实现跨端适配。采用Intersection Observer懒加载优化性能，使用Lighthouse评估改进Web Vitals指标。部署方面配置Nginx反向代理与HTTPS，并自研前端监控SDK采集性能数据。项目实践了现代前端技术栈与性能优化方案，未来计划扩展为内容管理及实时监控平台。（149字）
2025-06-07 19:16:45
344
原创 [最全总结]城市灾害应急管理系统
在智慧城市战略背景下，项目面向内涝、团雾和火灾等灾害，开发了集灾害`模型集成模拟、场景可视化与应急预案管理`于一体的系统，系统各子模块进行软件功能测试，测试结果稳定可靠。
2025-06-07 17:34:29
829
原创 Three.js中AR实现详解并详细介绍基于图像标记模式AR生成的详细步骤
1. AR.js是Three.js实现AR的基石，提供以下核心能力： - 多模式追踪：支持图像标记（Pattern Marker）、自然特征（NFT）、地理位置（Location Based）及平面检测（WebXR）。 - 跨平台性：基于WebGL和WebRTC，兼容iOS/Android/PC主流浏览器，无需安装插件。 - 轻量化：核心库仅200KB（gzip压缩），渲染效率达60fps。
2025-06-06 15:05:20
904
原创 基于TS开发了一个SDK包并发布详细步骤
本文详细介绍了如何发布一个兼容多种环境的TypeScript SDK包。主要步骤包括： 项目准备：初始化项目并安装TypeScript及构建工具 配置TypeScript：设置tsconfig.json支持多模块类型 编写SDK代码：示例展示了一个简单的greet函数 构建配置：使用tsup工具打包生成ESM、CommonJS和IIFE格式 发布准备：配置package.json的导出入口和文件声明 发布流程：登录npm并发布包 使用说明：提供各种环境下的引入示例 整个过程涵盖了从开发到发布的完整工作流，确
2025-06-06 12:52:31
796
原创 TypeScript常考内容总结
TypeScript是JavaScript的超集，添加了静态类型系统和面向对象特性。主要内容包括：1)类型声明与推断；2)接口(interface)与类型别名(type)的区别；3)泛型增强代码复用；4)枚举提升可读性；5)联合/交叉类型处理复杂类型；6).d.ts声明文件为JS库提供类型；7)模块化开发；8)类型断言解决类型问题；9)类型守卫确保运行时安全；10)装饰器实现元编程。TypeScript通过编译时类型检查，提高了代码质量和开发体验，特别适合大型项目。
2025-06-06 11:47:32
855
原创 TS[推荐]超全！！TypeScript 中 declare关键字的详解
declare是用来描述已有变量、函数、模块、类型的“声明”`而非“实现”的关键字。它告诉编译器`某个标识符的类型信息，而无需提供具体实现.告诉 TypeScript 某些`东西虽然没有实现，但“它确实存在”`当你使用第三方库、全局变量、老旧 JS,增强类型系统兼容性,支持工程化SDK
2025-06-05 16:34:11
1233
【WebGIS系统古村古镇数字化平台源码】古村古镇数字化平台，作者热门文章[WebGIS入门、WebGIS期末作业等]的源码
2024-07-17
Lisflood-FP 5软件包
2024-03-01
水文模型SWMM和Lisflood
2024-01-26
基于博达网站建设群的网站搭建
2022-06-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人