前端技术文章

  • 点号与方括号属性访问性能对比解析
    点号与方括号属性访问性能对比解析
    现代JavaScript引擎已对点号(.)和方括号([])两种属性访问方式做了深度优化,二者在实际运行中性能几乎无差异;选择应基于语义需求(静态/动态)而非性能考量。
    文章 · 前端   |  1个月前  |   364浏览 收藏
  • HTML打印分页设置技巧
    HTML打印分页设置技巧
    打印HTML页面时,可以通过CSS的page-break属性、JavaScript动态插入分页符、CSS的page-break-inside属性以及调整HTML结构来处理分页问题。1.使用CSS的page-break属性控制元素前后插入分页符。2.通过JavaScript动态插入分页符,适用于需要在特定位置分页的情况。3.利用CSS的page-break-inside属性避免内容在不恰当的位置被截断。4.调整HTML结构,在需要的地方插入分页元素以优化打印效果。通过这些方法,可以显著改善打印输出的质量和用
    文章 · 前端   |  1个月前  |   374浏览 收藏
  • ES6模块与CommonJS对比详解
    ES6模块与CommonJS对比详解
    ES6模块与CommonJS在语法、加载机制和使用场景上存在差异。1.语法方面,ES6使用静态的import/export,支持命名和默认导出;CommonJS使用动态的module.exports和require,常见于Node.js。2.加载机制上,ES6模块为编译时加载,利于静态分析和tree-shaking;CommonJS为运行时加载,支持条件引入。3.浏览器原生支持ES6模块(通过type="module"),而CommonJS主要用于Node.js环境,新版Node.js也支持ES6模块。4
    文章 · 前端   |  1个月前  |   ES6模块 198浏览 收藏
  • window.scrollTo实现平滑锚点跳转教程
    window.scrollTo实现平滑锚点跳转教程
    直接用window.scrollTo在React/Vue中跳不准,因目标元素可能未渲染、SSR与客户端DOM不一致或异步组件未挂载;应延后执行、用getBoundingClientRect计算位置,并注意兼容性与样式影响。
    文章 · 前端   |  1个月前  |   434浏览 收藏
  • JavaScript函数默认参数是什么?怎么设置默认值
    JavaScript函数默认参数是什么?怎么设置默认值
    JavaScript默认参数是在函数定义时为形参指定的初始值,仅当调用时传入undefined才生效;支持表达式、函数调用及前置参数引用,且每次调用重新求值。
    文章 · 前端   |  1个月前  |   252浏览 收藏
  • CSS弹性侧边栏动画与cubic-bezier应用
    CSS弹性侧边栏动画与cubic-bezier应用
    侧边栏划入动画应使用transform:translateX()而非left或margin,以避免重排、启用GPU加速;初始设为translateX(-100%),配合transition和will-change:transform,贝塞尔曲线cubic-bezier(0.34,1.56,0.64,1)因y1>1实现超调弹性效果。
    文章 · 前端   |  1个月前  |   343浏览 收藏
  • CSS滚动进度条动画新特性详解
    CSS滚动进度条动画新特性详解
    必须写animation:nameauto,因为auto使动画时长由滚动时间线动态决定,若设为固定时长(如2s)则与滚动脱节,Chrome115+支持,Firefox需开启实验标志。
    文章 · 前端   |  1个月前  |   176浏览 收藏
  • 如何获取URL参数详解
    如何获取URL参数详解
    URLSearchParams是现代浏览器解析URL查询参数最简洁可靠的方式,支持自动编解码、get/getAll/has等方法,但IE不支持,需polyfill;window.location.search含开头?,可直接传入。
    文章 · 前端   |  1个月前  |   185浏览 收藏
  • HTML Shadow DOM字体资源继承解析
    HTML Shadow DOM字体资源继承解析
    ShadowDOM中font-family不继承是设计使然,因仅部分可继承属性穿透边界,需通过:host{font-family:inherit}或adoptedStyleSheets显式继承。
    文章 · 前端   |  1个月前  |   495浏览 收藏
  • HTML5Canvas绘图入门教程
    HTML5Canvas绘图入门教程
    Canvas绘图需先获取2D上下文对象:用document.getElementById()获取<canvas>元素,再调用getContext('2d');漏此步则绘图静默失败。fillRect画实心矩形,strokeRect仅描边,均以左上角为坐标原点;路径绘制须beginPath→moveTo/lineTo→stroke/fill,缺beginPath会导致路径叠加;clearRect仅清像素,不重置状态,彻底重置可用canvas.width=canvas.width。
    文章 · 前端   |  1个月前  |   224浏览 收藏
  • 微任务影响性能,不阻塞渲染
    微任务影响性能,不阻塞渲染
    微任务不会直接阻塞渲染,但会延迟渲染时机。因为微任务在当前宏任务执行后、渲染前执行,若微任务队列过长或执行复杂计算,将占用主线程,推迟浏览器更新屏幕的机会,导致页面卡顿。事件循环中,主线程执行完同步代码后优先处理所有微任务,之后才进行渲染和执行下一个宏任务。若微任务链过长,会持续推迟渲染,造成视觉上的不流畅。优化方式包括:1.拆分任务,使用setTimeout或requestAnimationFrame分批执行;2.合理使用Promise,避免嵌套与同步计算;3.将耗时任务移至WebWorkers中执行,
    文章 · 前端   |  1个月前  |   401浏览 收藏
  • HTML树形结构与层级展示如何完美结合
    HTML树形结构与层级展示如何完美结合
    HTML树形结构与层级展示不冲突,但“树形”需靠DOM层级+CSS+JS协同实现;常见问题包括状态不同步、样式覆盖、SSRhydration失败及details/summary无法联动控制等。
    文章 · 前端   |  1个月前  |   150浏览 收藏
  • CSSGrid布局简单注册表单设计
    CSSGrid布局简单注册表单设计
    CSSGrid注册页布局需语义化HTML、两列式网格对齐标签与输入框,并用display:contents使子元素直参网格排列,小屏时通过媒体查询转单列。
    文章 · 前端   |  1个月前  |   281浏览 收藏
  • 滚动条自动定位到底部的实现方法
    滚动条自动定位到底部的实现方法
    通过JavaScript动态将scrollHeight设置为滚动位置,配合flex-direction:column布局,可确保消息容器内容新增时滚动条始终自动锚定至底部,实现类WhatsApp/微信的即时聊天体验。
    文章 · 前端   |  1个月前  |   366浏览 收藏
