首页 > 其他分享 >【前端面试】浏览器原理解读

【前端面试】浏览器原理解读

时间：2024-08-23 19:53:30浏览次数：10  
标签：浏览器 DOM 前端 JavaScript 回收 面试 内存 垃圾

前端进阶——浏览器篇-CSDN博客

浏览器工作原理与Javascript高级（前后端异步）-CSDN博客

DOM树的建立过程

前端DOM（文档对象模型）数的建立过程，实际上是浏览器解析HTML文档并构建DOM树的过程。这一过程大致可以分为以下几个步骤：

1. 加载HTML文档

  • 当浏览器请求到一个HTML文档时，它首先会通过网络层接收HTML文档的字节流。

2. 解析HTML文档

  • 字节流转换：HTML解析器将接收到的字节流转换为Token（标记）。Token分为Tag Token（标签标记）和文本Token。Tag Token又分为StartTag（开始标记）和EndTag（结束标记）。
  • 构建节点：对于每个StartTag Token，HTML解析器会创建一个对应的DOM节点，并将其加入到DOM树中。如果Token是文本Token，则创建一个文本节点，并将其加入到当前栈顶Token对应的DOM节点下。
  • 栈的使用：在解析过程中，HTML解析器使用一个栈来维护当前的元素上下文。每当解析到一个StartTag时，该Token会被压入栈中；当解析到一个EndTag时，栈顶的Token会被弹出，表示该元素已解析完成。

3. 构建DOM树

  • 通过上述过程，HTML解析器会逐步构建出一棵DOM树。DOM树以document对象为根节点，包含了HTML文档中的所有元素节点、文本节点等。
  • 在DOM树中，每个节点都代表了HTML文档中的一个部分，并且节点之间通过父子关系、兄弟关系等相互连接。

4. JavaScript的介入

  • 如果在HTML文档中嵌入了JavaScript脚本，那么在解析到<script>标签时，HTML解析器会暂停工作，将控制权交给JavaScript引擎。
  • JavaScript引擎执行<script>标签中的代码。如果JavaScript代码尝试访问或修改DOM，那么它会通过DOM API与DOM树进行交互。
  • 执行完<script>标签中的代码后，HTML解析器恢复工作，继续解析后续的内容。

5. 渲染页面

  • 在DOM树构建完成后，浏览器会根据DOM树和CSSOM（CSS对象模型）树来构建渲染树（Render Tree）。
  • 渲染树包含了用于在页面上显示的节点信息（如样式、布局等）。
  • 浏览器根据渲染树中的信息来绘制页面，将内容显示在屏幕上。

总结

前端DOM数的建立过程是一个复杂的解析和构建过程，它涉及到HTML文档的加载、解析、DOM树的构建以及JavaScript的介入等多个环节。这一过程是浏览器渲染页面的基础，也是前端开发者与网页内容进行交互的桥梁。通过DOM API，前端开发者可以操作DOM树中的节点，实现页面的动态效果和交互功能。

前端缓存策略

前端缓存策略中，cookie、session、token、localStorage和sessionStorage各自扮演着不同的角色，它们分别用于不同的场景和目的。以下是对这些技术的详细解析：

1. Cookie

定义与用途：
Cookie是存储在用户本地终端上的一小段数据，通常由服务器设置，并通过HTTP请求头发送到服务器。它主要用于会话跟踪，帮助网站识别用户身份，进行用户登录状态管理等。

特点：

  • 存储在客户端，大小限制通常为4KB。
  • 可以设置有效期，超出有效期自动清除。
  • 跨域限制，同一个域名下可多个网页内使用。
  • 只能存储字符串类型的数据。

应用场景：

  • 存储用户偏好设置。
  • 跟踪用户会话状态。
  • 识别用户身份进行登录验证。

2. Session

定义与用途：
Session是一种服务器端的存储机制，用于存储用户会话信息。与Cookie不同，Session数据存储在服务器上，客户端通过Cookie中的Session ID来识别会话。

特点：

  • 存储在服务器端，相对安全。
  • 没有数据大小限制。
  • 会话结束后（如浏览器关闭或超时），Session数据会被清除。

应用场景：

  • 用户登录状态管理。
  • 购物车功能。
  • 敏感信息存储（如用户密码等，但通常不会直接存储密码，而是存储加密后的令牌或标识符）。

