路由懒加载/时间循环学习记录

一.路由懒加载1.路由懒加载是一种前端性能优化策略通过将应用程序的路由组件拆分为独立的代码块chunks仅在用户导航到特定路由时才动态加载对应的JavaScript资源从而实现按需加载减少初始bundle体积优化首屏加载性能。2.技术本质利用JavaScript的动态模块加载能力配合构建工具的代码分割机制实现运行时按需获取资源的前端架构模式。3.非懒加载在导入组件的时候使用的是静态加载这样页面打开时Home、About、User 全部下载哪怕用户只看首页About 和 User 的代码也下载了如图4.懒加载是一种动态导入在导入组件的时候只是定义还没下载只有访问哪个页面哪个页面的组件才会开始加载5.为什么const User lazy(() import(./pages/User)) 能实现懒加载在这种方式中相当于把import(./pages/User)这部分保存起来这个箭头函数就是保存起来只有在实际渲染 User / 组件时React 才会调用这个函数这时才真正开始加载组件代码二.事件循环1.事件循环是 JavaScript 实现异步编程的核心机制。由于 JavaScript 是单线程的同一时间只能做一件事情。防止代码阻塞我们把代码(任务)分为同步和异步耗时。2.JS把异步任务分为宏任务和微任务 --- 在异步任务中会优先执行微任务宏任务由宿主(浏览器、Node)发起微任务由JS引擎发起的任务·Promise 本身是同步创建但是then/catch的回调函数是异步的·只要是 .then() 的回调都是微任务3.流程执行同步代码所有同步任务在主线程的调用栈中依次执行直到栈为空。检查微任务队列当调用栈为空时事件循环会优先处理微任务队列中的所有任务注意微任务执行过程中可能添加新的微任务这些新任务会在本轮循环中继续执行直到微任务队列清空。执行宏任务微任务队列清空后事件循环会从宏任务队列中取出一个任务执行重复循环执行完一个宏任务后事件循环会再次检查微任务队列因为宏任务执行中可能产生新的微任务然后继续下一轮循环。