查看更多
课程推荐
  • 前端进阶之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推荐
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    6次使用
  • Red Skill - 小红书推出的 AI Skill 分发平台
    Red Skill
    小红书创作服务平台为小红书创作者和机构提供视频上传、数据分析、粉丝管理、创作指导等多项运营服务,助力用户解锁更多创作者专属功能,体验高效创作!
    16次使用
  • MiMo Code - 小米大模型团队开源的新一代 AI 编程助手
    MiMo Code
    MiMo Code 是小米大模型团队开源的新一代 AI 编程助手,面向开发者提供代码理解、生成与辅助开发能力,适合作为 AI 编程工具收藏和体验。
    106次使用
  • TRAE Work - 字节跳动推出的 AI 原生工作台
    TRAE Work
    TRAE AI IDE | 国内首款 AI 原生集成开发环境,深度集成 Doubao-1.5-pro 与 DeepSeek 模型,支持中文自然语言一键生成完整代码框架,实时预览前端效果并智能修复 BUG。首创 Builder 模式实现需求到代码的自动化开发,兼容 Windows/macOS 系统,官网下载即用。
    132次使用
  • MeloLab - 一站式 AI 音乐生成与编辑平台
    MeloLab
    MeloLab 是一款 AI 音乐生成工具,可根据文本创意生成歌曲、人声、混音、分轨和背景音乐,适合创作者快速制作音乐素材。
    113次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码