- 博客(77)
- 收藏
- 关注
RSS订阅原创 前端性能——代码逻辑优化
前端性能优化：关键渲染路径；CSS端优化、DOM操作优化、HTML优化、节流防抖、RequestAnimationFrame
2025-02-08 20:45:00
941
原创 使用requestAnimationFrame减少浏览器重绘
在屏幕中，浏览器通常都以60FPS（1/60 s）每帧更新屏幕，但是当前端绑定了一些高频事件，如鼠标移动，屏幕滚动、触摸滑动等时，在一帧的周期内，事件会多次触发，但页面只刷新一次。这种情况就可能导致丢帧现象，抑或者回调函数处理时间过长，也会导致下一帧的重绘延迟，出现卡顿效果。通过requestAnimationFrame（rAF）保证在一帧的周期内，函数只触发一次然后渲染，就能有效的降低卡顿。
2025-02-06 20:45:00
1231
原创 wangEditor富文本插入自定义应用
最近在业务中被要求用到了富文本的需求，经过调研最终决定使用国产的wangeditor，需要在富文本菜单里插入自己的外部应用，本文旨在记录。
2024-11-26 21:30:00
565
1
原创 position: strick 固定标题列
最近做了一个可点选范围的table组件，如下图所示，头部固定容易实现，同时首列也需要固定，发现一个未用过的CSS特性可以简便的实现这个要求。
2024-11-22 21:17:05
419
原创 苹果系统H5下拉加载事件重复触发（react hooks）
ios端手机下的h5/小程序，滚动到底部时加载更多数据，但是滚动到底部时重复触发加载事件，在安卓机下则不会发生该问题，记录一下解决方案。
2023-10-27 12:08:47
685
原创 JavaScript下载excel文件
JavaScript下载excel文件，通过链接下载；直接下载文件流两种方式，对于其他格式的文件下载也适用
2023-08-23 17:43:47
3628
原创 mapbox-gl 点位编辑功能
矢量在线编辑是gis常用的编辑功能，兴趣点（POI）与区域面（AOI）或者道路线不同，在地图上没有形状和面积，仅表示落位地点，本文介绍使用mapbox进行点位编辑的常用方式，底图使用高德公开的地图服务。根据UI设计生成新的雪碧图，作为地图上点位的图标。方法有两种：借助 Marker方式二；采用 mapbox-gl-draw 插件。
2023-06-21 12:21:05
1873
1
原创 mapbox-gl 移动端（H5）位置共享交互
分享最近写的一个小demo，功能类似微信小程序端的大头针位置共享功能，需要实现的主要功能包括位置查询、周边地点检索、位置定位等，数据采用天地图球面墨卡托（WGS84）的 WMTS 矢量底图与标记服务，框架采用Taro。
2023-04-25 19:45:00
994
3
原创 Cesium实践（4）——空间数据加载
本文介绍Cesium如何加载空间数据，空间数据即明确定义在三维空间中的数据，空间数据包括以下几类：1、几何形体（点、线、面、体）2、标签（文字图标等）3、几何文件（geojson、kml、czml）4、三维模型（gltf、gltf）。3D Tiles 作为Cesium提出的处理大型三维数据的格式暂不在本文介绍。
2023-04-23 20:00:00
2012
原创 Cesium实践（3）——坐标系与相机系统
本文介绍Cesium世界中的坐标系统，Cesium的坐标系分三种：屏幕坐标、笛卡尔空间直角坐标、地理坐标，在得知目标的坐标后，即可使用相机系统对目标进行定位或进行相机交互。
2023-04-17 09:00:00
2537
1
原创 threejs-效果合成器（EffectComposer）
threejs中的效果合成器可以在场景渲染完毕后再增加一些特效，如：让场景再某些情况下变得更加模糊或者更加鲜艳，增加滤镜或者闪烁效果，使用扫描线添加老旧电视屏幕上的效果等等。本文介绍 EffectComposer的基本使用，并使用这个通道为地球添加闪烁效果。
2023-04-11 22:45:50
1850
原创 Cesium实践（2）—— 加载地形与影像
地形数据用来表示真实的地形起伏；地图数据指的则是真实的影像服务， 本文实践在Cesium中加载地形与影像数据。
2023-04-08 22:20:22
10095
2
原创 webgl——必须掌握的数学知识
想要学好WebGL，良好的数学储备是必不可少的，本节详细地介绍与WebGL相关的数学知识，并总结这些知识在图形学中的应用。
2023-03-30 22:00:58
1742
1
原创 webgl——给场景添加光
在之前的学习中已经将三维物体添加到了场景中，但是并没有在场景中使用光，照可以使模型更具有立体感，本文主要介绍 webgl 中的光照理论和计算方式，并展示如何在三维场景中添加光照。
2023-03-25 22:40:13
879
原创 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
1552
1
原创 浏览器DOM基本操作
DOM 结构以树的形态存在。他提供了一系列API。Document 就是指本份html 文件。当浏览器载入 HTML 文档, 它就会成为Document对象。Element 就是指 HTML 文件内的各个标签，像是下面这样的标签都属于Element。TextText 就是指被各个 Element 包起来的文字。
2023-03-16 19:00:00
642
原创 JavaScript异步机制——Event-Loop
JS是单线程的语言，所有的异步都要通过`异步`实现，而Event-Loop 就是JavaScript的异步实现机制。
2023-03-14 12:29:25
471
原创 JavaScript现代异步方案——Promise、async / await
Promise、async / await 的出现，解决了回调地狱的问题，优雅地实现了异步方案
2023-03-06 23:42:57
300
原创 mapbox-gl实现 2.5D 图层高度编辑器
mapbox-gl 支持表达式编辑 2.5D 建筑物高度，但是 style 文件原生的表达式很不直观，本文实现一个简单的 2.5D高度图层编辑器，核心是理解mapbox表达式规则与递归算法。
2023-03-02 20:55:28
1582
原创 threejs创建各面不同色的立方体
threejs创建一个每个面都不同色的立方体，基于 BoxGeometry 的 faces 属性，不需要使用 BufferGeometry 创建复杂的顶点颜色缓冲区。直接上代码，原理很简单不加赘述
2023-02-27 21:30:00
1317
原创 webgl三维绘制——彩色立方体
webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。
2023-02-26 21:10:25
1150
原创 webgl渲染优化——深度缓冲区、多边形缓冲机制
webgl在渲染三维场景时，按照Z坐标的值决定前后关系，但是在默认状态下它并未开启深度检测，而是将后绘制的物体放在前面；当两个物体Z坐标相差无几时，会产生深度冲突，两个物体颜色互相影响，使得表面看上去斑斑驳驳，需要开启多边形缓冲来避免此类问题。
2023-02-25 15:06:44
1347
原创 JavaScript中的this关键字
this 的取值是在函数执行的时候确定的，不是在函数定义的时候确定的，与闭包相反。this 指向调用它所在方法的那个对象
2023-02-23 22:17:21
810
原创 webgl投影矩阵推导（正射投影、透视投影）
在webgl中，三维空间中的所有物体不是会都被绘制出来，只有当它在可视范围内时，才会进行绘制。因为不在可视范围中的物体即使绘制也不会在屏幕上显示。除了水平和垂直范围内的限制，WebGL还限制观察者的可视深度，即"能够看多远"。水平视角、垂直视角、可视深度，三者定义了可视空间。由正射投影（orthographic projection）产生的长方体状可视空间由透视投影（perspective projection）产生的锥体状可视空间正射投影矩阵透视投影矩阵。
2023-02-20 01:29:56
1630
2
原创 JavaScript作用域、闭包
如果一个函数引用了自由变量，即该函数使用了某变量，但它既不是函数参数、也不是函数内部定义的变量，则该函数就叫闭包。
2023-02-18 22:02:58
893
原创 JavaScript原型、原型链、原型方法
构造函数有一个prototype原型对象, 原型对象里的constructor指向构造函数本身，每个对象都有一个__proto__属性，并且指向它的构造函数的原型对象（prototype），对象不必存储所有的属性或方法，而可以通过原型层层向上查找，减少内存的占用。
2023-02-14 20:40:00
415
原创 webgl深入理解视图矩阵
在前面的学习中，已经得知了webgl是如何绘制二维图形，并进行仿射变换（矩阵变换）、纹理、交互等操作也适用于绘制三维图形。本节将介绍webgl是如何通过视图矩阵进入三维世界的。
2023-02-12 21:06:21
1143
原创 threejs多种方式封装飞线组件（几何、贴图、着色器）
之前在研究threejs时，尝试了通过线几何体、通过纹理贴图、通过着色器等几种方式实现飞线效果，现在将这几种方式使用 typescript， 采用面向对象的方式封装整理并记录下来，思路供大家参考。
2023-02-07 17:03:05
3841
2
原创 webgl绘制图形API——drawArrays、drawElements
gl.drawArrays()作为webgl中常用的函数图形绘制方法，可以在浏览器按照指定的模式绘制图形，与之相对的gl.drawElements()函数也是常用的绘制函数，本文将介绍二者的区别与使用。
2023-01-30 21:15:35
3813
13
原创 threejs相机控件使用记录
threejs提供了很多摄像机控件，提供这些控件可以操作场景中的摄像机的移动、旋转等，实现交互动画效果，全部的控件在threejs发布的包中都已封装，本文记录常用相机控件的使用场景。
2023-01-28 13:30:02
1904
原创 OpenGL ES着色器语言(GLSL ES)规范 ——下篇
本篇接上文继续对着色器语言规范进行讲解，本文的内容包括：分支和循环、着色器内置变量、函数、存储限定字、精度限定字、预处理指令等，接OpenGL ES着色器语言(GLSL ES)规范 ——上篇。
2023-01-25 15:35:08
1625
原创 OpenGL ES着色器语言(GLSL ES)规范 ——上篇
着色器语言通过控制GPU来进行前端图形的渲染，WebGL使用名为GLSL ES的规范进行着色器语言的编写，GLSL ES是在OpenGL的基础上进行一定的精简后形成的，它的语法与C语言有些类似。本文对webgl常用到的GLSL ES知识进行记录。共分为上下两篇，本篇包括OpenGL ES基础：一段基本的着色器代码、大小写和分号、数据值类型、命名规范、类型转换、运算符；矢量和矩阵：矢量和矩阵类型、矢量和访问矩阵构造，矢量和矩阵运算规则；特殊类型：结构体和数组结构体；数组取样器等。
2023-01-25 09:52:19
1468
原创 webgl纹理贴图机制
在计算机图形学中，为了模拟更加真实的效果，需要给每个像素赋予不同的颜色值，这种情况下如果手动指定每个像素点的rgb值，将会是一件难以完成的任务。这就需要有一种机制，能够让我们把图片素材渲染到模型的一个或者多个表面上，这种机制叫做纹理贴图，本文将详细介绍在webgl中如何把一张真实图像贴到计算器图形上的。
2023-01-23 22:49:55
2869
5
vscode import 着色器glsll无法识别
2022-08-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人