当前位置:   article > 正文

前端面试问题汇总 - 浏览器篇

前端面试问题汇总 - 浏览器篇

1. 本地存储有哪些,区别是什么?

  • Cookies(Cookie): 是存储在用户计算机上的小型文本文件,由网站服务器发送到用户的浏览器,然后在用户访问网站时由浏览器发送回服务器。Cookies 可以用来存储用户的会话信息、登录状态、购物车内容等。
  • Web Storage(Web 存储): 包括 localStorage 和 sessionStorage 两种类型。它们允许浏览器在用户计算机上本地存储键值对数据,供同一网站的页面使用。
    • localStorage: 存储的数据没有过期时间,除非被清除或手动删除。
    • sessionStorage: 存储的数据在当前会话结束时被清除,关闭浏览器窗口或标签页时会话也会结束。
  • IndexedDB(Indexed Database): 是一种低级 API,用于客户端存储大量结构化数据(例如对象、文件)。IndexedDB 提供了比 Web Storage 更强大和灵活的数据存储能力,允许对存储的数据进行高级查询和索引。
  • Cache Storage: 用于存储缓存的响应,包括来自网络的响应、脚本、样式表、图像等资源。Cache Storage API 可以让开发者控制哪些资源被缓存以及如何使用这些缓存。

2. Url 到浏览器的一个过程有哪些步骤?

  1. URL 解析: 浏览器会解析 URL,提取出协议(例如 HTTP、HTTPS)、主机名(例如 www.example.com)、端口号(如果有)、路径等信息。
  2. DNS 查询: 如果主机名是一个域名,浏览器会将其发送到 DNS(域名系统)服务器,以获取与该域名相对应的 IP 地址。如果 IP 地址已经存在于浏览器的缓存中,或者是在操作系统的缓存中,那么这一步可以跳过。
  3. 建立 TCP 连接: 浏览器使用获得的 IP 地址和端口号,与服务器建立 TCP 连接。如果是 HTTPS 协议,还需要进行 SSL/TLS 握手过程建立安全连接。
  4. 发起 HTTP 请求: 一旦建立了 TCP 连接,浏览器会发送一个 HTTP 请求到服务器,请求的内容包括请求方法(GET、POST 等)、URL、HTTP 头部(包括用户代理、接受的内容类型等信息)以及可选的请求体(对于 POST 请求)。
  5. 服务器处理请求: 服务器收到请求后,会根据请求的 URL、头部信息等进行相应的处理,可能是查找对应的文件或资源、执行后端代码、查询数据库等。
  6. 服务器响应: 服务器处理完请求后,会生成一个 HTTP 响应,包括状态码(例如 200 表示成功、404 表示未找到等)、响应头部(包括服务器类型、内容类型等信息)以及响应体(实际返回的内容)。
  7. 接收响应: 浏览器接收到服务器的响应后,会开始解析响应,根据响应头部的内容类型确定如何处理响应体。对于 HTML 页面,浏览器会解析并渲染页面,对于其他类型的资源(如图像、样式表、JavaScript 文件等),会根据其类型进行相应的处理。
  8. 关闭连接: 在所有内容都被下载完毕后,浏览器会关闭与服务器的 TCP 连接,除非要继续保持持久连接(HTTP Keep-Alive)以便后续请求。
  9. 渲染页面: 浏览器会将接收到的 HTML 内容解析成 DOM(文档对象模型),将 CSS 样式应用到文档,执行 JavaScript 代码,并将最终的页面呈现给用户。

3. 渲染和重绘、重排回流

        在前端开发中,"渲染"、"重绘"、"重排"和"回流"都是与页面性能和渲染流程相关的概念,它们之间有些微妙的区别:

  • 渲染:
    • 渲染是指将 DOM 树和 CSS 样式表转换为屏幕上的像素的过程
    • 渲染包括了重排和重绘,以及合成步骤。
  • 重绘 (Repaint):
    • 重绘指的是当 DOM 元素的样式发生改变,但不影响其在文档流中的位置时,浏览器会重新绘制该元素的过程。
    • 例如,改变颜色、背景颜色等属性。
  • 重排 (Reflow):
    • 重排是指当 DOM 的变化影响了元素的几何属性(宽度、高度、位置等),浏览器需要重新计算元素的几何属性,并重新构建渲染树的过程。
    • 重排会触发重绘
    • 重排的成本较高,因为它会涉及到整个页面布局的重新计算
  • 回流 (Layout):
    • 回流是重排的一种特殊形式,它指的是当 DOM 的变化导致了部分或全部的页面布局发生改变时,浏览器需要重新计算并重新渲染部分或全部的文档的过程。
    • 回流是一种比重排更加严重的性能问题,它会影响到页面的所有部分,因此应该尽量避免。

        在前端开发中,为了提高页面性能,应尽量减少重排和回流的次数。一些常见的导致重排和回流的操作包括改变元素的尺寸、位置、边距、填充、字体等。因此,在编写代码时应该尽量避免频繁地修改页面布局,并采取一些优化策略,例如使用 CSS3 动画代替 JavaScript 动画、使用 documentFragment 批量操作 DOM、使用 CSS 属性transform和opacity来优化动画等。

