第一步mac输入shift+command+p（windows输入ctrl+shift+p）,输入snippets,点击如下图选项。 第二步，选中新建全局代码片段文件。 第三步，输入一个全局配置文件名，例如snippet.config 第四步，进行配置 { //Placeyour全局snippetshere.Eachsnippetisdefinedunderasnippetnameandhasascope,prefix,bodyand //description.Addcommaseparatedidsofthelanguageswherethesnippetisapplicable...

一Git是什么？Git是一种分布式开源版本管理工具(VCS)，你可以用它存储代码、跟踪修订历史记录、合并代码更改，并在需要时恢复为较早的代码版本。 二Git分区 工作区workingdirectory是「工作目录」，也就是我们肉眼能够看到的文件 暂存区（Index） 本地仓库区（Repository） 远程仓库区(Remote)三git常用命令行 文件夹中查看隐藏文件 mac中快捷键：cmd+shift+. windows中 HEAD代表什么？ HEAD是引用中最特殊的一个：HEAD是指向当前commit的引用，它具有唯一性，每个仓库中只有一个HEAD。它是指向当前commit的引用...

ahooks库源码实现state模块 useSetState 功能点：1.实现类似class组件中setState功能，只更新传入的值，其他值不用更新；2.且可以穿入第二个回调函数参数同步获取更新后的最新state用于操作。 1.import{useState}from'react'; exportconstuseSetState=(init={})=>{ const[state,setState]=useState(init); consthanleSetState=(value,callback)=>{ letnewState; setState((oldStat...

一什么是canvas？MDN中这样定义： 是HTML5新增的元素，一个可以使用脚本(通常为JavaScript)在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 我们可以这样认为，标签只是一个矩形的画布。JavaScript就是画笔，负责在画布上画画。 Canvas是为了解决Web页面中只能显示静态图片这个问题而提出的，一个可以使用JavaScript等脚本语言向其中绘制图像的HTML标签。二绘图基础 创建canvas上下文，为画板设置宽高 constcanvas=document.querySelector('ca...

原则 不要阻塞主线程 将长任务进行拆分（大图切片，因为image.decode大图会形成长任务） Js单线程与长任务主线程是浏览器中大多数任务运行的地方。它被称为主线程是有原因的:几乎所有编写的JavaScript都在主线程中工作。主线程一次只能处理一个任务。当任务持续时间超过某一点(确切地说是50毫秒)时，它们被归类为长任务。如果用户在运行较长时间的任务时试图与页面交互，或者需要进行重要的呈现更新，则浏览器将延迟处理该工作。这会导致交互或呈现延迟。 因为当任务被分解时，浏览器有更多的机会来响应高优先级的工作——包括用户交互。 任务管理策略 软件架构中一个常见的建议是将工作分解成更小的...

Commonjs（同步模块加载，运行时加载）exports和moudle.exports的区别？exports是module中exports对象的引用。当模块中使用了moudle.export={}的时候，所有exports都会失效。exports只能exports.a=a;这样使用，不能exports={};这种使用方式无效。 每个模块其实都相当于外层包裹了一个函数，向内传递了一个module的参数。 Requirerequire是node环境中的全局函数require可以导入js和json文件可以忽略后缀名，默认后缀名是.js 目录加载：如果有package.json，会以main字段的值...

一document.execCommand现阶段项目中使用方法document.execCommand可直接操控选中文本，添加属性（操控文档）。但是由于fdocument.execCommand方法兼容性不好，浏览器之间的实现不一致，没有一个统一的标准。且自定义程度不高。官方已经将该方法移除。推荐使用Selection和Range进行操作。罗列一下document.execCommand的一些操作。由于现在项目中还使用这些方法。一方面罗列出来，方便后续进行修改。一方面，为使用Selection,Range进行重构打好基础（到底要重构哪些功能）前提：可编辑的div属性。必须在div上配置属性co...

一JSONjavascriptObjectNotation（符号）基于JavaScript原生语法，能够序列化对象、数组、数值、字符串、布尔值和null。 JSON.parse(s,(key,value)=>{ console.log(key,value); //s为字符串'"字符"'或者'数字'、'null'、'{}'、'[]'key都为空，value为其解析的值 //s为JSON对象字符串，key和value才为其解析的值 //undefined、Symbol和BigInt，数字也不支持NaN、Infinity和-Infinity，都会报错 }); JSON.parse...

indexDB介绍与封装一前端缓存的发展Cookie：内存小4kb，现多用于服务端存一些数据在客户端localstorage/sessionStorage：5M左右，同步缓存，读取速度较快CacheStorage与serviseWorker配合使用。（ios浏览器很小，其他浏览器可以无限存）indexDB：内存基本无上限。异步读取数据，适合用来做离线缓存工具。二indexDB简介 indexDB是什么？客户端键值对数据库 indexDB解决了什么问题？同其他缓存的优劣势对比？ 通过支持多种类型的键，来存储几乎可以是任何类型的值。 支撑事务的可靠性。 支持键值范围查询、索引。 和local...

一相对地址转绝对地址 使用场景：某个函数需要在使用的时候传递一个地址，函数内部会利用这个地址进行某些操作（比如生成worker，生成image，数据转化等） 如下：如果直接使用相对位置，会根据url进行拼接。但当一些利用利用了router的单页项目，页面的url并不能获取到真实的file地址。所以出现如下情况 其他几种浏览器中相对地址转绝对地址的方法 利用a标签 1. functionabsolute2Relative(src,base){ consta=document.createElement('a'); a.href=(base||'')+src; returna...

一调用栈我们知道栈的特点是，先进后出的。那么函数的执行上下文栈又是怎么样的呢？先看这段代码 vara=2 functionp2(b,c){ returnb+c； }functionp1(b,c){ vard=10; result=p2(b,c); returna+result+d;//2+9+10 }console.log(p1(3,6));//21 由于js代码是运行时编译，先进行词法解析、语法解析生成AST（抽象语法树）生产、代码生成生成机器码（运行在浏览器上）。而在词法解析阶段，就会生成执行上下文。所以js的作用域又叫词法作用域。也就是说，js作用链查找与函数在哪里执行没...

全局报错捕获 jswindow.addEventListener('unhandledrejection',event=>{letrequest=event.target;//IndexedDB本机请求对象leterror=event.reason;//未处理的错误对象，与request.error相同//……报告错误……});

一画板现阶段性能瓶颈 图片内存占用过高 操作（拖动，缩放）导致的过度重绘制 react、redux数据更新机制导致绘图出现延迟二内存优化现阶段内存的瓶颈在哪里？到底是哪些东西占用了内存？优化点1：地图Map中的图片大小尽可能小现阶段地图所有的数据都是走的服务端（非webp图片）的百分之25%缩略图，当出现超大图大图，每次都去缓存超大图的25%图片作为地图的数据，当地图中大图的数量较多的时候，初始化加载和渲染的压力会比较大。为什么不走oss图片策略Map组件没有去判断是否可以走oss图片策略直接访问的服务端图片地址，这样导致了同样的p25缩略图，缓存中存了两份文件（oss和服务端图片都存下来了...

用gitcz代替gitcommit操作 全局安装npminstall-gcommitizencz-conventional-changelognpmi-gcz-customizable 写入配置echo'{"path":"cz-customizable"}'>/.czrc 在项目根目录下写入文件.cz-config.js module.exports={ //可选类型 types:[ {value:'feat',name:'feat:新功能'}, {value:'fix',name:'fix:修复'}, {value:'docs',name:'docs:文档变更'},...

在一个action被分发(dispatch)后，useSelector()默认对select函数的返回值进行引用比较=，并且仅在返回值改变时触发重渲染。但是，不同于connect()，useSelector()并不会阻止父组件重渲染导致的子组件重渲染的行为，即使组件的props没有发生改变。 useSelector源码分析 import{useContext,useEffect,useReducer,useRef,}from'react'; importStoreContextfrom'./context';typeEqualityFn=(a:T,b:T)=>boolean; e...

图片基础知识像素点物理像素点设备像素比几倍图缩略图格式图（webp，jpeg，png，jpg，gif） 尺寸大小阴影 图片压缩图片分片上传图片分片渲染（几张图片渲染成一张大图） Buffer格式，如何渲染成图片？位图bigBitImage，如何渲染，哪种渲染图片更快？如何缓存位图？

一基础概念1.关于canvas、webgl、skia、canvasKitctx.getContext('2d'/'webgl'/'webgl2')；类型2d、webgl、webgl2有什么不同？canvas2d主要的性能问题就在于，绘制中间对象没法缓存，以及部分能力需要CPU计算这两点上。而canvaskit在提供了类似canvas2d的接口的同时，又让我们不用去操心webGL上的技术问题，可以说非常适合复杂的2d图形绘制场景了。canvasKit还提供其他功能，比如布尔运算，文字排版（canvas2d中fillText只能绘制单行文本，不能直接换行，需要配合计算文字长度的属性measureT...

一升级react18React18改变 所有setState都是异步，不管是否在react的“管辖范围内”。原来在定时器，在监听函数中是同步的。 Root书写方式需要改变 Router需要改变？？二启用并发渲染 useDeferredValue 1.const[text,setText]=useState('喵爸'); constdeferredText=useDeferredValue(text); constdebouncedValue=useDebounce(text,{wait:1000}); consthandleChange=(e)=>{ setText(e.t...

画布拖动策略：为提升性能，防止画布(canvas)跟随mouseMove事件不断重绘，选择先移动画布容器，在鼠标mouseup事件执行时，重绘画布，让画布容器的还原。 具体实现 //视口宽高：为画板可视区域的宽高，不包含header高度； constclientRect={ width:, height:, };//定义一个偏移量，为视口的宽高：理由是在鼠标从视口左上角拖到到视口的右下角，不需要画布重绘就能直接显示 constinitOffset={ x:clientRect.width,//x为视口宽度 y:clientRect.height,//y为视口高度 }; ...

FileReader---读取file/blob数据FileReader.readAsArrayBuffer()异步方法，读取完成result属性中保存的将是被读取文件的ArrayBuffer数据对象。FileReader.readAsDataURL()：一旦完成，result属性中将包含一个data:URL格式的Base64字符串以表示所读取文件的内容。FileReader.readAsText()一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。//具体用法 //arrayBuffer转blobconstblob=newBlob([arrayBuffer]);//b...