超好用的API之IntersectionObserver
这是个还在草案中的API，不过大部分浏览器均已实现（除了IE）。先看下MDN中的介绍： IntersectionObserver接口提供了一种异步观察目标元素与祖先元素或顶级文档 的交集中的变化的方法。祖先元素与视窗viewport被称为 根(root)。 不知大家有没有发现随着网页发展，对 检测某个（些）元素是否出现在可视窗 相关的需求越来越多了？比如： 当页面滚动时，懒加载图片或其他内容。 实现“可无限滚动”网站，也就是当用户滚动网...
JSPDF + html2canvas A4分页截断
引言 最近在业务上遇到了一个问题是要将页面打印输出成pdf文件，通过点击一个按钮，就能够将页面写在一个pdf上，并下载下来，需要保证pdf的内容具有很好的可读性。 经评估要实现这个需求，一种可行的方案是将HTML页面转为PDF，并实现下载。通过技术调研，最终的方案确定为通过 \+ 这两个库来实现，通过使用 提供的方法，将页面元素转为 图片流，然后将其插入jspdf插件中，实现保存并下载pdf。 \+ 方案是前端实现页面打印的一种常用方案...
数据量太大，DOM节点加载过多，怎么保证前端在渲染的时候页面不会卡（性能优化）
一、定时器分批渲染 既然一次渲染10万条数据会造成页面加载速度缓慢，那么我们可以不要一次性渲染这么多数据，而是分批次渲染， 比如一次10000条，分10次来完成， 这样或许会对页面的渲染速度有提升。 然而，如果这13次操作在同一个代码执行流程中运行，那似乎不但无法解决糟糕的页面卡顿问题，反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用 ，JavaScript虽然没有多线程，但是setTimeout和setInterval两...
超详细的大文件分片上传⏫实战与优化⚡(前端部分)
大文件分片上传实战与优化(前端Part) 1\. 需求分析 1.1 分析 实现大文件上传, 其中包括以下功能 秒传: 文件已存在, 直接给前端返回文件 url 记录文件的 hash 与元数据到数据库中 上传文件前先计算 hash 和获取文件元数据请求接口进行比对 若比对成功则说明文件已存在, 直接返回前端文件 url 断点续传: 上传过程意外中断, 下次上传时不需要从头上传整个文件 前端将文件分片上传, 后端接收分片然后进行合并 上传分...
avaScript 中深拷贝对象的现代方式
您知道吗，JavaScript 现在有一种本地内置的方法可以进行对象的深层复制？ 没错，这个 函数内置于 JavaScript 运行时中： 您是否注意到在上面的示例中我们不仅复制了对象，还复制了嵌套数组，甚至 Date 对象？ 一切都按照预期工作： 没错， 不仅可以做到以上，还可以： 克隆无限嵌套的对象和数组 克隆循环引用 克隆各种 JavaScript 类型，例如 、 、 、 、 、 、 、 、 等等 转移任何可转移对象（Transf...
JS实用小方法-将时间转换为 `刚刚`、`几秒前`、`几分钟前`、`几小时前`、`几天前`、几月前或按照传入格式显示
例："2023/5/10 11:32:01" 2023 02 01 09:32:01 例：\ / 年月日 年 为是否数字补零， 10秒： 10 1000 1分钟： 60 1000 1小时： 60 60 1000 24小时（一天）：60 60 24 1000 感谢掘友：
js检测网页空闲状态(一定时间内无操作)
1\. 背景 最近开发项目时，常碰到 的需求。 网上冲浪后，也没有找到一个比较好的js封装去解决这个问题，从而决定自己实现。 2\. 如何判断页面是否空闲 首先，我们要知道什么是空闲？用户一定时间内，没有对网页进行任何操作，则当前网页为空闲状态。 用户操作网页，无非就是通过 、 两个输入设备(暂不考虑手柄等设备)。因而我们可以监听相应的输入事件，来判断网页是否空闲(用户是否有操作网页)。 1. 监听鼠标移动事件 ； 2. 监听键盘/鼠标...
你了解js的沙箱环境吗
去年的面试了，最近复盘了一下，发现菜的一批，有些问题一下子就答出来了，现在答的话，那时候还在瞎鸡儿答我也不知道答的什么。。。。 在 JavaScript 中，沙箱（sandbox）是一个安全机制，用于隔离运行代码，以防止代码对其它部分的应用程序或系统造成不必要的影响或安全风险。沙箱提供了一个受控环境，在这个环境中，代码可以被执行而不影响外部环境，从而保护用户数据和系统安全。 在浏览器中，沙箱通常指的是浏览器为每个标签页提供的隔离环境。这...
搜索图片里的文字
前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心 背景 是这样的，我们公司有一个平台，这个平台上面有一个页面，是一个我们公司内部存放一些字幕图片的，图片很多，差不多每一页有100张的样子，类似于下面这样的图片 前几天上面大佬们说想要更加方便快捷地找到某一张图片，怎么个快捷法呢？就是通过搜索文字，能搜索到包含这些文字的图片。。。我一想，这需求简直逆天啊！！！！平时只做过搜索文字的，没做过根据...