柑橘乌云_

上述代码中，假设button这个点击事件只需要触发一次，那么就存在内存泄露，因为垃圾回收器不敢回收increase，因为你点击button的时候是需要执行increase这个函数的。此时再看上述代码，点击按钮触发的函数其实就只有createIncrease函数中的increase函数，但是如果打开f12的memory一进去打个快照，然后多次点击按钮，然后点击垃圾回收，然后再打个快照，发现内存变大，并未回收掉。当本应该被销毁的函数未被销毁，导致其关联的此法环境无法销毁，造成内存泄漏。

基本上，设备类型是通过识别浏览器的 userAgent 来确定的。cookie 可能是我见过的最糟糕的 API，它很难使用，以至于我们不得不重新封装它以最大限度地提高开发效率。其实，只要把它的过期时间设置为这一刻，它就会立即过期。作为前端开发人员，您可能会遇到各种兼容性问题，这时候可能需要获取浏览器的类型和版本。你一定遇到过这样的场景，需要全屏播放视频，并在浏览器中全屏打开页面。是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。当然，如果知道页面的高度，也可以平滑滚动到页面底部。

【代码】属性描述符。

浏览器是如何渲染页面的？当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

【代码】通过IntersectionObserver实现图片下拉加载（瀑布流布局）

纯js实现瀑布流布局

假如HTML格式如上图所示，src值是默认图片，真正图片格式放在data-src里。下面的js，非常简单。

父A = 非同源应用A （e.g. http://localhost:63342/demo/iframe/page1.html）父B = 非同源应用B （e.g. http://192.168.2.112:3000/）子B = 非同源iframe桥 （e.g. http://localhost:8081/）子A = 非同源iframe桥（e.g. http://localhost:8081/）2. iframe接收后发起同源广播，同源广播可以在另一个应用中监听。iframe 【代理】

第一种是利用同源所以localStorage是共享的这个原理去做，第一打开播放页时候就本地存个值（比如设置已打开标签页的数量），播放页关闭的时候去掉这个值。第二种是 b页面也是可以给a页面发送消息，当b页面被打开时候，往a页面去发送消息，表示标签页被打开，然后a页面去管理这个状态，从而识别标签页是否被打开。这种方式有个弊端，就是每次点击播放页，总是会刷新播放页，并不是很好，而酷狗播放页并不是刷新而是跳转过来直接就是播放。这种方式有两个前提条件，一个是必须同源，一个是必须通道名相同。

中，发送 DELETE 请求需要指定目标 URL，并可选地传递一些参数，例如请求头、请求体等。DELETE 请求不同于 GET 请求，它可以包含请求体，因此在某些情况下，你可能需要在 DELETE 请求中传递数据。DELETE 请求用于向服务器发送删除资源的请求。它是 RESTful API 中的一个重要方法，用于删除指定的资源。最简单的方式是将参数直接拼接在 URL 上，这通常用于传递少量的数据，例如资源的 ID。对于一些需要在 DELETE 请求中传递复杂数据的情况，可以使用 Axios 的。

【代码】input框输入表情，接口报错，前端进行表情的编码，展示时解码。

上面的方案这么多，其实最终还是落到a标签上，所以不管是通过浏览器的内置行为进行下载，还是通过ajax进行下载，文件下载的最终还是浏览器的行为。我项目中遇到的需求如下：首先window.open(URL)的这种方式和a标签方式一样对于pdf和图片都会打开文件，而并非直接下载，那么当然如果自动打开pdf或者图片，鼠标右击图片或者pdf右上角也会有下载入口。但是如果说需求是点击按钮直接下载文件，那么需要采取获取文件流然后拿到文件流通过a标签下载这种当时，当然获取文件流可以前端去做也可以后端做。

在上面的代码中，我们将“I love you”隐藏到“你好呀”中，最终只显示“你‌‌‌‌‌‍‌‌‌‌‌‌‌‍‌‌‌‌‌‌‌好呀”。零宽字符就是零宽度字符是一种不可见，不可打印的字符。它们主要用于调整字符的显示格式。通过零宽字符来加密文本，我们需要先将文本转成二进制的形式即只包含。，并使用空格将每个字符隔开，然后任选3个零宽字符分别用来表示“数组定义的每一项分别用于替换“在函数的开始我们使用正则。

