• Matches vs TagName:高效判定节点标签技巧
    Matches vs TagName:高效判定节点标签技巧
    matches()比element.tagName更灵活语义化,支持CSS选择器语法实现复合条件匹配、精准类组合判断、事件委托中跨标签行为过滤,且现代浏览器兼容良好。
    文章 · 前端   |  2天前  |   437浏览 收藏
  • SVG缩放保持比例实用技巧
    SVG缩放保持比例实用技巧
    SVG缩放失真的根本原因是viewBox宽高比与容器width/height宽高比不一致,导致浏览器强行拉伸坐标系。viewBox定义内部坐标范围,实际尺寸由width/height决定,二者比例必须匹配,否则变形;preserveAspectRatio控制对齐与裁剪方式,不可忽略。
    文章 · 前端   |  4星期前  |   436浏览 收藏
  • CSS视口单位滚动优化技巧
    CSS视口单位滚动优化技巧
    iOSSafari中vh跳变是因地址栏收起/展开改变window.innerHeight,导致vh值突变;应优先用calc(env(height)-env(top)-env(bottom))并fallback至100vh,或JS监听resize动态设置--vh变量,dvh暂不可单独依赖。
    文章 · 前端   |  4星期前  |   436浏览 收藏
  • 如何识别 稀疏数组拷贝:在数组对象混合场景下深拷贝对索引孔洞的处理
    如何识别 稀疏数组拷贝:在数组对象混合场景下深拷贝对索引孔洞的处理
    稀疏数组含空位,length大于元素个数,in操作符等跳过空位;浅拷贝如展开运算符会将空位转undefined,JSON.stringify转为空位为null;Object.assign([],arr)和structuredClone()可保留稀疏性。
    文章 · 前端   |  3星期前  |   436浏览 收藏
  • CSS如何实现响应式垂直进度引导条_利用伪类控制当前步骤样式
    CSS如何实现响应式垂直进度引导条_利用伪类控制当前步骤样式
    垂直进度条用CSS伪类标记当前步骤需用.step--active::before画圆点、linear-gradient画进度线,配合flex布局和transform居中实现响应式对齐,避免绝对定位和border导致的错位与模糊。
    文章 · 前端   |  3星期前  |   436浏览 收藏
  • Generator异步流处理优势详解
    Generator异步流处理优势详解
    Generator函数凭借暂停与恢复执行的特性,在异步流控制中仍具优势:1.通过yield实现可中断流程,支持动态决策;2.结合Promise可构建灵活的异步调度器,实现按需加载与任务队列;3.天然集成迭代器协议,便于构建惰性求值的数据流管道;4.适合实现协程与状态机,如表单提交、游戏事件等状态驱动场景。尽管async/await更普及,Generator在需精细控制异步流程时依然不可替代。
    文章 · 前端   |  2星期前  |   436浏览 收藏
  • CSS变量统一管理过渡时长技巧
    CSS变量统一管理过渡时长技巧
    直接写transition-duration:0.3s无效,因必须与transition-property或完整transition简写共用;硬编码导致维护混乱,应使用语义化CSS变量(如--transition-fast)并按场景选用。
    文章 · 前端   |  2星期前  |   436浏览 收藏
  • z-index 999 被遮挡?同级元素堆叠顺序排查指南
    z-index 999 被遮挡?同级元素堆叠顺序排查指南
    z-index999被盖住的根本原因是元素未定位或受父级层叠上下文限制:z-index仅对position为relative/absolute/fixed/sticky的元素生效,且只在同一个层叠上下文中有效;父元素若含opacity<1、transform、filter等属性会创建新层叠上下文,使子元素z-index失效于外部比较。
    文章 · 前端   |  2星期前  |   436浏览 收藏
  • Map实现高效缓存方法解析
    Map实现高效缓存方法解析
    Map比普通对象更适合memoization缓存,因其支持任意类型key、O(1)操作、不污染原型链;正确构造key需避免引用相等陷阱,优先用JSON.stringify(基础类型)或WeakMap(单对象参数);TTL缓存需手动维护过期逻辑;React中应useRef持有Map并确保key语义一致。
    文章 · 前端   |  2星期前  |   436浏览 收藏
  • draggable=
    draggable="true"能实现拖拽吗?原生拖放事件解析
    不能。仅设draggable="true"不触发drop,因浏览器默认禁用放置目标;必须在dragover中preventDefault()解锁,且setData()只能在dragstart调用,dragend不表示drop成功,文件拖拽需依赖dataTransfer.files。
    文章 · 前端   |  1星期前  |   436浏览 收藏
  • Tailwind v2迁移到v3:更新依赖与类名重命名指南
    Tailwind v2迁移到v3:更新依赖与类名重命名指南
    必须先升级tailwindcss包再批量修正类名;升级后需将purge改为content、删除mode:'jit',替换废弃类名(如transform)、重命名类(flex-grow-0→grow-0),透明度改用bg-black/50语法,并确保color扩展不覆盖内置色名。
    文章 · 前端   |  5天前  |   436浏览 收藏
  • details标签作用及高级使用技巧
    details标签作用及高级使用技巧
    details标签核心作用是语义化声明可折叠披露组件,必须以summary为首个子元素,否则Safari等浏览器点击失效;自定义图标应使用summary::before,JS控制须操作open属性而非display。
    文章 · 前端   |  4天前  |   436浏览 收藏
  • HTML标签输入删除实现方法【通俗易懂】
    HTML标签输入删除实现方法【通俗易懂】
    可使用contenteditable容器配合keydown事件拦截实现:当e.key为Backspace且光标左侧紧邻tag元素时,阻止默认行为并移除该tag;因input不支持嵌套HTML,必须用div[contenteditable]替代,同时需处理iOS兼容性及光标边界情况。
    文章 · 前端   |  4天前  |   436浏览 收藏
  • Chrome JS Profiler 数据导出与可视化教程
    Chrome JS Profiler 数据导出与可视化教程
    ChromeProfiler导出的是JSONTraceEventFormat文件,含多维trace数据;需用speedscope、perfetto或chrome-to-flame等工具转换为火焰图或pprof格式供第三方平台分析。
    文章 · 前端   |  2天前  |   436浏览 收藏
  • CSP report-uri违规报告收集详解
    CSP report-uri违规报告收集详解
    report-uri已废弃,必须改用report-to配合Report-To响应头;前端CSP中需写report-togroup-name,服务端须返回合法JSON格式的Report-To头,且URL必须HTTPS、group名严格匹配。
    文章 · 前端   |  2天前  |   436浏览 收藏
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
  • Golang深入理解GPM模型
    Golang深入理解GPM模型
    Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
    474次学习
