-
- JavaScript购物车优化渲染教程
- 本文旨在解决JavaScript购物车中仅显示最后一个商品的问题。通过修改循环内的HTML赋值方式，避免每次循环覆盖之前的商品信息。同时，提供更高效的购物车渲染方法，一次性构建完整的HTML字符串，减少浏览器重绘次数，提升用户体验。
- 文章 · 前端 | 23小时前 | 246浏览 收藏
-
- CSS中文标点压缩技巧：text-space-collapse详解
- text-space-collapse属性是用于精细控制文本中空白字符处理的CSS新提案，尤其针对中文标点周围的多余间距问题。1.其collapse值会将多个连续空白折叠为一个，有助于消除标点后误输入的半角空格，使中文标点与前后字符间距更紧凑；2.discard值则更激进，直接丢弃所有可折叠空白，实现极致紧密排版，更符合传统中文阅读习惯；3.与white-space等属性不同，text-space-collapse专注处理非语义性视觉空白，而非整体空白或换行策略；4.实际应用中需谨慎，因该属性尚处草案阶段
- 文章 · 前端 | 23小时前 | CSS 排版 空白字符 text-space-collapse 中文标点 217浏览 收藏
-
- CSS卡片阴影浮层实现技巧
- 简单的box-shadow不高级是因为只用单一、纯黑阴影，缺乏真实光影层次；2.高级感需叠加多层阴影：用大而模糊的环境光阴影（如010px30pxrgba(0,0,0,0.1)）模拟柔和托起感，再加小而集中的直接光阴影（如03px6pxrgba(0,0,0,0.08)）增强支撑感；3.阴影色应选深灰或带色调的深色而非纯黑，与背景呼应更自然；4.响应式中推荐用px单位控制阴影，因视觉感知固定，但可配合媒体查询优化移动端性能；5.辅助技巧包括hover时transform:translateY(-5px)模拟
- 文章 · 前端 | 23小时前 | 响应式设计 box-shadow 卡片阴影 浮层效果 多层阴影 354浏览 收藏
-
- JS对象基础：实用方法全解析
- JavaScript对象的核心用法是通过键值对存储和组织数据，支持创建、访问、修改、添加、删除及遍历属性；最常用创建方式为对象字面量{}，属性可通过点操作符（.）或方括号操作符（[]）访问和修改，其中方括号适用于动态属性名；删除属性使用delete操作符；遍历方式包括for...in循环（需配合hasOwnProperty避免原型链干扰）、Object.keys()获取键数组、Object.values()获取值数组、Object.entries()获取键值对数组；与数组的核心区别在于：对象为无序的命名属
- 文章 · 前端 | 23小时前 | 访问 属性 键值对 遍历 JS对象 415浏览 收藏
-
- CSS固定多级表头技巧：sticky层级控制方法
- 使用position:sticky固定多级表头时，必须确保父容器设置overflow非visible（如auto或scroll），并为每个表头单元格设置正确的top值和递减的z-index以保证堆叠顺序；2.sticky不生效常见原因包括：祖先元素overflow设置不当、未设置top/bottom/left/right偏移、容器无滚动空间或display属性冲突；3.多级表头需按层级设置top为上级表头高度之和，z-index从上到下递减，避免遮挡；4.响应式下固定表头易出现水平不对齐问题，可借助JS同
- 文章 · 前端 | 23小时前 | 固定表头 Overflow z-index position:sticky 多级表头 429浏览 收藏
-
- I/O优先于定时器，事件循环真相揭秘
- 定时器回调通常比I/O回调更早执行，因为事件循环中timers阶段在poll阶段之前；2.I/O操作完成后的回调必须等到poll阶段才会处理，即使它在timers阶段前就已完成；3.微任务（如Promise、nextTick）优先级最高，会在每个阶段间立即执行；4.实际开发中应避免阻塞事件循环，CPU密集任务用worker_threads；5.合理使用setTimeout(0)、setImmediate和process.nextTick可优化执行顺序，提升性能。
- 文章 · 前端 | 23小时前 | 351浏览 收藏
-
- HTML5ReferrerPolicy详解与设置教程
- 控制Referrer信息的原因是保护用户隐私和防止安全风险。1.Referer头部可能泄露敏感信息，如用户来源页面的URL参数；2.恶意网站可伪造Referer进行钓鱼或CSRF攻击；3.合理设置ReferrerPolicy可在安全与可用性之间取得平衡。选择策略时应遵循：1.最小权限原则，使用限制性强的策略；2.HTTPS优先使用strict-origin-when-cross-origin；3.同源请求使用same-origin；4.特殊场景如统计使用origin。可通过HTML标签属性、<met
- 文章 · 前端 | 23小时前 | 235浏览 收藏
-
- JSmapValues修改对象数组键值技巧
- 使用map方法结合解构和扩展运算符可安全修改对象数组的键值，避免原地修改；2.复杂转换应封装为独立函数以提升可维护性；3.推荐使用TypeScript定义数据结构类型，增强代码健壮性；4.为关键转换逻辑编写单元测试，确保数据处理正确性。这些实践共同保障了数据转换的不可变性、可读性和可维护性，最终实现可靠的数据处理流程。
- 文章 · 前端 | 23小时前 | 224浏览 收藏
-
- Flexbox中align-items属性详解与使用技巧
- align-items是Flexbox布局中控制子元素在交叉轴上对齐方式的属性。1.它需在display:flex容器中使用；2.常用值包括flex-start（起始对齐）、flex-end（结束对齐）、center（居中）、baseline（基线对齐）和stretch（拉伸填充）；3.其作用方向取决于flex-direction，主轴为水平时控制垂直对齐，反之则控制水平对齐；4.与justify-content（主轴对齐）配合使用可实现完整布局；5.实际应用中需注意设置容器高度、区分align-cont
- 文章 · 前端 | 23小时前 | 280浏览 收藏
-
- CSS图片玻璃碎裂效果，clip-path碎片教程
- 要实现图片玻璃碎裂的CSS效果，核心是使用clip-path属性结合多个碎片化元素来模拟破碎视觉。1.通过将图片作为背景，创建多个div元素作为碎片，每个碎片使用clip-path:polygon()定义不规则形状；2.利用background-image:inherit继承背景图，确保各碎片显示对应区域的图像内容；3.添加filter:blur()和box-shadow增强玻璃质感与边缘立体感；4.使用transform配合transition实现鼠标悬停时碎片的位移与旋转动画；5.为提升真实感，建议采
- 文章 · 前端 | 23小时前 | JavaScript 视觉效果 clip-path 玻璃碎裂效果 碎片化 275浏览 收藏
-
- ChromeDevTools事件循环调试技巧
- 前端页面卡顿的核心原因是主线程被长任务阻塞，使用ChromeDevTools的Performance面板可精准定位；2.录制操作后在Main线程查看任务块，红色三角标记的超50ms长任务会阻塞用户输入和UI更新；3.微任务（如Promise回调）紧随宏任务执行且优先清空队列，过长微任务链会导致页面假死；4.Layout、Paint等渲染任务频繁或耗时即为UI瓶颈，优化方式包括批量DOM操作、避免强制同步布局、使用transform/opacity替代触发布局的属性。
- 文章 · 前端 | 23小时前 | 443浏览 收藏
-
- JS文件上传实现全解析
- 实现文件上传的核心步骤是：使用inputtype="file"获取文件，通过FormData封装文件数据，利用FetchAPI或XMLHttpRequest异步发送至服务器；2.推荐使用异步方式上传是因为其不刷新页面，提升用户体验，支持实时进度反馈、灵活的错误处理及附加数据传输；3.实现进度条需监听XMLHttpRequest的upload.onprogress事件，取消功能可通过xhr.abort()或Fetch配合AbortController实现；4.前端安全考量包括文件类型和大小的初步校验，但后端
- 文章 · 前端 | 1天前 | 198浏览 收藏
-
- HTMLa标签下载文件教程，download属性使用详解
- HTML实现文件下载主要依赖<a>标签的download属性，当同源时可强制下载并指定文件名；2.跨域下载时download属性常失效，需依赖服务器的Content-Disposition响应头；3.动态文件下载可通过JavaScript创建BlobURL并结合<a>标签实现；4.常见问题包括跨域限制、大文件无进度提示、文件名乱码、浏览器兼容性及安全风险，均需通过前后端协作解决；5.最终解决方案应根据场景选择前端download属性、服务器响应头控制或JavaScript动态生成下
- 文章 · 前端 | 1天前 | 153浏览 收藏
-
- JS创建和使用WebWorker教程
- WebWorker的适用场景包括：1.图像处理，如滤镜、缩放和格式转换，可将图像数据交由Worker处理后再返回主线程显示；2.数据分析，如大规模数据的排序、过滤和聚合，避免阻塞界面；3.加密解密操作，将耗时的密码或敏感数据处理放在Worker中执行；4.代码编译与转译，例如TypeScript转JavaScript；5.游戏逻辑运算，如AI决策和物理模拟等独立计算任务；需注意Worker不能直接操作DOM，所有交互需通过消息传递与主线程通信，因此适用于可独立运行且无需频繁访问DOM的耗时任务。
- 文章 · 前端 | 1天前 | 138浏览 收藏
查看更多
课程推荐
-
- 前端进阶之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
- 169次使用
-
- MiniWork
- MiniWork是一款智能高效的AI工具平台，专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具，提供精准智能解决方案，让复杂工作简单高效。
- 167次使用
-
- NoCode
- NoCode (nocode.cn)是领先的无代码开发平台，通过拖放、AI对话等简单操作，助您快速创建各类应用、网站与管理系统。无需编程知识，轻松实现个人生活、商业经营、企业管理多场景需求，大幅降低开发门槛，高效低成本。
- 171次使用
-
- 达医智影
- 达医智影，阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”，仅一次CT扫描即可高效识别多种癌症、急症及慢病，为疾病早期发现提供智能、精准的AI影像早筛解决方案。
- 175次使用
-
- 智慧芽Eureka
- 智慧芽Eureka，专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景，通过专家级AI Agent精准执行任务，智能化工作流解放70%生产力，让您专注核心创新。
- 187次使用
