还在用 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）...
面试官：console.log(++[[]][+[]] + [+[]])，我：你认真的？
让我们来仔细分析这道经典的 JavaScript 面试题： 说真的，要是在面试中遇到这种变态面试题，我只能说，面试官你过分了啊！这题目拐着弯、绕着圈、还顺便做了个花式回旋，这不就故意刁难人嘛！要是我，直接三下五除二做出来直接就溜了溜了 这段代码看起来非常复杂，但其实它考察了 JavaScript 中的一些核心概念，如 类型转换、操作符优先级、隐式转换 等。通过这道题目，我们可以更深入地了解 JavaScript 的底层机制和行为。本文将...
纯css实现无限循环滚动logo墙
一、需求 在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。 不久前，接到一个类似的需求。需求如下： 1、无限循环滚动； 2、鼠标hover后，暂停滚动，鼠标离开后，继续滚动； 3、支持从左往右和从右往左滚动； 4、滚动速度需要可配置。 简单动画，我们先尝试只使用css实现。 二、实现 1、marquee标签 说到无限循环滚动，很久以前marquee标签可以实现类似的功能，它可以无限循环滚动，并且可以控制方向和速度。...
CSS 终于在 2024 年增加了垂直居中功能
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 进行垂直居中。 支持情况： | Chrome: 123 | Firefox: 125 | Safari: 17.4 | | | | | CSS 对齐一般会使用 或 布局，因为 在默认的流式布局中不起作用。在 2024 年，浏览器实现了 。 你不需要 flexbox 或 grid，只需要 1 个 CSS 属性就可以进行对齐。 因此内容不需要包裹在 div 中。 令人惊讶...
伪类和伪元素是什么什么是伪类
什么是伪类 (pseudo classes)？ 伪类可以让我们根据元素的状态变化使用 CSS。例如，当我们想要设置某元素在被指标指到时的样式，我们可以使用 伪类来改变样式。 介绍 4 个常见的伪类 (pseudo classes) 用法 当用户的鼠标或触控板等设备放在元素上时，我们可以使用 更改元素的样式。 、 这两个伪类都是用在含有 href 属性的 元素上。 可以调整使用者还未浏览过的链接样式，而 则可以改变使用者已浏览过的链接样式...