前端技术文章
-
- z-index无效？层叠上下文与盒模型排查全攻略
- z-index不生效主因是元素未定位或被父级层叠上下文隔离；需确保position非static，且检查祖先元素是否因opacity/transform/filter等触发新层叠上下文。
- 文章 · 前端 | 2个月前 | 277浏览 收藏
-
- Bun 逐行读取大文件方法解析
- Bun提供了基于ReadableStream的高效文件流式读取能力，配合TextDecoder和手动换行分割，可实现内存友好的逐行处理，避免加载整个文件到内存，完美替代Node.js中readline模块的用途。Bun提供了基于`ReadableStream`的高效文件流式读取能力，配合`TextDecoder`和手动换行分割，可实现内存友好的逐行处理，避免加载整个文件到内存，完美替代Node.js中`readline`
- 文章 · 前端 | 2个月前 | 374浏览 收藏
-
- CSS设置边框颜色方法
- 设置CSS边框颜色需使用border-color属性，1.可统一设置四条边颜色如border-color:red；2.通常用简写border:2pxsolidblue同时定义样式、宽度和颜色；3.也可分别设置每条边如border-top-color:red或用border-color:redgreenblueorange按顺时针生效；4.支持颜色名称、十六进制、RGB、RGBA等颜色值类型。
- 文章 · 前端 | 2个月前 | 383浏览 收藏
-
说明：http-equiv="X-UA-Compatible"：告诉浏览器这是一个兼">
说明：http-equiv="X-UA-Compatible"：告诉浏览器这是一个兼">
- 说明：http-equiv="X-UA-Compatible"：告诉浏览器这是一个兼">在HTML中，可以通过 标签的 http-equiv 属性来指定 Internet Explorer (IE) 的渲染模式。这是为了确保网页在不同版本的 IE 浏览器中以一致的方式显示。语法如下：说明：http-equiv="X-UA-Compatible"：告诉浏览器这是一个兼
- X-UA-Compatible仅用于IE存量系统维护，必须置于<head>最开头（无任何前置内容），否则IE直接忽略；推荐值为IE=edge，优先使用HTTPHeader方式发送。
- 文章 · 前端 | 2个月前 | 469浏览 收藏
-
- Patch 函数中 anchor 的作用是什么？理解 DOM 插入顺序的关键
- anchor是patch插入逻辑的定位标尺，指代父容器内作为插入参照的DOM节点；传入时调用insertBefore插在它前面，为null时退化为appendChild，支撑hydration、列表移动等精确位置控制。
- 文章 · 前端 | 2个月前 | 101浏览 收藏
-
- CSS伪类与伪元素如何区分？单冒号与双冒号详解
- 伪类作用于DOM元素状态，伪元素生成渲染层虚拟内容；单冒号:仅用于伪类，双冒号::专用于伪元素，语义强制区分，混用会导致样式失效或解析错误。
- 文章 · 前端 | 2个月前 | 329浏览 收藏
-
- HTML中CSS max函数实战应用详解
- CSSmax()是CSS函数，非HTML功能，必须用于支持长度值的CSS属性中（如width），且需浏览器支持CSSValuesandUnitsLevel4；写在HTML标签或属性里无效。
- 文章 · 前端 | 2个月前 | 440浏览 收藏
-
标签中添加 fetchpriority="low" 属性，告诉浏览器该图片不是关键资源，可以稍后加载。
2. 适用">
标签中添加 fetchpriority="low" 属性，告诉浏览器该图片不是关键资源，可以稍后加载。2. 适用">
-
标签中添加 fetchpriority="low" 属性，告诉浏览器该图片不是关键资源，可以稍后加载。2. 适用">使用 fetchpriority="low" 可以降低非关键图片的加载优先级，从而优化页面性能。以下是具体实现方法和注意事项：1. 基本用法在
标签中添加 fetchpriority="low" 属性，告诉浏览器该图片不是关键资源，可以稍后加载。
2. 适用
- 能，但仅Chromium98+支持，Firefox和Safari忽略；它不阻止加载，只降低请求调度优先级，需与loading="lazy"配合使用才有效。
- 文章 · 前端 | 2个月前 | 459浏览 收藏
-
标签中添加 fetchpriority="low" 属性，告诉浏览器该图片不是关键资源，可以稍后加载。
-
- WeakRef 与 FinalizationRegistry 资源管理技巧
- WeakRef仅避免阻止GC，不自动清理缓存；FinalizationRegistry才是感知对象真正回收并触发缓存键删除的唯一机制，二者需配合使用且不可替代。
- 文章 · 前端 | 2个月前 | 494浏览 收藏
-
- HTML下拉框添加阴影效果方法
- 能，但效果受限——因原生<select>由操作系统绘制，box-shadow常被系统控件遮盖或忽略；可靠方案是用带阴影的包裹容器配合appearance:none自定义样式。
- 文章 · 前端 | 2个月前 | 303浏览 收藏
-
- HTML实现HTTP/2 Server Push避坑指南
- HTTP/2ServerPush在现代浏览器中已完全失效，Chrome96+、Firefox90+、Edge96+均静默忽略，仅rel="preload"是唯一可行替代方案，需置于<head>中并严格指定as属性。
- 文章 · 前端 | 2个月前 | 496浏览 收藏
-
-
可以使用 :nth-child() 伪类结合类名来选择特定的元素。不过需要注意的是，:nth-child() 是根据元素在父元素中的位置来选择的，而不是根据类名。如果你想按类名过滤后选择第 N 个匹配元素，可以使用 :nth-of-type() 或者结合 JavaScript 来实现。方法一：使用 :nth-of-type()（适用于相同标签）如果元素是相同的标签（如都是 ），你可以这样
- .class:nth-child(n)指父元素第n个子节点恰好是.class元素，而非筛选后取第n个；它受HTML结构严格限制，空白文本节点会导致匹配失败，目前无可靠CSS原生替代方案。
- 文章 · 前端 | 2个月前 | 490浏览 收藏
- Page Lifecycle API 管理 PWA 资源回收与恢复
- PWA后台冻结管理需主动监听freeze与pagehide双事件，在JS挂起前完成状态保存与资源清理；resume事件精准恢复，状态存sessionStorage且仅限可序列化轻量数据。
- 文章 · 前端 | 2个月前 | 156浏览 收藏
- CSS利用Group-hover实现父子联动简单交互
- Group-hover为什么必须配合group类使用直接写group-hover:xxx没效果，是因为Tailwind的group-hover是一个“依赖类”——它只在父元素有group类时才生效。没有group，group-hover根本不会被编译进CSS。错误写法：文字→完全无效正确结构：文字group必须加在触发hover的祖先容器上（不一定是直接父级，但必须是DOM上层）子元素hover状态下修改父级以外的兄弟元素常见需求：鼠标悬停在
- 文章 · 前端 | 2个月前 | 387浏览 收藏
- 虚拟DOM与响应式系统设计解析
- 虚拟DOM和响应式系统是现代JavaScript框架的核心。答案：通过JS对象模拟DOM并结合数据监听实现自动更新。用VNode描述UI结构，避免频繁操作真实DOM；利用Object.defineProperty或Proxy监听数据变化，在getter中收集依赖，setter中触发更新；状态变化时重新生成VNode，通过diff算法比对新旧节点，最小化更新真实DOM；结合二者可实现“数据变→视图更新”的闭环，构成Vue、React等框架基础。
- 文章 · 前端 | 2个月前 | 121浏览 收藏
-
可以使用 :nth-child() 伪类结合类名来选择特定的元素。不过需要注意的是，:nth-child() 是根据元素在父元素中的位置来选择的，而不是根据类名。如果你想按类名过滤后选择第 N 个匹配元素，可以使用 :nth-of-type() 或者结合 JavaScript 来实现。方法一：使用 :nth-of-type()（适用于相同标签）如果元素是相同的标签（如都是
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
-
- Golang深入理解GPM模型
- Golang深入理解GPM调度器模型及全场景分析，希望您看完这套视频有所收获；包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
- 474次学习
查看更多
AI推荐
-
- ljg-skills
- ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
- 4831次使用
-
- MELO音乐
- MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！
- 4414次使用
-
- UniScribe
- UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。
- 4361次使用
-
- 剧云
- 剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。
- 4594次使用
-
- 万象有声
- 万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！
- 4548次使用