查看更多
AI推荐
  • ChatExcel酷表:告别Excel难题,北大团队AI助手助您轻松处理数据
    ChatExcel酷表
    ChatExcel酷表是由北京大学团队打造的Excel聊天机器人,用自然语言操控表格,简化数据处理,告别繁琐操作,提升工作效率!适用于学生、上班族及政府人员。
    5670次使用
  • Any绘本:开源免费AI绘本创作工具深度解析
    Any绘本
    探索Any绘本(anypicturebook.com/zh),一款开源免费的AI绘本创作工具,基于Google Gemini与Flux AI模型,让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景,零门槛,高自由度,技术透明,本地可控。
    6084次使用
  • 可赞AI:AI驱动办公可视化智能工具,一键高效生成文档图表脑图
    可赞AI
    可赞AI,AI驱动的办公可视化智能工具,助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析,还是一键生成专业图表、脑图、知识卡片,可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景,大幅提升办公效率,降低专业门槛,是您提升工作效率的得力助手。
    5914次使用
  • 星月写作:AI网文创作神器,助力爆款小说速成
    星月写作
    星月写作是国内首款聚焦中文网络小说创作的AI辅助工具,解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配,助力新人快速上手,资深作者效率倍增。
    7865次使用
  • MagicLight.ai:叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画
    MagicLight
    MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台,专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型,保障角色、风格、场景高度一致性,让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销,助您轻松实现创意落地与商业化。
    6301次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码