4. 进程和线程

        进程(Process)和线程(Thread)是计算机操作系统中用于执行程序的两个重要概念,它们之间有一些区别和联系:

  • 进程(Process)
    • 进程是操作系统分配资源的基本单位,每个进程拥有独立的内存空间、代码和数据,彼此之间相互独立不能直接访问其他进程的资源。
    • 每个进程都有自己的地址空间,包括代码段数据段堆栈段等,可以在自己的地址空间中进行读写操作,不会被其他进程干扰。
    • 进程之间可以通过进程间通信(IPC,Inter-Process Communication)来进行数据交换和共享资源
  • 线程(Thread)
    • 线程是进程内的执行单元,是 CPU 调度的基本单位一个进程可以包含多个线程,这些线程共享进程的地址空间和资源
    • 同一个进程内的线程之间可以直接访问共享的内存空间和资源,可以方便地进行数据交换和通信。
    • 多线程可以提高程序的并发性和响应速度,可以同时执行多个任务,提高了 CPU 的利用率。
  • 区别:
    • 进程是资源分配的基本单位,每个进程有独立的内存空间,相互之间独立;而线程是 CPU 调度的基本单位,同一进程内的线程共享进程的内存空间和资源。
    • 进程之间的切换需要切换地址空间和上下文,开销较大;而线程之间的切换只需切换线程的上下文,开销较小。
    • 进程之间的通信需要通过 IPC 实现;线程之间可以直接访问共享的内存空间,实现数据共享和通信。

        总的来说,进程和线程是操作系统中用于执行程序的两个基本概念,它们在资源分配、内存管理、调度机制和通信方式等方面有所区别,但又有一定的联系,共同完成了程序的执行和资源管理任务。

5. 浏览器渲染原理

  1. 获取页面资源
    1. 浏览器首先通过 HTTP 请求从服务器获取页面的 HTML、CSS、JavaScript 和其他资源。
    2. HTML 文件定义了页面的结构和内容,CSS 文件定义了页面的样式,JavaScript 文件定义了页面的行为和交互。
  2. 构建 DOM 树和 CSSOM 树
    1. 浏览器将获取到的 HTML 解析成 DOM(Document Object Model)树,表示页面的结构和内容。
    2. 同时,浏览器也会解析 CSS 文件,构建 CSSOM(CSS Object Model)树,表示页面的样式信息。
    3. DOM 树和 CSSOM 树的构建是并行进行的。
  3. 生成渲染树(Render Tree):
    1. 浏览器将 DOM 树和 CSSOM 树合并成渲染树,渲染树只包含需要显示的节点和其样式信息。
    2. 渲染树中不包含不可见的节点,例如 <head>、display: none 的节点等。
  4. 布局(Layout 或 Reflow):
    1. 浏览器根据渲染树中的节点计算它们在页面上的位置和大小。
    2. 浏览器会进行布局计算,确定每个节点的几何属性(位置、尺寸等),这个过程也被称为回流(Reflow)。
  5. 绘制(Painting):
    1. 浏览器根据渲染树和布局信息,将页面内容绘制到屏幕上。
    2. 绘制过程包括绘制页面的背景色、文字、图像、边框等。
  6. 合成(Composite):
    1. 浏览器将不同图层(Layer)的绘制结果合成到一起,形成最终的页面。
    2. 合成过程利用了硬件加速,提高了页面渲染的性能和效果。

6. 声明变量浏览器做了什么

1. 词法分析(Lexical Analysis):

  • 浏览器首先对代码进行词法分析,将代码分解成标记(token),包括关键字、标识符、操作符等。

2. 语法解析(Syntax Parsing):

  • 浏览器解析标记,构建语法树(Syntax Tree),以理解代码的结构和含义。

3. 变量声明提升(Variable Hoisting):

  • 对于使用 var 声明的变量,浏览器会在编译阶段将它们的声明提升到当前作用域的顶部。
  • 变量的初始化(赋值)部分不会被提升,只有声明部分会被提升。

4. 内存分配(Memory Allocation):

  • 在变量声明被提升后,浏览器会在内存中分配空间来存储变量的值。
  • 对于简单类型(如数字、布尔值),浏览器会直接在栈内存中分配空间。
  • 对于引用类型(如对象、数组),浏览器会在堆内存中分配空间,并在栈内存中存储对堆内存中对象的引用。

5. 标识符绑定(Identifier Binding):

  • 浏览器将变量名和存储在内存中的值进行关联,以便在代码执行时能够正确访问和操作变量的值。

6. 初始化(Initialization):

  • 对于使用 var 声明的变量,浏览器会将其初始化为 undefined,直到实际赋值操作执行。
  • 对于使用 let 或 const 声明的变量,浏览器不会初始化变量,直到变量的初始化语句执行之前,访问该变量会报错(暂时性死区)。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/430274
推荐阅读
相关标签
  

闽ICP备14008679号