3. Token

定义与用途：
Token是一种身份验证机制，通常用于无状态认证。它可以是一个字符串，包含用户的身份信息、权限等，并通过加密方式保证安全性。

特点：

  • 无状态，可以在多个服务间共享。
  • 安全性高，通过加密方式防止信息泄露。
  • 可以在客户端存储，如localStorage或sessionStorage中。

应用场景：

  • JWT（JSON Web Tokens）是Token的一种常见形式，用于身份验证和信息交换。
  • API接口的身份验证。
  • 分布式系统中的用户认证。

4. localStorage

定义与用途：
localStorage是HTML5提供的一种本地存储方案，用于在用户的浏览器中存储数据。它没有时间限制，可以长期保存数据，直到被手动删除。

特点：

  • 数据存储在客户端，不会发送到服务器。
  • 存储的数据量大，一般5MB以内。
  • 跨会话存在，即使浏览器关闭，数据也不会丢失。

应用场景：

  • 存储用户偏好设置。
  • 存储需要长期保存的数据，如游戏进度、用户信息等。

5. sessionStorage

定义与用途：
sessionStorage与localStorage类似，但它是基于会话的存储机制。数据在页面会话期间存在，当浏览器关闭或标签页关闭时，数据会被清除。

特点：

  • 数据存储在客户端，不会发送到服务器。
  • 存储的数据量大，一般5MB以内。
  • 会话结束后数据丢失。

应用场景：

  • 存储临时数据，如页面表单的输入内容。
  • 存储需要在页面会话期间保持的数据。

总结

前端缓存策略中的cookie、session、token、localStorage和sessionStorage各有其特点和应用场景。cookie和session主要用于用户身份识别和会话管理；token则是一种更安全的身份验证机制；localStorage和sessionStorage则提供了在客户端存储数据的能力，适用于不同的数据存储需求。在实际开发中，应根据具体需求选择合适的存储方案。

内存管理 

JavaScript 的内存管理主要依赖于其自动垃圾回收机制，但这并不意味着开发者可以完全不用关心内存管理。理解 JavaScript 的内存管理机制以及如何避免内存泄漏对于创建高效、可扩展的应用至关重要。

JavaScript 内存管理基础

  1. 内存分配：当你声明变量、函数、对象或数组时，JavaScript 引擎会自动在内存中为它们分配空间。

  2. 内存使用：在程序执行过程中，你可以通过引用（即变量名或对象属性）来访问这些已分配的内存。

  3. 垃圾回收：当不再需要某些内存时（即没有任何引用指向它时），JavaScript 引擎会定期通过垃圾回收机制来释放这部分内存。大多数现代 JavaScript 引擎使用“标记-清除”（Mark-and-Sweep）算法进行垃圾回收。

内存泄漏详解

内存泄漏指的是程序中已分配的内存由于某种原因未能被释放或回收，导致内存的占用不断增加，最终可能导致应用崩溃或性能下降。

常见的内存泄漏类型：

  1. 全局变量：无意中创建的全局变量会一直保持在内存中，直到页面关闭。这通常是因为未使用 var、let 或 const 关键字声明局部变量导致的。

  2. 闭包：闭包允许内部函数访问并操作函数外部的变量。如果闭包的作用域链中引用了DOM元素或大型对象，并且这些闭包长时间未被销毁，那么它们所引用的对象也会一直保留在内存中。

  3. DOM 引用：如果 JavaScript 对象引用了 DOM 元素，并且该 DOM 元素已从 DOM 树中移除，但 JavaScript 对象仍然保持着对这个 DOM 元素的引用，那么该 DOM 元素所占用的内存就不会被释放。

  4. 定时器与回调函数：使用 setTimeout、setInterval 设置的定时器如果未能在适当的时候被清除（使用 clearTimeout 或 clearInterval），那么定时器的回调函数以及其中引用的变量可能会一直保留在内存中。

  5. 第三方库：使用第三方库时，如果未正确管理库中的对象或未遵循库的内存管理最佳实践，也可能导致内存泄漏。

