浏览器性能优化
Navigation Timing navigationStart 前一个文档卸载时间戳 => 无上一层页面时，从 fetchStart 开始 unloadEventStart / unloadEventEnd 与前一个网页 unload 时的时间戳 => 无上一个网页，默认 0执行完毕的时间戳 redirectStart / redirectEnd 通常用来计算 redirect 完成的时间 worker worker 初始化时间 fetchStart 整个全新开始页面的 start浏览器网络层 ready 的时间 domainInLookupStart / domainInLookupEnd DNS 连接的开始结束 connectStart / connectEnd TCP 连接的开始结束 connectEnd - domainInLookupStart 为网络的建立连接过程 secureConnectionStart: 若使用 https 会有此过程，建立安全链接 requestStart /...
CDN
引入 CDN 的全称是 (Content Delivery Network)，即内容分发网络。 组成: 分布式存储 + 负载均衡 + 网络请求的重定向 + 内容管理 + 全局的网络流量管理，后两项为核心。内容服务基于缓存服务器，也称作代理缓存。 将源站的资源缓存到位于全球各地的 CDN 节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都从源站获取。 解决由于网络带宽小、用户访问量大、网点分布不均等原因，避免网络拥塞、缓解源站压力，提高用户访问网站的响应速度。 CDN 回源 回源是 CDN 领域的专用词，指的是 CDN 缓存服务器从源站获取所需要分发的资源。 CDN 缓存服务器一般是不会主动回源的，只有在缓存服务器缺少用户请求的资源时（可能是该资源 CDN 缓存服务器没有缓存，也可能是缓存过期），CDN 缓存服务器才会向源站发起请求，获取所需要分发的资源。 通常有三种情况: CDN 节点没有对应资源时主动到源站获取资源 缓存失效后，CDN 节点到源站获取资源 CDN 管理后台或者使用开放接口主动刷新 CDN...
nginx
引入 Nginx 是一个轻量级/高性能的反向代理 Web 服务器，由 C 语言写的，速度快、性能优秀。主要功能有反向代理、负载均衡、配置 SSL 证书、防盗链、解决跨域问题、缓存、限流、动静资源分离等等 nginx 作用体现 提升系统整体性能 动静资源分离 一般静态资源文件都放在 Nginx 服务器中，当 Nginx 接收到了获取静态资源文件的请求，就直接在 Nginx 服务器中把放进去的静态资源返回，而不用真正到达后端接口，效率非常高 请求转发分配 所有的请求都经过 Nginx，由 Nginx 决定分发到哪个端口程序上，这样即使后端有很多个 Java 程序，但对于前端来说，是无感知的，好比后台只有一个项目在跑 Keepalive 保活 Nginx 会不断监听后端程序的接口 (健康检查)，看该服务是不是在正常运行，万一有一个程序挂了，那么 Nginx 就不会把前端发来的请求转发给这个接口，确保后端服务的高可用性和稳定性 常用指令location 匹配用户请求中的 URI，优先级为: = > 完整路径 > ^~ > ~、~* > 部分起始路径...
前端设计模式
针对设计问题的通用解决方案为什么要学设计模式 利于代码复用 利于代码稳定可拓展 利于代码可读性提升 什么时候需要设计模式 优先考虑全局设计 合理权衡使用需求和维护成本 五种设计原则 OCP 开闭原则 (Open Closed Principle) 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100// 目标: 已有的场景下，对于需要拓展的功能进行开放、拒绝直接的对于系统功能进行修改// sprint1 - 中秋节活动 吃鸡高亮 + LOL要弹出折扣// renderif (game === "PUBG") { // 高亮} else { // ……}// eventif...
React 19 新特性
参考 React 19 官网 Actions 支持异步函数 待定状态: 提供一个待定状态，该状态在请求开始时启动，并在最终状态更新提交时自动重置 乐观更新: 支持新的 useOptimistic Hook，可以在请求提交时向用户显示即时反馈 错误处理: 当请求失败时，可以显示错误边界，并自动将乐观更新恢复到其原始值 表单: 元素支持将函数传递给 action 和 formAction 属性。将函数传递给 action 属性默认使用 Actions，并在提交后自动重置表单 1234567891011121314151617181920212223242526// 使用表单的 Actions 和 useActionStatefunction ChangeName({ name, setName }) { const [error, submitAction, isPending] = useActionState( async (previousState, formData) => { const...
Immutable与Immer
Immutable Javascript 中不可变的集合 官网 immutable 引入 在 JavaScript 中有引用类型和基本类型。 如果变量 a 是基本类型，将 a 赋值给变量 b，再修改 b 的值，则变量 a 不受影响 如果变量 a 是引用类型，将 a 赋值给变量 b， 则 b 与 a 是同一个对象的引用，若修改 b 对象的属性，a 对象的该属性也会跟着变化。 解决方案就是深拷贝，比如最简单的方式JSON.parse(JSON.stringify(obj))。 但是深拷贝这种方式比较耗费性能（空间和时间），有没有折中的方案呢？即修改 b 的同时不影响 a，且比深拷贝节省性能。 所以有了 immutable.js，简单说就是按需深拷贝。 此外还有一个重要原因，开发中经常遇到函数带有副作用，副作用的函数修改了一个引用类型某个属性的值或者浅 copy 的问题，immutable 为此类问题提供了一种优雅的解决方案。 immutable 简介 Immutable Data 就是一旦创建，就不能再被更改的数据 对 Immutable...
React fiber 篇
背景react 架构局限性 v16 采用 Stack Reconciliation，即递归的方式处理组件树更新，从根节点开始遍历整棵树，伴随着同步、阻塞，会出现一些问题 渲染时间过长: 复杂度过高的任务导致主线程阻塞，Native GUI 线程中断，无法响应用户指令，影响体验 优先级管理: 无优先级概念，导致关键任务可能被低优先级任务阻塞 中断恢复机制: 一旦开始就无法中断和恢复 fiber 解决方案 性能提升: 增量渲染: 将整个渲染过程分成多个可中断的、执行时间短的小任务，并使用任务调度器（Scheduler）来动态地调度这些任务，避免长时间的阻塞，提升了渲染的灵活性和效率 任务分片: Time Slicing，fiber 可在空闲时间内执行渲染任务，从而最大限度地利用浏览器的空闲时间 任务队列 (Task Queue): 将所有的更新操作封装成任务，并放入一个任务队列中 执行任务: 执行队列任务，记录当前任务执行时间 时间检查: 若任务执行时间超过阈值 (默认 5 毫秒)，则中断执行 让出线程: 使用 MessageChannel 和 postMessage...
React router 篇
路由模式 hash url 中的 hash 部分不会引起页面的刷新 hashchange 监听 url 变化，浏览器导航栏的前进后退，a 标签，window.location 等方式触发事件 history pushState 和 replaceState 改变 url 的 path 部分不会引起页面刷新 popchange 监听 url 变化，只有在浏览器导航栏的前进后退改变 url 时会触发事件，pushState/replaceState 不会触发 popstate 方法，需要进行拦截或重写 pushState/replaceState 来监听 1234567891011const _wr = function (type) { const orig = history[type]; return function () { const e = new Event(type); e.arguments = arguments; const rv = orig.apply(this, arguments); ...
React 简介
概览 用于构建用户界面的 JavaScript 库，组件化 + 声明式，提升开发效率及复用率 JSX: 描述 UI (官方文档) @babel/preset-react: JSX => React.creactElement(tagName, props, children) React.createElement: JS 对象 => VDom ReactDom: 渲染真实 Dom，VDom => Dom 组件function 组件 无状态组件，从 v16.8 引入 hooks 之后拥有状态 联系及区别 相同点: 组件是 React 可复用的最小编码单位，均会返回要在页面中渲染的 React 元素。除少数极端场景外，两者基本一致 不同点: 侧重点: 类组件基于面向对象，主打继承、生命周期等概念；函数组件基于函数式编程，主打 immutable、无副作用、引用透明等特点 性能: 类组件 shouldComponentUpdate 阻断渲染来提升性能；函数组件依靠 React.memo 缓存渲染结果来提升性能 可维护性:...
