随笔分类 - javascript
摘要：一、WebGL 的底层执行链路 完整的调用流程可以梳理为： 开发者编写 JS 代码 → 调用浏览器暴露的 WebGL API → 渲染进程解析 WebGL 指令 → 浏览器将指令转换为系统图形接口（Direct3D/Metal/OpenGL） → 系统图形驱动调用 GPU → GPU 完成图形渲染
阅读全文
摘要：在JavaScript中，对象池（Object Pool） 是一种优化内存管理和性能的设计模式，通过复用预先创建的对象实例，避免频繁的创建（new）和销毁（垃圾回收）操作，从而提升高并发或资源密集型场景下的运行效率。需要使用场景：需要创建池（Pool）的 API 操作通常涉及高开销资源的复用，尤其是
阅读全文
摘要：一、MutationObserver：监听DOM结构变化（增删改属性） 特点：精确、高性能，可配置观察选项（如子节点、属性、文本内容） const target = document.createElement('div'); target.innerHTML = '<div>动态内容</div>'
阅读全文
摘要：“离开页面”这个行为本身可以被细分为多种场景： 切换到其他浏览器标签页或应用（页面变为不可见，但未关闭）。 最小化浏览器窗口（同上）。 关闭浏览器标签页或整个浏览器。 在当前标签页中导航到新的 URL。 在移动设备上切换到其他 App 或返回主屏幕。 针对这些不同的场景，前端提供了多种不同的技术和
阅读全文
摘要：1. 什么是 Property Descriptor？ 每个对象属性（包括方法）都有一个对应的属性描述符，它是一个普通对象，包含以下属性： 属性类型默认值说明 value any undefined 属性的值（如果是方法，这里存储函数本身）。 writable boolean false 是否可修改
阅读全文
摘要：JSON 和 JSON Schema 是两个紧密相关但功能完全不同的概念，前者是数据格式，后者是用于描述和验证前者的规则。以下从定义、作用、结构等方面详细说明两者的区别： 1、定义与核心作用 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，基于键值对和数组
阅读全文
摘要：参考：https://mp.weixin.qq.com/s/6-_ZPYzWiA-1J9Q_nOz0MA 以及我的另外一个章节 https://www.cnblogs.com/wfblog/p/9144533.html 1. <a> 标签的 download 属性 (最简单) 原理：HTML5为 <
阅读全文
摘要：一、色彩： fillStyle = color strokeStyle = color 二、透明度： 三、线型： 设置线条宽度：lineWidth = value 设置线条末端样式：lineCap = type 设定线条与线条间接合处的样式：lineJoin = type 限制当两条线相交时交接处最
阅读全文
摘要：参考：https://zhuanlan.zhihu.com/p/394561311 JS中有一些优雅换行（美化），可以让代码的可读性更强，但是需要注意 JS引擎自动插入分号的机制 会不会 出现非预期的情况。 ASI 规则 1. 遇到行结束符时，会插入一个分号。 注意：也不说遇到 行结束符 一定插入分
阅读全文
摘要：逻辑运算符： 或： || 与：&& 非：！ 逻辑赋值运算符 参考：https://blog.csdn.net/qq_43456781/article/details/119381387 可选链： 或赋值运算符 // 或赋值运算符 x ||= y // 等同于 x || (x = y) 与赋值运算符
阅读全文
摘要：canvas 像素操作 参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas API介绍： ImageData 对象：ImageData对象中存储着
阅读全文
摘要：构造函数、实例和原型对象三角关系 function Star(uname, age){ this.uname = uname; this.age = age; } var ldh = new Star("刘德华", 18) console.log(ldh); 上面的说明都以上面的代码作为举例 每个构
阅读全文
摘要：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 一、Blob对象的API： 属性： size： 对象所包含数据的大小（字节）。 type：表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。 方法 slice
阅读全文
摘要：1、不同于 SVG，<canvas> 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。 2、canvas里面位置都是基于坐标系的，这点和DOM完全不一样。 DOM的布局是基
阅读全文
摘要：参考：https://www.jianshu.com/p/a4eacaf8de17 一、只有单个长链接，不要求保活 class WebSocketClass { constructor() { this.instance = null; this.connect(); } static getIns
阅读全文
摘要：https://blog.csdn.net/m0_38038767/article/details/110946165 一、通过 a 标签下载：使用url地址【在html上直接创建，还是在js中创建是一样的】 缺点： 谷歌浏览器识别的文件，无法下载，会直接打开。 是否存在跨域限制，还要待测 二、通过
阅读全文
摘要：参考：https://blog.csdn.net/maidu_xbd/article/details/104400790 一、原理：基于canvas实现的。暂时不去研究原生实现它。下面主要讲下使用 vue-cropper 插件实现图片裁剪。 二、使用vue-cropper 插件实现 说明：这个组件适
阅读全文
摘要：概念 参考：http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 或 https://www.jianshu.com/p/be7c95714586 一、__
阅读全文
摘要：一、事件的绑定 1、js原生 事件程序 的绑定 方法：https://www.cnblogs.com/ypppt/p/12943349.html a、元素 属性 中绑定 事件（即 DOM0 级 事件处理程序）：【这种事件的绑定 只能是 DOM 或 Windows 对象 可以使用】 <div id="
阅读全文
摘要：一、原生ajax对象【xhr、fetch】 请求的拦截： https://m.imooc.com/mip/wenda/detail/603075【通过改写send方法，使原有的send方法失效】 或 https://www.cnblogs.com/xiaoyuxy/p/12346344.html 【
阅读全文
浙公网安备 33010602011771号