前端技术文章

  • JavaScript懒加载实现与性能优化全解析
    JavaScript懒加载实现与性能优化全解析
    懒加载核心是按需触发资源加载,推荐用IntersectionObserver替代scroll监听,配合loading="lazy"实现渐进增强,组件懒加载需结合代码分割与视口观察,且必须处理失败fallback。
    文章 · 前端   |  4个月前  |   477浏览 收藏
  • 移动端JS手势识别技巧详解
    移动端JS手势识别技巧详解
    首先通过监听touchstart、touchmove、touchend事件实现手势识别,具体包括滑动、长按、双击和缩放等操作。记录触摸坐标并计算位移与时间差,结合阈值判断手势类型。例如滑动手势需比较起始与结束位置的偏移量,长按通过定时器检测持续触摸,双击判断两次点击间隔与距离,缩放则依据两指间距离变化。示例代码展示了左右滑动检测逻辑:在touchstart记录起点,touchend时计算水平位移,若水平差大于30且垂直差小于50,根据方向输出swipeleft或swiperight。注意事项包括设置pas
    文章 · 前端   |  4个月前  |   345浏览 收藏
  • 路由守卫实现页面超时退出技巧
    路由守卫实现页面超时退出技巧
    路由守卫不直接判断超时,需结合时间状态管理和守卫拦截:1.全局监听交互事件刷新localStorage中lastActive时间戳;2.checkSessionTimeout()函数计算并返回超时布尔值;3.router.beforeEach中调用该函数,超时则清token并跳转登录页;另配定时器每60秒兜底检测。
    文章 · 前端   |  4个月前  |   404浏览 收藏
  • CSS多级导航栏延迟显示技巧
    CSS多级导航栏延迟显示技巧
    transition-delay不继承,必须逐级显式设置;需用后代选择器配合CSS变量统一管理,并结合opacity/visibility实现平滑过渡,避免display切换中断动画。
    文章 · 前端   |  4个月前  |   432浏览 收藏
  • CSSGrid列宽自适应技巧:auto与minmax用法
    CSSGrid列宽自适应技巧:auto与minmax用法
    auto在grid中等价于min-content而非弹性值;实现自适应列宽应使用minmax(min-content,1fr),而非minmax(auto,1fr)或单独auto。
    文章 · 前端   |  4个月前  |   140浏览 收藏
  • 闭包实现动态上下文自愈执行层
    闭包实现动态上下文自愈执行层
    闭包不能实现动态上下文自愈或跨环境执行,仅作为轻量封装工具参与;它可封装环境检测结果、绑定上下文快照、隔离校验逻辑,支撑可观测性驱动的决策层。
    文章 · 前端   |  4个月前  |   211浏览 收藏
  • 栈结构的高效实现:push与pop操作解析
    栈结构的高效实现:push与pop操作解析
    高性能栈应采用预分配数组+整型栈顶索引实现,push/pop均为O(1)原子操作,避免动态分配、装箱和分支预测失败,注重缓存友好与硬件对齐。
    文章 · 前端   |  4个月前  |   157浏览 收藏
  • CSS层叠规则详解与插件冲突解决方法
    CSS层叠规则详解与插件冲突解决方法
    @layer能压制!important是因其引入了独立于选择器权重和!important的新层叠维度,浏览器按“层顺序→层内规则顺序→选择器权重”逐级计算,后声明的层内样式自然覆盖先声明层中的!important规则。
    文章 · 前端   |  4个月前  |   268浏览 收藏
  • HTML5日期输入框怎么调宽?
    HTML5日期输入框怎么调宽?
    原生<inputtype="date">宽度无法直接用width:100%撑开,因浏览器为其设定了默认min-width(如Chrome约130px),需显式设置min-width:0和box-sizing:border-box才能生效;Flex布局中同样需min-width:0配合flex:1;Safari兼容性最差,建议优先考虑自定义方案。
    文章 · 前端   |  4个月前  |   430浏览 收藏
  • iOS输入框阴影显示异常解决方法
    iOS输入框阴影显示异常解决方法
    仅写appearance:none无法清除iOS输入框内阴影,必须搭配-webkit-appearance:none和background-color:transparent、border:1pxsolidtransparent、outline:none、padding与line-height显式设置这4+关键项,否则阴影照旧。
    文章 · 前端   |  4个月前  |   498浏览 收藏
  • 图片懒加载与预加载优化技巧
    图片懒加载与预加载优化技巧
    图片懒加载与预加载结合可显著提升网页性能。1.懒加载通过IntersectionObserverAPI延迟加载视窗外图片,减少初始请求;2.预加载在空闲或用户操作前提前加载关键资源;3.首屏直接加载、非首屏懒加载并配合占位图与尺寸设置优化体验。
    文章 · 前端   |  4个月前  |   430浏览 收藏
  • ModuleFragments多业务逻辑静态导出方法
    ModuleFragments多业务逻辑静态导出方法
    JavaScript中不存在“ModuleFragments”特性,也无相关标准提案;正确做法是使用ES模块的命名导出组织逻辑块,或按职责拆分为细粒度文件以实现解耦、TreeShaking和可维护性。
    文章 · 前端   |  4个月前  |   316浏览 收藏
  • HTML兼容旧浏览器的5种方法
    HTML兼容旧浏览器的5种方法
    兼容旧浏览器主要通过使用polyfill和降级策略实现,其核心是渐进增强与优雅降级理念;2.Polyfill通过JavaScript模拟新特性,填补旧浏览器缺失的API,如html5shiv让IE识别HTML5标签,而转译(如Babel)则是将ES6+语法转换为ES5;3.两者区别在于polyfill解决运行时API缺失,转译解决语法兼容性,现代开发常结合使用Babel和core-js;4.使用polyfill可能带来性能问题,包括文件体积、执行开销和内存占用,可通过按需加载、CDN加速、缓存、压缩和延迟
    文章 · 前端   |  4个月前  |   180浏览 收藏
  • aria-valuetext使用技巧与场景解析
    aria-valuetext使用技巧与场景解析
    aria-valuetext是aria-valuenow的补充性文本描述,用于提升无障碍体验。当数值本身不足以传达含义时,它提供更直观的文本解释。正确使用时需与aria-valuemin、aria-valuemax等属性配合,并保持与视觉状态一致。错误使用如冗余、误导、遗漏信息等会损害用户体验。适用场景包括滑块、进度条、评分组件、颜色选择器、数字输入框及复杂表单状态等。
    文章 · 前端   |  4个月前  |   401浏览 收藏
  • index.html与home.html区别解析
    index.html与home.html区别解析
    index.html是服务器默认查找的首页文件名,因其被预设在欢迎文件列表首位;Home.html等自定义文件名需手动配置服务器(如Nginx、Apache、Tomcat)的欢迎文件列表或重写规则才能作为首页生效。
    文章 · 前端   |  4个月前  |   178浏览 收藏
查看更多
课程推荐
  • 前端进阶之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模型性能。
    374次使用
  • H2O EvalGPT:开源LLM大模型评估与排行榜工具
    H2O EvalGPT
    H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
    443次使用
  • LMArena是什么?伯克利AI模型评估平台使用指南与功能解析
    LMArena
    LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
    450次使用
  • 斯坦福HELM:大语言模型Holistic Evaluation整体评估框架详解
    HELM
    深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
    397次使用
  • MMBench详解:多模态大模型基准测试、功能特点与使用指南
    MMBench
    MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
    221次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码