浏览器和nodejs事件循环（Event Loop）有什么区别
单线程和异步 JS是单线程的，无论在浏览器还是在nodejs 浏览器中JS执行和DOM渲染共用一个线程，是互斥的 异步是单线程的解决方案 1\. 浏览器中的事件循环 异步里面分宏任务和微任务 宏任务：setTimeout，setInterval，setImmediate，I/O，UI渲染，网络请求 微任务：Promise，process.nextTick，MutationObserver、async/await 宏任务和微任务的区别：微...
JavaScript 内存泄漏：识别与防范
导读 内存泄漏是指程序在不再需要某些对象时，未能释放这些对象所占用的内存，导致内存占用持续增加，最终可能导致系统性能下降甚至崩溃。 在 JavaScript 中，由于其垃圾回收机制（Garbage Collection），内存管理通常由运行时环境自动处理。然而，内存泄漏仍然可能发生，特别是在长时间运行的应用程序中。本文将介绍JavaScript内存泄漏的常见原因及其预防方法。 常见的内存泄漏类型 以下是 JavaScript 中一些常见...
Web浏览器中的JavaScript事件循环机制
JavaScript是一门单线程语言，但通过事件循环（Event Loop）机制，它能够处理异步操作，实现非阻塞的I/O模型。让我们深入了解Web浏览器中的事件循环机制。 事件循环的基本概念 事件循环主要由以下几个部分组成： 1. 调用栈（Call Stack）：用于存储正在执行的函数调用。 2. 堆（Heap）：用于存储对象。 3. 任务队列（Task Queue）： 宏任务队列（Macrotask Queue） 微任务队列（Micr...
从JavaScript执行原理到作用域与闭包
闭包 是JavaScript中非常重要的一个概念，MDN中提到闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以 从内部函数访问外部函数的作用域 。在 JavaScript 中，闭包会随着函数的创建而被同时创建。看起来非常晦涩难懂，不易理解。今天写下这篇文章就是想从原理上深入探索，彻底弄明白什么是闭包。 JavaScript执行三阶段与变量...
你的瀑布流还不够懒
无限加载的商品瀑布流是电商最场景的最常用、最重要的组件，因此有一个高性能的瀑布流组件就变得无比重要 使用 Grid 布局，赢在起跑线 Grid 布局实现响应式非常简单，纯 CSS 实现，不依赖 JavaScript，性能优化赢在起点上 使用 IntersectionObserver 实现懒加载 传统的懒加载通过监听 scroll 事件判断目标元素是否接近/出现在可视区，发起异步请求、加载更多的卡片。而现代浏览器可以使用浏览器原生的 In...
JavaScript中读取文件的各种方法
在JavaScript中，尤其是配合Node.js这样的运行时环境，有多种方式可以读取服务器上的文件。每种方法都有其适用场景和优缺点。今天，我们就来比较几种常见的文件读取方法，看看哪一种最适合你的需求。 太长不看版 如果你在寻找一个快速且简单的方法， 是一个不错的选择，它提供了一个Promise接口，让你能够以现代的异步语法来处理文件读取。然而，如果你更倾向于同步方法，你可能会更喜欢 ，虽然它会阻塞当前线程直到文件读取完成。最后，如果你...
require.context解决img的src属性不能动态链相对路径问题
我有一堆在项目里的图片 想遍历渲染出来（图片都是相对路径） 一顿操作页面报错 在 Vue.js 中， 属性不能直接使用动态链的相对路径，因为 Webpack 的处理方式要求静态资源路径在编译时是已知的。动态路径无法被 Webpack 识别和解析。 使用 Webpack 的 来批量导入图片并在你的 Vue.js 组件中动态引用它们。 （图片文件在 目录下，并且文件名与 中的键一致。例如，如果你有 和 ，它们的文件名应与 中的键一致。） 1...
你知道生成器和迭代器是啥玩意吗
迭代器和生成器 迭代器和生成器是为了完成函数的中断效果而出现的。让原本只能一次性执行完的函数具备分段处理的功能。在本质上，这两者都属于函数的一种。 迭代器 官方介绍：在 JavaScript 中， 迭代器 是一个对象，它定义一个序列，并在终止时可能返回一个返回值。更具体地说，迭代器是通过使用 方法实现 的任何一个对象，该方法返回具有两个属性的对象： ，这是序列中的 next 值；和 ，如果已经迭代到序列中的最后一个值，则它为 。如果 和...
图片性能优化：了解JPEG、GIF、PNG、WebP、Base64的优缺点
网站作为一种信息传递的媒介，且如今各类Web项目中，图像资源的使用占比也越来越大，更应当注重图像资源的使用方式。 本文将研究：图像文件都有哪些格式？不同的业务场景应该选择怎样的图片格式？ 图像资源优化的核心，可以总结为两个字: 压缩 。无论是选取何种图像的文件格式，还是针对同一种格式压缩到更小的尺寸，本质都是用更小的资源开销来完成图像的传输和展示。 在深入探讨之前，我们先思考一下预期的信息传递效果，我们是否真的需要图像？这不仅是因为图像...