【代码】重写toFixed方法，纠正四舍五入不正确的bug。

JavaScript 中的数据结构SetMapArray都有keys()values()和entries()。普通对象也支持类似的方法，但是语法上有一些不同。

NodeList 是一个静态集合，其不受 DOM 树元素变化的影响；相当于是 DOM 树快照，节点数量和类型的快照，就是对节点增删，NodeList 感觉不到。但是对节点内部内容修改，是可以感觉到的，比如修改 innerHTML。HTMLCollection 是动态绑定的，是一个的动态集合， DOM 树发生变化，HTMLCollection 也会随之变化，节点的增删是敏感的。

navigator.sendBeacon() 方法可用于通过HTTP将少量数据异步传输到Web服务器。

【代码】长列表优化方案，虚拟列表。

【代码】pdf.js转化成canvas 然后img形式展示。

我们最常用的输入文本内容便是input与textarea，但是有一个属性，可以让我们在很多标签中，如div,table,p,span,body等，可以像input输入框一样，实现文本编辑，这便是contentEdi。该属性的功能是允许用户编辑元素中的内容//所以这个元素必须是可以获得鼠标焦点的元素，并且在点击鼠标后要向用户提供一个插入符号，提示可编辑。contenteditable=“false” #关闭文本编辑，该字段的值缺失时，效果和这个是一样的。

Object.keys(obj).length === 0 && obj.constructor === Object

项目场景：项目需要判断页面或浏览器是关闭了还是刷新，以此来判断要不要强制用户重新登录刷新：保持登录状态关闭：退出登录。

【代码】处理js浮点数的精度问题（加减乘除工具函数）

一直困惑我好久的一个难题：由于项目需求，我需要在循环中调用一个await 异步函数（调接口），我起初用的forEach，我的诉求是所有循环汇总的await异步函数都执行完毕，拿到所有await返回的数据，但是循环之后我拿不到所有await返回的数据。解决办法： 弃用forEach改用for循环，下面就可以同步拿到数据，只要你for循环里面代码块的代码是同步代码，那么每一次的for循环就会同步执行，直到for循环的所有遍历次数执行完毕，才会执行for循环之后的代码。

使用JSON.Stringify 转换的数据中，如果包含 function，undefined，Symbol，这几种类型，不可枚举属性， JSON.Stringify序列化后，这个键值对会消失。转换的数据中包含 NaN，Infinity 值（含-Infinity），JSON序列化后的结果会是null。转换的数据中包含Date对象，JSON.Stringify序列化之后，会变成字符串。转换的数据包含RegExp 引用类型序列化之后会变成空对象。数据，前后变化表明，使用。序列化之后的数据，在。

作用就是判断这个对象（travelPlans）下的（tuesday）下的（location）是否为null或者undefined，当其中一链为null或者undefined时就返回undefined，这样即使中间缺少一个属性也不会报错，双问号后面接的就是默认值。这个操作符也可以用在数组上 比如 let arr =[ { x:[aaa] } ] ==> arr?需要注意的是vue2 在template里面不能使用 可选链操作符， 但是vue3是可以的。这两个假值的时候才会使用预测的数据，

防抖短信验证码滚动事件表单重复提交页面 resize 事件input 事件（当然也可以用节流，实现输入框实时搜索）节流scroll 事件，单位时间后计算一次滚动位置input 事件播放事件，计算进度条。

如果说想捕获到这些异步的错误那么就需要将tryCatch也写进异步。自己封装了一个tryCatch。setTimeout中的报错。Promise中的错误。

想必在开发中，大家都遇到一种情况，就是在输入框输入文字，当我们输入a，然后很快的输入b，这个时候，如果b这个请求响应的速度快，页面会先显示b响应的结果，然后之后a请求的响应回来，再覆盖掉b的响应结果，此时是我们不愿意被看到的。总的来说，就是如果发多个请求，服务器响应的顺序，不一定是发请求的顺序。所以我们需要做就是在发送请求的时候，把之前的请求都取消掉，只保留最后一次的请求。（感觉有点像防抖haha~）还有一种使用场景 代码如下（在axios的请求拦截器里面）

js原生写图片上传并展示