随笔 - 148  文章 - 0  评论 - 13  阅读 - 21万
10 2023 档案
自定义文档 Selection、Range 属性
摘要:一 document.execCommand 现阶段 项目中 使用方法document.execCommand 可直接操控选中文本,添加属性(操控文档)。但是由于fdocument.execCommand 方法兼容性不好,浏览器之间的实现不一致,没有一个统一的标准。且自定义程度不高。官方已经将该方法 阅读全文
posted @ 2023-10-17 09:46 长安城下翩翩少年 阅读(187) 评论(0) 推荐(0) 编辑
前端模块化专题
摘要:Commonjs (同步模块加载,运行时加载) exports 和 moudle.exports 的区别? exports 是 module 中exports 对象 的引用。当模块中使用了 moudle.export = {} 的时候,所有 exports 都会失效。exports 只能 expor 阅读全文
posted @ 2023-10-17 09:45 长安城下翩翩少年 阅读(15) 评论(0) 推荐(0) 编辑
性能优化指标分析
摘要:原则 不要阻塞主线程 将长任务进行拆分 (大图切片,因为image.decode 大图会形成长任务) Js 单线程 与长任务 主线程是浏览器中大多数任务运行的地方。它被称为主线程是有原因的:几乎所有编写的JavaScript都在主线程中工作。 主线程一次只能处理一个任务。当任务持续时间超过某一点(确 阅读全文
posted @ 2023-10-17 09:44 长安城下翩翩少年 阅读(64) 评论(0) 推荐(0) 编辑
画板-性能优化方案
摘要:一 画板现阶段性能瓶颈 图片内存占用过高 操作(拖动,缩放)导致的过度重绘制 react、redux数据更新机制导致绘图出现延迟 二 内存优化 现阶段内存的瓶颈在哪里?到底是哪些东西占用了内存? 优化点1:地图Map中的图片大小尽可能小 现阶段地图所有的数据都是走的 服务端(非webp图片)的百分之 阅读全文
posted @ 2023-10-17 09:40 长安城下翩翩少年 阅读(84) 评论(0) 推荐(0) 编辑
React 18 并发渲染
摘要:一 升级react 18 React 18 改变 所有setState 都是异步,不管是否在react的“管辖范围内”。原来在定时器,在监听函数中是同步的。 Root 书写方式 需要改变 Router 需要改变?? 二 启用并发渲染 useDeferredValue const [text, set 阅读全文
posted @ 2023-10-17 09:38 长安城下翩翩少年 阅读(56) 评论(0) 推荐(0) 编辑
Storage 封装
摘要:一 JSON - javascript Object Notation(符号) 基于JavaScript原生语法,能够序列化对象、数组、数值、字符串、布尔值和 null。 JSON.parse(s,(key,value)=>{ console.log(key,value); // s 为字符串 '" 阅读全文
posted @ 2023-10-17 09:37 长安城下翩翩少年 阅读(34) 评论(0) 推荐(0) 编辑
indexDB介绍与封装
摘要:indexDB介绍与封装 一 前端缓存的发展 Cookie: 内存小4kb,现多用于服务端存一些数据在客户端 localstorage/sessionStorage :5M左右,同步缓存,读取速度较快 Cache Storage 与 serviseWorker 配合使用。 (ios 浏览器 很小,其 阅读全文
posted @ 2023-10-17 09:37 长安城下翩翩少年 阅读(1063) 评论(0) 推荐(0) 编辑
画布拖动方案
摘要:画布拖动策略:为提升性能,防止画布(canvas) 跟随mouseMove事件不断重绘,选择先移动画布容器,在鼠标mouseup 事件执行时,重绘画布,让画布容器的还原。 具体实现 // 视口宽高: 为画板可视区域的宽高,不包含header高度; const clientRect = { width 阅读全文
posted @ 2023-10-17 09:35 长安城下翩翩少年 阅读(53) 评论(0) 推荐(0) 编辑
设计模式
摘要:设计原则 开放封闭原则 对扩展开放,对修改关闭 例子1 - axios 设计符合开闭原则(通过axios.interceptors 对外部扩展进行开放)、以及redux中间件设计方式 例子2 enum MemberName { normal:'normal', vip:'vip', vipPlus: 阅读全文
posted @ 2023-10-17 09:34 长安城下翩翩少年 阅读(8) 评论(0) 推荐(0) 编辑
前端二进制流
摘要:FileReader 读取 file/blob 数据 FileReader.readAsArrayBuffer() 异步方法, 读取完成 result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。 FileReader.readAsDataURL() : 一旦完成,result属 阅读全文
posted @ 2023-10-17 09:31 长安城下翩翩少年 阅读(62) 评论(0) 推荐(0) 编辑
前端url的几种实用情况
摘要:一 相对地址转绝对地址 使用场景:某个函数需要在使用的时候传递一个 地址,函数内部会利用这个地址 进行某些操作 (比如生成worker,生成image,数据转化等) 如下:如果直接使用相对位置,会根据url 进行拼接。但当 一些利用利用了router的单页项目,页面的url 并不能获取到 真实的fi 阅读全文
posted @ 2023-10-17 09:30 长安城下翩翩少年 阅读(61) 评论(0) 推荐(0) 编辑
函数调用栈-执行上下文栈
摘要:一 调用栈 我们知道栈的特点是,先进后出的。那么函数的执行上下文栈又是怎么样的呢? 先看这段代码 var a = 2 function p2(b,c){ return b+c; } function p1(b,c){ var d = 10; result = p2(b,c); return a + 阅读全文
posted @ 2023-10-17 09:29 长安城下翩翩少年 阅读(22) 评论(0) 推荐(0) 编辑
es6
摘要:let 和 var的区别 变量声明提升 暂时性死区 不允许重复声明 块级作用域 (函数作用域,全局作用域 - 用函数作用域 (匿名立即执行函数表达式)代替块级作用域) 不与全局对象挂钩(window,global,self, globalThis) 变量的结构赋值(数组,对象-原型链上也可-包装类型 阅读全文
posted @ 2023-10-17 09:26 长安城下翩翩少年 阅读(4) 评论(0) 推荐(0) 编辑
报错提醒机制
摘要:全局报错捕获 js window.addEventListener('unhandledrejection', event => { let request = event.target; // IndexedDB 本机请求对象 let error = event.reason; // 未处理的错误 阅读全文
posted @ 2023-10-17 09:25 长安城下翩翩少年 阅读(6) 评论(0) 推荐(0) 编辑
webpack
摘要:一 基础概念 Webpack 是什么? 答:现代javascript构建工具,静态资源打包工具 什么叫构建 ? 构建就是把我们在开发环境写的代码,转换成生产环境的代码。构建过程应该包括 预编译、语法检查、词法检查、依赖处理、文件合并、文件压缩、单元测试、版本管理等 Vite 利用 浏览器 支持ES 阅读全文
posted @ 2023-10-17 09:24 长安城下翩翩少年 阅读(28) 评论(0) 推荐(0) 编辑
VSCode 小技巧 配置代码模版 vscode snippets
摘要:第一步 mac 输入 shift + command + p (windows 输入 ctrl + shift + p), 输入snippets, 点击如下图选项。 第二步,选中新建全局代码片段文件。 第三步,输入一个全局配置文件名,例如 snippet.config 第四步,进行配置 { // P 阅读全文
posted @ 2023-10-17 08:59 长安城下翩翩少年 阅读(262) 评论(0) 推荐(0) 编辑
Git 流程优化-实践
摘要:用 git cz 代替 git commit 操作 全局安装 npm install -g commitizen cz-conventional-changelog npm i -g cz-customizable 写入配置 echo'{ "path": "cz-customizable" }' > 阅读全文
posted @ 2023-10-17 08:56 长安城下翩翩少年 阅读(56) 评论(0) 推荐(0) 编辑
Git相关原理
摘要:一 Git 是什么? Git 是一种分布式开源 版本管理工具(VCS),你可以用它存储代码、跟踪修订历史记录、合并代码更改,并在需要时恢复为较早的代码版本。 二 Git 分区 工作区 working directory 是「工作目录」,也就是我们肉眼能够看到的文件 暂存区 (Index) 本地仓库区 阅读全文
posted @ 2023-10-17 08:53 长安城下翩翩少年 阅读(280) 评论(0) 推荐(0) 编辑
Git在工作中的基本应用
摘要:一 Git的起源 Git 的定义 有一句名言 "你要知道 从哪里来,才能知道未来可能通向何方" 。所以我们首先肯定聊的就是 Git的起源。 那么Git 的定义是什么 ? Git 是一种分布式开源 版本管理工具(VCS),你可以用它存储代码、跟踪修订历史记录、合并代码更改,并在需要时恢复为较早的代码版 阅读全文
posted @ 2023-10-17 08:49 长安城下翩翩少年 阅读(15) 评论(0) 推荐(0) 编辑
ts配置
摘要:我们将使用 babel 去编译 TypeScript,babel 在编译 TypeScript 代码是直接去掉 TypeScript 的类型,然后当成普通的 javascript 代码使用各种插件进行编译,tsc 并没有介入编译过程,因此 tsconfig.json 中很多选项例如 target 和 阅读全文
posted @ 2023-10-17 08:45 长安城下翩翩少年 阅读(25) 评论(0) 推荐(0) 编辑
代码规范
摘要:React 组件代码规范 1 命名规范 函数命名 组件的私有方法都用 _ 开头 所有事件监听的方法都用 handle 开头 传递给子组件以on开头 render函数的分支,以render开头 阅读全文
posted @ 2023-10-17 08:45 长安城下翩翩少年 阅读(5) 评论(0) 推荐(0) 编辑
聊聊 RXJS
摘要:一 什么是rxjs? RxJS(Reactive Extensions for JavaScript)是一个用于响应式编程的 JavaScript 库。它通过使用可观察对象(Observables)和操作符(Operators)来处理异步和事件驱动的代码。 什么是响应式编程? 程序的输入可以被当成一 阅读全文
posted @ 2023-10-17 08:45 长安城下翩翩少年 阅读(985) 评论(0) 推荐(0) 编辑
React-redux 中useSelector使用
摘要:在一个 action 被分发(dispatch) 后,useSelector() 默认对 select 函数的返回值进行引用比较 ,并且仅在返回值改变时触发重渲染。但是,不同于 connect(),useSelector()并不会阻止父组件重渲染导致的子组件重渲染的行为,即使组件的 props 没有 阅读全文
posted @ 2023-10-17 08:43 长安城下翩翩少年 阅读(1658) 评论(0) 推荐(0) 编辑
React 遇到的奇奇怪怪的问题
摘要:React 遇到的奇奇怪怪的问题 在 ref 初始化时执行的函数,结果组件刷新都要执行一遍。 比如,const ref = useRef(createWorder()); 导致 worker 创建了无数个,内存也霸占了一大半。 阅读全文
posted @ 2023-10-17 08:43 长安城下翩翩少年 阅读(9) 评论(0) 推荐(0) 编辑
ahooks 源码实现
摘要:ahooks库源码实现 state模块 useSetState 功能点: 1. 实现类似class组件中 setState功能,只更新传入的值,其他值不用更新; 2. 且可以穿入第二个回调函数 参数同步获取更新后的最新state用于操作。 import { useState } from 'reac 阅读全文
posted @ 2023-10-17 08:42 长安城下翩翩少年 阅读(29) 评论(0) 推荐(0) 编辑
图片基础知识
摘要:图片基础知识 像素点 物理像素点 设备像素比 几倍图 缩略图 格式图 (webp,jpeg,png,jpg,gif) 尺寸 大小 阴影 图片压缩 图片分片上传 图片分片渲染(几张图片渲染成一张大图) Buffer 格式,如何渲染成图片? 位图 bigBitImage, 如何渲染,哪种渲染图片更快? 阅读全文
posted @ 2023-10-17 08:41 长安城下翩翩少年 阅读(16) 评论(0) 推荐(0) 编辑
Webgl 基础以及canvasKit学习
摘要:一 基础概念 1. 关于canvas 、 webgl 、 skia 、canvasKit ctx.getContext('2d ' / 'webgl ' / 'webgl2'); 类型 2d 、webgl、webgl2 有什么不同? canvas2d 主要的性能问题就在于,绘制中间对象没法缓存,以及 阅读全文
posted @ 2023-10-17 08:40 长安城下翩翩少年 阅读(698) 评论(0) 推荐(0) 编辑
Canvas基础
摘要:一 什么是canvas ? MDN 中这样定义: 是 HTML5 新增的元素,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。 我们可以这样认为, 标签只是一个矩形的画布。J 阅读全文
posted @ 2023-10-17 08:34 长安城下翩翩少年 阅读(271) 评论(0) 推荐(0) 编辑

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示