女王控的博客

前端

164 篇文章

缓存报错重试机制探究

背景 在线上部署期间,或者用户长时间没有访问网页等等各种情况,有一定概率会出现以下形式的报错,导致网页白屏 原因与方案 由于现代前端工具链打包出来的,尤其是 webpack 的项目,其主入口默认不缓存,其他文件长期缓存,缓存的文件通过改变文件名(一般是 hash)来更新 所以在部署期间或者用户没有长时间打开网页,可能会请求已被删除的对应的 chunk 或者 chunk… »

记一次处理高德地图浏览器兼容性问题

背景 在 chrome 浏览器上,用高德地图的 CircleMarker, PathSimplifier 分别画点和线时候,需要实现点在线的上面的效果,此时在 windows 系统上不能正常显示红点(左侧),在 ubuntu 系统下却正常显示(右侧),如下图所示 原因 红点是由 CircleMarker 组件实现,而下面的线则是 PathSimplifier 实现,在 chrome 浏览器下不同系统的表现为: window: CircleMarker 由 canvas… »

博客 Gatsby 插件改造

需求背景 针对本博客现有的 Gatsby 框架实现代码复制、代码实时查看编辑的功能 技术选型 以下都是采用最后一种方案,由于插件功能不满足,所以对其源码做出改动 代码复制 技术选型 语法 优点 缺点 项目代码自实现 未实现 定制化程度高 实现难度大; 拓展较差 gatsby-remark-code-buttons 不需特定语法,只要是代码块默认具有复制功能 已具有代码复制功能 有多复制一行的 bug; UI 不符合博客主题 代码实时查看编辑 技术选型 语法 优点 缺点 样例页面 iframe… »

Three.js练手测试

测试一 画 3 个带有反光的立方体 测试二 对 3 个带有反光的立方体做响应式处理,要求满足下面条件 窗口任意大小立方体不会被拉伸 不能出现明显的锯齿(块状化) 支持高分屏 测试三 绘制常见的图元 测试四 太阳,地球,月球模拟 测试五 实现坦克多视角切换 测试六 实现常见的不同材质 测试七 多个纹理加载 测试八 实现过滤和 mipmaps… »

高德地图海量数据组件优化

需求背景 在高德地图上展示路线的成功或失败情况,数据量较大,且需要全部展示,核心在于保证渲染路线的性能 技术难点 渲染可见点 分批异步渲染 利用 Simplify.js 简化轨迹 渲染可见点 根据传入的经纬度以及地图边界来确定是否渲染 监听各种事件来重新渲染 分批异步渲染 核心渲染策略:模仿 react17 的 Scheduler 调度,切成小批量渲染任务,尽可能的防止页面卡顿,这里针对不同组件分为几种情况 PathSimplifier… »

0%