2023年10月17日
摘要：
一 document.execCommand 现阶段 项目中 使用方法document.execCommand 可直接操控选中文本，添加属性（操控文档）。但是由于fdocument.execCommand 方法兼容性不好，浏览器之间的实现不一致，没有一个统一的标准。且自定义程度不高。官方已经将该方法 阅读全文
摘要：
Commonjs （同步模块加载，运行时加载） exports 和 moudle.exports 的区别？ exports 是 module 中exports 对象 的引用。当模块中使用了 moudle.export = {} 的时候，所有 exports 都会失效。exports 只能 expor 阅读全文
摘要：
原则 不要阻塞主线程 将长任务进行拆分 （大图切片，因为image.decode 大图会形成长任务） Js 单线程 与长任务 主线程是浏览器中大多数任务运行的地方。它被称为主线程是有原因的:几乎所有编写的JavaScript都在主线程中工作。 主线程一次只能处理一个任务。当任务持续时间超过某一点(确 阅读全文
摘要：
一 画板现阶段性能瓶颈 图片内存占用过高 操作（拖动，缩放）导致的过度重绘制 react、redux数据更新机制导致绘图出现延迟 二 内存优化 现阶段内存的瓶颈在哪里？到底是哪些东西占用了内存？ 优化点1：地图Map中的图片大小尽可能小 现阶段地图所有的数据都是走的 服务端（非webp图片）的百分之 阅读全文
摘要：
一 升级react 18 React 18 改变 所有setState 都是异步，不管是否在react的“管辖范围内”。原来在定时器，在监听函数中是同步的。 Root 书写方式 需要改变 Router 需要改变？？ 二 启用并发渲染 useDeferredValue const [text, set 阅读全文
摘要：
一 JSON - javascript Object Notation（符号） 基于JavaScript原生语法，能够序列化对象、数组、数值、字符串、布尔值和 null。 JSON.parse(s,(key,value)=>{ console.log(key,value); // s 为字符串 '" 阅读全文
摘要：
indexDB介绍与封装 一 前端缓存的发展 Cookie： 内存小4kb，现多用于服务端存一些数据在客户端 localstorage/sessionStorage ：5M左右，同步缓存，读取速度较快 Cache Storage 与 serviseWorker 配合使用。 （ios 浏览器 很小，其 阅读全文
摘要：
画布拖动策略：为提升性能，防止画布(canvas) 跟随mouseMove事件不断重绘，选择先移动画布容器，在鼠标mouseup 事件执行时，重绘画布，让画布容器的还原。 具体实现 // 视口宽高： 为画板可视区域的宽高，不包含header高度； const clientRect = { width 阅读全文
摘要：
设计原则 开放封闭原则 对扩展开放，对修改关闭 例子1 - axios 设计符合开闭原则（通过axios.interceptors 对外部扩展进行开放）、以及redux中间件设计方式 例子2 enum MemberName { normal:'normal', vip:'vip', vipPlus: 阅读全文
摘要：
FileReader 读取 file/blob 数据 FileReader.readAsArrayBuffer() 异步方法， 读取完成 result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。 FileReader.readAsDataURL() ： 一旦完成，result属 阅读全文
摘要：
一 相对地址转绝对地址 使用场景：某个函数需要在使用的时候传递一个 地址，函数内部会利用这个地址 进行某些操作 （比如生成worker，生成image，数据转化等） 如下：如果直接使用相对位置，会根据url 进行拼接。但当 一些利用利用了router的单页项目，页面的url 并不能获取到 真实的fi 阅读全文
摘要：
一 调用栈 我们知道栈的特点是，先进后出的。那么函数的执行上下文栈又是怎么样的呢？ 先看这段代码 var a = 2 function p2(b,c){ return b+c； } function p1(b,c){ var d = 10; result = p2(b,c); return a + 阅读全文
摘要：
let 和 var的区别 变量声明提升 暂时性死区 不允许重复声明 块级作用域 （函数作用域，全局作用域 - 用函数作用域 （匿名立即执行函数表达式）代替块级作用域） 不与全局对象挂钩（window，global，self, globalThis） 变量的结构赋值（数组，对象-原型链上也可-包装类型 阅读全文
摘要：
全局报错捕获 js window.addEventListener('unhandledrejection', event => { let request = event.target; // IndexedDB 本机请求对象 let error = event.reason; // 未处理的错误 阅读全文
摘要：
一 基础概念 Webpack 是什么？ 答：现代javascript构建工具，静态资源打包工具 什么叫构建 ？ 构建就是把我们在开发环境写的代码，转换成生产环境的代码。构建过程应该包括 预编译、语法检查、词法检查、依赖处理、文件合并、文件压缩、单元测试、版本管理等 Vite 利用 浏览器 支持ES 阅读全文