require.context解决img的src属性不能动态链相对路径问题
我有一堆在项目里的图片 想遍历渲染出来（图片都是相对路径） 一顿操作页面报错 在 Vue.js 中， 属性不能直接使用动态链的相对路径，因为 Webpack 的处理方式要求静态资源路径在编译时是已知的。动态路径无法被 Webpack 识别和解析。 使用 Webpack 的 来批量导入图片并在你的 Vue.js 组件中动态引用它们。 （图片文件在 目录下，并且文件名与 中的键一致。例如，如果你有 和 ，它们的文件名应与 中的键一致。） 1...
优化浏览器渲染主线程的 api 都有哪些？怎么用？
为了提高浏览器的性能和用户体验，现代浏览器采用了一些技术来优化主线程的执行。主要有： setTimeout 延迟加载 （使用不当可能适得其反） web worker 多线程 （不能操作dom，主要计算密集型的任务） requestIdleCallback 帧空闲时运行 （react18带🔥的，低优先级任务） requestAnimationFrame 每帧都会运行 （主要做动画效果调优） setTimeout 延迟加载非常常见，但是它...
你知道生成器和迭代器是啥玩意吗
迭代器和生成器 迭代器和生成器是为了完成函数的中断效果而出现的。让原本只能一次性执行完的函数具备分段处理的功能。在本质上，这两者都属于函数的一种。 迭代器 官方介绍：在 JavaScript 中， 迭代器 是一个对象，它定义一个序列，并在终止时可能返回一个返回值。更具体地说，迭代器是通过使用 方法实现 的任何一个对象，该方法返回具有两个属性的对象： ，这是序列中的 next 值；和 ，如果已经迭代到序列中的最后一个值，则它为 。如果 和...
富文本格式粘贴的问题
回到最初的问题，利用富文本编辑器，编写邮件模板，或者说，提供一个编辑器，用来编写邮件。如果说编写邮件而已，大可以在 word 或者其他编辑器里写好内容，但这里的一个特点就是 占位符 。所以说，这是要保持邮件编辑器的功能，然后还能使用占位符。 前面也是利用了 实现了 占位符 ，且具有不可编辑的特点。另外也具有了编辑器的基础功能，如文字大小、颜色、背景、居中、缩进等等。在开发中，只关注于编辑器本身，即这个编辑器能编辑就可以了，忽略了 这个功...
还在用 swiper.js 吗？CSS实现带指示器的swiper
几乎每个前端开发都应该用过这个滑动组件库吧？这就是大名鼎鼎的 没想到已经出到 11 个大版本了 https://www.swiper.com.cn/ 当然我也不例外，确实非常全面，也非常强大。 不过很多时候，我们可能只用到了它的 不到的功能，显然是不划算的，也会有性能方面的顾虑。 随着 地不断发展，现在纯 也几乎能够实现这样一个 了，实现更加简单，更加轻量，性能也更好，完全足够日常使用，最近在项目中也碰到了一个 的需求，刚好练一下手，一...
图片性能优化：了解JPEG、GIF、PNG、WebP、Base64的优缺点
网站作为一种信息传递的媒介，且如今各类Web项目中，图像资源的使用占比也越来越大，更应当注重图像资源的使用方式。 本文将研究：图像文件都有哪些格式？不同的业务场景应该选择怎样的图片格式？ 图像资源优化的核心，可以总结为两个字: 压缩 。无论是选取何种图像的文件格式，还是针对同一种格式压缩到更小的尺寸，本质都是用更小的资源开销来完成图像的传输和展示。 在深入探讨之前，我们先思考一下预期的信息传递效果，我们是否真的需要图像？这不仅是因为图像...
如何正确地使用encodeURI()对 URL 进行编码
如何正确地使用encodeURI()对 URL 进行编码 方法详解 在 Web 开发中，处理 URL 时经常需要对 URL 进行编码，以确保 URL 的有效性和安全性。JavaScript 提供了 方法来实现这一功能。本文将详细介绍 方法，包括其语法、使用场景以及代码示例。 方法概述 方法用于对整个 URI 进行编码。它会对 URI 中的特殊字符进行编码，以便在网络上传输时不产生歧义。与 方法不同的是， 不会对 URI 中的特殊字符（如...
谷歌浏览器已经是多进程架构，为何在控制台写死循环语句依旧会卡死呢？
之前在分享谷歌浏览器的架构的时候，结合查到的资料来看，给到观众下面的信息： 谷歌浏览器的多进程架构可以解决单进程架构的不稳定的问题。由于进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程，并不会影响到浏览器和其他页面，这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃，也就是不稳定的问题。 被问了那么一个问题，那“为何在控制台写死循环，浏览器依旧会卡死？” 借着这个问题，我们来再进一步研究背后的...
超完整的Electron打包签名更新指南
大家好，我是多喝热水。 在踩了数不清的坑之后，终于从 0 到 1 完成了一个桌面端应用，但万万没想到，最最痛苦的还不是开发过程，而是开发完成后的打包签名阶段，这真是踩坑踩麻了！！！ ok，踩坑归踩坑，收获也是不小的，所以这篇文章会介绍一个 Electron 应用如何 从 0 到 1 完成打包 & 签名 & 自动更新 等一系列流程，全程干货，建议点赞收藏！ 文章中所使用的环境如下，读者可作参考： 1）nodejs 版本：v18.19 2）...