高德地图海量数据组件优化
需求背景 在高德地图上展示路线的成功或失败情况,数据量较大,且需要全部展示,核心在于保证渲染路线的性能 技术难点 渲染可见点 分批异步渲染 利用 Simplify.js 简化轨迹 渲染可见点 根据传入的经纬度以及地图边界来确定是否渲染 监听各种事件来重新渲染 分批异步渲染 核心渲染策略:模仿 react17 的 Scheduler 调度,切成小批量渲染任务,尽可能的防止页面卡顿,这里针对不同组件分为几种情况 PathSimplifier… »
女王控的博客
需求背景 在高德地图上展示路线的成功或失败情况,数据量较大,且需要全部展示,核心在于保证渲染路线的性能 技术难点 渲染可见点 分批异步渲染 利用 Simplify.js 简化轨迹 渲染可见点 根据传入的经纬度以及地图边界来确定是否渲染 监听各种事件来重新渲染 分批异步渲染 核心渲染策略:模仿 react17 的 Scheduler 调度,切成小批量渲染任务,尽可能的防止页面卡顿,这里针对不同组件分为几种情况 PathSimplifier… »
需求背景 由于公司老项目采用 cra 来构建前端项目,在 jenkins 上的平均打包时长在 10 分钟以上,需要优化线上的打包时间,同时优化本地的开发体验 一期优化 主要针对 cra + webpack3/4 进行的优化 具体功能 cra 配置优化 核心:thread-loader 加快首次编译速度,hard-source-webpack-plugin 加快二次编译速度 config-overrides.js Dockerfile 配置缓存优化 需求背景 为了充分利用缓存,采用 docker… »
需求背景 完成官网 1.0 的上线,实现动效、国际化、多平台适配等功能 动效 逐行显示 需求背景 实现功能如下: x 旋转 -> 不同文字由下而上透明度从 0 到 1 实现要点如下: 进入视口执行一次 离开视口重置动画 实现如下所示动效: 选型过程 选型 优点 缺点 react-spring 使用方便,基于弹簧物理的动画库 改变 state 会导致多次执行 不能自由控制播放进度 animate.css 原生方法体积小,提供回退兼容性好 使用较为繁琐,需要同时写 css、js gsap… »
架构 选型背景 搭建一个便于 SEO 的官网 技术栈团队成员熟悉,开发方便 提到 SEO,主流的渲染方式都是 SSR 框架选型 详见 http://doc.ssr-fc.com/docs/features$technology 支持常见的流行前端框架 React/Vue2/Vue3,这里只列举 React 的 特性 前端框架: React v17, 实时跟进 React17 的新特性 开发语言: TypeScript 代码风格(可选): 默认 eslint-config-standard… »
快速入门 绘制一个点 着色器代码放在 script 标签中 绘制一个矩形 attribute 关键字 声明顶点相关数据的时候需要用到 attribute 关键字,目的是为了 js 可以调用相关的 WebGL API 把顶点相关数据从 js 传递给顶点着色器 attribute 声明的变量。 drawArrays 整体执行顺序 硬件相关 着色器语言编写的程序称为着色器程序(shader program),在 GPU 顶点着色器单元上执行的是顶点着色器程序,在 GPU… »