前端技术文章
-
- 点号与方括号属性访问性能对比解析
- 现代JavaScript引擎已对点号(.)和方括号([])两种属性访问方式做了深度优化,二者在实际运行中性能几乎无差异;选择应基于语义需求(静态/动态)而非性能考量。
- 文章 · 前端 | 1个月前 | 364浏览 收藏
-
- 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在语法、加载机制和使用场景上存在差异。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在React/Vue中跳不准,因目标元素可能未渲染、SSR与客户端DOM不一致或异步组件未挂载;应延后执行、用getBoundingClientRect计算位置,并注意兼容性与样式影响。
- 文章 · 前端 | 1个月前 | 434浏览 收藏
-
- JavaScript函数默认参数是什么?怎么设置默认值
- JavaScript默认参数是在函数定义时为形参指定的初始值,仅当调用时传入undefined才生效;支持表达式、函数调用及前置参数引用,且每次调用重新求值。
- 文章 · 前端 | 1个月前 | 252浏览 收藏
-
- 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滚动进度条动画新特性详解
- 必须写animation:nameauto,因为auto使动画时长由滚动时间线动态决定,若设为固定时长(如2s)则与滚动脱节,Chrome115+支持,Firefox需开启实验标志。
- 文章 · 前端 | 1个月前 | 176浏览 收藏
-
- 如何获取URL参数详解
- URLSearchParams是现代浏览器解析URL查询参数最简洁可靠的方式,支持自动编解码、get/getAll/has等方法,但IE不支持,需polyfill;window.location.search含开头?,可直接传入。
- 文章 · 前端 | 1个月前 | 185浏览 收藏
-
- HTML的Content Index API是用于将网页内容索引到系统中,以便在离线状态下通过系统搜索或应用列表访问。要使用这个API注册PWA(渐进式Web应用)的离线可用内容,需要遵循以下步骤:1. 确保PWA已正确配置在注册内容之前,必须确保你的PWA已经满足以下条件:使用HTTPS(生产环境)包含有效的 manifest.json 文件注册了Service Worker支持离线访问(通过S
- ContentIndexingAPI仅注册已缓存URL供系统界面展示,不负责缓存或验证;离线可用性取决于ServiceWorker是否已精确缓存对应路径并在fetch中正确响应导航请求。
- 文章 · 前端 | 1个月前 | 493浏览 收藏
-
- HTML Shadow DOM字体资源继承解析
- ShadowDOM中font-family不继承是设计使然,因仅部分可继承属性穿透边界,需通过:host{font-family:inherit}或adoptedStyleSheets显式继承。
- 文章 · 前端 | 1个月前 | 495浏览 收藏
-
- 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树形结构与层级展示不冲突,但“树形”需靠DOM层级+CSS+JS协同实现;常见问题包括状态不同步、样式覆盖、SSRhydration失败及details/summary无法联动控制等。
- 文章 · 前端 | 1个月前 | 150浏览 收藏
-
- CSSGrid布局简单注册表单设计
- CSSGrid注册页布局需语义化HTML、两列式网格对齐标签与输入框,并用display:contents使子元素直参网格排列,小屏时通过媒体查询转单列。
- 文章 · 前端 | 1个月前 | 281浏览 收藏
-
- 滚动条自动定位到底部的实现方法
- 通过JavaScript动态将scrollHeight设置为滚动位置,配合flex-direction:column布局,可确保消息容器内容新增时滚动条始终自动锚定至底部,实现类WhatsApp/微信的即时聊天体验。
- 文章 · 前端 | 1个月前 | 366浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 485次学习
-
- Golang深入理解GPM模型
- Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
- 474次学习
查看更多
AI推荐
-
- 万象有声
- 万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
- 6次使用
-
- Red Skill
- 小红书创作服务平台为小红书创作者和机构提供视频上传、数据分析、粉丝管理、创作指导等多项运营服务,助力用户解锁更多创作者专属功能,体验高效创作!
- 16次使用
-
- MiMo Code
- MiMo Code 是小米大模型团队开源的新一代 AI 编程助手,面向开发者提供代码理解、生成与辅助开发能力,适合作为 AI 编程工具收藏和体验。
- 106次使用
-
- TRAE Work
- TRAE AI IDE | 国内首款 AI 原生集成开发环境,深度集成 Doubao-1.5-pro 与 DeepSeek 模型,支持中文自然语言一键生成完整代码框架,实时预览前端效果并智能修复 BUG。首创 Builder 模式实现需求到代码的自动化开发,兼容 Windows/macOS 系统,官网下载即用。
- 132次使用
-
- MeloLab
- MeloLab 是一款 AI 音乐生成工具,可根据文本创意生成歌曲、人声、混音、分轨和背景音乐,适合创作者快速制作音乐素材。
- 113次使用

