前端技术文章

  • Flexbox卡片高度统一正确方法
    Flexbox卡片高度统一正确方法
    align-items:stretch未使卡片高度一致,是因为父容器缺少显式高度、子项存在height/min-height/flex-shrink:0等限制,或内容撑开导致拉伸失效;需同时满足容器有高度、子项可伸缩、无收缩禁用才生效。
    文章 · 前端   |  1个月前  |   242浏览 收藏
  • v-bind绑定对象处理与性能优化解析
    v-bind绑定对象处理与性能优化解析
    Vue编译器对v-bind="obj"采用静态分析与运行时代理协同优化:编译阶段标记为DynamicProps并剥离静态属性,运行时直接透传响应式对象、按需触发getter,更新时基于引用比较跳过未变更对象。
    文章 · 前端   |  1个月前  |   417浏览 收藏
  • JS性能优化:代码拆分与内存管理技巧
    JS性能优化:代码拆分与内存管理技巧
    JavaScript性能优化需从代码拆分、内存管理、DOM操作等多维度入手,通过按需加载、减少回流重绘、避免内存泄漏、使用节流防抖及WebWorkers等手段,结合工具分析与细节调优,持续提升应用响应速度与用户体验。
    文章 · 前端   |  1个月前  |   415浏览 收藏
  • JavaScript字符串清理技巧:trimStart()使用详解
    JavaScript字符串清理技巧:trimStart()使用详解
    trimStart()比trim更合适,因为它只移除字符串开头空白,保留末尾换行和内部缩进,避免误删代码格式所需的空行或缩进,语义明确、精准控制。
    文章 · 前端   |  1个月前  |   394浏览 收藏
  • CSS不规则裁剪技巧解析
    CSS不规则裁剪技巧解析
    优先用inset()或circle()的相对单位(如50%、0.3rem),避免硬写px;polygon()坐标须按顺时针或统一逆时针排列,否则裁剪区域反向;Safari需双写-webkit-clip-path且慎用path()和transition。
    文章 · 前端   |  1个月前  |   352浏览 收藏
  • viewport-fit=cover适配刘海屏方法详解
    viewport-fit=cover适配刘海屏方法详解
    viewport-fit=cover是iOSSafari(11.2+)中允许网页内容渲染到安全区外的声明,需配合env()函数使用,且必须与width=device-width、initial-scale=1.0共存才生效;安卓端完全忽略该属性。
    文章 · 前端   |  1个月前  |   498浏览 收藏
  • 模块联邦如何实现微前端架构
    模块联邦如何实现微前端架构
    模块联邦是Webpack5实现微前端的核心技术,允许运行时动态共享模块。主应用(Host)通过remoteEntry.js加载远程模块,如用户中心暴露的UserProfile组件,并通过shared配置避免重复打包React等依赖。需注意样式隔离、状态共享、容错机制及部署同步问题,适用于多团队协作的后台系统集成场景。
    文章 · 前端   |  1个月前  |   143浏览 收藏
  • navigator.onLine网络检测与断网提示实现方法
    navigator.onLine网络检测与断网提示实现方法
    navigator.onLine仅反映链路层连通性,无法检测DNS故障、代理异常等“假在线”场景;需结合心跳检测(如fetch/healthz)与online/offline事件协同判断真实网络状态。
    文章 · 前端   |  1个月前  |   221浏览 收藏
  • 本地存储方案对比与选择指南
    本地存储方案对比与选择指南
    答案:现代Web开发中主流本地存储技术包括Cookie、WebStorage、IndexedDB、CacheAPI和FileSystemAccessAPI。1.Cookie存储容量小且每次请求自动携带,适合会话管理;2.WebStorage提供5~10MB键值对存储,API简单,适用于用户偏好等场景;3.IndexedDB为大容量结构化数据库,支持复杂查询,适合离线应用;4.CacheAPI专用于缓存网络资源,配合ServiceWorker实现离线加载;5.FileSystemAccessAPI可直接读写
    文章 · 前端   |  1个月前  |   html在线运行 169浏览 收藏
  • HTML5与HTML4区别全解析
    HTML5与HTML4区别全解析
    DOCTYPE和字符编码怎么写才不进怪异模式HTML5的不是“简写”,而是一条强制浏览器启用标准模式的开关。写错一个字母、多一个空格,或混用HTML4的DTD(比如),IE8–IE11就可能直接切到怪异模式——盒模型变回border-box、width行为反直觉、float布局错位,调试时容易误判成CSSbug。字符编码也一样:必须放在最前面(最好第二行),且不能和旧式写法并存。两者混用,部分浏览器会忽略后者,导致乱码;若被JS动态插入,也无效——它必须是
    文章 · 前端   |  1个月前  |   365浏览 收藏
  • Flex子项min-width溢出解决方法
    Flex子项min-width溢出解决方法
    Flex子项默认不收缩到内容宽度以下是因浏览器强制设定「最小内容尺寸」下限,由最长不可折行内容(如长单词或图片)决定;该尺寸是flex-shrink的收缩极限,min-width:0可覆盖此限制使收缩生效。
    文章 · 前端   |  1个月前  |   102浏览 收藏
  • HTML在线样式丢失原因及解决方法
    HTML在线样式丢失原因及解决方法
    HTML在线样式丢失主因是外部CSS加载失败、网络延迟、路径错误、缓存策略不当及CSP限制。通过内联关键CSS、预加载、本地备用、路径规范、合理缓存与监控降级,可有效提升页面渲染稳定性与用户体验。
    文章 · 前端   |  1个月前  |   html 175浏览 收藏
  • BEM规范如何减少CSS回归测试风险
    BEM规范如何减少CSS回归测试风险
    BEM通过命名约束强制切断隐式依赖,实现样式天然隔离。所有类名扁平自解释,禁止嵌套选择器,Modifier只描述视觉/行为状态,配合工具链和团队共识保障隔离有效性。
    文章 · 前端   |  1个月前  |   125浏览 收藏
  • CSS多行文本对齐技巧详解
    CSS多行文本对齐技巧详解
    align-content用于控制多行Flexbox或Grid布局在交叉轴上的对齐方式,仅在存在多余空间且有多行时生效。其常用值包括flex-start、flex-end、center、space-between、space-around、space-evenly和stretch,分别实现不同对齐效果。在Flexbox中需配合flex-wrap使用,在Grid中则应用于多行轨道且容器高度大于内容高度时,能有效提升多行布局的美观性与规整度。
    文章 · 前端   |  1个月前  |   162浏览 收藏
  • WebAuth无密码登录教程详解
    WebAuth无密码登录教程详解
    WebAuthnAPI能替代密码登录,但需用户预先注册密钥;其核心是通过navigator.credentials.create()和get()跳过密码输入,私钥永不出设备,依赖challenge、rp.id、user.id(Uint8Array)、authenticatorAttachment等参数严格校验,服务端须验证clientDataJSON.origin、challenge未重放、rpIdHash及UP标志位。
    文章 · 前端   |  1个月前  |   477浏览 收藏
查看更多
课程推荐
  • 前端进阶之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聊天机器人,用自然语言操控表格,简化数据处理,告别繁琐操作,提升工作效率!适用于学生、上班族及政府人员。
    8647次使用
  • Any绘本:开源免费AI绘本创作工具深度解析
    Any绘本
    探索Any绘本(anypicturebook.com/zh),一款开源免费的AI绘本创作工具,基于Google Gemini与Flux AI模型,让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景,零门槛,高自由度,技术透明,本地可控。
    9061次使用
  • 可赞AI:AI驱动办公可视化智能工具,一键高效生成文档图表脑图
    可赞AI
    可赞AI,AI驱动的办公可视化智能工具,助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析,还是一键生成专业图表、脑图、知识卡片,可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景,大幅提升办公效率,降低专业门槛,是您提升工作效率的得力助手。
    8888次使用
  • 星月写作:AI网文创作神器,助力爆款小说速成
    星月写作
    星月写作是国内首款聚焦中文网络小说创作的AI辅助工具,解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配,助力新人快速上手,资深作者效率倍增。
    10795次使用
  • MagicLight.ai:叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画
    MagicLight
    MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台,专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型,保障角色、风格、场景高度一致性,让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销,助您轻松实现创意落地与商业化。
    9733次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码