![](https://img-blog.csdnimg.cn/888bce3424764402bfc6182dc4894712.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 59
JavaScript
__畫戟__
前端。知之为知之,不知为不知
展开
-
JS实现图片转换SVG
【代码】JS实现图片转换SVG。转载 2024-08-22 10:28:31 · 33 阅读 · 0 评论 -
Javascript 创建只读变量
只读属性是JavaScript中一个非常常用的特性,它可以用于保护对象的属性、设置默认值、以及优化代码性能等方面。通过合理地运用只读属性,我们可以使程序更加安全、稳定和高效原创 2023-06-26 19:58:12 · 566 阅读 · 0 评论 -
如何进行 web 性能监控?
我们可转化为三个方面来看:响应速度、页面稳定性、外部服务调用。响应速度:页面初始访问速度 + 交互响应速度;页面稳定性:页面出错率;外部服务调用:网络请求访问速度;转载 2023-05-13 16:23:40 · 2199 阅读 · 0 评论 -
vue中的diff算法
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。转载 2023-05-08 00:49:57 · 1301 阅读 · 0 评论 -
Web前端最新优化指标:FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等
Web前端最新优化指标:FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等;加载性能指标、可交互时间、稳定性指标、流畅性指标转载 2023-05-05 22:45:27 · 3968 阅读 · 0 评论 -
DOM和CSSOM的构建会相互影响吗
CSSOM会阻塞渲染,只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。通常情况下DOM和CSSOM是并行构建的,但是当浏览器遇到一个script标签时,DOM构建将暂停,直至脚本完成执行。但由于JavaScript可以修改CSSOM,所以需要等CSSOM构建完毕后再执行JS。转载 2023-05-04 10:00:29 · 558 阅读 · 0 评论 -
测量JavaScript函数的性能各种方式对比
测量执行一个函数所需的时间总是一个很好的办法,证明某些实现比另一个实现的性能更好。这也是一个很好的方法,可以确保性能没有在某些改变后受到影响,也可以追踪瓶颈。转载 2023-05-04 00:58:30 · 332 阅读 · 0 评论 -
JS 中的 performance,测量web应用性能
Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能原创 2023-05-03 23:43:15 · 1203 阅读 · 0 评论 -
requestAnimationFrame,读懂这篇文章就够了
requestAnimationFrame 请求动画帧;它是一个浏览器的宏任务;requestAnimationFrame的用法与setTimeout很相似,只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。它返回一个整数,表示定时器的编号,这个值可以传递给cancelAnimationFrame用于取消这个函数的执行转载 2023-05-03 13:27:21 · 1916 阅读 · 0 评论 -
JavaScript的五种排序方法
JavaScript的五种排序方法,冒泡排序、选择排序、插入排序、归并排序、快速排序转载 2023-04-19 21:13:29 · 2994 阅读 · 0 评论 -
前端性能优化
前端性能优化手段从以下几个方面入手:加载优化,执行优化,渲染优化,脚本优化、代码优化转载 2023-04-18 23:35:09 · 441 阅读 · 0 评论 -
webpack-chain
webpack 的核心配置的创建和修改基于一个有潜在难于处理的 JavaScript 对象。虽然这对于配置单个项目来说还是 OK 的,但当你尝试跨项目共享这些对象并使其进行后续的修改就会变的混乱不堪,因为您需要深入了解底层对象的结构以进行这些更改。webpack-chain 尝试通过提供可链式或顺流式的 API 创建和修改webpack 配置。API的 Key 部分可以由用户指定的名称引用,这有助于 跨项目修改配置方式 的标准化。转载 2023-03-15 20:41:00 · 3182 阅读 · 0 评论 -
HTTP缓存
HTTP 缓存策略分为两种: 强缓存 和 协商缓存 ,这两种缓存策略都是服务端设置 HTTP Header 来实现的原创 2023-03-04 21:04:53 · 639 阅读 · 0 评论 -
在构造函数里定义 function 和使用 prototype.func 有什么区别?
this.func 与 Fn.prototype.func原创 2023-03-01 21:52:03 · 120 阅读 · 0 评论 -
简单封装XMLHttpRequest
【代码】简单封装XMLHttpRequest。原创 2022-11-15 22:29:53 · 465 阅读 · 0 评论 -
Ctrl + V 粘贴上传文件,以React + Antd为示例
Ctrl + V 粘贴上传文件,以React + Antd为示例原创 2022-08-10 21:40:12 · 1053 阅读 · 0 评论 -
阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)
我们通过 e.preventDefault(); 阻止默认的下拉滑动的效果,通过添加 passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。转载 2022-06-01 14:23:34 · 850 阅读 · 3 评论 -
js深拷贝
js深拷贝原创 2022-05-22 17:41:09 · 140 阅读 · 0 评论 -
Script放在body中间会阻塞吗?defer与async的区别?
浏览器解析html文件时,从上向下解析,解析到DOM中的script时会暂停DOM渲染,在脚本加载并执行完毕后才会继续向下解析。因此JS脚本存在会阻塞DOM解析的问题进而影响页面渲染速度;原创 2022-05-22 12:53:12 · 787 阅读 · 0 评论 -
有时效的 localStorage
封装一个 maxAgeStorage 来对 localStorage 进行操作setItem时,外层数据多放进一个 expires 来设置过期时间getItem时,如果现在时间小于 expires 则清除该key原创 2022-05-18 22:46:12 · 141 阅读 · 0 评论 -
发布订阅者模式
发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish Event)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。...原创 2022-05-18 10:15:09 · 256 阅读 · 0 评论 -
移动端JS判断手势方向
移动端JS判断手势方向,返回手势滑动方向原创 2022-05-11 11:26:49 · 480 阅读 · 0 评论 -
原生JS实现大文件分片
大文件分片断点续传转载 2022-04-23 23:44:42 · 1577 阅读 · 2 评论 -
H5 长按dom保存为图片
在 H5 实现一个长按 dom 节点,将当前节点保存为图片的功能,核心步骤如下实现长按功能dom 转 canvas原创 2022-04-17 23:08:33 · 1786 阅读 · 1 评论 -
js 上传文件数组
js 多文件一次性上传;js 上传文件数组;原创 2022-04-10 20:37:05 · 1987 阅读 · 0 评论 -
彻底理解js中this的指向,不必硬背。
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。转载 2022-03-20 23:10:10 · 232 阅读 · 0 评论 -
页面水印添加工具【watermark-plus】,可防止手动删除水印,支持文本水印、图片水印、定制水印内容
安全问题不能大意,对于一些比较敏感的内容,我们可以通过水印方案,最大程度地给浏览者警示的作用,减少泄密的情况,甚至泄密了,也有可能追踪到泄密者。watermark-plus,使用简单,可防止手动删除水印;支持Vue、React等JS框架;支持文本水印;支持图片水印;可防止被删除;可防止重复渲染;可动态适应超长水印文本;高清晰度;支持浏览器端打印;可配置性强;支持自定义水印内容(排版、样式、内容);原创 2021-12-24 15:14:59 · 4959 阅读 · 13 评论 -
js 图片压缩
compressorjs - npmJavaScript image compressor.https://www.npmjs.com/package/compressorjs相关文章:了解JS压缩图片,这一篇就够了 - 知乎JavaScript前端实现压缩图片功能原创 2021-11-26 10:39:54 · 405 阅读 · 0 评论 -
mockJs基础用法示例
什么是mockJs生成随机数据,拦截 Ajax 请求参考文档:Mock.js为什么使用mockJs如果后端接口还未开发完成,我们自己手动模拟后端接口返回随机数据完成交互功能采用json数据模拟,生成数据比较繁琐,也比较有局限性,没办法达到增删改查 采用mockJs进行模拟数据,可以模拟各种场景(get、post)生成接口,并且随机生成所需数据,还可以对数据进行增删改查使用mockJs通过vue-cli创建基本项目 在项目中安装mock npm install mock转载 2021-11-24 23:03:09 · 317 阅读 · 0 评论 -
Mock.js 语法规范
语法规范Mock.js 的语法规范包括两部分:数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD)数据模板定义规范 DTD数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:// 属性名 name// 生成规则 rule// 属性值 value'name|rule': value注意:属性名...转载 2021-11-24 22:54:27 · 577 阅读 · 0 评论 -
Map、Set、Array、Object相互转换
Object转Map、Map转Object、Object转Array、Array转成Object、Array转Set、Set转Array;Map、Set、Array、Object相互转换原创 2021-11-10 20:56:48 · 1598 阅读 · 0 评论 -
各浏览器scrollTop差异及兼容解决办法
1、各浏览器下 scrollTop的差异IE:对于没有doctype声明的页面,使用 document.body.scrollTop 或 document.documentElement.scrollTop;对于有doctype声明的页面,则使用 document.documentElement.scrollTop;Chrome、Firefox:对于没有doctype声明的页面,使用 document.body.scrollTop 来获取 scrollTop高度 ;...原创 2021-10-29 11:46:56 · 1420 阅读 · 1 评论 -
测试js代码性能(即消耗的时间)
测量一个javascript脚本程序执行消耗的时间:// elapsedTime 为 标识 开始于结束为一个标识console.time('elapsedTime') // 计时开始,参数为计时器的名称,它的作用是在代码并行运行时分清楚各个计时器。// 要测试的js代码console.timeEnd('elapsedTime') // 计时结束,立即输出执行总共消耗的时间,单位是毫秒。...原创 2021-08-31 20:59:26 · 1323 阅读 · 0 评论 -
Canvas绘制饼状图、绘制文字、绘制图像
canvas 绘制圆弧;canvas 绘制扇形;canvas 绘制饼形图;canvas 绘制圆角矩形;canvas 绘制文字;canvas 设置文字属性;canvas 绘制图片;canvas 平移转换;canvas 旋转转换;canvas 缩放转换;canvas 绘制一个n等分的圆;canvas 绘制饼状图;canvas 绘制折线图;原创 2021-08-27 10:24:51 · 1490 阅读 · 0 评论 -
正则表达式——匹配、提取、替换
一 匹配二提取语法:字符串.match()例:传入参数正则表达式,返回值为提取到的内容如果不设置匹配模式g,只有第一个提取的结果,添加g后,可以提取所有匹配结果const str = '小明:么么哒,找了好久了,我的邮箱是xiaoming@qq.com小红:我老公特别喜欢这个电影,爱你哦,邮箱是xiaohong@10086.com李雷:好人一生平安,邮箱时lilei@yahoo.cn我:谢谢wuyou@qq.com';console.log(str.mat...原创 2021-08-26 21:15:10 · 1202 阅读 · 0 评论 -
javascript函数闭包
一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。1 基本说明每个函数都可以称为是一个闭包的环境闭包本身并不难,难在使用闭包解决问题的过程2 使用闭包解决什么样的问题呢?通过某种手段,在函数外可以多次操作函数内的某个数据..原创 2021-08-25 21:15:51 · 114 阅读 · 0 评论 -
javascript继承
借用继承特点:可以继承实例属性,但是原型中的方法无法继承 // - 设置需要被继承的构造函数Animal function Animal(name, age) { this.name = name this.age = age this.eat = function() { console.log('品味美食') } } // - 再设置一个猫咪构造函数 // 已经存在的构造函数Animal中具有了一些属性和方法,这些属性与方法时原创 2021-08-25 09:59:57 · 93 阅读 · 0 评论 -
正则控制输入input只能输入数字、小数
// 输入内容限制 handleKeyDown(e) { // 允许的输入的键值 const regular = ['.', 'Backspace'] if (isNaN(Number(e.key))) { if (!regular.includes(e.key)) { e.returnValue = false return false } } }原创 2021-02-25 19:06:35 · 296 阅读 · 0 评论 -
获取URL参数
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 + '=([^&]*)(?=&|.原创 2021-02-19 10:52:23 · 151 阅读 · 0 评论 -
获取操作系统信息
export default function getDetect() { let platForm = navigator.platform; let isWin = platForm === 'Win32' || platForm === 'Windows'; let isMac = platForm === 'Mac68K' || platForm === 'MacPPC' || platForm === 'Macintosh' || platForm =.原创 2021-02-19 10:51:08 · 147 阅读 · 0 评论