如何避免内存泄漏

  1. 谨慎使用全局变量：尽量使用 let 和 const 声明局部变量，避免使用全局变量。

  2. 注意闭包的使用：确保闭包引用的变量在不再需要时能够被垃圾回收。

  3. 解除 DOM 引用：当 DOM 元素被移除时，确保相关的 JavaScript 对象也释放了对这些 DOM 元素的引用。

  4. 清理定时器：在不再需要定时器时，使用 clearTimeout 或 clearInterval 清理定时器。

  5. 监控内存使用情况：使用浏览器的开发者工具监控内存使用情况，定期检查和分析内存泄漏的原因。

  6. 优化第三方库的使用：了解并遵循所使用的第三方库的内存管理最佳实践。

通过上述措施，可以大大降低 JavaScript 应用中的内存泄漏风险，提高应用的性能和稳定性。

V8引擎的垃圾回收机制详解

V8引擎是一种开源的JavaScript引擎，广泛应用于Chrome浏览器和Node.js环境中。其垃圾回收机制是自动管理JavaScript程序中的内存分配和释放的关键部分，确保了程序运行期间不会出现内存泄漏或垃圾堆积的问题。以下是V8引擎垃圾回收机制的详细解析：

一、内存分代

V8引擎的垃圾回收机制基于代际假说和分代回收的原理，将内存分为两个代：

  1. 新生代（Young Generation）：
    • 用于存放新创建的对象，这些对象通常具有较短的生命周期。
    • 新生代内存空间被进一步细分为From空间和To空间，这两个空间大小相等，通过复制算法进行垃圾回收。
  2. 老生代（Old Generation）：
    • 用于存放经过一定时间仍然存活的对象，这些对象通常具有较长的生命周期。
    • 老生代采用标记-清除（Mark-Sweep）和标记-压缩（Mark-Compact）算法进行垃圾回收。

二、垃圾回收算法

1. 新生代垃圾回收算法（Scavenge）
  • 工作原理：
    • 新创建的对象首先被分配到From空间中。
    • 当From空间满时，触发垃圾回收过程。
    • 垃圾回收过程中，V8首先标记From空间中的存活对象，然后将这些存活对象复制到To空间中，同时清理未存活的对象。
    • 复制完成后，From空间和To空间的角色互换，原来的To空间成为新的From空间，原From空间中的对象被视为垃圾并被回收。
  • 优点：
    • 回收速度快，因为新生代中存活对象通常较少。
    • 适用于生命周期短的对象，减少了垃圾回收的开销。
  • 缺点：
    • 空间利用率低，因为每次只能使用一半的内存空间。
2. 老生代垃圾回收算法
  • 标记-清除（Mark-Sweep）：
    • 首先标记出老生代中的存活对象。
    • 然后清除未标记的对象，即回收这些对象的内存空间。
    • 缺点是可能导致内存碎片化，影响后续内存分配的效率。
  • 标记-压缩（Mark-Compact）：
    • 在标记-清除的基础上，将存活的对象移动到内存的一端，然后清理边界外的内存，从而减少内存碎片化。
    • 提高了内存使用的效率，但增加了垃圾回收的复杂性和时间开销。

三、优化策略

  • 对象晋升：当一个对象在新生代中经过多次垃圾回收后仍然存活，它会被晋升到老生代中，以便使用更适合长期存活对象的垃圾回收算法。
  • 增量标记：将标记过程拆分成多个小阶段，每个阶段执行一小部分标记操作，然后让JavaScript程序执行一段时间，以减少对程序性能的影响。
  • 内存压缩：在垃圾回收过程中，尽可能地将存活对象移动到一起，减少内存碎片，提高内存使用效率。

四、全停顿（Stop-The-World）

  • 垃圾回收算法在执行前，需要暂停应用逻辑的执行，以留出空间给垃圾回收算法运行。这种行为称为“全停顿”。
  • 停顿时间的长短取决于垃圾回收堆的大小和垃圾回收算法的复杂度。对于大规模的内存回收，停顿时间可能会较长。

综上所述，V8引擎的垃圾回收机制通过分代回收和多种优化策略，有效地管理了JavaScript程序中的内存分配和释放，确保了程序的性能和稳定性。

前端路由：Hash模式与History模式

