weixin_43464194的博客

DNS解析DNS 解析根据 host 域名找到具体的 IP 地址，中间会经历很多的环节,首先会查找浏览器的缓存，如果找不到就去查找系统自身的 DNS 缓存，在没有就去查找系统的 hosts 文件，再找不到就去本地域名服务器提供商查询根域名服务器，如果还是找不到就去查找 com 顶级域名服务器，最后会去权限域名服务器查找，都没有找到就返回报错信息。这就是 DNS 查找的过程，其中任何一个环节慢了都会影响后续的操作。TCP连接在通过 DNS 解析到目标服务器 IP 地址后，就可以建立网络连接进行资源的访

谷歌指定的性能指标标准，简化到了三个。加载性能LCP，交互性FID，视觉稳定性CLS。只需要做好这三个，网站的性能基本上就ok。测量web vitals的工具有很多，比如lighthouse、web-vitals、浏览器插件web vitals.

通俗解释就是useDeferredValue传入一个参数，这个参数是一个任意类型的值，例如我们就传入一个使用useState定义的变量value，value的初始值是字符串’abc’，当我们修改value时，他就会延迟返回一个最新的value值，类似防抖节流函数。也就是说批处理支持处理的操作范围扩大了：Promise，setTimeout，native event handlers 等这些非 React 原生的事件内部的更新也会得到合并。因此，用户也将更快地看到内容，并更快的开始与之交互。

分析此commonjs导出结果。

GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)path=/search(服务端发送到客户端的暂存数据)Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)

【代码】SSE 流式传输。

react将一个大渲染任务切成一个个小任务，每个小任务只负责一小部分dom更新，每小部分在浏览器空闲的时候去更新（requestIdCallback v16实现, requesetHostCallbcak （内部通过setTimeout来兼容）调用message channel 实现v18）2. react的时间切片。如下图，一帧的执行过程。

旧：expires， expires返回的是服务器的时间，但判断的时候用的却是客户端的时间，加入手动改变了客户端的时间，会导致缓存时间判断出错，这也是引入Cache-Control:max-age指令的原因之一。优先级：ETag与If-None-Match > Last-Modified与If-Modified-Since, 同时存在时, 前者覆盖后者.新：cache-control， max-age设置的是相对缓存时间开始往后的多少秒，因此不再受日期不准确情况的影响。

如果使用route.lazy的方式，可以使用这个 useNavigation \来判断路由是否是loading的状态。当资源真正被需要时才加载（个人理解，大概就是这么个意思哈）对比：route.lazy不支持callback.页面跳转时navigation为loading。

表格无缝滚动动态列表格无缝滚动实现效果实现思路通过定时器向上移动。当需要滚动时，定义两个ref，内容一样，第一个滚动完，第二个接上去实现无缝滚动（思路同轮播图）。使用示例。

Array.reduce() 的实战使用场景。

三种状态pending 等待fulfilled 成功rejected 失败实例的两个过程pending -> fulfilled : Resolved（已完成）pending -> rejected：Rejected（已拒绝）实例方法then状态发生改变的时候触发。两个参数。第一个参数是resolve的时候走，第二个参数是reject的时候触发catch 一个参数，功能类似then第二个参数finally 没有参数，失败成功都会触发then示例// false。

当然，创建这样的数据结构还是为了使用的，每种 hooks api 都有不同的使用这些 memorizedState 数据的逻辑，有的比较简单，比如 useRef、useCallback、useMemo，有的没那么简单，比如 useState、useEffect。后来就引入了 fiber 架构，它以链表的形式以循环来模拟递归组件树，而放弃了递归调用，因为循环可以随时被中断，可以灵活的暂停、继续和丢弃执行的任务（requestIdleCallback API来实现）。（更新差异的，渲染真实的dom）

【代码】利用map，set数组去重。

事件循环又叫消息循环，是浏览器渲染主线程的工作方式。在 chrome 源码中，会开启一个不会结束的 for 循环 for（::）,每次循环从消息队列取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。过去把消息队列简单分为宏任务和微任务，现在这种说法已经无法满足浏览器复杂的环境，取而代之的施一公更灵活多变的处理方式。根据 w3c 的官方解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。

问题？为啥合成线程不直接给硬件，要放到浏览器的 GPU 进程中转一下呢？渲染进程（沙盒）：（1）渲染主线程（2）合成线程合成线程和渲染主线程在浏览器的渲染进程里，渲染进程在沙盒里(安全)，隔离了硬件，无法调用系统.什么是 reflow?reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 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