浏览器内核的渲染流程可以简化为以下几个步骤：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=e603181d8a9b4b9ea0cc9be7cb8778b7解析 HTML：浏览器内核首先会分析和解析接收到的 HTML 文档。它将文档分解为 DOM（文档对象模型）树，表示文档的结构和标记。构建渲染树：在构建渲染树过程中，浏览器内核将解析的 DOM 树和 CSS 样式表合并，生成渲染树（Render Tree）。渲染树只包含需要显示在页面上的可见元素，并考虑布局和样式信息。布局（回流）：渲染树中的每个元素都具有其自己的几何信息，如位置、大小等。布局（也称为回流）是指根据渲染树的几何信息计算元素在屏幕上的确切位置。这个过程涉及到计算元素的大小、排列方式以及相互之间的关系。绘制（重绘）：在布局完成后，浏览器内核将开始绘制网页的内容。它会遍历渲染树，并将每个元素转化为屏幕上的像素。绘制过程涉及绘制元素的外观、背景、边框等样式。栅格化和合成：栅格化是将绘制的图像分割成小块（栅格），以便后续处理和渲染加速。浏览器内核会对这些栅格应用一些优化技术，如图像压缩和缓存等。然后，它将栅格组合成最终的页面图像，并呈现在屏幕上。

2024年10月25日收到面试预约，我选在了29号下午4点2024年10月29日4点面试。男面试官，不开摄像头。用时五十分钟。自我介绍实习项目介绍localStorage+indexeddb+serviceWorker的使用介绍 Intersection ObserverIntersection Observer 的阈值瀑布流怎么做webp格式要怎么检测设备是否支持你说的根据窗口大小变化而变化，闪屏怎么优化首屏白屏时间优化怎么做性能指标的监控prisma介绍下orm的优点 我只会减小心智负担，我根据之前面试的教训，说性能不会优化。面试官补充了说可以提升安全，防sql注入diff原理(不会)us...

1.什么操作会引起回流重绘，如何减少回流重绘2.position：absolute 会引起重绘回流吗？3.数据类型题 重点是！【】==【】 回答错了，不是false是true，具体解释是![]在布尔计算是，【】是truthy值，然后！【】是false，然后在非严格相等是会进行类型转换，【】会先变成‘’，然后‘’变成0，然后就是false==0然后0==0，是true。***学习隐式转换4.输出题 答案是 window string 报错！！！（其实我知道会报错，但是被问题误导了，写出输出就一直以为要输出）5.输出题 答案是0   1   0123细说第二行你们自己理解嘿嘿6.DOM添加移除移动复制创建查找：appendChild removeChild 移动没写出来，我后面一想其实就是移除+添加，cloneNode，createElement ， getElementById7.输出题 考察prototype和__proto__，首先第一个person构造函数的原型要包括方法所以是{sayHello:[function]}第二个是Function，每个函数的__proto__都是指向Function.prototype，第三个是undefined实例对象没有prototype属性 第四个Person.prototype8.Vue3父组件和子组件如何通信？props $emit eventbus vuex9.Vuex 原理 :不知道回答的对不对 我说了store mutation getter actions 然后面试官说我说的是方式系，可能比较好的答案是，Vuex是通过集中式存储来管理每个组件状态然后通过响应式系统和单项数据量进行状态管理10.mutation为啥不可以异步操作 标准答案是单项数据流设计，在action中异步处理提交到mutation进行同步修改state，确保可以看到state的每一步变化，如果mutation也异步的话那么状态更新就不可控了11.ref reactive ref：基本数据类型 reactive：复杂对象 object12.ref .value reactive 用变量.属性13.vue3怎么实现组件懒加载 标准答案是：defineAsyncComponent + import、Suspense 结合懒加载：使用 Vue 3 的 Suspense 组件处理异步组件的加载状态。14.Vue模版编译流程：1.模版解析：模版字符串抽象成AST抽象语法树 2.优化过程标记静态节点和静态根节点 3生成渲染函数renderfunction：描述虚拟dom到真实dom的过程。15.生成抽象语法树的方法：初始化解析器，解析字符流，解析HTML标签，指令属性，插值表达式，生成AST节点16.Vue nexttick的实现（源码）：nexttick是用于dom更新后执行回调的方法，基于js的promise，mutationObserver、setImmediate、setTimeout方法，大概就是说 首先是数据变化，这是同步任务，然后就是dom异步批量更新会放在事件循环的末尾，然后再添加tick事件在微任务末尾，然后降级也是为了tick事件在dom更新后执行。17.协商缓存和强缓存：然后以为挂了，结果进二面了，没看到邮箱~~~~~~~~~~~~~~~~很难受啊~~~~~~~~~~~~哭死，就为了写这面经~~~