详细说明：

  • URL表现形式：History模式的URL更加接近传统的页面URL，没有#号，这使得URL更加自然和美观。而Hash模式的URL则包含#号，这在一定程度上影响了URL的美观性。

  • 实现原理：History模式利用HTML5的History API（如pushState和replaceState方法）来动态改变浏览器的URL，同时不触发页面的重新加载。Hash模式则是通过监听URL中#号后面的变化（hashchange事件）来实现页面的切换。

  • 兼容性：History模式需要浏览器支持HTML5 History API，因此对浏览器版本有一定要求（如IE10+）。而Hash模式由于使用了较为简单的URL变化监听机制，因此兼容性较好，几乎所有现代浏览器及老旧浏览器都支持。

  • SEO友好性：History模式的URL更加友好和可读，有助于搜索引擎的索引和排名。而Hash模式的URL由于包含#号，搜索引擎通常会忽略这部分内容，导致SEO效果较差。

  • 服务器配置要求：History模式需要服务器端的支持，配置URL重写规则，将所有路由重定向到index.html。这是因为在使用History模式时，浏览器的URL变化不会触发页面的重新加载，而是由前端路由来处理。如果服务器端没有正确配置，当用户直接访问某个路由时，服务器可能会返回404错误。而Hash模式则通常不需要特殊的服务器端配置。

  • 用户体验：History模式提供了更接近于传统网页的用户体验，URL更加自然和易于理解。而Hash模式的URL包含#号，可能会影响用户体验的美观性和直观性。

  • 应用场景：History模式适用于需要美观URL、SEO优化、且服务器端支持的项目。Hash模式则适用于快速开发、对SEO要求不高、或需要广泛浏览器支持的项目。

浏览器架构

现代浏览器四大进程及渲染线程总结_浏览器进程-CSDN博客

浏览器架构是一个复杂而精细的系统，旨在提供高效、安全、稳定的网页浏览体验。现代浏览器大多采用多进程架构，主要包括浏览器进程、渲染进程、GPU进程和插件进程等。以下是对这些进程的详细解析：

1. 浏览器进程（Browser Process）

  • 功能：浏览器的主进程，负责控制和管理浏览器的整体运行。它管理用户界面（如地址栏、书签、前进后退按钮等），处理网络请求，管理浏览器缓存和历史记录，以及协调其他进程的创建和销毁。
  • 重要性：作为浏览器的核心进程，它确保了浏览器界面的正常显示和交互，以及浏览器内部各个组件的协调运作。

2. 渲染进程（Renderer Process）

  • 功能：浏览器的内核，负责处理标签页内的网页内容。它包含多个线程，如GUI渲染线程、JavaScript引擎线程、事件触发线程等，共同协作完成网页的渲染和交互。
  • 特点：每个标签页通常对应一个独立的渲染进程（但并非绝对，浏览器可能会根据策略优化进程分配）。这种设计提高了浏览器的稳定性和安全性，因为单个标签页的崩溃不会影响到其他标签页或整个浏览器。
  • 内部线程：
    • GUI渲染线程：负责将HTML、CSS和JavaScript转换为可视化的网页内容，并绘制到屏幕上。
    • JavaScript引擎线程：解析和执行JavaScript代码，提供网页交互所需的逻辑处理。
    • 事件触发线程：处理各种事件（如点击、滚动等），并将事件添加到待处理队列中，等待JavaScript引擎线程处理。

3. GPU进程（GPU Process）

  • 功能：负责处理与图形渲染相关的任务，利用GPU的硬件加速能力来提高图形性能。它处理网页中的图像、视频和复杂动画等，确保这些元素能够流畅地显示在屏幕上。
  • 重要性：随着网页中多媒体和视觉效果的日益丰富，GPU进程在提升浏览器性能和用户体验方面发挥着越来越重要的作用。

4. 插件进程（Plugin Process）

  • 功能：负责运行浏览器中的插件，如Flash、PDF查看器等。这些插件通常具有特定的功能，但也可能带来安全风险。因此，将它们放在独立的进程中运行可以减少对浏览器主进程和渲染进程的影响。
  • 安全性：通过隔离插件进程，浏览器可以更好地控制插件的行为，防止恶意插件对浏览器造成损害。

浏览器架构的优势

  • 提高稳定性：多进程架构使得单个标签页或插件的崩溃不会影响到其他部分，从而提高了浏览器的整体稳定性。
  • 增强安全性：通过隔离不同的进程，浏览器可以更好地保护用户数据和隐私，防止恶意网站的攻击。
  • 提升性能：利用多核处理器的优势，同时处理多个任务，提高了浏览器的响应速度和性能。

