前端技术文章

  • CSS Grid实现响应式图片网格布局,使用grid-auto-flow和minmax方法
    CSS Grid实现响应式图片网格布局,使用grid-auto-flow和minmax方法
    使用CSSGrid的repeat(auto-fit,minmax())和grid-auto-flow可创建自适应图片网格,通过minmax(250px,1fr)定义列宽,gap设置间距,img{width:100%;height:auto}保证图片响应式,overflow:hidden避免溢出,实现无需媒体查询的响应式布局。
    文章 · 前端   |  4个月前  |   317浏览 收藏
  • Shadow DOM 实现样式隔离与组件封装详解
    Shadow DOM 实现样式隔离与组件封装详解
    ShadowDOM通过创建物理隔离的DOM子树实现样式与结构封装,需用attachShadow({mode:'closed'})创建封闭根,内联样式并利用:host、::slotted和CSS自定义属性可控透传,确保真正独立性。
    文章 · 前端   |  4个月前  |   405浏览 收藏
  • CSS文字贴边太近怎么调整?padding设置技巧
    CSS文字贴边太近怎么调整?padding设置技巧
    给文字所在元素添加padding可解决紧贴容器边缘问题。例如p{padding:12px}、h2{padding:16px20px},并全局设置box-sizing:border-box,再配合line-height和响应式单位优化排版。
    文章 · 前端   |  4个月前  |   157浏览 收藏
  • CSS按钮圆角设计技巧分享
    CSS按钮圆角设计技巧分享
    答案:border-radius通过调整圆角大小、使用百分比适配形状、结合交互反馈和考虑可访问性,提升按钮美观与用户体验。
    文章 · 前端   |  4个月前  |   179浏览 收藏
  • HTML音频淡入淡出实现方法
    HTML音频淡入淡出实现方法
    HTMLaudio元素不支持平滑淡入淡出,必须用WebAudioAPI:需用户手势创建AudioContext,用createMediaElementSource接入音频,所有时间计算基于ctx.currentTime。
    文章 · 前端   |  4个月前  |   241浏览 收藏
  • WeakRef 实现按需释放的 WebGL 纹理管理器
    WeakRef 实现按需释放的 WebGL 纹理管理器
    WeakRef无法直接包裹WebGLTexture,因其是宿主对象且不受JSGC管理;可行方案是用WeakRef持有HTMLImageElement或轻量元数据对象,并通过FinalizationRegistry在对象销毁时调用gl.deleteTexture(),且须先校验gl.isTexture()。
    文章 · 前端   |  4个月前  |   423浏览 收藏
  • CSS Flex中align-self无效怎么解决?容器高度固定吗
    CSS Flex中align-self无效怎么解决?容器高度固定吗
    align-self不生效的主因是父容器交叉轴无固定尺寸;其次被align-items:stretch拉伸掩盖;再者margin:auto会优先覆盖;最后父容器未启用Flex布局也会导致完全失效。
    文章 · 前端   |  4个月前  |   444浏览 收藏
  • 令牌桶算法前端API限流组件设计思路
    令牌桶算法前端API限流组件设计思路
    前端不能独立实现服务端级令牌桶限流,因其依赖全局、原子、时钟同步的状态,而本地计时易篡改、多标签不共享、时间不准;只能模拟行为,通过本地桶估算+响应头协同(429、X-RateLimit头)+UI反馈实现提前拦截与智能退避。
    文章 · 前端   |  4个月前  |   453浏览 收藏
  • 响应式系统中的“依赖收集”到底收集了什么?
    响应式系统中的“依赖收集”到底收集了什么?
    依赖收集记录的是“谁在读这个值”,即正在执行的副作用函数(effect),并在属性被访问时将其加入该属性专属的监听集合,实现精准更新。
    文章 · 前端   |  4个月前  |   203浏览 收藏
  • 位图索引优化权限判断内存占用方法
    位图索引优化权限判断内存占用方法
    位图索引通过将权限映射为整数的二进制位实现高效校验,固定枚举编号、单用户仅需8字节存储、零查询位运算判断权限,超64项时分段管理,内存节省95%以上。
    文章 · 前端   |  4个月前  |   105浏览 收藏
  • 基于 IntersectionObserver 的首屏资源预加载架构设计
    基于 IntersectionObserver 的首屏资源预加载架构设计
    IntersectionObserver本身不是预加载系统,只是可见性传感器;需封装观察器、制定资源识别规则、设计预取执行策略、构建策略控制中枢四者协同才能实现首屏自动预加载。
    文章 · 前端   |  4个月前  |   365浏览 收藏
  • GPU加速实现60FPS动画技巧
    GPU加速实现60FPS动画技巧
    要实现60FPSDOM状态切换动画,需用transform/opacity替代布局属性,配合will-change动态启用与requestAnimationFrame同步渲染,并通过DevTools验证图层与帧耗时。
    文章 · 前端   |  4个月前  |   336浏览 收藏
  • IDEA查看HTML5运行效果方法【查看】
    IDEA查看HTML5运行效果方法【查看】
    IntelliJIDEA中HTML5文件可借助内置浏览器、外部浏览器、内置HTTP服务器或LiveEdit插件实现预览:一、右键选OpeninBuilt-inPreview;二、配置外部浏览器后右键打开;三、通过JavaScriptDebug配置本地服务器访问;四、安装LiveEdit插件实现保存即刷新。
    文章 · 前端   |  4个月前  |   369浏览 收藏
  • 本地存储实现数据持久化方法
    本地存储实现数据持久化方法
    localStorage并非真正离线存储,但它是轻量易用的浏览器端持久化方案;写入失败主因有四:无痕模式禁用、超配额(5–10MB)、非字符串值未序列化、iOSSafari低内存自动清理,须用trycatch+JSON处理并降级兜底。
    文章 · 前端   |  4个月前  |   332浏览 收藏
  • 自定义脚本实现魔术数字语义重写技巧
    自定义脚本实现魔术数字语义重写技巧
    ESLint的no-magic-numbers规则仅做静态检查,不支持自动替换为具名常量,因其设计为只读分析;真正实现语义化重写的需在构建阶段通过Babel插件等可写工具操作AST,并辅以上下文判断、作用域管理与可维护性设计。
    文章 · 前端   |  4个月前  |   274浏览 收藏
查看更多
课程推荐
  • 前端进阶之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推荐
  • PubMedQA数据集详解:生物医学问答基准、功能与应用指南
    PubMedQA
    深入了解PubMedQA生物医学问答数据集,涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用,助力提升NLP模型性能。
    297次使用
  • H2O EvalGPT:开源LLM大模型评估与排行榜工具
    H2O EvalGPT
    H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
    352次使用
  • LMArena是什么?伯克利AI模型评估平台使用指南与功能解析
    LMArena
    LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
    353次使用
  • 斯坦福HELM:大语言模型Holistic Evaluation整体评估框架详解
    HELM
    深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
    318次使用
  • MMBench详解:多模态大模型基准测试、功能特点与使用指南
    MMBench
    MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
    137次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码