- 博客(46)
- 收藏
- 关注
RSS订阅原创 前端性能优化之性能指标篇
首屏时间的标准不是定死的，而是根据当前系统对时间是否敏感来决定的，比如 C 端系统 PC官网、H5 页面等，对首屏要求较高，而像 B 端管理后台，对首屏时间就没那么敏感，而且一般企业内部用的系统，其访问的网络环境一般都比较稳定，所以对首屏时间要求会低一些。一般来说，首屏时间在 1s 内，给用户的感觉就是非常流畅，在 1s 内的话，无论是 300ms 还是 500ms，其实用户感觉不出来太大的差别，但是如果首屏时间超过 2.5s，用户感觉就会很慢，体验很差，用户流失率也会嘎嘎往上升。
2025-12-31 09:54:26
640
原创 axios架构设计和原理
基于 fetch 封装, 兼具 fetch 与 axios 的特点, 旨在为开发者提供一个统一的 api 调用方式, 简化使用, 并提供诸如缓存, 超时, 字符编码处理, 错误处理等常用功能。的网络请求库，它可以用于浏览器和 nodejs 当中。在不同环境，它所使用的请求API是不同的，在 nodejs 环境使用的 node 原生的。模块，而在浏览器中使用的是。
2025-12-29 09:49:24
695
原创 前端性能优化之性能瓶颈点，Web 页面加载全流程解析
对于 Web 页面首屏优化，有时候明明感觉自己做了很多事情，比如精简了首屏内容，合并了请求资源，优化了项目打包配置，也对图片进行了压缩，但最后的首屏时间还是没有降低下来，这是为什么呢？要解答这个问题，需要先了解页面加载的全流程。
2025-12-25 08:38:16
822
原创 前端性能优化之Webpack篇
虽然现在vite比较火，但很多公司中还是存在一些将webpack作为构建工具的前端老项目。最近在优化公司的一个webpack项目，所以整理了webpack常见的优化手段，一起来看看吧！
2025-12-22 21:38:10
923
原创 前端高频面试题：深拷贝和浅拷贝的区别？
对于前端同学来说，对象的深拷贝和浅拷贝可以说是面试中最火热的题目之一了，今天我们一起来把它盘明白。深拷贝和浅拷贝都是对对象进行拷贝，其主要区别是，在对象拷贝时，对引用数据类型的处理方式。
2025-12-18 21:06:25
631
原创 手把手教你写一个VSCode插件，从开发到发布全流程
VSCode几乎是前端开发人员的标配，其插件开发基于TypeScript与Node.js，通过扩展API增强编辑器功能。开发者可自定义命令、主题、语法支持等，快速构建个性化工具，提升编码效率与体验。
2025-12-17 08:08:59
671
原创 前端高频面试题之Promise相关方法
Promise一直是前端面试中的热点，下面给大家介绍下Promise的相关方法。调用时需要传入一个promise数组，我们称它为promiseArr，然后会返回一个新的Promise，我们把它称为p如果promiseArr中有一个Promise失败，则走入p的catch回调中，并拿到对应的错误对象。如果promiseArr里面全成功，则会走入p的then方法中，并能拿到之前传入的promiseArr对应的promise结果。race的意思是赛跑，哪个Promise跑的快，也就是哪个Promise。
2025-12-14 22:20:07
575
原创 前端高频面试题之手写Promise
Promise译为 “承诺”，是 JavaScript 中用于处理异步操作的解决方案。它代表一个异步操作的最终完成（或失败）及其结果值。
2025-12-11 22:06:01
885
原创 开发提效利器 - 用好Snippets
snippets意思是片段，在vscode中可以通过命令，可以定义全局级（global）、项目级（Project）、语言级（Language）代码片段，可以按照自定义的规则来快速生成一段代码，进而大幅提升我们的开发效率，可谓是工作提效利器。
2025-12-09 22:24:48
753
原创 VSCode有哪些好用的插件和快捷键？
先来说下vscode轻量级和灵活性vscode走的是插件化的设计思路，因此它本身软件比较轻量，其它功能通过插件进行扩展，我们也可以自己动手去写插件，集轻量性和灵活性于一身。强大的插件生态系统和活跃的社区vscode拥有十分强大的插件生态系统，各种常见的功能都能很容易找到对应的插件，满足我们日常的开发可以说是绰绰有余啦！而且它的社区非常活跃，有问题可以去社区寻找答案。跨平台：在WindowsmacOS和Linux三端的操作系统上都能用。Git支持vscode提供了图形化的git操作，可以很方便的进行。
2025-12-07 22:15:02
753
原创 超详细的 EventLoop 解读及模拟实现
浏览器为了对任务调度进行更为精确的控制，于是将任务拆分成宏任务和微任务两类。执行主执行栈。清空微任务队列。执行回调、事件处理以及刷新页面。取出一个宏任务放入主执行栈中执行，然后按此步骤如此循环。
2025-12-04 22:43:12
887
原创 Vue.js 为什么要推出 Vapor Mode?
Vapor Mode是Vue 3.6推出的一个新的高效渲染模式，它实现了无虚拟DOM并大幅度提升性能。先了解下VueVue 1.0：直接操作真实 DOM。Vue 3.6 之前：生成虚拟 DOM，更新时通过比对前后虚拟 DOM 的变化，来更新对应的真实 DOM。Vue 3.6: Vapor Mode 模式，。
2025-12-02 21:35:59
693
原创 前端高频面试题之CSS篇（二）
本文介绍了多种CSS布局实现方法： 两栏布局（左固定右自适应）：可通过flex（灵活但不兼容IE9）、float（简单但易塌陷）、grid（强大但不适合一维）或绝对定位（精确但响应差）实现。 三栏布局（左右固定中自适应）：除上述方法外，还包含经典圣杯布局（相对定位+负边距）和双飞翼布局（嵌套div+负边距），需注意DOM顺序。 水平垂直居中：文本类用line-height+text-align；flex方案最简洁；绝对定位结合transform或负margin适用于非文本元素。 不同方案各有优劣，需根据兼容
2025-11-30 23:12:20
871
原创 前端高频面试题之CSS篇（一）
技术就是我们常说的雪碧图，通过将多张小图标拼接成一张大图，然后通过 CSS 的和属性来显示图像的特定部分，能有效的减少HTTP请求数量以达到加速显示内容的技术。：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。浮动元素，float除none以外的值；绝对定位元素，；display；overflow除了visible以外的值（包含浮动元素。不被浮动元素覆盖。BFC 会阻止外边距折叠，可解决margin 塌陷问题。
2025-11-27 22:22:01
1046
原创 前端性能优化之CSS篇
当涉及到网站的性能优化时，CSS 的优化是一个非常重要的方面。如果你的 CSS 太复杂，那么你的网站可能会像一个慢吞吞的乌龟一样缓慢地加载和渲染，影响用户的留存网站的转化率以及网站的体验和传播等，所以对于 CSS 优化还是非常需要的，本文将介绍一些 CSS 性能优化的技巧，帮助你在编写 CSS 代码时提高性能。本文主要通过CSS 加载性能优化CSS 选择器性能优化CSS 属性性能优化CSS 动画性能优化和CSS 渲染性能优化这些方向介绍了 CSS 的性能优化技巧。
2025-11-23 21:04:38
770
原创 同事问我，最近前端面试手写考什么
最近有同事出去看机会，问我最近前端面试问什么，于是我帮他整理了一波最近比较火的前端手写面试题。最近有同事出去看机会，问我最近前端面试问什么，于是我帮他整理了一波最近比较火的前端手写面试题。
2025-11-19 21:11:55
619
原创 前端高频面试题之Vue-router篇
所谓单页应用（Single Page Application, SPA），就是整个应用只有一个 html 页面，即index.html，html 加载后通过 javascript 动态创建和渲染内容，用户点击时，通过监听客户端路由变化去局部更新 DOM，而无需刷新页面就能达到页面切换的目的。特点客户端渲染 + 前端路由。优点用户体验好。服务端资源占用少。开发效率高（前后端分离开发模式）。缺点首屏加载慢。SEO不友好。内存占用多（可能导致内存泄漏）。
2025-11-17 22:00:02
875
原创 前端高频面试题之Vuex篇
以上是整理的 Vuex 的高频面试题，如有错误或者可以优化的地方欢迎评论区指正，后续还会更新 Vue-router 相关面试题。
2025-11-14 21:15:54
914
原创 前端高频面试题之Vue（高级篇）
Vue 的 diff 算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式 + 双指针的方式进行比较。先比较是否是相同节点。相同节点比较属性,并复用老节点。比较儿子节点，考虑老节点和新节点儿子的情况。优化比较：头头、尾尾、头尾、尾头。比对查找进行复用。Vue3 在这个比较过程的基础上增加了最长递增子序列实现diff算法。找出不需要移动的现有节点。只对需要移动的节点进行操作。最小化 DOM 操作次数。
2025-11-13 21:00:45
965
原创 前端高频面试题之Vue（初、中级篇）
每次使用组件时都会对组件进行实例化操作，并且调用data函数返回一个对象作为组件的数据源。这样可以保证多个组件间数据互不影响。以上是整理的 20+ Vue 初、中级的高频面试题，如有错误或者可以优化的地方欢迎评论区指正，后续还会更新 Vue 面试题高级篇。
2025-11-11 21:32:04
640
原创 面试官：首屏加载速度慢怎么办？
在前端面试中，首屏优化一直是常见的前端性能面试题。我们可以先用来统计下页面的DOM 加载时间。旧版统计方法，使用新版统计方法，使用如果DOM加载时间。
2025-07-21 12:54:12
822
原创 CSS关键字：initial、revert、unset傻傻分不清
每个CSS属性都有一个默认值，比如的默认值是margin的默认值是auto，这些常见的属性我们都知道它们的默认值，但是有些不常见的属性，我们可能就不知道它们的默认值了，那么如何获取这些属性的默认值呢？这时候就要用上initialrevertunset这三个CSS关键字了。有些前端开发者可能分不清3个关键字的区别，下面详细介绍下。
2025-07-17 15:27:27
1004
原创 JavaScript异步编程的五种方式
异步可以理解为把一个任务分成了两段，先执行第一段，转而去执行其它任务，等准备完毕后，再回过头来执行第二段。比如发一个http请求，第一段就是创建对象，做好请求配置后向后端发送请求，然后就去执行其他任务(其它 js 代码)了，第二段就是拿到后端响应后，执行对应的回调函数。这种不连续的执行，叫做异步，反之，连续的执行，叫做同步。
2025-06-30 23:38:07
1281
原创 前端如何动态执行JavaScript代码？
eval: 同步，当前作用域；new Function: 同步，全局作用域；script标签: 同步，全局作用域；setTimeout: 异步，全局作用域。还简单介绍了动态执行的应用场景，比如webpack的devtool配置使用到了evaltapable中使用。
2025-06-17 08:12:44
692
原创 JavaScript如何实现复制图片功能？
最近开发中遇到一个需求，就是用户希望能通过直接点击按钮复制图片，然后就可以很方便的把图片发送到班群中，于是就有了复制图片的需求。那么如何通过JavaScript来实现复制图片呢？
2025-03-13 21:31:04
1977
原创 axios架构设计和原理
基于 fetch 封装, 兼具 fetch 与 axios 的特点, 旨在为开发者提供一个统一的 api 调用方式, 简化使用, 并提供诸如缓存, 超时, 字符编码处理, 错误处理等常用功能.的网络请求库，它可以用于浏览器和nodejs当中。在不同环境，它所使用的请求API是不同的，在nodejs环境使用的node原生的。模块，而在浏览器中使用的是。axios是一个基于。
2025-01-24 17:12:39
692
原创 由于请求的竞态问题，前端仔喜提了一个bug
在平常的开发过程中，你可能会遇到这样一个bug。测试：我在测一个输入框搜索的功能时，告诉你通过输入框输入的内容，和最终通过输入内容搜索出来的结果对不上。前端：我是通过调用后端接口拿到的数据，这明显是后端返回的结果有问题啊，找后端去！后端：通过Postman一通自测后说道，结果没问题啊！找前端去！前端：我来试试看！一顿输入后发现，没问题啊，这bug我复现不出来啊！测试：这个bug是偶现的！前端：一通排查后发现，bug的直接原因是网络问题，根本原因是，导致的数据不一致（喜提一个有意思的bug）。
2025-01-23 23:23:31
1816
原创 当window.open被ios安全机制拦截，我掏出3种方案，终于跳转成功！
最近在日常开发中遇到了一个window.open的兼容问题，就是在ios浏览器中，使用window.open时被ios的安全机制拦截，于是找到了3种解决方案，最终成功跳转。
2025-01-18 21:01:17
1877
原创 为实现前端截图功能，我的dom-to-image踩坑之旅！
最近产品要求做一个截图的功能，其背景是我们做的是一个教育类的网页，我们会统计学员的做题、听课、任务等数据，然后按照班级进行排名，然后班主任需要把这些数据发到班级群里，所以需要一个截图的功能。于是我做了下兼容，在图片访问失败的时候，给一张默认图片，然后用一个变量统计图片正常加载的个数，等所有图片都正常加载完后再渲染图片。经测试发现，某些ios手机下会生成图片失败，于是也在网上找了下方案，最后通过连续调用两次。最终在网上找到了一个方案，那就是修改源码，增加。去生成图片，虽然生成的图片比较小，只有。
2025-01-14 23:05:23
1608
2
原创 一道字节前端面试题，我直接把Promise的使用功力秀面试官一脸！
今天我们来研究一道字节跳动的前端面试题，即。题目是这样的：要求用JS实现一个带并发限制的异步调度器Scheduler，保证同时运行的任务最多有两个。它给出的初始代码如下，要求我们实现addTask方法，使之输出结果满足要求。schedulerstartstartaddscheduleraddTasktimename任务执行的时间任务名字我们再来依次分析下输出结果1000ms后输出1500ms后输出21100ms后输出31100ms500ms600ms1100ms1400ms后输出4500ms600ms。
2025-01-11 22:13:14
541
原创 vue3的12种组件通信方式
对于日常使用vue3开发项目的前端小伙伴来说，组件通信方式可以说是必会的基本功，今天带大家一起盘下vue3的通信方式。我们这里按照组件的关系来划分。总共包含12中组件通信方式。
2025-01-09 23:54:44
2034
原创 前端调试篇（二）：如何在各种场景调试vue3源码？
对于要学习vue3源码的前端小伙伴来说，通过调试vue3源码来学习是一种不错的方法，本期来介绍下调试方法。
2025-01-04 23:57:01
1471
原创 不是哥们，我的console.log突然打印不出东西了！
大家好，我是小寒！一枚默默搬砖的前端开发者！在上个月的时候的一天早上，我还在一如既往的写代码，突然调试的时候，，于是我开始bug排查大法。devServer经过这一系列操作下来，发现并没有什么卵用，盯着那些代码看，眼睛都看花了都没看出来有什么问题，让同事帮忙看了一下，还是没发现问题，后面还是用浏览器的无痕模式才发现端倪。在无痕模式下，发现是可以正常打印的，所以首先就怀疑是的问题，于是在正常模式下，把所有chrome扩展插件全部禁用，果然发现可以正常打印了，然后利用二分法。
2024-12-27 10:52:29
2263
原创 token泄漏产生的悲剧！Vant和Rspack被注入恶意代码，全网大面积被感染
2024年12月19号，在前端圈发生了一件匪夷所思的事情，前端开源项目Vant的多个版本被注入恶意代码后，发布到了npm上，导致全网大面积被感染。
2024-12-20 08:40:01
1066
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人