- 博客(80)
- 收藏
- 关注
RSS订阅原创 前端性能——webpack实战配置
本文详细介绍了从零开始搭建Webpack开发环境的完整流程。首先通过npm初始化项目并安装Webpack核心依赖，配置基础打包功能实现本地构建。随后引入html-webpack-plugin和webpack-dev-server实现本地开发服务。重点讲解了Babel的配置方法，包括babel-loader、@babel/preset-env的使用，以及babel-polyfill和babel-runtime的差异与应用场景。
2026-01-15 10:46:47
756
原创 前端性能——图片文字资源优化
前端图片和字体资源的优化策略。图片优化方面：1) 根据场景选择合适格式2) 推荐使用SVG内联代码实现颜色继承；3) 通过懒加载和响应式图片提升加载性能。字体优化方面，利用font-display属性控制字体加载行为。
2025-07-25 16:14:28
861
原创 前端性能——代码逻辑优化
前端性能优化：关键渲染路径；CSS端优化、DOM操作优化、HTML优化、节流防抖、RequestAnimationFrame...
2025-02-08 20:45:00
1206
原创 使用requestAnimationFrame减少浏览器重绘
在屏幕中，浏览器通常都以60FPS（1/60 s）每帧更新屏幕，但是当前端绑定了一些高频事件，如鼠标移动，屏幕滚动、触摸滑动等时，在一帧的周期内，事件会多次触发，但页面只刷新一次。这种情况就可能导致丢帧现象，抑或者回调函数处理时间过长，也会导致下一帧的重绘延迟，出现卡顿效果。通过requestAnimationFrame（rAF）保证在一帧的周期内，函数只触发一次然后渲染，就能有效的降低卡顿。
2025-02-06 20:45:00
1408
原创 wangEditor富文本插入自定义应用
最近在业务中被要求用到了富文本的需求，经过调研最终决定使用国产的wangeditor，需要在富文本菜单里插入自己的外部应用，本文旨在记录。
2024-11-26 21:30:00
831
1
原创 position: strick 固定标题列
最近做了一个可点选范围的table组件，如下图所示，头部固定容易实现，同时首列也需要固定，发现一个未用过的CSS特性可以简便的实现这个要求。
2024-11-22 21:17:05
531
原创 苹果系统H5下拉加载事件重复触发（react hooks）
ios端手机下的h5/小程序，滚动到底部时加载更多数据，但是滚动到底部时重复触发加载事件，在安卓机下则不会发生该问题，记录一下解决方案。
2023-10-27 12:08:47
795
原创 JavaScript下载excel文件
JavaScript下载excel文件，通过链接下载；直接下载文件流两种方式，对于其他格式的文件下载也适用
2023-08-23 17:43:47
4339
原创 mapbox-gl 点位编辑功能
矢量在线编辑是gis常用的编辑功能，兴趣点（POI）与区域面（AOI）或者道路线不同，在地图上没有形状和面积，仅表示落位地点，本文介绍使用mapbox进行点位编辑的常用方式，底图使用高德公开的地图服务。根据UI设计生成新的雪碧图，作为地图上点位的图标。方法有两种：借助 Marker方式二；采用 mapbox-gl-draw 插件。
2023-06-21 12:21:05
2129
1
原创 mapbox-gl 移动端（H5）位置共享交互
分享最近写的一个小demo，功能类似微信小程序端的大头针位置共享功能，需要实现的主要功能包括位置查询、周边地点检索、位置定位等，数据采用天地图球面墨卡托（WGS84）的 WMTS 矢量底图与标记服务，框架采用Taro。
2023-04-25 19:45:00
1179
5
原创 Cesium实践（4）——空间数据加载
本文介绍Cesium如何加载空间数据，空间数据即明确定义在三维空间中的数据，空间数据包括以下几类：1、几何形体（点、线、面、体）2、标签（文字图标等）3、几何文件（geojson、kml、czml）4、三维模型（gltf、gltf）。3D Tiles 作为Cesium提出的处理大型三维数据的格式暂不在本文介绍。
2023-04-23 20:00:00
2195
原创 Cesium实践（3）——坐标系与相机系统
本文介绍Cesium世界中的坐标系统，Cesium的坐标系分三种：屏幕坐标、笛卡尔空间直角坐标、地理坐标，在得知目标的坐标后，即可使用相机系统对目标进行定位或进行相机交互。
2023-04-17 09:00:00
2979
1
原创 threejs-效果合成器（EffectComposer）
threejs中的效果合成器可以在场景渲染完毕后再增加一些特效，如：让场景再某些情况下变得更加模糊或者更加鲜艳，增加滤镜或者闪烁效果，使用扫描线添加老旧电视屏幕上的效果等等。本文介绍 EffectComposer的基本使用，并使用这个通道为地球添加闪烁效果。
2023-04-11 22:45:50
2050
原创 Cesium实践（2）—— 加载地形与影像
地形数据用来表示真实的地形起伏；地图数据指的则是真实的影像服务， 本文实践在Cesium中加载地形与影像数据。
2023-04-08 22:20:22
11963
2
原创 webgl——必须掌握的数学知识
想要学好WebGL，良好的数学储备是必不可少的，本节详细地介绍与WebGL相关的数学知识，并总结这些知识在图形学中的应用。
2023-03-30 22:00:58
2037
2
原创 webgl——给场景添加光
在之前的学习中已经将三维物体添加到了场景中，但是并没有在场景中使用光，照可以使模型更具有立体感，本文主要介绍 webgl 中的光照理论和计算方式，并展示如何在三维场景中添加光照。
2023-03-25 22:40:13
1043
原创 Cesium实践（1）—— Hello World
工作大半年来主要的技术栈是mapbox-gl 和 threejs，但是作为一名GIS专业毕业生，一直对Cesium充满兴趣。Cesium不仅保持了 threejs 的三维绘制能力，而且内置大量渲染地理数据的API于算法，相较于 mapbox “制作世界上最漂亮的地图”的定位，Cesium无疑是重gis项目或业务的首选框架。据说Cesium与Vue结合更加简便，本文介绍Cesium中的核心类，并使用 Vite + Vue 搭建Cesium应用。
2023-03-22 00:21:23
1900
1
原创 浏览器DOM基本操作
DOM 结构以树的形态存在。他提供了一系列API。Document 就是指本份html 文件。当浏览器载入 HTML 文档, 它就会成为Document对象。Element 就是指 HTML 文件内的各个标签，像是下面这样的标签都属于Element。TextText 就是指被各个 Element 包起来的文字。
2023-03-16 19:00:00
706
原创 JavaScript异步机制——Event-Loop
JS是单线程的语言，所有的异步都要通过`异步`实现，而Event-Loop 就是JavaScript的异步实现机制。
2023-03-14 12:29:25
535
原创 JavaScript现代异步方案——Promise、async / await
Promise是一种用于处理异步操作的容器对象，相比回调函数具有显著优势：可读性强（避免回调地狱）、错误处理统一（catch捕获）、流程控制灵活（all/race等方法）以及明确的状态管理（pending/fulfilled/rejected）。Promise状态不可逆，通过then处理成功状态，catch捕获异常，支持链式调用。链式调用中then的返回值决定下一个Promise的状态，推荐使用catch统一捕获错误。Promise有效解决了回调函数的弊端，是异步编程的重要工具。
2023-03-06 23:42:57
351
原创 mapbox-gl实现 2.5D 图层高度编辑器
mapbox-gl 支持表达式编辑 2.5D 建筑物高度，但是 style 文件原生的表达式很不直观，本文实现一个简单的 2.5D高度图层编辑器，核心是理解mapbox表达式规则与递归算法
2023-03-02 20:55:28
1859
原创 threejs创建各面不同色的立方体
threejs创建一个每个面都不同色的立方体，基于 BoxGeometry 的 faces 属性，不需要使用 BufferGeometry 创建复杂的顶点颜色缓冲区。直接上代码，原理很简单不加赘述
2023-02-27 21:30:00
1555
原创 webgl三维绘制——彩色立方体
webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。
2023-02-26 21:10:25
1347
原创 webgl渲染优化——深度缓冲区、多边形缓冲机制
webgl在渲染三维场景时，按照Z坐标的值决定前后关系，但是在默认状态下它并未开启深度检测，而是将后绘制的物体放在前面；当两个物体Z坐标相差无几时，会产生深度冲突，两个物体颜色互相影响，使得表面看上去斑斑驳驳，需要开启多边形缓冲来避免此类问题。
2023-02-25 15:06:44
1601
原创 JavaScript中的this关键字
this 的取值是在函数执行的时候确定的，不是在函数定义的时候确定的，与闭包相反。this 指向调用它所在方法的那个对象
2023-02-23 22:17:21
863
原创 webgl投影矩阵推导（正射投影、透视投影）
在webgl中，三维空间中的所有物体不是会都被绘制出来，只有当它在可视范围内时，才会进行绘制。因为不在可视范围中的物体即使绘制也不会在屏幕上显示。除了水平和垂直范围内的限制，WebGL还限制观察者的可视深度，即"能够看多远"。水平视角、垂直视角、可视深度，三者定义了可视空间。由正射投影（orthographic projection）产生的长方体状可视空间由透视投影（perspective projection）产生的锥体状可视空间正射投影矩阵透视投影矩阵。
2023-02-20 01:29:56
2248
2
原创 JavaScript作用域、闭包
摘要：本文系统介绍了JavaScript中的作用域（全局、函数、块作用域）及其链式查找机制，重点解析了闭包的核心概念与典型应用。闭包通过保存外部函数变量实现状态持久化，其两种表现形式（函数返回值和参数传递）体现了作用域的特殊应用。文章详细展示了闭包在变量私有化、函数柯里化等场景的实际应用，并通过经典循环案例说明作用域链的运作原理，最后强调闭包变量查找应基于函数定义位置而非执行位置。
2023-02-18 22:02:58
952
原创 JavaScript原型、原型链、原型方法
构造函数有一个prototype原型对象, 原型对象里的constructor指向构造函数本身，每个对象都有一个__proto__属性，并且指向它的构造函数的原型对象（prototype），对象不必存储所有的属性或方法，而可以通过原型层层向上查找，减少内存的占用。
2023-02-14 20:40:00
457
原创 webgl深入理解视图矩阵
在前面的学习中，已经得知了webgl是如何绘制二维图形，并进行仿射变换（矩阵变换）、纹理、交互等操作也适用于绘制三维图形。本节将介绍webgl是如何通过视图矩阵进入三维世界的。
2023-02-12 21:06:21
1253
原创 threejs多种方式封装飞线组件（几何、贴图、着色器）
之前在研究threejs时，尝试了通过线几何体、通过纹理贴图、通过着色器等几种方式实现飞线效果，现在将这几种方式使用 typescript， 采用面向对象的方式封装整理并记录下来，思路供大家参考。
2023-02-07 17:03:05
4345
2
原创 webgl绘制图形API——drawArrays、drawElements
gl.drawArrays()作为webgl中常用的函数图形绘制方法，可以在浏览器按照指定的模式绘制图形，与之相对的gl.drawElements()函数也是常用的绘制函数，本文将介绍二者的区别与使用。
2023-01-30 21:15:35
4144
13
原创 threejs相机控件使用记录
threejs提供了很多摄像机控件，提供这些控件可以操作场景中的摄像机的移动、旋转等，实现交互动画效果，全部的控件在threejs发布的包中都已封装，本文记录常用相机控件的使用场景。
2023-01-28 13:30:02
2034
vscode import 着色器glsll无法识别
2022-08-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人