一月内热门-前端技术文章-Golang学习网

分类:

最新
热门

一月内

三天内一周内一月内三月内

Node.js与浏览器事件循环差异解析

Node.js和浏览器的事件循环主要区别在于底层实现和任务队列管理。Node.js的事件循环基于libuv库，分为Timers、Pendingcallbacks、Poll、Check、Closecallbacks等阶段，每个阶段处理特定类型的回调；而浏览器事件循环由HTML5规范定义，依赖MicrotaskQueue（存放Promise、MutationObserver回调）和TaskQueue（存放用户交互、网络请求等任务）。Node.js通过process.nextTick()和setImmediat

文章 · 前端 | 2天前 | Node.js 浏览器区别事件循环微任务队列 390浏览收藏
用Map替代对象的JavaScript技巧

在JavaScript中，当键不是字符串、需保持插入顺序或频繁操作键值对时，应使用Map。①Map支持任意类型键，避免对象键被转为字符串；②Map提供get、set、has、delete等方法及size属性，语义更清晰；③Map遍历时保证插入顺序，传统对象不严格支持；④Map更适合动态增删查改场景，对象适用于静态配置或简单哈希表。

文章 · 前端 | 19小时前 | 390浏览收藏
BOM暗黑模式实现技巧解析

实现暗黑模式的核心步骤如下：1.使用window.matchMedia检测系统主题偏好；2.结合localStorage存储用户手动选择；3.通过JavaScript动态调整CSS变量或切换类；4.在CSS中定义主题变量并结合媒体查询设置不同值；5.页面加载时优先应用用户保存的主题，否则根据系统偏好初始化；6.提供主题切换按钮并监听系统偏好变化以自动响应。该方法兼顾了用户系统偏好与手动选择，利用CSS变量使样式管理更清晰，同时确保逻辑清晰且维护方便。

文章 · 前端 | 8小时前 | 390浏览收藏
表单验证与用户交互分析方法

行为验证的核心在于通过分析用户在表单中的鼠标轨迹、键盘节奏等交互行为判断其是否为真人。它通过前端采集mousemove、keydown等事件数据，提取鼠标速度、按键间隔等特征，利用机器学习模型（如SVM、随机森林）比对人类与机器人行为模式，实现持续性身份判断。相比传统验证码易被AI或人工破解且体验差的问题，行为验证更具隐蔽性与准确性。当系统检测到异常行为（如直线移动、无停顿输入）时，可实时触发二次验证或拦截。此外，这些交互数据还能反哺产品优化：通过分析字段停留时间、错误率、焦点切换等，可发现表单设计缺陷；

文章 · 前端 | 8小时前 | 用户体验数据采集用户交互表单设计行为验证 390浏览收藏
CSS制作指针式数据仪表盘教程

在CSS中创建指针式刻度设计的数据仪表盘，核心在于使用transform的rotate()函数并设置正确的transform-origin。首先，HTML结构包含容器、刻度盘和指针元素；其次，CSS通过position:relative与absolute实现定位，并用transform-origin:50%100%确保指针绕底部中心旋转，配合translateX(-50%)修正偏移；最后，通过JavaScript动态计算角度并更新CSS变量，结合transition实现平滑动画效果。

文章 · 前端 | 3星期前 | 389浏览收藏
CSS双冒号用法解析：::before与::after详解

在CSS中，双冒号（::）用于选择伪元素。1.伪元素是HTML中不存在的元素部分，如::first-line选择段落的第一行。2.双冒号区分伪类和伪元素，使代码更清晰。3.伪元素如::before和::after可插入内容，增强视觉效果。4.需兼容旧版浏览器时，可同时使用单双冒号。5.伪元素不能选择已存在的元素，需谨慎使用以免影响可访问性。6.使用伪元素比创建额外HTML更高效，但需考虑对布局和性能的影响。

文章 · 前端 | 3星期前 | 389浏览收藏
HTML未来趋势：语义化与互动增强怎么运行？

运行HTML文档最直接的方式是将文件保存为.html或.htm格式后双击用浏览器打开；2.更专业的方式是通过本地服务器运行，如使用Python的http.server、Node.js的http-server或VSCode的LiveServer扩展；3.HTML5的语义化标签通过<header>、<nav>、<main>等明确内容结构，提升了可访问性、SEO、代码可读性和维护性；4.Web组件通过CustomElements、ShadowDOM和HTMLTemplates

文章 · 前端 | 2星期前 | 兼容性 Web组件语义化HTML HTML运行 HTML最佳实践 389浏览收藏
如何添加图标到HTML？简单教程教你修改图标格式

添加图标到HTML文件有两种主要方式：1.使用<img>标签直接引入图片文件，需设置src属性指定路径，alt属性提供替代文本；2.使用CSS的background-image属性将图标设为元素背景，需定义元素宽高并设置background-size:cover以完整覆盖。修改HTML格式推荐使用VSCode、SublimeText、Notepad++或Atom等代码编辑器，它们均支持语法高亮和代码格式化，也可使用CodePen或JSFiddle等在线编辑器进行简单修改。选择图标格式时：1..

文章 · 前端 | 2星期前 | 代码编辑器网站性能 HTML图标图标格式响应式显示 389浏览收藏
CSS输入框聚焦高亮技巧

表单输入框高亮对用户体验和可访问性至关重要，因为它提供了清晰的交互反馈。首先，它帮助用户明确当前操作的字段，减少误操作并提升填写效率；其次，它是无障碍设计的关键，确保依赖键盘导航的用户能清楚看到焦点位置，符合WCAG标准。创意方式包括背景色渐变、文本颜色变化、下划线动画、图标联动及复杂阴影组合，但需保持简洁不干扰用户。:focus-visible与:focus的不同在于，前者仅在键盘导航或脚本聚焦时生效，避免鼠标点击时的多余轮廓，建议优先使用:focus-visible以兼顾美观与无障碍，必要时配合Pol

