- 博客(20)
- 收藏
- 关注
RSS订阅原创 Vue UI组件的二次封装透传问题
如果要基于UI组件进行二次封装，我们是要基于原UI组件的属性和事件进行扩展。保证原UI的属性事件都不受影响。如果是react，直接解构赋值即可，vue需要考虑以下几点。以ElementPlus的el-table组件为例来演示一下。2. 透传动态插槽，处理插槽以及插槽作用域等，利用$slots。
2025-03-07 14:43:33
305
原创 性能优化详细篇
谷歌指定的web性能指标标准，简化到了三个。加载性能LCP, 交互性FID，视觉稳定性CLS。tree shaking（树摇），两种方式。
2025-02-24 11:10:18
404
原创 如何判断是不是Promiselike+手写Promise微队列
{// 随便创建一个节点，观察内容变动。手动给个变动，从而触发回调} else {// 最终如果啥都不支持，没办法只能用定时器来模拟，虽然定时器是宏任务不准确。
2025-02-24 10:49:27
410
原创 记录一道经典面试题，浏览器从输入url到页面成像经历了什么
DNS解析DNS 解析根据 host 域名找到具体的 IP 地址，中间会经历很多的环节,首先会查找浏览器的缓存，如果找不到就去查找系统自身的 DNS 缓存，在没有就去查找系统的 hosts 文件，再找不到就去本地域名服务器提供商查询根域名服务器，如果还是找不到就去查找 com 顶级域名服务器，最后会去权限域名服务器查找，都没有找到就返回报错信息。这就是 DNS 查找的过程，其中任何一个环节慢了都会影响后续的操作。TCP连接在通过 DNS 解析到目标服务器 IP 地址后，就可以建立网络连接进行资源的访
2024-09-26 13:43:24
194
原创 前端性能指标
谷歌指定的性能指标标准，简化到了三个。加载性能LCP，交互性FID，视觉稳定性CLS。只需要做好这三个，网站的性能基本上就ok。测量web vitals的工具有很多，比如lighthouse、web-vitals、浏览器插件web vitals.
2024-09-19 14:49:32
472
原创 React升级18总结
通俗解释就是useDeferredValue传入一个参数，这个参数是一个任意类型的值，例如我们就传入一个使用useState定义的变量value，value的初始值是字符串’abc’，当我们修改value时，他就会延迟返回一个最新的value值，类似防抖节流函数。也就是说批处理支持处理的操作范围扩大了：Promise，setTimeout，native event handlers 等这些非 React 原生的事件内部的更新也会得到合并。因此，用户也将更快地看到内容，并更快的开始与之交互。
2024-09-19 11:23:32
916
原创 一文清晰搞懂requestAnimationFrame与requestIdCallback区别与执行时间顺序
react将一个大渲染任务切成一个个小任务，每个小任务只负责一小部分dom更新，每小部分在浏览器空闲的时候去更新（requestIdCallback v16实现, requesetHostCallbcak （内部通过setTimeout来兼容）调用message channel 实现v18）2. react的时间切片。如下图，一帧的执行过程。
2024-09-10 15:13:43
497
原创 浏览器缓存总结
旧：expires， expires返回的是服务器的时间，但判断的时候用的却是客户端的时间，加入手动改变了客户端的时间，会导致缓存时间判断出错，这也是引入Cache-Control:max-age指令的原因之一。优先级：ETag与If-None-Match > Last-Modified与If-Modified-Since, 同时存在时, 前者覆盖后者.新：cache-control， max-age设置的是相对缓存时间开始往后的多少秒，因此不再受日期不准确情况的影响。
2024-07-14 10:05:23
934
原创 Intersection Observer API+图片懒加载+ vue+react路由、组件懒加载
如果使用route.lazy的方式，可以使用这个 useNavigation \来判断路由是否是loading的状态。当资源真正被需要时才加载（个人理解，大概就是这么个意思哈）对比：route.lazy不支持callback.页面跳转时navigation为loading。
2024-07-11 10:36:14
355
1
原创 react+ts实现表格的无缝滚动（大屏展示，支持自定义配置，动态列配置等）
表格无缝滚动动态列表格无缝滚动实现效果实现思路通过定时器向上移动。当需要滚动时，定义两个ref，内容一样，第一个滚动完，第二个接上去实现无缝滚动（思路同轮播图）。使用示例。
2024-05-22 11:20:37
910
原创 Promise总结与实战-＞处理并发与控制并发
三种状态pending 等待fulfilled 成功rejected 失败实例的两个过程pending -> fulfilled : Resolved（已完成）pending -> rejected：Rejected（已拒绝）实例方法then状态发生改变的时候触发。两个参数。第一个参数是resolve的时候走，第二个参数是reject的时候触发catch 一个参数，功能类似then第二个参数finally 没有参数，失败成功都会触发then示例// false。
2024-05-21 11:24:04
626
原创 五分钟搞懂react 的Fiber以及ref hooks原理及Object.seal()
当然，创建这样的数据结构还是为了使用的，每种 hooks api 都有不同的使用这些 memorizedState 数据的逻辑，有的比较简单，比如 useRef、useCallback、useMemo，有的没那么简单，比如 useState、useEffect。后来就引入了 fiber 架构，它以链表的形式以循环来模拟递归组件树，而放弃了递归调用，因为循环可以随时被中断，可以灵活的暂停、继续和丢弃执行的任务（requestIdleCallback API来实现）。（更新差异的，渲染真实的dom）
2024-05-21 11:21:45
1149
原创 事件循环总结
事件循环又叫消息循环，是浏览器渲染主线程的工作方式。在 chrome 源码中，会开启一个不会结束的 for 循环 for（::）,每次循环从消息队列取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。过去把消息队列简单分为宏任务和微任务，现在这种说法已经无法满足浏览器复杂的环境，取而代之的施一公更灵活多变的处理方式。根据 w3c 的官方解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。
2024-03-29 17:27:04
654
1
原创 浏览器渲染原理
问题？为啥合成线程不直接给硬件，要放到浏览器的 GPU 进程中转一下呢？渲染进程（沙盒）：（1）渲染主线程（2）合成线程合成线程和渲染主线程在浏览器的渲染进程里，渲染进程在沙盒里(安全)，隔离了硬件，无法调用系统.什么是 reflow?reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。
2024-03-29 17:22:44
994
1
原创 js执行顺序一道题
setTimeout(() => {//执行后 回调一个宏事件console.log(‘内层宏事件3’)}, 0)console.log(‘外层宏事件1’);async function fun1() {console.log(“async1”)await fun2()console.log(“aysnc11”)}async function fun2() {console.log(“async2”)await func3()new Promise((resolve) =&g
2021-08-09 14:15:47
167
原创 Promise的方法
// Promise的方法 .all(), .race(), .reject(), .resolve(),// Promise的prototype原型链方法 .then(), .catch// promise三种状态pending fulfilled rejected// promise调用resolve方法，Promise变为操作成功状态，执行.then的第一个参数函数；调用reject执行.then的第二个参数函数或者.catch方法// Promise.all可以将多个Promise实例包装成
2021-08-09 14:13:22
450
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人