面试

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试深度考察JavaScript核心原理（闭包、继承实现）、前端框架（Vue响应式机制、虚拟DOM性能、Vue vs React区别）、性能优化（高并发请求处理、HTTP/2应用）、前端安全（XSS/CSRF防御）。难点聚焦于Vue响应式系统限制的解决（如动态字段更新）、复杂布局实现（自适应流式），以及高效算法设计（O(n)去重）。 本轮共 14 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 个人背景、能力、经验。 参考答案 我叫[姓名]，毕业于[学校]，专业是[专业]。我有[X]年的前端开发经验，熟练掌握HTML、CSS、JavaScript等前端技术，熟悉Vue.js和React框架。在项目中，我注重代码质量和用户体验，善于解决复杂的技术问题。我曾参与过多个大型项目的开发，例如[项目名称]，负责[具体工作]，通过优化代码结构和性能，提升了页面加载速度和用户体验。 2. 怎么学习javascript的？讲一下闭包，自己的使用场景 题目要点 JavaScript学习方法、闭包概念及应用。 参考答案 学习JavaScript时，我首先从基础语法入手，通过阅读经典书籍如《JavaScript高级程序设计》来系统地学习。闭包是JavaScript中的一个重要概念，它允许函数记住并访问其创建时所在的作用域链中的变量。闭包的使用场景很多，比如在事件处理中，可以使用闭包来保存事件相关的数据。例如，创建一个计数器函数，每次调用时返回当前的计数值，利用闭包可以保持计数器的状态。 3. Javascript如何实现继承？ 题库原题：Javascript如何实现继承？ 题目要点 1. 原型链继承 通过将一个构造函数的实例作为另一个构造函数的原型，实现属性和方法的继承。 特点 简单易实现。 缺点是父类实例的属性会被所有子类实例共享。 2. 借用构造函数（经典继承） 通过在子类构造函数中调用父类构造函数，实现属性的继承。 特点 避免了原型链继承共享属性的问题。 但无法继承父类的原型方法。 3. 组合继承（原型链+借用构造函数） 结合原型链继承和借用构造函数的方法，既调用父类构造函数，又将父类原型赋值给子类原型。 特点 可以继承实例属性和原型方法。 需要注意避免构造函数属性的多次调用。 4. 原型式继承 使用一个函数来创建一个新对象，并将这个新对象的原型指向另一个对象。 特点 适用于对象之间的属性继承，不涉及构造函数。 5. 寄生式继承 基于原型式继承，但添加了额外的包装函数，以提供更好的控制和灵活性。 特点 通过创建对象的副本来实现继承，避免修改原始对象。 6. ES6 类继承 使用class关键字和extends关键字实现继承。 特点 语法简洁，易于理解。 底层仍然是基于原型链实现。 参考答案 一、是什么 继承（inheritance）是面向对象软件技术当中的一个概念。 如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类” 继承的优点 继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试聚焦CSS布局核心问题（浮动清除、BFC机制）、高频JS手写能力（防抖函数）、工程化实践（TS迁移痛点、Vue3升级策略）、深度性能优化（缓存协同更新、Tree Shaking原理）。难点在于浮动导致的布局塌陷解决方案、CDN与本地缓存协同策略设计，以及复杂框架迁移的兼容性处理。 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 浮动元素导致的布局错乱应该如何解决？ 题目要点 CSS浮动布局及解决方案。 参考答案 浮动元素会导致其父元素高度塌陷，从而影响布局。解决方法有： 1. 清除浮动：在浮动元素后面添加一个空的`div`，设置`clear: both`。 2. 使用伪元素清除浮动：在父元素上使用`::after`伪元素，设置`clear: both`。 .parent::after { content: ""; display: block; clear: both; } 1. 使用`overflow: hidden`：给父元素设置`overflow: hidden`，但可能会隐藏超出部分的内容。 2. 使用`BFC`（块级格式化上下文）：通过设置`display: flow-root`或`overflow: auto`等属性，使父元素形成一个独立的BFC，从而包含浮动元素。 2. 实现一个固定侧边栏+自适应主内容的布局 题目要点 CSS布局技巧。 参考答案 可以使用flexbox布局实现固定侧边栏和自适应主内容的布局： <div class="container"> <div class="sidebar">侧边栏</div> <div class="main">主内容</div> </div> .container { display: flex; } .sidebar { width: 200px; /* 固定宽度 */ background-color: #f0f0f0; } .main { flex: 1; /* 自适应宽度 */ background-color: #ffffff; } 3. 实现 debounce（防抖）函数 题库原题：实现 debounce（防抖）函数 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 考察核心集中在前端性能优化（如无限加载卡顿、页面渲染延迟）、CSS布局与兼容性（如Flexbox自适应、跨浏览器适配）及Vue框架原理（如响应式限制、虚拟DOM优劣）。需重点准备懒加载/虚拟滚动优化、兼容性Hack技巧、异步执行顺序分析及需求拆分设计能力。 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 现在我们有一个 618 活动页的需求，需要你来做，你会如何拆分需求，如何设计？ 题目要点 需求分析与设计能力 参考答案 首先与产品、设计、运营等多部门沟通，明确活动页的核心功能、促销规则、页面风格等基本需求。例如，确定活动主题（如限时秒杀、满减优惠等）、预计流量、商品展示形式等。 根据功能模块拆分需求，可将活动页分为头部导航区（包含活动标题、时间、入口等信息）、商品展示区（如秒杀商品列表、热门推荐商品列表等）、促销信息区（展示活动规则、优惠券领取等）、底部信息区（如活动说明、客服入口等）。 在设计上，根据品牌风格和活动主题确定整体视觉风格，包括配色方案（如节日氛围的红色、金色等）、字体选择、图片风格等。针对商品展示区，考虑采用网格布局或瀑布流布局，以合理展示商品信息，包括商品图片、名称、价格、优惠信息等。对于交互设计，需考虑页面的滚动加载、商品点击跳转、优惠券领取等交互效果，确保用户体验流畅。 2. 商品列表中一行有五个商品卡片，最后一个自适应剩余空间，怎么实现。 题目要点 CSS 布局能力 参考答案 可以使用 CSS 的 Flexbox 布局来实现。首先将商品列表的容器设置为 flex 布局，即 display: flex。然后对前四个商品卡片设置固定宽度，例如 width: 100px，最后一个商品卡片设置 flex: 1，这样它就会占据所在行剩余的空间，实现自适应效果。同时，为了防止一行中商品卡片因内容过多而超出父容器宽度，可对每个商品卡片设置 overflow: hidden，确保其内容在自身区域内显示，并且可以添加 white - space: nowrap 和 text - overflow: ellipsis 来处理溢出的文字内容。 3. CSS 样式开发中你都遇到过哪些兼容性问题，如何解决的。 题目要点 CSS 问题解决能力及兼容性知识 参考答案 在不同浏览器中遇到过盒模型问题，例如 IE 浏览器的怪异盒模型与其他浏览器的标准盒模型不同，导致元素尺寸计算不一致。解决方法是使用 box - sizing: border - box，并结合 CSS 重置样式表统一各浏览器的盒模型表现。 2. 浮动布局在某些低版本浏览器中可能出现父元素高度塌陷或子元素排列不整齐的问题。可以通过为父元素添加 clearfix 清除浮动，即设置父元素 overflow: hidden 或使用伪元素 :after 添加清除浮动的样式来解决。 3. CSS3 动画在部分浏览器中可能不支持，或者动画效果不一致。例如，IE 浏览器对 CSS3 动画的支持较弱。解决方法是使用渐进增强的方式，在支持 CSS3 动画的浏览器中展示动画效果，对于不支持的浏览器提供简单的过渡效果或静态样式，并利用Modernizr 等工具进行特性检测，根据检测结果加载相应的样式和脚本。 4. 字体渲染在不同操作系统和浏览器中可能存在差异，影响页面的美观和一致性。可以通过设置字体的 font - family 为系统安全字体组合，并使用相对单位（如 em、rem）设置字体大小，以提高字体的兼容性和可读性。 4. 你刚刚说的上滑无限加载有没有性能问题，你怎么解决？ 题目要点 前端性能优化知识 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察前端基础知识和实际应用能力。 本轮共 20 道题。答案默认折叠，便于先自行作答。 1. 实现一个宽度自适应的搜索框。 题目要点 CSS布局能力： 面试官希望确认候选人对CSS的布局方式（如Flexbox、Grid或传统布局）的掌握程度，以及如何实现元素的响应式和自适应。 响应式设计： 考察候选人是否能考虑不同屏幕尺寸下的用户体验，并运用CSS媒体查询、视口单位等技术实现宽度自适应。 HTML结构： 确认候选人是否能编写语义化且结构清晰的HTML代码。 参考答案 1.1 原理说明 宽度自适应的搜索框是指搜索框的宽度能够根据其父容器的宽度或视口宽度自动调整，以适应不同的屏幕尺寸和设备。实现这种效果通常依赖于CSS的弹性布局（Flexbox）或网格布局（Grid），结合相对单位（如百分比、vw/vh）或弹性单位（如flex属性）。其核心思想是让元素能够"伸缩自如"，而不是固定尺寸。 1.2 核心用法 + 示例代码 以下是使用Flexbox实现宽度自适应搜索框的示例： <div class="search-container"> <input type="text" class="search-input" placeholder="请输入搜索内容"> <button class="search-button">搜索</button> </div> .search-container { display: flex; width: 100%; /* 占据父容器的全部宽度 */ max-width: 600px; /* 设置最大宽度，防止过宽 */ margin: 20px auto; /* 居中显示 */ border: 1px solid #ccc; border-radius: 5px; overflow: hidden; /* 防止内容溢出 */ } .search-input { flex-grow: 1; /* 占据剩余空间 */ padding: 10px; border: none; outline: none; /* 移除聚焦时的边框 */ font-size: 16px; } .search-button { padding: 10px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; font-size: 16px; } .search-button:hover { background-color: #0056b3; } /* 媒体查询，适应小屏幕 */ @media (max-width: 768px) { .search-container { max-width: 90%; } } 场景说明： ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察前端开发者的项目经验、技术深度、问题解决能力以及对未来发展的思考。 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 了解飞书么，讲一下你的使用感受 题目要点 ● 说明该题是主观型问题，不考"唯一标准答案" ● 面试官主要考察答题者对产品的理解、用户体验的洞察以及归纳总结能力 ● 答题结构建议：首先简要说明你对飞书的整体印象和使用频率，然后从几个具体的产品功能或使用场景出发，详细阐述你的感受、亮点和可以改进的地方。 参考答案 高质量参考范文： 我对飞书这款产品有比较深入的了解，因为我们团队在日常工作中就是飞书的重度用户，几乎所有的协作和沟通都在上面进行。从我的使用感受来看，飞书在一体化协作方面做得非常出色，它不仅仅是一个简单的即时通讯工具，更是一个集成了文档、会议、日程、OKR、邮件等多种功能的综合性协作平台，极大地提升了团队的工作效率。 我感受最深的有以下几点： 首先是文档和表格的强大协作能力。飞书文档支持多人实时协同编辑，光标跟随、评论批注等功能都非常流畅，我们团队经常用它来共同撰写需求文档、项目周报等。表格功能也比传统Excel更灵活，支持多种视图和自动化能力，对于项目管理和数据统计非常方便，我们很多内部管理工作都迁移到了飞书表格上。这种所见即所得、实时同步的体验，比我们之前使用分离的工具效率高出很多。 其次是会议和日历的无缝整合。飞书会议的音视频质量很高，屏幕共享和标注功能也很实用。最棒的是它和日历的深度集成，我们可以在日历中直接创建会议，并关联飞书文档，会议结束后纪要也能快速生成并同步。这种从会议发起、进行到纪要归档的全流程一体化体验，减少了大量来回切换应用的麻烦。 当然，在使用过程中，我也注意到一些可以改进的地方。例如，对于一些复杂的数据可视化需求，飞书表格目前的图表功能可能还不够强大，我们有时需要导出数据到其他专业工具进行处理。另外，在面对外部协作场景时，虽然飞书支持分享外部链接，但在权限控制和安全性方面，如果能提供更多灵活的配置选项，会更便于与外部伙伴高效协同。 总的来说，飞书极大地改变了我们团队的协作模式，提升了整体工作效率。它在集成化、实时协作和移动端体验方面都有着显著优势。我相信随着产品的不断迭代，它在更多细分场景和个性化需求方面会做得更好。 2. 如果飞书的某一个页面崩溃了 ，你会如何处理？ 题目要点 ● 说明该题是主观型问题，不考"唯一标准答案" ● 面试官主要考察答题者的故障排查能力、问题分析思路、应急处理流程以及对用户体验的关注 ● 答题结构建议：首先表明你会从用户角度出发，然后从前端排查、后端排查、联调分析、解决方案、预防措施等多个维度，阐述你处理问题的完整思路和步骤。 参考答案 高质量参考范文： 如果飞书的某个页面崩溃了，我会立即启动一套系统的故障排查和处理流程，目标是尽快定位问题、恢复服务，并最大程度地减少对用户的影响。 我的处理思路和步骤通常如下： 初步判断与用户安抚（P0 紧急）： 确认问题范围： 首先，我会尝试复现问题，看是偶发性还是普遍性，是个别用户遇到还是所有用户，是特定浏览器或环境下崩溃，还是全量崩溃。这决定了问题的优先级和后续排查方向。 快速截图/录屏： 立即保留现场证据，包括控制台报错、网络请求、崩溃页面截图等，为后续分析提供依据。 安抚用户/上报： 如果是线上普遍性问题，会第一时间通过内部渠道（如即时通讯工具）向上级和相关团队（后端、产品、SRE等）同步情况，并考虑是否需要发布公告，引导用户刷新页面或使用其他临时方案，确保用户感受到问题正在被处理。 前端层面排查： 控制台日志分析： 检查浏览器开发者工具的Console面板，查看是否有JavaScript错误、警告或网络请求失败的提示。JavaScript报错通常是页面崩溃的直接原因，栈追踪能帮助定位代码位置。 网络请求分析： 检查Network面板，看是否有接口请求失败（如4XX、5XX错误），或者请求超时。特别是5XX错误，可能指示后端服务异常导致页面无法获取必要数据而崩溃。 内存与CPU占用： 使用Performance和Memory面板，观察页面崩溃前是否有内存飙升或CPU占用过高的情况，这可能指向内存泄漏、死循环或计算密集型操作。 代码回溯与版本： 确认当前页面的代码版本，检查近期是否有相关代码上线，是否有回滚的必要。使用Source面板进行断点调试，观察变量值和代码执行流程。 本地存储检查： 检查LocalStorage、SessionStorage和IndexedDB，看是否有脏数据或超大存储导致的问题。 后端及服务层面排查（与后端协作）： 接口健康状况： 如果前端排查怀疑是后端问题，我会联系后端开发或SRE团队，确认相关API接口的健康状况、服务日志、异常报警信息。 数据库或缓存： 后端会进一步排查数据库连接、缓存服务是否正常，是否有慢查询或数据一致性问题。 依赖服务： 检查该页面所依赖的微服务或其他第三方服务是否正常运行。 定位与解决方案： 锁定问题点： 根据排查结果，确定是前端代码Bug（如空指针、死循环、组件渲染异常）、后端接口问题、网络问题、兼容性问题，还是其他服务故障。 制定方案： 如果是前端Bug，立即着手修复，并进行单元测试和集成测试。如果是后端问题，协同后端团队修复。如果是数据问题，考虑数据清洗或兼容处理。 紧急发布/回滚： 对于严重影响线上用户的问题，优先考虑紧急发布修复补丁，或者在无法快速修复的情况下，采取回滚到上一个稳定版本的方式。 复盘与预防： ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本轮面试侧重考察候选人前端基础知识的系统掌握程度，包括 CSS 盒模型、选择器机制、ES6 语法、异步任务队列、响应式原理与网络协议等，同时会通过算法题考查思维能力与编码规范。 重点关注以下几个方面： CSS布局与样式：考察对盒模型、选择器的深入理解，以及实际应用中的最佳实践 JavaScript核心：重点关注ES6特性、闭包、异步编程等基础概念的掌握程度 框架原理：主要考察Vue3响应式系统的实现原理与优化思路 工程化思维：通过HTTP、缓存、性能优化等问题考察工程实践经验 算法能力：通过字符串处理等典型题目考察基本编程功底 本轮共 17 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 这是一道主观性问题，没有标准答案。面试官主要考察： 表达能力：语言组织、逻辑清晰度 职业规划：技术深度、发展方向 项目经验：技术栈匹配度、解决问题能力 个人特质：学习能力、团队协作 参考答案 “您好，我是XXX，有5年前端开发经验。毕业于XXX大学计算机科学专业，目前在一家互联网公司担任高级前端工程师。 我擅长的技术栈是 Vue 和 React 生态，对前端工程化和性能优化有深入研究。最近两年主要负责公司的低代码平台建设，带领团队完成了从0到1的平台搭建。在这个项目中，我们解决了很多技术难题，比如大型JSON-Schema的渲染性能优化、自定义组件的实时预览等。通过这些优化，平台的页面渲染性能提升了60%，现在支持了超过100个业务团队的日常工作。 在技术深度上，我特别关注前端框架底层原理，写过几篇关于Vue3响应式系统的技术文章，并给社区贡献过几个PR。同时我也在公司内部主导了前端性能监控体系的建设，建立了从采集、分析到报警的完整链路。 选择字节跳动是因为被这里浓厚的技术氛围吸引，也认可公司在前端领域的技术实力。我希望能在更大的平台上，和优秀的团队一起解决更有挑战的问题。” 答题建议结构 基本信息与技术栈（15-20秒） 教育背景 工作年限 技术栈概览 核心项目经历（30-40秒） 1-2个最有代表性的项目 突出个人贡献和技术难点 技术深度展示（20-30秒） 专注的技术领域 技术产出或开源贡献 职业规划（10-15秒） 对岗位的理解 个人发展诉求 答题要点提示 时间控制在90秒左右 按照时间重要性安排内容比重 突出个人特色，避免平铺直述 适度准备，保持自然流畅 结合岗位特点，突出匹配度 2. 标准盒模型与IE盒模型的区别，如何通过CSS切换两种模型？ 题目要点 考察对CSS盒模型的深入理解，包括两种盒模型的区别、计算方式及其对布局的影响。同时也考察在工程实践中如何合理使用box-sizing，以及不同盒模型在响应式布局中的应用场景和性能影响。 参考答案 1.1 原理说明 两种盒模型的区别： 标准盒模型 (content-box)： • width/height 仅包含内容区域 • 实际占用空间 = width + padding + border + margin • 优点：精确控制内容区域大小 • 缺点：需要额外计算实际占用空间 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本轮面试重点考察候选人的项目经验、技术深度和工程化思维。主要包括： 算法编程能力：通过合并有序数组等题目考察基本编程功底 项目经验：深入考察实习期间的技术选型、架构设计等关键决策 微前端技术：重点关注跨应用通信、样式隔离等核心问题 AI 应用实践：考察将新技术应用到工程实践中的能力 跨窗口通信：考察复杂场景下的技术方案设计能力 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 将两个升序数组合并为一个升序数组 题目要点 数组操作能力 双指针算法应用 原地修改的实现 边界条件处理 参考答案 这道题可以使用双指针从后向前遍历的方法，将较大的数放入nums1的末尾。代码实现如下： function merge(nums1, m, nums2, n) { let p1 = m - 1; // nums1的指针 let p2 = n - 1; // nums2的指针 let p = m + n - 1; // 合并后数组的指针 while (p2 >= 0) { // 只要nums2还有元素需要合并 if (p1 >= 0 && nums1[p1] > nums2[p2]) { nums1[p] = nums1[p1]; p1--; } else { nums1[p] = nums2[p2]; p2--; } p--; } return nums1; } 算法分析： 时间复杂度：O(m+n)，只需遍历一次 空间复杂度：O(1)，原地修改不需要额外空间 关键点：从后向前遍历避免覆盖nums1中的有效元素 2. 上一段实习在联想主要做的是什么产品？采用了什么技术架构？ 题目要点 这是一道主观性问题，面试官主要考察： 项目描述能力：是否能清晰表达项目背景、目标和价值 技术选型能力：是否有合理的技术决策思路 架构设计能力：是否理解系统设计的关键点 业务理解能力：是否深入理解业务需求和痛点 答题建议：建议从项目背景、技术架构、实现亮点和项目成果四个方面展开。重点说明项目的业务价值和技术特点，展现自己在项目中的贡献和成长。 参考答案 “在联想实习期间，我主要负责一个企业级IT资产管理平台的开发工作。这是一个服务于公司内部的中后台系统，日均活跃用户约2000人，管理着超过10万台设备资产。这个平台的核心价值在于提升IT资产管理效率，降低运维成本。 ...

时下虽然接入 JSX 语法的框架越来越多，但与之缘分最深的毫无疑问仍然是 React。 2013 年，当 React 带着 JSX 横空出世时，社区曾对 JSX 有过不少的争议，但如今，越来越多的人面对 JSX 都要说上一句“真香”！我们就来一起认识下这个“真香”的 JSX，聊一聊“JSX 代码是如何‘摇身一变’成为 DOM 的”。 开始之前请先思考几个问题： JSX 的本质是什么，它和 JS 之间到底是什么关系？ 为什么要用 JSX？不用会有什么后果？ JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？ 面对以上问题，如果无法形成清晰且系统的思路，那么很可能是把 JSX 想得过于简单了。大多数人只是简单地把它理解为模板语法的一种，但事实上，JSX 作为 React 框架的一大特色，它与 React 本身的运作机制之间存在着千丝万缕的联系，上述 3 个问题的答案，就恰恰隐藏在这层“联系”中。 JSX 的本质：JavaScript 的语法扩展 JSX 到底是什么?看看 React 官网给出的一段定义： JSX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力。 “语法扩展”这一点在理解上几乎不会产生歧义，不过“它充分具备 JavaScript 的能力”这句，却总让人摸不着头脑，JSX 和 JS 怎么看也不像是“一路人”啊？这就引出了“JSX 语法是如何在 JavaScript 中生效的”这个问题。 JSX 语法是如何在 JavaScript 中生效的：认识 Babel Facebook 公司给 JSX 的定位是 JavaScript 的“扩展”，而非 JavaScript 的“某个版本”，这就直接决定了浏览器并不会像天然支持 JavaScript 一样地支持 JSX。那么，JSX 的语法是如何在 JavaScript 中生效的呢？React 官网其实早已给过我们线索： ...

渲染流程 首先要了解的概念: 渲染引擎：它是浏览器最核心的部分是 “Rendering Engine”，不过我们一般习惯将之称为 “浏览器内核” 渲染引擎主要包括的线程： 各个线程主要职责： GUI渲染线程：GUI 渲染线程负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。当界面需要重绘（Repaint）或由于某种操作引发回流（Reflow）时，该线程就会执行。 JavaScript引擎线程: JavaScript 引擎线程主要负责解析 JavaScript 脚本并运行相关代码。 JavaScript 引擎在一个Tab页（Renderer 进程）中无论什么时候都只有一个 JavaScript 线程在运行 JavaScript 程序。需要提起一点就是，GUI线程与JavaScript引擎线程是互斥的，这也是就是为什么JavaScript操作时间过长，会造成页面渲染不连贯，导致页面出现阻塞的原理。 事件触发线程：当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JavaScript 引擎的处理。 通常JavaScript引擎是单线程的，所以这些事件都会排队等待JS执行。 定时器触发器： 我们日常使用的setInterval 和 setTimeout 就在该线程中，原因可能就是：由于JS引擎是单线程的，如果处于阻塞线程状态就会影响记时的准确，所以需要通过单独的线程来记时并触发响应的事件这样子更为合理。 Http请求线程： 在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求，这个线程就Http请求线程，它 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript 引擎的处理队列中等待处理。 有了上述的概念，对接下我们讲渲染流水线会有所帮助 简略版的渲染机制 很久之前就把浏览器工作原理读完了，看了很多博客，文章，当时简简单单的梳理一些内容,如下👇 简略版渲染机制一般分为以下几个步骤 处理 HTML 并构建 DOM 树。 处理 CSS 构建 CSSOM 树。 将 DOM 与 CSSOM 合并成一个渲染树。 根据渲染树来布局，计算每个节点的位置。 调用 GPU 绘制，合成图层，显示在屏幕上。 接下来大概就是这么说： 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢。 ...

区分进程和线程 线程和进程区分不清，是很多新手都会犯的错误，没有关系。这很正常。先看看下面这个形象的比喻： - 进程是一个工厂，工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中的工人，多个工人协作完成任务 - 工厂内有一个或多个工人 - 工人之间共享空间 再完善完善概念： - 工厂的资源 -> 系统分配的内存（独立的一块内存） - 工厂之间的相互独立 -> 进程之间相互独立 - 多个工人协作完成任务 -> 多个线程在进程中协作完成任务 - 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成 - 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间（包括代码段、数据集、堆等） 然后再巩固下： 如果是windows电脑中，可以打开任务管理器，可以看到有一个后台进程列表。对，那里就是查看进程的地方，而且可以看到每个进程的内存资源信息以及cpu占有率。 所以，应该更容易理解了：进程是cpu资源分配的最小单位（系统会给它分配内存） 最后，再用较为官方的术语描述一遍： 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位） 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程） tips 不同进程之间也可以通信，不过代价较大 现在，一般通用的叫法：单线程与多线程，都是指在一个进程内的单和多。（所以核心还是得属于一个进程才行） 浏览器是多进程的 理解了进程与线程了区别后，接下来对浏览器进行一定程度上的认识：（先看下简化理解） 浏览器是多进程的 浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存） 简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程。 关于以上几点的验证，请再第一张图： 图中打开了Chrome浏览器的多个标签页，然后可以在Chrome的任务管理器中看到有多个进程（分别是每一个Tab页面有一个独立的进程，以及一个主进程）。 感兴趣的可以自行尝试下，如果再多打开一个Tab页，进程正常会+1以上 **注意：**在这里浏览器应该也有自己的优化机制，有时候打开多个tab页后，可以在Chrome任务管理器中看到，有些进程被合并了 （所以每一个Tab标签对应一个进程并不一定是绝对的） 浏览器都包含哪些进程？ 知道了浏览器是多进程后，再来看看它到底包含哪些进程：（为了简化理解，仅列举主要进程） Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有 负责浏览器界面显示，与用户交互。如前进，后退等 负责各个页面的管理，创建和销毁其他进程 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上 网络资源的管理，下载等 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建 GPU进程：最多一个，用于3D绘制等 浏览器渲染进程（浏览器内核）（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为 页面渲染，脚本执行，事件处理等 强化记忆：在浏览器中打开一个网页相当于新起了一个进程（进程内有自己的多线程） 当然，浏览器有时会将多个进程合并（譬如打开多个空白标签页后，会发现多个空白标签页被合并成了一个进程），如图 另外，可以通过Chrome的更多工具 -> 任务管理器自行验证 浏览器多进程的优势 相比于单进程浏览器，多进程有如下优点： 避免单个page crash影响整个浏览器 避免第三方插件crash影响整个浏览器 多进程充分利用多核优势 方便使用沙盒模型隔离插件等进程，提高浏览器稳定性 简单点理解：如果浏览器是单进程，那么某个Tab页崩溃了，就影响了整个浏览器，体验有多差；同理如果是单进程，插件崩溃了也会影响整个浏览器；而且多进程还有其它的诸多优势。。。 当然，内存等资源消耗也会更大，有点空间换时间的意思。 重点是浏览器内核（渲染进程） 重点来了，我们可以看到，上面提到了这么多的进程，那么，对于普通的前端操作来说，最终要的是什么呢？答案是渲染进程 ...