综上所述，浏览器架构是一个精心设计的系统，通过多进程和多线程的方式实现了高效、安全、稳定的网页浏览体验。

标签：浏览器,DOM,前端,JavaScript,回收,面试,内存,垃圾
From： https://blog.csdn.net/m0_55049655/article/details/141437505

相关文章

  • 文心快码Baidu Comate 帮你解大厂面试题：在8g内存的机器，能否启动一个7G堆大小的java进
    ......
  • 面试问题记录
    1、自我介绍（不要讲产品，讲自己做什么参与那些工作） 2、强压测试（接口压力测试） 3、系统是面对B还是C 4、测试用例要自己编写吗？谁负责，写的时候参考什么？根据什么保证不会漏掉，不会出现BUG5、测试用例谁来审核，怎么确认覆盖度6、测试用例会用多久的时间，上一个新的功能需要时间范......
  • zblog免费插件分享前端代码支持一键复制
    zblog默认的代码文件在网页前端是不支持一键复制的，这会让访客复制长代码的时候不太方便，甚至有可能会出错，影响体验，下面分享一个非常简单的免费插件，安装之后，前端代码就能一键复制了。插件使用方法：1、点击最下方链接下载插件2、打开zblog后台，在插件管理里面上传刚下载的插件，安装......
  • 【JavaScript系列】认识浏览器
    一、浏览器的工作原理1.1域名与IP地址1.2入口文件index.html二、认识浏览器内核2.1什么是浏览器内核2.2常见的浏览器内核三、浏览器渲染整体过程3.1HTML的解析过程3.2解析生成CSS规则3.3构建RenderTree3.3.1注意事项......
  • WPF 模仿前端大佬写一个Hover效果
    先看一下效果吧： 原博主的地址:【动画进阶】神奇的卡片Hover效果与Blur的特性探究-ChokCoco-博客园(cnblogs.com)原效果是一个css效果,我们采用WPF的方式模仿一下因为技术有限，没有原博主的那么好看，毕竟盗版永远比不过原版...然后这里看一下盗版的怎么写吧先是拿到......
  • 2024最新的Java八股文合集来了，彻底解决一线大厂面试难题
    Java提供的多态机制？Java提供了两种用于多态的机制，分别是重载与覆盖。重载：重载是指同一个类中有多个同名的方法，但这些方法有不同的参数，在编译期间就可以确定调用哪个方法。覆盖：覆盖是指派生类重写基类的方法，使用基类指向其子类的实例对象，或接口的引用变量指向其实现类的实......
  • 微前端架构：使用不同框架构建可扩展的大型应用
    随着前端技术的发展，构建和维护大型应用变得愈发复杂。传统的单体前端架构逐渐暴露出诸多问题，如代码臃肿、构建时间过长、团队协作困难等。为了解决这些问题，微前端架构应运而生。微前端架构允许我们将一个大型应用拆分成多个独立的子应用，每个子应用可以使用不同的技术栈独立......
  • 电脑浏览器或者部分软件没有网络，但是其他软件可以正常联网
    导言这是之前遇到的一些问题，后面在网上找也没找到准确的解决办法，后面在b站有一个博主介绍了解决办法，就想着记录一下，以便自己下次遇到能有办法可以修改，顺便跟大家分享一下问题原因这是电脑开翻墙软件，有的软件会修改电脑的DNS网络代理，正常我们的电脑的网络代理是动态的，比如你......
  • 软件测试岗位的经典面试题
    昨天辅导星球一位同学的终面，他提到了前两轮技术面试中面试官问到的几道面试题，他回答的不是特别好，问我有没有更好的方法。我看了一下，都是很经典的测试岗位面试题。在我近十年的测试职业生涯中，我也面试过不少软件测试岗位的候选人，这几个问题我也经常问到。但很多同学在这几个高频......
  • 这年头，好好分享前端高质量文章也要被怼
    起因大家好，我是欧阳。熟悉的同学都知道欧阳的源码文章大都是4000字（除去代码）以上的高质量文章，基本没有水文。但就是这样欧阳昨天也被某2.6kstar的开源大佬给怼了，被怼了后欧阳有点不舒服，就把被怼的截图（未打码）发到了粉丝群和朋友圈。过了一会儿才发现欧阳不仅被怼了，还在粉丝群......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99