- 博客(24)
- 收藏
- 关注
RSS订阅原创 浏览器绘制流程速览
浏览器渲染流程主要分为解析、样式计算、布局、分层、绘制、分块、光栅化和画8个步骤。首先解析HTML生成DOM树，解析CSS生成CSSOM树；接着合并两树进行样式计算；然后遍历节点生成布局树；根据元素变动频率分层优化性能；主线程完成绘制指令后，合成线程进行分块处理；通过光栅化将分块转为位图；最后生成quad指引交由硬件渲染。关键点在于CSS解析不阻塞HTML，而JS会阻塞解析过程，分层机制则提升了渲染效率。
2026-07-13 17:42:03
326
原创 正则表达式速览
=）不消耗字符，只是判断后面的内容是不是所排除的（比如匹配前面不带￥的数字）注意￥20会把0带进去，因为2不是￥。）不消耗字符，只是判断后面的内容是不是所排除的（比如匹配后面不带元的数字）<=）不消耗字符，只是判断后面的内容是不是所要的（比如匹配前面带￥的数字）=）不消耗字符，只是判断后面的内容是不是所要的（比如匹配后面带元的数字）分组由（）包裹，分组的内容算是一个整体，且（）包裹的内容可以被\1和$1引用。单个字符的话只需要写在/ /之中就可以了，有些特殊的转义字符需要加\在前面。
2026-07-08 09:40:21
374
原创 react hook 原理
本篇文章为作者拜读外星人大佬文章所感受，旨在让更多的小白也能看懂理解，特来写文章分享感受，如有不对请多多指正（原文链接「react进阶」一文吃透react-hooks原理之前的两篇文章，分别介绍了react-hooks如何使用，以及自定义 - 掘金。
2026-07-02 21:01:01
208
原创 大三实习面试经验 性能优化-2 （2026/6/11）
本文介绍了虚拟列表的性能优化方案。针对大数据量渲染导致首屏加载缓慢的问题，虚拟列表通过只渲染可视区域及缓冲区的数据来提升性能。文章详细说明了固定高度虚拟列表的实现逻辑，包括三层结构设计（窗口层、列表框高度层、定位层）和缓冲区计算方式。同时探讨了不定高度虚拟列表的解决方案，建议通过记录元素位置信息，采用二分查找优化计算性能，并加入节流控制。最后指出若无高度数据应由后端提供，而非前端测量。该方案能显著减少DOM节点数量，提升页面渲染效率。
2026-06-18 11:58:30
237
原创 大三实习面试经验(性能优化篇-1 2026/6/10)
本文分享了前端面试中常见的性能优化技巧——防抖与节流的实现方法。防抖通过延迟执行函数，确保频繁触发时只执行最后一次（如搜索联想）；节流则限制函数在一定时间内只执行一次。文章提供了两种方法的通用实现代码，强调封装适配不同函数的重要性。这些技术能有效优化性能，是面试加分项，建议读者动手实践掌握。最后祝愿求职者顺利通过面试，获得理想offer。
2026-06-11 15:51:00
226
原创 小白学前端--第十五天 （2026/3/4）（Search页面的搭建）
摘要 由于实习原因，项目更新进度可能延后，主要在周末更新。本文介绍了智慧商城Search页面的搭建，包含静态结构和业务逻辑两部分。静态部分采用Layout布局，顶部为Header栏，下方为搜索结果展示区，支持默认、销量、价格三种排序方式。业务逻辑部分包括：1) 用户信息维护，通过useEffect重新获取Redux数据；2) 商品渲染请求，通过监听goodsName和searchParams变化实现；3) 排序切换逻辑，使用handleType函数操作searchParams统一管理请求。项目采用React
2026-03-04 10:09:54
429
原创 小白学前端--第十四天（2026/3/1）不同Tab之间的商品栏的切换 （渲染异步问题）
本文分享了在智慧商城项目中实现Tab分类栏功能时遇到的技术问题及解决方案。主要解决了两个关键问题：1）异步数据更新导致的状态不一致问题，通过引入const变量传参确保参数更新后执行请求；2）Tab切换时的异步竞争问题，采用pauseScrollRef锁机制、requestRef版本控制和requestAnimationFrame等待渲染等技术手段实现稳定切换。文章详细展示了优化后的代码实现，包括loadMore和tabSearch函数改造，以及相关状态管理逻辑。这些方案有效解决了数据更新不及时和异步请求冲突
2026-03-02 00:00:13
770
原创 小白学前端--第十三天（2026/2/26）(Tab商品部分的业务逻辑实现)
本文介绍了智慧商城中Tab导航栏和商品渲染的实现过程。首先讲解了Tab二级导航栏的开发要点，包括数据获取、子Tab搭建和可选链操作符的应用。然后详细说明了商品图片渲染的实现步骤，包括接口调用和数据管理。最后简要提及了无限加载功能的实现思路，通过分页请求实现商品列表的动态加载。文章采用组件化开发思路，强调了代码组织规范和Redux状态管理的适用场景。
2026-02-26 23:40:56
967
原创 小白学前端--第十二天（2026/2/25）Layout页面的功能实现
本文介绍了智慧商城首页用户信息获取功能的实现过程。首先在Redux的user模块创建userInfo字段和setUserInfo方法，通过API获取用户数据。在Layout组件中，根据token状态判断显示用户昵称或"请登录"提示，并添加点击跳转登录页的功能。最后通过CSS样式优化了用户交互体验，包括悬停效果和阴影动画。文章还提供了相关技术博客和Git代码仓库的参考链接。
2026-02-25 15:43:57
730
原创 小白学前端--第十一天（2026/2/24）（home-bottom部分搭建）
本文分享了智慧商城项目中的商品展示组件开发过程。首先介绍了GoodsCard组件的实现，包含商品图片、名称、价格等元素，采用flex布局和悬停效果。接着讲解了商品列表区域(home-bottom)的网格布局实现，使用grid-template-columns创建6列等距排列。最后详细说明了侧边工具栏(SliderToolBar)的开发要点，包括固定定位、滚动显隐控制和返回顶部功能。组件均采用React+Ant Design实现，注重代码复用性和用户体验，为后续数据交互奠定了基础。
2026-02-24 23:59:36
775
原创 小白学前端--第十天（2026/2/21）home-top部分搭建
摘要：作者分享了大三实习准备经历，并详细介绍了京东风格首页布局的实现方法。文章重点讲解了flex布局下商品分类区、轮播图和广告卡片三大模块的开发过程，包括数据渲染、样式设置和交互效果实现。通过Ant Design组件和CSS技巧，完成了响应式电商首页的搭建，最终效果可在GitCode查看完整代码。
2026-02-21 23:59:11
868
原创 小白学前端--第九天（2026/2/20）header设计
本文介绍了使用React和Ant Design构建电商网站首页Header部分的过程。作者首先分享了感冒康复后继续开发的近况，提醒读者注意身体健康。在技术实现上，详细讲解了如何通过Layout组件划分页面结构，并使用flex布局创建包含logo、搜索框和用户信息的三栏式Header。重点展示了渐变背景、阴影效果等CSS样式处理，以及Ant Design组件（Search、Avatar、Badge等）的具体应用。文章最后提供了完整的代码实现和最终效果展示，Header呈现为橙红色渐变背景，包含左侧logo、中
2026-02-20 23:11:11
1128
原创 网页设计--css之传统盒式布局与flex弹性布局（2026/2/19）
本文对比了传统盒式布局与Flex弹性布局的特点。传统布局通过float和position实现排列，存在高度塌陷、适配性差等问题。Flex布局通过display:flex创建弹性容器，具有flex-direction、flex-wrap等属性控制主轴排列方式，以及justify-content、align-items等属性实现灵活对齐。子项目可通过order、flex-grow等属性调整顺序和伸缩比例。Flex布局简化了响应式设计，是更现代的网页布局方案。文章最后预告将通过商城案例展示Flex布局的实际应用。
2026-02-19 19:02:33
1111
原创 react开发：ant design中ant design组件内套用ant design组件的样式问题（2026/2/18）
昨天在写代码的时候发现一个很奇怪的事情，ant design中ant design组件内套用ant design组件时被套用的组件className无法生效，详情请见下方代码：可以看到我在Search的enterButton属性内传入了一个 ant design的<Button>组件，并给他加上了search-button的绑定类名，可是最后生效的只有颜色图标等效果，类名的效果仿佛“消失”了。
2026-02-18 10:13:03
738
原创 小白爱探索--第一天（2026/2/9）搭建自己的QQ聊天机器人
今天我们来玩点有意思的，事情的起因是因为看到群里的大佬自己搞了个群机器人出来，觉得非常有意思，于是决定自己创一个群机器人，可惜技术差一点，目前成果达到了可以代理QQ号来回答聊天，就像这样！大家想不想跟我一样设计一个ai代理呢，话不多说，让我们开始今天的搭建吧！
2026-02-09 11:13:09
1246
原创 小白学前端--第七天（2026/2/7）一周小结
创作这件事情比我想象的要难的多，因为我是第一次给大家分型我的项目经验，而且我之前都是根据教程一步一步走的，现在自己创作需要我自己设计页面布局，自己根据文档列出功能，自己配置路由等等。不过这一周的创作也给我带来很多提升，有些问题比如说redux存储机制，我在学的时候并没有深入了解，当时只是想学会运用而已，而现在我在编写redux的模块时就会下意识地想redux为什么要既设计action又设计reducer呢？接下来的一周我也会努力创作的，而且准备每7天做个总结，感觉就像日记一样，三省吾身！
2026-02-08 09:47:33
64
原创 小白学前端--第六天（2026/2/7）智慧商城项目-1 （登录界面搭建）
本文介绍了智慧商城项目前端开发的优化过程。作者基于之前Vue项目的经验，重点优化了Axios请求配置和登录功能实现：1) 配置Axios基础URL和请求拦截器，添加必要的platform请求头；2) 重构登录表单字段，调整为符合后端要求的mobile和smsCode格式；3) 实现Token本地存储功能，通过Redux管理登录状态；4) 添加登录成功/失败的提示信息。文章展示了完整的代码实现过程，包括请求配置、表单改造、Token存储优化等关键步骤，最终实现了稳定的登录功能，并将项目开源供学习参考。
2026-02-07 19:54:38
1160
原创 小白学前端--第五天（2026/2/6）电商后台管理-1 （登录页面）
本文介绍了电商后台管理系统登录页面的开发过程。首先解决了项目配置问题，包括路径别名自动补全和Redux字段缺失。接着进行准备工作，安装Ant Design组件库和SCSS预处理器。然后详细展示了登录页面的静态实现，包括背景图层、表单设计和响应式布局。最后讲解了业务逻辑部分，包括API封装、Redux异步请求和表单验证处理。开发过程中遇到接口问题，作者建议更换后端接口继续开发。文章提供了完整的代码示例和实现思路，适合前端开发者参考学习。
2026-02-06 21:58:00
925
原创 小白学前端--第四天（2026/2/5）（别名路径配置）
如果你是和我一样的小白，建议你可以自己动手试一试敲一敲，发现问题我们也可以在评论区共同探讨！如果你是大佬，也欢迎给我指正错误提供建议，或是给我们这些新人一些职业路线规划帮助！接下来我准备借助黑马程序员开放的品优购电商平台接口，去自己设计一下属于自己的网站，欢迎大家继续关注我哦~让我们顶峰相见！
2026-02-05 08:00:00
281
1
原创 小白学前端--第三天（2026/2/4）项目搭建-2 (redux通信)
摘要：React项目中的Redux状态管理实践 本文介绍了React项目中Redux状态管理的实现方法。首先讲解了React组件间通信的三种方式：父子组件通信（props传值）、兄弟组件通信和跨层级组件通信。重点阐述了Redux的安装配置过程，包括创建store、modules模块划分，以及使用createSlice生成reducer和action。文章详细说明了Redux的工作流程：视图通过dispatch发起请求，store接收后由reducer处理并返回新值。最后展示了在项目入口文件中使用Provid
2026-02-04 18:54:32
1079
1
原创 小白学前端--第二天（2026/2/3）项目搭建-1 (项目创建、配置基础路由Router、axios请求的搭建)
本文介绍了React项目搭建的基础流程：1）使用create-react-app创建项目并整理目录结构；2）配置React Router实现页面路由，通过createBrowserRouter创建路由表并挂载到根组件；3）搭建axios请求模块，包括创建基础配置、请求/响应拦截器，并实现模块化导出。文章还预告了后续将分享token持久化和Redux状态管理的内容。整个教程循序渐进，适合React初学者快速上手项目搭建。
2026-02-03 19:42:39
718
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人