随笔分类 - js应用
摘要：动画渲染和屏幕刷新率的关系 大多数现代显示器的刷新率是 60Hz，也就是说每秒刷新 60 次。因此，60 FPS 刚好匹配显示器的刷新频率，这意味着每帧的时间应该控制在 16.67 毫秒（即 1000 毫秒 / 60 帧）。 动画优化 使用 requestAnimationFrame：它会将动画更新
阅读全文
摘要：function pick(obj,fieldsToPick){ return Object.fromEntries( fieldsToPick.map((key) => [key, obj[key]]) ); }
阅读全文
摘要：WebSocket 是一种基于 TCP 的通信协议，允许客户端与服务器之间建立一个持久的连接，进行双向实时通信。 1. WebSocket 构造函数 通过 new WebSocket(url) 创建 WebSocket 实例。 const ws = new WebSocket('ws://your-
阅读全文
摘要：在前端播放一个大小为 10GB 的视频时，直接下载整个视频文件然后播放显然是不切实际的，因为这样会导致极大的延迟和带宽消耗。为了尽快开始播放大文件，可以采用以下几种技术来优化视频播放体验。 1.视频流式传输 (Streaming) 流式传输允许前端在不下载完整文件的情况下，就能开始播放视频。具体的方
阅读全文
摘要：题目：设计一个js抽奖程序，一共分为三等奖，每一个等级的中奖概率及中奖人数都可自定义。 解法核心： 设定概率： 一等奖概率：10% 即 [0 - 0.1) 的范围 二等奖概率：30%. 即 [0.1 - 0.4) 的范围。注：为什么是从0.1开始？因为<0.1的话就是中了一等奖 三等奖概率：40%
阅读全文
摘要：一、上传 1.上传数据的封装 在上传文件时，最常用的方式是使用 FormData 对象，它会自动将请求头中的 Content-Type 请求头指定为multipart/form-data const formData = new FormData(); formData.append("file",
阅读全文
摘要：const sizeUnit = ['Bytes', 'KB', 'MB', 'GB', 'TB']; function formatSize(fileSizeInBytes) { const sizeType = parseInt( Math.floor(Math.log(fileSizeInBy
阅读全文
摘要：export * from导出模块时，不会导出default模块 import * from导入模块时，如果有default模块，会连同default模块一起导入
阅读全文
摘要：property属于DOM，是JavaScript的对象；attribute是html的自带属性，可以通过attributes属性或者getAttribute/setAttribute方法进行访问 property的属性值可以是任意类型，attribute的属性值类型只能是string proper
阅读全文
摘要：UTC(GMT) 整个地球分为二十四时区，每个时区都有自己的本地时间。在国际无线电通信场合，为了统一起见，使用一个统一的时间，称为通用协调时(UTC, Universal Time Coordinated)。UTC与格林尼治平均时(GMT, Greenwich Mean Time)一样，都与英国伦敦
阅读全文
摘要：1. 为什么需要使用虚拟滚动技术？ 在前端开发中，会碰到一些不能使用分页方式来加载列表数据的业务形态，我们称这种列表叫做长列表。比如ant-design下拉框的数据项，如果直接将所有的数据都生成dom，页面会非常卡顿。 因此，虚拟滚动的核心思想就是只加载可视区域内需要的列表项，当滚动发生时，动态通过
阅读全文
摘要：网页截图 puppeteer html5 pdf浏览器 pdf.js 将网页生成为pdf jsPDF 在线电子表格库 SheetJS markdown转为html marked markdown转ast npm install @textlint/markdown-to-ast monaco-edi
阅读全文
摘要：一、MutationObserver Config childList： 添加、删除目标节点的子节点时会收到通知（子节点的后代节点添加或删除时不会收到通知） attribute： 修改目标节点属性时会收到通知 characterData： 观察目标节点下所有文本类型节点（即子代或后代）的文字变化（注
阅读全文
摘要：因为 Math.random() 制造的随机数范围是[0, 1)想要生成16到22之间的随机数(即最小值m=16，最大值n=22)，首先需要计算出最大值与最小值的差range=m-n 随后把[0, 1)这个区间的随机数乘以range，区间就拓展到[0, 6)。在此基础之上再加最小值，范围就移动到[1
阅读全文
摘要：哈希路由（Hash Routing） 哈希路由使用URL中的哈希部分（即#符号后面的部分）来控制页面内容的变化。这种方式的优点是不需要服务器端配置支持。 原理： 哈希部分的变化不会导致页面的重新加载，浏览器会触发hashchange事件。 不管是直接在链接标签上指定<a href='#abc'>te
阅读全文
摘要：1.mousedown->mouseup依次触发后相当于click事件 2.除了mouseenter和mouseleave外，其它的鼠标事件都是冒泡的 3.mouseover和mouseout事件的event对象有一个relatedTarget属性（相关元素）mouseover时relatedTar
阅读全文
摘要：一、相应的事件 copy： 在发生复制操作时触发。 beforecut： 在发生剪切操作 前 触发。 cut： 在 发生 剪切 操作 时 触发。 beforepaste： 在 发生 粘贴 操作 前 触发。 paste： 在 发生 粘贴 操作 时 触发。 相应的事件中，以before开头的事件基本上没
阅读全文
摘要：Javascript标准DOM Range操作 HTML文档/文字内容选中、库及应用介绍
阅读全文
摘要：一、相应事件 keydown:按下键盘上的任意键都可触发（字母不区分大小写，不区分数字是由主键盘区触发的还是小键盘区触发的），按着不放则重复触发 keypress:按下键盘上的数字和字符键时触发（字母区分大小写，不区分数字是由主键盘区触发的还是小键盘区触发的），按着不放则重复触发 keyup:释放按
阅读全文
摘要：传送门 需注意的知识点： 1.链接和图片默认是可以拖放的，不用设置dragable='true',如要拖动div则需要设置 2.在目标元素上定义一个dragover事件，然后在事件句柄中使用event.preventDefault()来阻止默认行为，从而允许拖放 3.在目标元素上定义一个drop事件
阅读全文
