- 博客(155)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 浏览器缓存机制
这里说的不仅仅是我们常见的强缓存和协商缓存，还有浏览器自带的缓存机制，即使我们什么也没有配置也自带的隐式缓存（启发式缓存减少向服务器请求的的次数，也减少了服务器的压力页面加载速度更快，增加用户体验如果没有缓存机制，刷新页面的时候，不管是以什么样的形式刷新（前进/后退/普通刷新/强制刷新），那么每次浏览器都会去请求服务器的资源，想想是有多么的可怕，这样会大大的增加服务器的压力和带宽。
2025-05-06 19:41:16
1096
原创 实现一个瀑布流布局
借助属性来创建 4 列的布局，并使用column-gap设置列间距。每个 .img-container 使用 break-inside: avoid 来防止图片被分割。
2025-04-27 20:13:39
262
原创 Vue如何获取Dom
在Vue中获取DOM元素可以通过几种方法：1、使用模板引用（ref），2、使用事件绑定，3、使用生命周期钩子。这些方法各有优缺点，适用于不同的场景。本文将详细介绍这些方法的使用方式及其适用场景，帮助你更好地理解和应用它们。
2025-04-21 17:32:08
527
原创 Vue-组件的懒加载，按需加载
在Vue项目中实现组件的懒加载（也称为按需加载或代码分割），可以大大提升应用的加载速度和性能。懒加载主要通过Webpack的代码分割功能实现，特别是使用动态导入（import()语法）。为什么要使用懒加载？
2025-04-21 17:16:06
392
原创 Redux和VueX两个库的区别
vuex的流向：view——>commit——>mutations——>state变化——>view变化（同步操作）view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）redux的流向：view——>actions——>reducer——>state变化——>view变化（同步异步一样）
2025-04-20 21:55:36
644
原创 Vue如何实现样式隔离
CSS Modules 允许你在 Vue 组件中定义局部作用域的 CSS，这样可以避免全局样式的冲突在你的 Vue 组件中，创建一个<style>标签并添加module属性。2. 使用module属性生成的$style对象来引用类名。
2025-04-20 21:23:19
588
原创 React-useRef
然后这也是为什么要创建一个对象，而对象上近仅创建一个current属性来存储数据，正是为了让开发者在整个生命周期，拿到的始终是同一个引用，可以把它想象成当前组件域下的一个全局变量了，而修改数据仅仅在这个引用上的current属性修改。• setTimeout的回调函数对hook.memoizedState形成了闭包引用，而在setState之后，都会重新执行组件函数，setTimeout 的回调函数会捕获在 setTimeout 被创建时的状态的快照，而不是最新的状态。
2025-04-19 22:34:05
502
原创 React-useImperativeHandle (forwardRef)
在使用class组件的时候，我们可以通过传递第二个参数，传一个回调用函数，来让我们获取最新的state (在React 18以后，就算在class component里面，在setTimeout、原生事件回调里面，也是异步批量更新了)。在hooks里面，我目前只能通过useEffect，把当前state当作依赖传入，来在useEffect回调函数里面获取最新的state。通过以上的分析，我们可以大致了解了react异步批量更新的调度过程。在组件外部，只需传入ref属性，即可调用form组件提供的方法。
2025-04-19 22:28:19
544
原创 React-memo (useMemo, useCallback)
在react中，当我们setState之后，若值发生变化，则会重新render当前组件以及其子组件 (默认情况下)，在必要的时候，我可使用memo (class组件则对应shouldComponentUpdate、PureComponent)进行优化，来减少无效渲染。注意：只有在组件渲染发生了性能问题的时候，例如组件内容较为复杂，render过程比较慢，我们才使用memo (shouldComponentUpdate、PureComponent) 进行优化，否则你会得不偿失，恰得其反，反而造成性能的下降。
2025-04-19 22:24:07
428
原创 React-在使用map循环数组渲染列表时须指定唯一且稳定值的key
因为显式地把index设为key，和不设置key的效果是一样，这就所谓的就地复用原则，即react在diff的时候，如果没有key，就会在老虚拟DOM树中，找到对应顺序位置的组件，然后对比组件的类型和props来决定是否需要重新渲染。index作为key，不仅会在数组发生变化的时候，造成无效多余的渲染，还可能在组件含有非受控组件 (如input)的时候，造成UI渲染错误。key是一个特殊的属性，不会最终加在元素上面，也无法通过props.key来获取，仅在react内部使用。
2025-04-19 22:03:09
393
原创 React-请勿在循环或者条件语句中使用hooks
其他hooks的源码也是类似，以mountWorkInProgressHook创建当前hooks, 并且把hook的数据存到hook.memoizedState上，而在update阶段，则是依次读取hooks链表的memoizedState属性来获取状态 (数据)。或读写更新hook，若在条件或者循环语句使用hooks，那么在更新阶段，若增加或者减少了某个hook，hooks的数量发生变化，而React是按照顺序，通过next读取下一个hook，则导致后面的hooks。的形式存储，即是有序的。
2025-04-19 20:51:09
483
原创 TypeScript中Any和Unknown有什么区别
any: 完全禁用类型检查，灵活性高但安全性低，适合临时使用或迁移旧代码。unknown: 保留类型检查，强制显式处理类型，安全性高，适合需要动态类型但仍需类型安全的场景。在正式代码中，尽量使用 unknown 替代 any，以提高代码的类型安全性和可维护性。
2025-04-17 10:59:35
324
原创 高阶函数/柯里化/纯函数
本篇文章主要是介绍一下标题里面的概念，在面试的时候经常文档，结合阅读到的资料，结合本人的个人见解出品了该文章，如有写的不好的地方或理解有误的，还望阁下多多指教。
2025-04-12 20:04:12
307
原创 今日题目：介绍 HTTPS 握手过程
3.客户端验证证书是否合法，然后生成一个会话密钥，并用服务器的公钥加密密钥，把加密的结果通过请求发送给服务器。4.服务器使用私钥解密被加密的会话密钥并保存起来，然后使用会话密钥加密消息响应给客户端，表示自己已经准备就绪。1.客户端请求服务器，并告诉服务器自身支持的加密算法以及密钥长度等信息。5.客户端使用会话密钥解密消息，知道了服务器已经准备就绪。6.后续客户端和服务器使用会话密钥加密信息传递消息。2. 服务器响应公钥和服务器证书。
2025-03-30 22:32:50
109
原创 Vue 的 nextTick 是如何实现的？
2. Vue3 则是只考虑现代浏览器环境，直接使用 Promise 来实现微任务的包装，这样做的好处在于代码更加简洁，性能更高，因为不需要处理多种环境的兼容性问题。整体来讲，Vue3 的 nextTick 实现更加简洁和高效，是基于现代浏览器环境的优化版本，而 Vue2 则为了兼容性考虑，实现层面存在更多的兼容性代码。nextTick 的本质将回调函数包装为一个微任务放入到微任务队列，这样浏览器在完成渲染任务后会优先执行微任务。1. 优先使用 Promise，因为它是现代浏览器中最有效的微任务实现。
2025-03-30 22:31:50
269
原创 package.json和package-lock.json
package-lock.json是在npm(^5.x.x.x)后才有，中途有几次更改。我们可以随便找个项目看看 产生： 当我们在一个项目中npminstall时候，会自动生成一个package-lock.json文件，和package.json在同一级目录下。当我们下次再npm install时候，npm发现如果项目中有package-lock.json文件，会根据package-lock.json里的内容来处理和安装依赖而不再根据package.json。是自动生成的，我们使用。
2025-03-11 11:22:30
480
原创 npm 执行安装报错
主要的原因是 npm7 以上的版本，新增了一个对等依赖的特性，在以前的版本上，只会显示警告，但是还是可以安装成功，然而在新的版本是，npm 安装依赖则会直接报错，无法安装，这也是为了应用更加健壮而加的新的特性吧！参数，这个参数保持跟旧版本一样的安装模块，忽略对等依赖。如果要保持旧的安装模块方法，可以尝试。
2025-03-07 15:24:01
881
1
原创 React的Fiber架构
其中动态优先级呢，会给每一个任务都分配一个权重值，表示它的顺序，它的优先级，React在协调过程中，会动态调整任务的一个执行顺序，他会优先执行优先级比较高的任务，后执行优先级比较低的任务，这样的方案呢，解决了传统架构中，所有任务都是相同优先级的而且都是一次性执行的问题，从而提升了框架的加载性能；此外呢，Fiber架构还提供了很多其他的功能，比如说更好的动画支持，更好的浏览器渲染事件处理，更好的同步/异步渲染支持，更好的可访问性支持，React推出Fiber，是为了解决某些性能问题，并提供一些新的功能；
2024-12-27 13:58:58
206
1
原创 代码随想录---算法训练营---总结
其实对于一个前端JavaScript开发工程师来说，对算法要求不是很高，平常的工作中，顶多就写写递归，写写深搜和广搜，其他的方法真的对于我来说很少接触到，再加上又不是科班出身，工作了这么多年，上学时学的东西又还给老师了，所以一刷代码随想录很吃力，真的特别吃力，我后续可能还会再多刷几遍代码随想录，不断回头，巩固，直到能独立完成算法题才可以。我总共参加了60天这个代码随想录的算法训练营，每天按照计划逐步进行算法训练，卡尔老师讲的很好，要是有不理解的，偶尔会给他提建议，提问题。骑马找马，不能轻易放弃。
2024-09-03 10:47:32
415
原创 打卡第60天------图论
一刷的时候，能理解 原理，知道Bellman_ford 解决不同场景的问题。今天大家会感受到 Bellman_ford 算法系列在不同场景下的应用。二刷的时候自己尝试独立去写，三刷的时候 才能有一定深度理解各个最短路算法。一、Bellman_ford 队列优化算法（又名SPFA）尽管前面的道路很困难，但是依然要坚持下去✊。，照着代码随想录能抄下来代码就好，就算达标。三、bellman_ford之单源有限最短路。二、bellman_ford之判断负权回路。
2024-08-30 22:20:44
1095
1
原创 打卡第59天-------图论
不要放弃，交托给上Di，求shen保守我的平安与顺利。一、dijkstra（堆优化版）精讲。二、Bellman_ford 算法精讲。
2024-08-30 22:17:33
326
原创 打卡第58天------图论
最近图论的没有好好学习，我预备去参加一个专门针对前端的训练营，继续骑马找马。祈祷上帝帮助我实现两份工作的无缝衔接。后面几天都是最短路系列了，对于最短路系列，我的建议是，如果第一次接触最短路算法的话，对于一刷的录友们，不要强行去逼迫自己去学透，很难刚接触到最短路算法就学透。，二刷的时候 再尝试自己去写出来。三刷的时候，差不多才能把最短路吃透。拓扑排序看上去很复杂，其实了解其原理之后，代码不难。能看懂原理，能照着代码随想录把代码抄下来就可以了。二、dijkstra（朴素版）精讲。
2024-08-30 22:14:17
562
原创 打卡57天------图论(两种算法)
今天在学习prim 和 kruskal的同时，也要清楚这两个算法的区别所在。最近的算法题都太高深莫测了，对于一个前端工程师来说，要求没有那么严吧。二、kruskal算法精讲。一、prim算法精讲。
2024-08-28 21:42:01
1238
原创 打卡56天------图论(冗余连接)
图论的题对于前端工程师很少用到，我还是先去做做react的常用面试题吧。上面两道题目是不是感觉做出自信了，感觉并查集不过如此？并查集应用类题目，关键是如何把题意转化成并查集问题。来这道题目 给大家适当一些打击， 难度上来了。
2024-08-27 22:21:18
519
原创 打卡55天------图论(并查集)
图论这里我学的不是很好，作为一名JavaScript前端开发工程师，我能说我基本上在工作中都没用到过吗？
2024-08-26 11:01:43
638
2
原创 打卡53天------图论(应用题)
经过上面的练习，大家可能会感觉 广搜不过如此，都刷出自信了，本题让大家初步感受一下，广搜难不在广搜本身，而是如何应用广搜。深搜有细节，同样是深搜两种写法的区别，以及什么时候需要回溯操作呢？简单题，避免大家惯性思维，建议大家先独立做题。二、有向图的完全可达性。
2024-08-24 09:14:18
355
原创 打卡52天------图论(应用题)
需要点优化思路，建议先自己读题，相处一个解题方法，有时间就自己写代码，没时间就直接看题解，优化方式 会让你 耳目一新。同样优化思路也会让你耳目一新，自己想比较难想出来。基础题目 可以自己尝试做一做。和上一题差不多，尝试自己做做。
2024-08-24 09:12:23
566
原创 打卡51天------图论(深搜/广搜应用题)
最近真的太忙了，没时间刷题，白天工作，我在church的Choir事工还不想停止，需要我在工作、生活、church做一个平衡，周六慢慢补上吧，交托给上Di。，弄清楚为什么会超时，因为你第一次 幸运 没那么想，第二次可就不一定了。如果自己做的录友，题目通过了，也要仔细看第一种写法的超时版本。熟练掌握这两种写法 以及 知道区别在哪里，才算掌握的深搜。注意广搜的两种写法，第一种写法为什么会超时，本题就是基础题了，做过上面的题目，本题很快。注意深搜的两种写法，
2024-08-22 22:50:11
402
原创 打卡50天------图论
另外，其实很多dfs写法，没有写终止条件，其实终止条件写在了， 下面dfs递归的逻辑里了，也就是不符合条件，直接不会向下递归。了解一下深搜的原理和过程，其实对于深搜和广搜我自己也写过一篇博客，是我个人的理解，但是没有卡尔总结的全面，如此看来真的是小巫见大巫了。终止条件很重要，很多同学写dfs的时候，之所以容易死循环，栈溢出等等这些问题，都是因为终止条件没有想清楚。正式开启图论了，作为一个前端工程师，这个代码随想录真的刷新了我对于算法的认知，每天都在学习新东西。可以访问的所有节点的列表（即从节点。
2024-08-21 21:53:50
572
原创 打卡第49天------单调栈
这几天工作量实在是太大了，白天没时间刷题，只好晚上搞这个事儿了。祈祷实现两份工作的无缝衔接。个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为 1。的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。求在该柱状图中，能够勾勒出来的矩形的最大面积。个非负整数表示每个宽度为。2.柱状图中最大的矩形。
2024-08-20 22:08:50
299
原创 打卡第48天------单调栈
因为我们遍历数组的时候，我们不知道之前都遍历了哪些元素，以至于遍历一个元素找不到是不是之前遍历过一个更小的，所以我们需要用一个容器（这里用单调栈）来记录我们遍历过的元素。是按数组遍历顺序，这个数字之后的第一个比它更大的数，这意味着你应该循环地搜索它的下一个更大的数。，因为在遍历的过程中需要用一个栈来记录右边第一个比当前元素高的元素，优点是整个数组只需要遍历一次。例如本题其实就是找找到一个元素右边第一个比自己大的元素，此时就应该想到用单调栈了。如果不存在下一个更大元素，那么本次查询的答案是。
2024-08-19 23:02:00
493
原创 打卡第46天------动态规划(回文串)
想要快点把每一道题给练会，在面试的时候跟面试官对答如流，这家公司实在是让我没有继续待下去的欲望了，天天祈祷上Di，求Shang帝帮助我实现两份工作的无缝衔接。交托仰望。今天 我们就要结束动态规划章节了，动态规划的题目还是挺难的，贪心和动态规划对我来说都比较困难，对于我这种刷题小白来说实在是一脸懵呀。
2024-08-17 20:38:39
858
原创 打卡第45天------动态规划(子序列&字符串)
这一波裁员潮实在是太厉害了，是我职业生涯最可怕的一波了，每个周都有人陆陆续续撤退，这就是社会的残酷之处呀。
2024-08-16 21:32:41
368
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人