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

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 声明的变量，浏览器不会初始化变量，直到变量的初始化语句执行之前，访问该变量会报错（暂时性死区）。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/815993.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

地球上四大洋介绍

地球上四大洋介绍

地球上四大洋的分布是&#xff1a; 太平洋&#xff1a;太平洋是世界上最大的海洋&#xff0c;覆盖了约三分之一的地球表面。它位于亚洲、澳大利亚、美洲和南极洲之间。太平洋的面积约为1.6亿平方公里&#xff0c;拥有世界上最深的点——马里亚纳海沟。 大西洋&#xff1a;大西…
阅读更多...
2024HW --＞ 安全产品 Powershell无文件落地攻击

2024HW --＞ 安全产品 Powershell无文件落地攻击

在HW中&#xff0c;除了了解中间件&#xff0c;web漏洞&#xff0c;这些攻击的手法&#xff0c;还得了解应急响应&#xff0c;安全产品&#xff0c;入侵排查&#xff0c;溯源反制...... 那么今天&#xff0c;就来说一下安全产品&#xff08;安全公司我就不说了&#xff0c;这个…
阅读更多...
ffmpeg cuda硬件解码后处理使用opengl渲染，全硬件流程

ffmpeg cuda硬件解码后处理使用opengl渲染，全硬件流程

1 ffmpeg 硬件解码 使用硬件解码后不要transfer到内存&#xff0c;使用cuda转化nv12 -> bgr24 转化完毕后cuda里面存了一份bgr24 2 gpumat 和 cuda 互操作 如果需要opencv gpumat直接使用cuda内存&#xff0c;则可以手动构造gpumat 可以使用gpumat的各种函数 uchar3* cu…
阅读更多...
6-139 大整数存储-数组

6-139 大整数存储-数组

本题要求实现一个函数，实现大整数以整数形式存储。大整数按每4位保存在整数数组中，如果大整数位数不是4的倍数，则将保证低位都按4位一存。如“123456789”保存为1，2345，6789。大整数以字符串形式输入 int convert(char a[],int x[]); 函数接口定义： a 是以字符串形式输…
阅读更多...
001vscode为什么设置不了中文?

001vscode为什么设置不了中文?

VSCode中文插件安装 在VSCode中设置中文的首要步骤是安装“Chinese (Simplified) Language Pack for Visual Studio Code”扩展插件。这一过程十分简单&#xff0c;只需打开VSCode&#xff0c;进入扩展市场&#xff0c;搜索“ Chinese (Simplified) Language Pack ”然后点击…
阅读更多...
【MATLAB源码-第49期】基于蚁群算法(ACO)算法的栅格路径规划，输出最佳路径图和算法收敛曲线图。

【MATLAB源码-第49期】基于蚁群算法(ACO)算法的栅格路径规划，输出最佳路径图和算法收敛曲线图。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 蚁群算法是一种模拟自然界蚂蚁觅食行为的启发式优化算法。在蚁群系统中&#xff0c;通过模拟蚂蚁之间通过信息素沟通的方式来寻找最短路径。 在栅格路径规划中&#xff0c;蚁群算法的基本步骤如下&#xff1a; 1. 初始化: …
阅读更多...
MES实施优势有哪些？MES制造执行系统的主要内容

MES实施优势有哪些？MES制造执行系统的主要内容

各个行业之间也开始进入到了激烈的竞争当中&#xff0c;很多企业为了能够有效提升企业竞争力&#xff0c;都会通过提升自身实力的方式来提升竞争力。一些制造业也会在经营过程当中使用到MES系统&#xff0c;那么&#xff0c;mes系统的优势有哪些呢&#xff1f; 1、优化企业现场…
阅读更多...
mysql dump导出导入数据

mysql dump导出导入数据

前言 mysqldump是MySQL数据库中一个非常有用的命令行工具&#xff0c;用于备份和还原数据库。它可以将整个数据库或者特定的表导出为一个SQL文件&#xff0c;以便在需要时进行恢复或迁移。 使用mysqldump可以执行以下操作&#xff1a; 备份数据库&#xff1a;可以使用mysqld…
阅读更多...
ELK日志分析系统+Filebeat

ELK日志分析系统+Filebeat

目录 一、Filebeat介绍 1、Filebeat简介 2、Filebeat的工作方式 3、filebeat工作流程 4、Filebeat的作用 5、filebeat的用途 1.为什么要用filebeat来收集日志&#xff1f;为什么不直接用logstash收集日志&#xff1f; 2.filebeat和logstash的区别 二、部署(ELFK)Fileb…
阅读更多...
自动化测试Junit

自动化测试Junit

