一 什么是canvas ？ MDN 中这样定义： 是 HTML5 新增的元素，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。我们可以这样认为， 标签只是一个矩形的画布。JavaScript 就是画笔，负责在画布上画画。Canvas 是为了解决 Web 页面中只能显示静态图
一 基础概念 1. 关于canvas 、 webgl 、 skia 、canvasKit ctx.getContext('2d ' / 'webgl ' / 'webgl2')； 类型 2d 、webgl、webgl2 有什么不同？ canvas2d 主要的性能问题就在于，绘制中间对象没法缓存，以及部分能力需要 CPU 计算这两点上。 而 canvaskit 在提供了类似 canvas 2d 的
图片基础知识 像素点 物理像素点 设备像素比 几倍图 缩略图 格式图 （webp，jpeg，png，jpg，gif）尺寸 大小 阴影图片压缩 图片分片上传 图片分片渲染（几张图片渲染成一张大图）Buffer 格式，如何渲染成图片？ 位图 bigBitImage， 如何渲染，哪种渲染图片更快？ 如何缓存位图 ？
ahooks库源码实现 state模块useSetState功能点： 1. 实现类似class组件中 setState功能，只更新传入的值，其他值不用更新； 2. 且可以穿入第二个回调函数 参数同步获取更新后的最新state用于操作。 1. import { useState } from 'react'; export const useSetState = (init = {}) =>
React 遇到的奇奇怪怪的问题在 ref 初始化时执行的函数，结果组件刷新都要执行一遍。 比如，const ref = useRef(createWorder()); 导致 worker 创建了无数个，内存也霸占了一大半。
在一个 action 被分发(dispatch) 后，useSelector() 默认对 select 函数的返回值进行引用比较 ===，并且仅在返回值改变时触发重渲染。但是，不同于 connect()，useSelector()并不会阻止父组件重渲染导致的子组件重渲染的行为，即使组件的 props 没有发生改变。useSelector 源码分析 import { useContext, use
React 组件代码规范 1 命名规范函数命名组件的私有方法都用 _ 开头所有事件监听的方法都用 handle 开头传递给子组件以on开头render函数的分支，以render开头
一 什么是rxjs？ RxJS（Reactive Extensions for JavaScript）是一个用于响应式编程的 JavaScript 库。它通过使用可观察对象（Observables）和操作符（Operators）来处理异步和事件驱动的代码。 什么是响应式编程？ 程序的输入可以被当成一个数据流，例如 excel表格的累加。 响应式编程世界里知名度最高的框架 - Reactive E
我们将使用 babel 去编译 TypeScript，babel 在编译 TypeScript 代码是直接去掉 TypeScript 的类型，然后当成普通的 javascript 代码使用各种插件进行编译，tsc 并没有介入编译过程，因此 tsconfig.json 中很多选项例如 target 和 module 是没有用的，可以让 VSCode 等编辑器正确提示错误 在项目中使用ts yarn
一 Git 是什么？ Git 是一种分布式开源 版本管理工具(VCS)，你可以用它存储代码、跟踪修订历史记录、合并代码更改，并在需要时恢复为较早的代码版本。二 Git 分区工作区 working directory 是「工作目录」，也就是我们肉眼能够看到的文件暂存区 （Index）本地仓库区（Repository）远程仓库区 (Remote) 三 git 常用命令行文件夹中查看隐藏文件mac中快捷
用 git cz 代替 git commit 操作全局安装 npm install -g commitizen cz-conventional-changelog npm i -g cz-customizable写入配置 echo'{ "path": "cz-customizable" }' > ~/.czrc在项目根目录下写入文件.cz-config.jsmodule.exports =
第一步 mac 输入 shift + command + p （windows 输入 ctrl + shift + p）, 输入snippets, 点击如下图选项。第二步，选中新建全局代码片段文件。第三步，输入一个全局配置文件名，例如 snippet.config第四步，进行配置{ // Place your 全局 snippets here. Each snippet is defined u
一 画板现阶段性能瓶颈图片内存占用过高操作（拖动，缩放）导致的过度重绘制react、redux数据更新机制导致绘图出现延迟 二 内存优化 现阶段内存的瓶颈在哪里？到底是哪些东西占用了内存？ 优化点1：地图Map中的图片大小尽可能小 现阶段地图所有的数据都是走的 服务端（非webp图片）的百分之25%缩略图，当出现超大图大图，每次都去缓存超大图的25%图片作为地图的数据，当地图中大图的数量较多的时候
全局报错捕获js window.addEventListener('unhandledrejection', event => { let request = event.target; // IndexedDB 本机请求对象 let error = event.reason; // 未处理的错误对象，与 request.error 相同 // ……报告错误…… });
一 基础概念 Webpack 是什么？ 答：现代javascript构建工具，静态资源打包工具 什么叫构建 ？ 构建就是把我们在开发环境写的代码，转换成生产环境的代码。构建过程应该包括 预编译、语法检查、词法检查、依赖处理、文件合并、文件压缩、单元测试、版本管理等Vite 利用 浏览器 支持ES module 二 核心概念 （二八原则）entry 入口文件，可以是一个或者多个。表示从这个入口文
设计原则开放封闭原则 对扩展开放，对修改关闭例子1 - axios 设计符合开闭原则（通过axios.interceptors 对外部扩展进行开放）、以及redux中间件设计方式例子2 1. enum MemberName { normal:'normal', vip:'vip', vipPlus:'vipPlus' } // 不符合开闭原则，因为如果新增了会员类型，则需要修改Prod
let 和 var的区别 变量声明提升 暂时性死区 不允许重复声明 块级作用域 （函数作用域，全局作用域 - 用函数作用域 （匿名立即执行函数表达式）代替块级作用域） 不与全局对象挂钩（window，global，self, globalThis） 变量的结构赋值（数组，对象-原型链上也可-包装类型也可） 用途交换变量的值 从函数中返回多个值（放在对象中返回，再解构） 函数参数的定义，以及默
一 相对地址转绝对地址使用场景：某个函数需要在使用的时候传递一个 地址，函数内部会利用这个地址 进行某些操作 （比如生成worker，生成image，数据转化等）如下：如果直接使用相对位置，会根据url 进行拼接。但当 一些利用利用了router的单页项目，页面的url 并不能获取到 真实的file 地址。所以出现如下情况其他 几种浏览器中 相对地址转绝对地址的方法利用a标签1. functi
FileReader ---- 读取 file/blob 数据 FileReader.readAsArrayBuffer() 异步方法， 读取完成 result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。 FileReader.readAsDataURL() ： 一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
画布拖动策略：为提升性能，防止画布(canvas) 跟随mouseMove事件不断重绘，选择先移动画布容器，在鼠标mouseup 事件执行时，重绘画布，让画布容器的还原。具体实现 // 视口宽高： 为画板可视区域的宽高，不包含header高度； const clientRect = { width:, height:, };// 定义一个偏移量，为视口的宽高：理由是在鼠标从视口左上角拖到到
indexDB介绍与封装 一 前端缓存的发展 Cookie： 内存小4kb，现多用于服务端存一些数据在客户端 localstorage/sessionStorage ：5M左右，同步缓存，读取速度较快 Cache Storage 与 serviseWorker 配合使用。 （ios 浏览器 很小，其他浏览器可以无限存） indexDB：内存基本无上限。异步读取数据，适合用来做离线缓存工具。 二
一 JSON - javascript Object Notation（符号） 基于JavaScript原生语法，能够序列化对象、数组、数值、字符串、布尔值和 null。 JSON.parse(s,(key,value)=>{ console.log(key,value); // s 为字符串 '"字符"' 或者 '数字' 、'null' 、'{}'、'[]' key 都为空，valu
一 升级react 18 React 18 改变所有setState 都是异步，不管是否在react的“管辖范围内”。原来在定时器，在监听函数中是同步的。Root 书写方式 需要改变Router 需要改变？？ 二 启用并发渲染useDeferredValue 1. const [text, setText] = useState('喵爸'); const deferredText = useDe
一 document.execCommand 现阶段 项目中 使用方法document.execCommand 可直接操控选中文本，添加属性（操控文档）。但是由于fdocument.execCommand 方法兼容性不好，浏览器之间的实现不一致，没有一个统一的标准。且自定义程度不高。官方已经将该方法移除。推荐使用 Selection 和 Range 进行操作。 罗列一下 document.ex
Commonjs （同步模块加载，运行时加载） exports 和 moudle.exports 的区别？ exports 是 module 中exports 对象 的引用。当模块中使用了 moudle.export = {} 的时候，所有 exports 都会失效。exports 只能 exports.a = a; 这样使用，不能 exports = {};这种使用方式无效。每个模块其实都相当于
原则不要阻塞主线程将长任务进行拆分 （大图切片，因为image.decode 大图会形成长任务）Js 单线程 与长任务 主线程是浏览器中大多数任务运行的地方。它被称为主线程是有原因的:几乎所有编写的JavaScript都在主线程中工作。 主线程一次只能处理一个任务。当任务持续时间超过某一点(确切地说是50毫秒)时，它们被归类为长任务。如果用户在运行较长时间的任务时试图与页面交互，或者需要进行重要的
执行时期的区别一 useEffect 回调函数的执行时期useEffect为异步执行，执行时期为触发状态更新（如：setState，forceUpdate）React渲染函数执行（render）将更新渲染到页面上执行useEffect回调函数二 useLayoutEffect 回调函数的执行时期触发更新React渲染函数执行同步执行 useLayoutEffect回调函数 (如果此函数中存在 触发
一 package.json 中的版本符号{ "react"："^18.2.0", "react-dom"："~18.2.0" "react-refresh": "0.11.0",}插入符号 ^18.2.0 ：匹配 18.X.X 的最新版本。 波浪符号 ~18.2.0 ：匹配 18.2.X 的最新版本。 固定版本 0.11.0 ： 匹配 0.11.0， 不会更新版本。二 package-lo
window.print()const bodyHtml = document.body.innerHTML document.body.innerHTML= $0.innerHTML window.print(); document.body.innerHTML = bodyHtml location.reload(); // 刷新页面$0 为打印的节点；location
一 setInterval的时间误差setInterval(fn,300);setInterval 执行机制，300ms会检测一次任务队列中有无未执行的上一次任务fn，如果没有则将fn加入任务队列，如果有则跳过。由于js单线程，如果在执行fn前还要耗时的任务执行，则会暴露缺点 1.某些间隔会被跳过 2.可能多个定时器会连续执行setTimeout 执行机制setTimeout(fn,300);每隔
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
