前端技术文章

  • JavaScript迭代器是什么?如何实现对象可迭代?
    JavaScript迭代器是什么?如何实现对象可迭代?
    JavaScript迭代器是明确协议而非语法糖;对象需实现[Symbol.iterator]方法返回符合{value,done}结构的迭代器对象,Array、String等原生类型已实现该协议。
    文章 · 前端   |  2个月前  |   342浏览 收藏
  • HTML视频控件添加方法详解
    HTML视频控件添加方法详解
    正确使用HTML5视频控件需添加controls属性并设置宽高,通过source标签指定视频路径和格式,推荐MP4以确保兼容性;为适配不同浏览器可提供多个格式源文件;可选autoplay、muted、loop和preload属性实现自动播放、静音、循环及预加载功能;若控件不显示,应检查controls是否遗漏、路径是否正确、服务器MIME类型配置及浏览器自动播放策略限制。
    文章 · 前端   |  2个月前  |   342浏览 收藏
  • 全链路耗时分析,前端性能漏斗解析
    全链路耗时分析,前端性能漏斗解析
    构建基于全链路耗时打点的前端性能“漏斗模型”,核心不是单纯看页面加载快慢,而是把用户一次关键交互(比如点击下单、提交表单、播放视频)拆解成若干有先后依赖的技术环节,每个环节记录真实耗时与成功状态,从而定位“卡在哪一步”“为什么失败”。它和传统业务漏斗互补:业务漏斗告诉你“谁没走到最后”,性能漏斗告诉你“走到这步的人,为什么卡住或放弃”。明确关键交互路径与技术节点先锁定你要分析的用户动作,再逆向拆解其背后的技术链路。不能只写“下单成功”,要细化到可测量的原子事件:用户点击“立即购买”按钮(交互
    文章 · 前端   |  2个月前  |   342浏览 收藏
  • CSS@importlayer用法及注意事项
    CSS@importlayer用法及注意事项
    @import的layer选项用于将导入样式表显式放入命名层叠层,需满足顶层位置和合法层名两个前提;常见失效原因包括嵌套在条件规则内、层名不一致、导入顺序错误及混用匿名与具名层。
    文章 · 前端   |  2个月前  |   342浏览 收藏
  • Vite 前端发布后白屏怎么处理:JS 404、CDN 旧缓存和回滚路径
    Vite 前端发布后白屏怎么处理:JS 404、CDN 旧缓存和回滚路径
    Vite 或 React 前端发布后突然白屏,常见原因是 index.html 与带 hash 的 JS/CSS 产物不一致,CDN 或浏览器还命中了旧缓存。处理时先确认控制台和 Network 里的 JS 404,再回滚 HTML、清理 CDN、保留最近构建产物,并补上发布前后的检测与告警。
    文章 · 前端   |  1个月前  |   前端 · vite · 运维手册 · 白屏排查 · CDN缓存 · 发布回滚 · React 前端 白屏 vite CDN缓存 index.html 发布回滚 JS 404 342浏览 收藏
  • HTML倒计时时间控制技巧解析
    HTML倒计时时间控制技巧解析
    HTML倒计时仅用于展示,不能替代真实时间控制;必须用Date.now()动态计算剩余时间戳,结合服务端下发的ISO时间统一时区,并做本地时钟偏移补偿。
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • 网页优化图片加载速度,Picture标签实现响应式适配
    网页优化图片加载速度,Picture标签实现响应式适配
    <picture>不是万能的,它仅在需艺术指导或格式降级时才必要;日常宽度适配用srcset+sizes更轻量可靠,因<picture>依赖精准的media匹配、正确顺序及回退<img>,否则易失效。
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • HTML设置flex方向方法详解
    HTML设置flex方向方法详解
    flex-direction决定主轴方向,影响子元素排列走向及justify-content、align-items的行为逻辑:row(左→右)、row-reverse(右→左)、column(上→下)、column-reverse(下→上),且与书写方向无关。
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • Object.getPrototypeOf 识别构造函数混淆方法
    Object.getPrototypeOf 识别构造函数混淆方法
    Object.getPrototypeOf可绕过被篡改的constructor,沿原型链查找首个非Object.prototype的原型并读取其constructor,从而识别混淆后的原始构造函数;结合toStringTag、function.name和原型链指纹可批量检测伪造继承与类型伪装。
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • async/await 中 Promise 拒绝处理方法
    async/await 中 Promise 拒绝处理方法
    await遇到被拒绝的Promise时会抛出异常,但若未用try-catch捕获,错误虽被抛出,后续同步代码仍可能因未中断执行流而意外运行;本文详解原因、修复方案及最佳实践。await遇到被拒绝的Promise时会抛出异常,但若未用`try-catch`捕获,错误虽被抛出,后续同步代码仍可能因未中断执行流而意外运行;本文详解原因、修复方案及最佳实践。在使用async/await时,一个常见误区是认为只要写了await,Promise
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • CSS使用::backdrop实现模态背景遮罩方法
    CSS使用::backdrop实现模态背景遮罩方法
    ::backdrop仅对调用showModal()的原生<dialog>元素生效,不支持div等自定义组件;其样式仅限background、opacity、filter等,不可设宽高定位;需用:root变量配合媒体查询实现主题切换;自定义模态框应使用显式遮罩div替代。
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • JavaScript中抽象类与接口在类体系中的模拟实现
    JavaScript中抽象类与接口在类体系中的模拟实现
    JavaScript无原生抽象类和接口,但可通过构造函数检查、运行时抛错模拟抽象类,用对象契约+校验函数模拟接口;TypeScript提供编译期interface和abstractclass支持;工程中推荐TS或JSDoc+断言,避免过度继承。
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • CSS裁剪技巧:Clip与Clip-path对比解析
    CSS裁剪技巧:Clip与Clip-path对比解析
    旧版clip仅支持rect()且只对absolute/fixed/sticky元素生效,语法为clip:rect(top,right,bottom,left),值仅限px或auto;clip-path是现代替代方案,支持inset()、circle()、polygon()等,但坐标系和语义与旧版相反,且需注意overflow、transform兼容性及性能问题。
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • JavaScript解构赋值匹配原理
    JavaScript解构赋值匹配原理
    JavaScript的解构赋值基于结构相似性实现数据提取,非真正模式匹配。它通过语法糖按索引或键名直接映射:数组按位置、对象按属性名逐层提取,支持嵌套与默认值,但无回溯、守卫或多分支机制。
    文章 · 前端   |  2个月前  |   341浏览 收藏
  • aria-pressed的正确用法及实战示例
    aria-pressed的正确用法及实战示例
    aria-pressed用于标识按钮的“按下”状态,适用于切换行为的按钮。1.它不是描述按钮是否可点击,而是反映其当前状态,如静音或播放/暂停按钮;2.可用在原生<button>或带role="button"的元素上;3.其值为true、false或mixed,需通过JavaScript动态更新以匹配视觉状态;4.与aria-checked(复选框状态)和aria-selected(集合中选中项)不同,分别应用于不同语义场景;5.动态更新至关重要,确保屏幕阅读器能实时反馈状
    文章 · 前端   |  2个月前  |   341浏览 收藏
查看更多
课程推荐
  • 前端进阶之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推荐
  • ljg-skills -
    ljg-skills
    ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
    4841次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    4431次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    4373次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    4607次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    4563次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码