1.什么是Junit JUint是Java编程语言的单元测试框架&#xff0c;用于编写和运行可重复的自动化测试。 JUnit 促进了“先测试后编码”TDD的理念&#xff0c;强调建立测试数据的一段代码&#xff0c;可以先测试&#xff0c;然后再应用。这个方法就好比“测试一点&#xff0c;编码一…
阅读更多...
现在有一个二叉树， 父节点保存子节点字符总长度。

现在有一个二叉树， 父节点保存子节点字符总长度。

现在有一个二叉树&#xff0c; 父节点保存子节点字符总长度。 typedef struct Node{ char *data; struct Node* left; struct Node* rigth; int length; }Node,*tree; 写一个求substring的功能。 Now, if we call substring with lower idx2 and upper idx7, the first part ca…
阅读更多...
【SERVERLESS】AWS Lambda上实操

【SERVERLESS】AWS Lambda上实操

通过Serverless的发展历程及带给我们的挑战&#xff0c;引出我们改如何改变思路&#xff0c;化繁为简&#xff0c;趋利避害&#xff0c;更好的利用其优势&#xff0c;来释放企业效能&#xff0c;为创造带来无限可能。 一 Serverless概述 无服务器计算近年来与云原生计算都是在…
阅读更多...
OSPF星型拓扑和MGRE全连

OSPF星型拓扑和MGRE全连

一&#xff0c;拓扑 二&#xff0c;要求 1&#xff0c;R6为ISP只能配置IP地址&#xff0c;R1-R5的环回为私有网段 2&#xff0c;R1/4/5为全连的MGRE结构&#xff0c;R1/2/3为星型的拓扑结构&#xff0c; 3&#xff0c;R1为中心站点所有私有网段可以互相通讯&#xff0c;私有网段…
阅读更多...
antd+vue——datepicker日期控件——禁用日期功能

antd+vue——datepicker日期控件——禁用日期功能

需求&#xff1a;今天之前的日期禁用 <a-date-pickerv-model.trim"formNE.deliveryTime":disabled-date"disabledDate"valueFormat"YYYY-MM-DD"allowClearstyle"width: 100%" />禁用日期的范围&#xff1a; //时间范围 disab…
阅读更多...
第14届java A组蓝桥杯做题记录

第14届java A组蓝桥杯做题记录

A题 特殊日期 package Java14省赛.Java研究生组;import java.time.Year; //特殊判断一下2月份&#xff0c;leaf 为true 1 import java.util.*;import 蓝桥杯.dfs_n皇后; public class 特殊日期 {static int sum(int d){int res 0;while(d > 0){res d % 10;d / 10;}return…
阅读更多...
Java GC了解

Java GC了解

Jstack找到线程的快照 jvm提供其他命令作用 jps&#xff1a; 虚拟机进程状况工具&#xff0c;类似linux的ps命令 jstat&#xff1a;虚拟机统计信息监视工具&#xff0c;经常看gc情况的会使用到 jinfo: java配置信息工具 jmap&#xff1a; java内存映射工具&#xff0c;dump&am…
阅读更多...
微服务篇面试题

微服务篇面试题

1、SpringCloud的组件有哪些&#xff1f; 2、负载均衡如何实现&#xff1f; 3、什么是服务雪崩&#xff1f;怎么解决&#xff1f; 4、项目中有没有做过限流&#xff1f; Tomcat单体可以&#xff0c;分布式不适合 5、解释一下CAP和BASE P&#xff1a;加入node03这边的网络断了&a…
阅读更多...
基于PCIe的智能处理系统研究

基于PCIe的智能处理系统研究

引言 人工智能是集合众多方向的综合性学科,在诸多应用领域均取得了显著成果。随着航空领域人工智能技术研究的不断深入,面向开放式机载智能交互场景,人工智能的应用可解决诸多问题。例如智能感知、辅助决策等,可利用人工智能算法对多源传感器捕获的海量信息进行快速处理,仅将处…
阅读更多...
Go语言异常处理方式

Go语言异常处理方式

Go 语言没有传统的异常处理机制&#xff0c;如 Java、C 或 Python 中的 try-catch 语句。取而代之&#xff0c;Go 采用了基于返回错误值和 panic/recover 机制的混合模式来进行错误处理。以下是 Go 语言中处理异常&#xff08;或称错误&#xff09;的两种主要方式&#xff1a; …
阅读更多...
【8086汇编】汇编语言基础入门

【8086汇编】汇编语言基础入门

文章目录 一、汇编简介1. 汇编语言的组成2. CPU、寄存器、内存3. CPU对存储器的读写4. 拓展5. 检测6. 解析 二、寄存器1. mov、add命令2. 物理地址3. CS:IP 装段地址和偏移地址3.1 如何改变CS:IP的值 4. 数据段DS:[address]4.1 前置知识&#xff1a;字与字节4.2 DS:[address] 5…
阅读更多...
最新文章

Copyright @ 2022~2023