女王控的博客

预研

37 篇文章

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

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

博客 Gatsby 插件改造

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

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

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

jenkins 编译速度优化

需求背景 接上文 CRA 项目构建速度优化 由下图可以看出此项目的 , 耗时较长,需要优化 方案 目前是全量更新,需要改成增量更新 实现 原始版本 版本一 固定使用一个目录为缓存目录,拉取代码和构建代码都在这个缓存目录上 利用 git 和 rsync… »

CRA 项目构建速度优化

需求背景 由于公司老项目采用 cra 来构建前端项目,在 jenkins 上的平均打包时长在 10 分钟以上,需要优化线上的打包时间,同时优化本地的开发体验 一期优化 主要针对 cra + webpack3/4 进行的优化 具体功能 cra 配置优化 核心:thread-loader 加快首次编译速度,hard-source-webpack-plugin 加快二次编译速度 config-overrides.js Dockerfile 配置缓存优化 需求背景 为了充分利用缓存,采用 docker… »

0%