文章 · 前端 | 2星期前 | 389浏览收藏
setTimeout最小延迟为何不能低于4ms？

setTimeout的最小延迟通常是4ms，但受浏览器实现和嵌套调用影响；1.现代浏览器如Chrome、Firefox遵循HTML5标准设为4ms；2.历史原因源于IE等旧浏览器延迟更高；3.最小延迟用于性能优化、节电及任务调度；4.无法直接绕过4ms限制，但可用requestAnimationFrame、WebWorkers或优化算法减少影响；5.setInterval与setTimeout区别在于前者重复执行，易导致时间堆积，推荐用递归setTimeout替代。

文章 · 前端 | 1星期前 | 浏览器 setTimeout setInterval 最小延迟 4ms 389浏览收藏
JS数组去重方法汇总

数组去重的首选方法是使用Set，因为其基于哈希表实现，查找效率为O(1)，性能优于其他方法；1.使用Set去重：通过[...newSet(arr)]可快速去除重复值，适用于简单数据类型且通常保持原顺序；2.使用filter与indexOf：通过arr.filter((item,index)=>arr.indexOf(item)===index)实现，兼容性好但性能较低；3.使用reduce与includes：通过累加器和includes判断是否包含当前元素，逻辑清晰但效率不高；4.处理对象数组时需自

文章 · 前端 | 1星期前 | filter set reduce indexof JS数组去重 389浏览收藏
用CSS制作数据流程图：节点与连线设计

在CSS中制作数据流程图，核心在于利用盒模型、定位和伪元素构建节点与连线。1.节点通过div元素实现，结合背景色、边框、阴影等样式形成可视化单元；2.连线使用伪元素或独立div，通过绝对定位和transform模拟直线或直角连接；3.布局采用Flexbox或Grid实现结构化排列；4.箭头通过旋转伪元素或border技巧绘制；5.对于复杂曲线或动态调整场景，建议使用SVG替代CSS以提升可维护性。

文章 · 前端 | 1星期前 | 389浏览收藏
jssplice删除元素并返回删除项方法

splice方法会直接修改原数组并返回被删除元素组成的数组；1.splice语法为array.splice(start,deleteCount,item1,...)，start为起始索引，deleteCount指定删除元素个数，后续参数为插入的新元素；2.splice与slice的核心区别在于splice是“修改者”会改变原数组，而slice是“复制者”不修改原数组仅返回新数组；3.splice常见应用场景包括根据索引删除、插入或替换元素，但存在修改原数组导致副作用、循环中删除元素需注意索引变化、性能开销

文章 · 前端 | 4天前 | 389浏览收藏
CSS分页导航点怎么设计？flex+伪元素轻松实现

最常见且高效的分页导航点样式实现方式是结合Flex布局和CSS伪元素。1.使用Flex布局通过display:flex、justify-content:center和gap属性实现导航点的水平居中排列与间距控制，简化布局代码并提升响应式表现；2.利用::before伪元素生成圆形视觉效果，通过position:absolute和transform居中定位，并在:hover和.active状态下改变背景色、大小以实现交互反馈，同时通过transition添加平滑动画；3.进一步优化可引入CSS变量统一管理尺

文章 · 前端 | 2天前 | CSS flex布局伪元素分页导航无障碍性 389浏览收藏
CSS实现Toast通知设计方法

CSS本身不能直接操作数据提示信息，它负责为Toast通知提供视觉样式与动画效果。1.CSS定义Toast的外观、位置及动画，通过HTML结构（如包含文字和关闭按钮的div）实现基础布局；2.使用position:fixed等属性确保Toast浮动在页面之上，并通过transition或@keyframes实现淡入淡出、滑动等动画效果；3.响应式设计采用相对单位与媒体查询，在不同设备上自适应宽度、位置和字体大小；4.用户体验方面需考虑显示时机与持续时间、位置选择、内容简洁性、视觉区分度以及可访问性（如使用

文章 · 前端 | 1天前 | 389浏览收藏

1 120 121 122 429

查看更多

课程推荐

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

542次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

511次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

498次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

484次学习
Golang深入理解GPM模型

Golang深入理解GPM调度器模型及全场景分析，希望您看完这套视频有所收获；包括调度器的由来和分析、GMP模型简介、以及11个场景总结。

474次学习

查看更多

AI推荐

千音漫语

千音漫语，北京熠声科技倾力打造的智能声音创作助手，提供AI配音、音视频翻译、语音识别、声音克隆等强大功能，助力有声书制作、视频创作、教育培训等领域，官网：https://qianyin123.com

175次使用
MiniWork

MiniWork是一款智能高效的AI工具平台，专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具，提供精准智能解决方案，让复杂工作简单高效。

174次使用
NoCode

NoCode (nocode.cn)是领先的无代码开发平台，通过拖放、AI对话等简单操作，助您快速创建各类应用、网站与管理系统。无需编程知识，轻松实现个人生活、商业经营、企业管理多场景需求，大幅降低开发门槛，高效低成本。

176次使用
达医智影

达医智影，阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”，仅一次CT扫描即可高效识别多种癌症、急症及慢病，为疾病早期发现提供智能、精准的AI影像早筛解决方案。

181次使用
智慧芽Eureka

智慧芽Eureka，专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景，通过专家级AI Agent精准执行任务，智能化工作流解放70%生产力，让您专注核心创新。

195次使用