知之为知之，不知为不知

【代码】JS实现图片转换SVG。

只读属性是JavaScript中一个非常常用的特性，它可以用于保护对象的属性、设置默认值、以及优化代码性能等方面。通过合理地运用只读属性，我们可以使程序更加安全、稳定和高效

我们可转化为三个方面来看：响应速度、页面稳定性、外部服务调用。响应速度：页面初始访问速度 + 交互响应速度；页面稳定性：页面出错率；外部服务调用：网络请求访问速度；

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等；加载性能指标、可交互时间、稳定性指标、流畅性指标

CSSOM会阻塞渲染，只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个script标签时，DOM构建将暂停，直至脚本完成执行。但由于JavaScript可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS。

测量执行一个函数所需的时间总是一个很好的办法，证明某些实现比另一个实现的性能更好。这也是一个很好的方法，可以确保性能没有在某些改变后受到影响，也可以追踪瓶颈。

Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能

requestAnimationFrame 请求动画帧；它是一个浏览器的宏任务；requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

JavaScript的五种排序方法，冒泡排序、选择排序、插入排序、归并排序、快速排序

前端性能优化手段从以下几个方面入手:加载优化，执行优化，渲染优化，脚本优化、代码优化

webpack 的核心配置的创建和修改基于一个有潜在难于处理的 JavaScript 对象。虽然这对于配置单个项目来说还是 OK 的，但当你尝试跨项目共享这些对象并使其进行后续的修改就会变的混乱不堪，因为您需要深入了解底层对象的结构以进行这些更改。webpack-chain 尝试通过提供可链式或顺流式的 API 创建和修改webpack 配置。API的 Key 部分可以由用户指定的名称引用，这有助于 跨项目修改配置方式 的标准化。

HTTP 缓存策略分为两种： 强缓存 和 协商缓存 ，这两种缓存策略都是服务端设置 HTTP Header 来实现的

this.func 与 Fn.prototype.func

【代码】简单封装XMLHttpRequest。

Ctrl + V 粘贴上传文件，以React + Antd为示例

我们通过 e.preventDefault(); 阻止默认的下拉滑动的效果，通过添加 passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。

js深拷贝

浏览器解析html文件时，从上向下解析，解析到DOM中的script时会暂停DOM渲染，在脚本加载并执行完毕后才会继续向下解析。因此JS脚本存在会阻塞DOM解析的问题进而影响页面渲染速度；

封装一个 maxAgeStorage 来对 localStorage 进行操作setItem时，外层数据多放进一个 expires 来设置过期时间getItem时，如果现在时间小于 expires 则清除该key

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。...

移动端JS判断手势方向，返回手势滑动方向

大文件分片断点续传

在 H5 实现一个长按 dom 节点，将当前节点保存为图片的功能，核心步骤如下实现长按功能dom 转 canvas

js 多文件一次性上传；js 上传文件数组；

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。

安全问题不能大意，对于一些比较敏感的内容，我们可以通过水印方案，最大程度地给浏览者警示的作用，减少泄密的情况，甚至泄密了，也有可能追踪到泄密者。watermark-plus，使用简单，可防止手动删除水印；支持Vue、React等JS框架；支持文本水印；支持图片水印；可防止被删除；可防止重复渲染；可动态适应超长水印文本；高清晰度；支持浏览器端打印；可配置性强；支持自定义水印内容（排版、样式、内容）；

compressorjs - npmJavaScript image compressor.https://www.npmjs.com/package/compressorjs相关文章：了解JS压缩图片，这一篇就够了 - 知乎JavaScript前端实现压缩图片功能

什么是mockJs生成随机数据，拦截 Ajax 请求参考文档：Mock.js为什么使用mockJs如果后端接口还未开发完成，我们自己手动模拟后端接口返回随机数据完成交互功能采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查 采用mockJs进行模拟数据，可以模拟各种场景（get、post）生成接口，并且随机生成所需数据，还可以对数据进行增删改查使用mockJs通过vue-cli创建基本项目 在项目中安装mock npm install mock

语法规范Mock.js 的语法规范包括两部分：数据模板定义规范（Data Template Definition，DTD） 数据占位符定义规范（Data Placeholder Definition，DPD）数据模板定义规范 DTD数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：// 属性名 name// 生成规则 rule// 属性值 value'name|rule': value注意：属性名...

Object转Map、Map转Object、Object转Array、Array转成Object、Array转Set、Set转Array；Map、Set、Array、Object相互转换

1、各浏览器下 scrollTop的差异IE：对于没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；对于有doctype声明的页面，则使用 document.documentElement.scrollTop；Chrome、Firefox：对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度 ；...

测量一个javascript脚本程序执行消耗的时间：// elapsedTime 为 标识 开始于结束为一个标识console.time('elapsedTime') // 计时开始，参数为计时器的名称，它的作用是在代码并行运行时分清楚各个计时器。// 要测试的js代码console.timeEnd('elapsedTime') // 计时结束，立即输出执行总共消耗的时间，单位是毫秒。...

canvas 绘制圆弧；canvas 绘制扇形；canvas 绘制饼形图；canvas 绘制圆角矩形；canvas 绘制文字；canvas 设置文字属性；canvas 绘制图片；canvas 平移转换；canvas 旋转转换；canvas 缩放转换；canvas 绘制一个n等分的圆；canvas 绘制饼状图；canvas 绘制折线图；

一 匹配二提取语法：字符串.match()例：传入参数正则表达式，返回值为提取到的内容如果不设置匹配模式g，只有第一个提取的结果，添加g后，可以提取所有匹配结果const str = '小明：么么哒，找了好久了，我的邮箱是xiaoming@qq.com小红：我老公特别喜欢这个电影，爱你哦，邮箱是xiaohong@10086.com李雷：好人一生平安，邮箱时lilei@yahoo.cn我：谢谢wuyou@qq.com';console.log(str.mat...

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。1 基本说明每个函数都可以称为是一个闭包的环境闭包本身并不难，难在使用闭包解决问题的过程2 使用闭包解决什么样的问题呢？通过某种手段，在函数外可以多次操作函数内的某个数据..

借用继承特点：可以继承实例属性，但是原型中的方法无法继承 // - 设置需要被继承的构造函数Animal function Animal(name, age) { this.name = name this.age = age this.eat = function() { console.log('品味美食') } } // - 再设置一个猫咪构造函数 // 已经存在的构造函数Animal中具有了一些属性和方法，这些属性与方法时

// 输入内容限制 handleKeyDown(e) { // 允许的输入的键值 const regular = ['.', 'Backspace'] if (isNaN(Number(e.key))) { if (!regular.includes(e.key)) { e.returnValue = false return false } } }

export default function getQuery(key, url) { url = url || window.location.href; if (url.indexOf('#') !== -1) url = url.substring(0, url.indexOf('#')); let rts = []; let rt; let queryReg = new RegExp('(^|\\?|&)' + key + '=([^&]*)(?=&|.

export default function getDetect() { let platForm = navigator.platform; let isWin = platForm === 'Win32' || platForm === 'Windows'; let isMac = platForm === 'Mac68K' || platForm === 'MacPPC' || platForm === 'Macintosh' || platForm =.