- 博客(25)
- 收藏
- 关注
RSS订阅原创 performance.now()
高精度计时- 微秒级精度，适合性能测量单调递增- 不受系统时间调整影响，保证时间戳始终递增相对时间- 基于页面加载起点，适合测量相对时间间隔性能分析- 专门为性能监控和优化设计在需要精确测量时间间隔、监控性能、实现平滑动画等场景下，是比Date.now()更合适的选择。
2025-11-25 17:52:08
345
原创 Cesium 粒子系统详解
性能优先: 控制粒子数量，使用合适的纹理尺寸内存管理: 及时清理不需要的粒子系统分层设计: 使用多个简单的粒子系统而不是一个复杂的系统参数调优: 通过调试工具找到最佳参数组合错误处理: 添加纹理加载失败和参数验证用户体验: 根据设备性能动态调整效果质量。
2025-11-18 22:41:02
480
原创 Entity API vs Primitive API 详细对比
✅ 使用DataSource加载GeoJSON/KML。✅ 数据量小（< 1000个对象）✅ 大数据量（> 1000个对象）✅ 需要数据绑定和属性管理。✅ 需要自定义Shader。✅ 生产环境的优化需求。✅ 需要频繁修改属性。✅ 需要时间动态效果。✅ 批量渲染相似对象。
2025-11-13 15:52:49
370
原创 Cesium 大数据量优化加载方案
方案适用场景性能提升所有场景5-10倍分批加载初始加载避免卡顿Clustering大量点数据（>10000）10-100倍LOD多尺度查看2-5倍3D Tiles超大数据（百万级）100+倍大量Billboard/Label3-5倍几何简化复杂几何2-3倍。
2025-11-13 15:49:48
391
原创 web worker
Web Worker 是 HTML5 提供的浏览器内置 API，允许在后台线程中运行 JavaScript 代码，而不会阻塞主线程。这使得我们可以将计算密集型任务从主线程中分离出来，避免页面卡顿和无响应。
2025-10-12 14:44:38
415
原创 Webpack 4 与 Webpack 5 的区别及常见优化配置
开发环境：注重构建速度和调试体验，使用eval类型的 source map 和热更新生产环境：注重文件大小和运行性能，启用代码压缩、分割和 tree shaking合理使用缓存：利用 Webpack 5 的持久缓存和 loader 自带的缓存功能代码分割：合理拆分代码，提高首屏加载速度按需加载：使用动态导入 (import()) 实现路由和组件的懒加载持续监控：使用定期分析包内容，发现优化点保持更新：及时更新 Webpack 和相关插件，获取性能改进和新特性。
2025-09-14 15:51:54
918
原创 keepAlive 组件
特性描述核心功能缓存非活跃组件实例，避免重复渲染和状态丢失。主要场景标签页切换、路由页面缓存、保持组件状态、性能优化。控制缓存使用includeexclude按名称过滤，使用max限制缓存数量。生命周期引入和钩子来处理组件激活和失活时的逻辑。注意事项注意内存消耗，可能需要手动处理数据更新和滚动恢复。
2025-09-14 15:16:04
867
原创 nextTick、watch/watchEffect、setUp
概念核心作用关键点nextTick等待下一次 DOM 更新后执行代码。处理由异步更新导致的 DOM 状态同步问题。watch显式监听一个或多个特定数据源的变化。惰性，可获取旧值，适合精确控制的监听。自动追踪依赖并立即执行副作用函数。立即执行，无法获取旧值，依赖收集是自动的。setupComposition API 的入口，用于组织组件逻辑。在前调用，无this，返回模板所需数据。编译时语法糖，让setup的使用更简洁。自动暴露顶级变量/函数，使用和。
2025-09-14 15:02:07
957
原创 vue2和 vue3的差异点
方面Vue 2Vue 3核心性能良好卓越(Proxy, 编译优化, Tree-shaking)代码组织Options API (逻辑分散)(逻辑聚合，可维护性高)逻辑复用Mixins (易冲突)(灵活清晰)TS 支持需要额外装饰器，支持一般原生支持极佳生态趋势维护模式，新特性少未来趋势，生态蓬勃发展学习曲线平缓稍有陡峭（需学习新概念），但更灵活强大给你的建议：新项目毫不犹豫地选择 Vue 3。它代表了未来，在性能、开发体验和长期维护性上都有巨大优势。从。
2025-09-14 13:38:17
1010
原创 图片懒加载
属性实现渐进增强，新浏览器使用原生加载，旧浏览器回退到 IntersectionObserver 方案。图片懒加载通过延迟加载非可视区域内的图片资源，显著提升页面性能。提供更高效的异步观察机制，精确监听元素与视口的交叉状态。：当被观察元素的交叉状态达到指定阈值时，该函数会被调用。遍历所有懒加载图片，判断其是否进入视口（通过。当观察的图片进入视口时，在回调函数中将。：一个可选的对象，用于配置观察器的行为。事件监听和位置计算，但存在性能损耗。实例，并观察所有懒加载图片。（或其他自定义属性）中，
2025-09-14 13:02:40
748
原创 微服务 Qiankun使用
你可以使用任何你熟悉的事件库（如mitt）来实现一个简单的发布-订阅模式。在主应用中创建 Event Bus 并导出。通过props将$on$emit等方法传递给微应用。主应用和微应用分别进行事件的监听和触发。这种方式更灵活，但需要自己维护事件机制。// 主应用派发事件}));// 子应用监听事件console.log('收到事件:', e.detail);});
2025-09-06 22:27:39
1352
原创 requestAnimationFrame时间切片 前端优化
特性一次性处理时间切片 (rAF)用户体验页面卡死，无响应保持响应，流畅渲染总耗时短（但用户感知不到）稍长（但用户无感，因为页面可操作）核心技术, 任务队列, Generator适用场景小规模数据操作大规模计算大批量 DOM 插入、复杂动画核心要点：目标：将每个任务块的执行时间控制在几毫秒以内，为浏览器留出足够的渲染时间（每帧约 16.7ms）。衡量：使用精确测量每个任务块的执行时间。灵活性：每批处理的数量（i < 20）不是固定的。更高级的做法是动态调整。
2025-08-24 16:39:04
849
原创 Cesium 加载实体、模型、geojson与点击事件
数据类型推荐加载方式事件识别关键属性性能优化建议实体使用show替代removeGeoJSON矢量数据简化几何3D模型启用3DTileset LOD文本标注距离相机过远时隐藏CSS2D元素CSS2Dprimitive自定义DOM事件使用requestAnimationFrame更新坐标系统一：所有数据需转换为WGS84（EPSG:4326）内存管理：移除对象时调用destroy()释放资源异步加载：大文件使用并行加载错误处理：添加空值检查可通过监控性能，建议保持30FPS以上。
2025-08-24 15:58:38
607
原创 Cesium 视角切换
这些API和方法提供了Cesium中视角切换的全面控制，根据具体场景选择合适的方法和参数组合，可以创建出流畅、自然的3D场景导航体验。HeadingPitchRange 的三个参数：heading（偏航角）、pitch（俯仰角）、range（距离）俯仰角范围通常为 -90°（垂直向下）到 90°（垂直向上）飞行时间(duration)在移动端应适当缩短（3-5秒）对于模型展示，推荐俯仰角设置为 -30° 到 -45°。当实体在地形下方时，相机可能会调整到地表上方。对于大量实体，建议使用数据源而非遍历实体。
2025-08-18 22:05:58
1307
原创 Cesium 中 加载实体、视图跳转、点击实体
以下是关于在 Cesium 中实现“加载实体”“视图跳转”和“点击实体”功能的详细指南。Cesium 是一个用于 3D 地球可视化的 JavaScript 库，广泛应用于地理信息系统（GIS）。我将逐步解释每个功能，并提供完整的代码示例。代码基于 CesiumJS 库（建议使用最新版本），确保结构清晰且可直接运行。
2025-08-10 16:23:16
402
原创 TypeScript常用语法及常见面试问题
TypeScript通过静态类型提升了JavaScript的可靠性，常用语法包括类型注解、接口、泛型等。面试时，重点准备类型系统、泛型应用和实际编码题。
2025-08-05 23:05:12
611
原创 openlayers 几何图形关系判断
在 OpenLayers 中，判断几何关系（如点是否在多边形内、两个几何图形是否相交等）主要通过几何对象的内置方法实现。OpenLayers 提供了ol/geom模块来处理各种几何类型（如点Point、线LineString、多边形Polygon），这些对象包含方法来检查空间关系。核心方法包括（判断是否包含坐标点）、（判断是否与坐标点相交）和（判断是否与范围相交）。
2025-08-03 21:00:19
1062
原创 Canvas 画布API
Canvas 是 HTML5 提供的绘图元素，通过 JavaScript 操作实现动态图形绘制。核心对象是，提供二维绘图 API。
2025-07-29 23:08:21
353
原创 OpenLayers 接入各种地图服务示例及注意事项
✅ 支持复杂空间查询（GetFeatureInfo）❌ 坐标系限制（通常仅 3857/4326）❌ 学习曲线陡峭（需 Mapbox GL）✅ 兼容性最好（支持 90% 在线地图）❌ 服务端要求高（需 WMTS 能力）：高交互可视化、3D 地图、定制化应用。✅ 多坐标系支持（服务端能力决定）✅ 支持复杂交互（选择/编辑要素）❌ 无法过滤数据（服务端预渲染）✅ 高性能（预切瓦片 + 缓存）✅ 按需出图（BBOX 请求）❌ 性能较差（每次请求需渲染）✅ 标准化协议（OGC 规范）
2025-07-21 23:31:37
1075
原创 01.初始化基础要素（场景、相机、光源、渲染器）
本文介绍了使用Three.js创建3D场景的基础要素，包括场景、光源、相机和渲染器的初始化方法。首先创建场景对象Scene作为容器，添加了平行光和环境光两种光源；然后介绍了正交相机和透视相机的特点及应用场景；最后详细说明了渲染器的配置流程，包括抗锯齿设置、像素比调整和画布挂载。文中提供了完整的代码示例，包含纹理加载、光源设置、相机参数配置、渲染器初始化以及OrbitControls交互控制等功能实现，为Three.js的初学者提供了全面的基础场景搭建参考。
2025-06-02 10:50:49
355
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人