Inagora 爬虫实习面试记录

一面：

面试问项目啥的直接跳过，说说问的技术问题：

浏览器里除了会保存 cookie 信息以外还会保存什么其他信息吗？

这个问题我当时答得磕磕绊绊的，只说了有个 local storage 然后还会保存一些 css 这种信息用来提高多次加载的速度以外没回答出什么。正常的回答如下：

除了 Cookie，现代浏览器在本地存储的信息非常丰富，涵盖了网页应用数据、用户浏览偏好、网络缓存以及安全凭证等多个维度。

按用途和技术架构，主要可以分为以下几大类：

1. Web 存储机制（Web Storage & Databases）

这些是前端开发者用来在本地存储应用数据的技术，存取容量远大于传统的 Cookie（Cookie 通常限制为 4KB 左右）。

LocalStorage（本地存储）：
- 特点： 容量大（通常 5MB~10MB），永久保存，除非手动清理或通过代码删除，关闭浏览器也不会关掉。
- 常见用途： 存储用户的界面主题设置（深色/浅色模式）、未提交的草稿内容、用户偏好设置等。
SessionStorage（会话存储）：
- 特点： 容量与 LocalStorage 类似，但生命周期仅限于当前标签页。关闭标签页或浏览器后数据即被清空。
- 常见用途： 存储单次访问的临时状态，例如多步骤表单的中间数据、单页应用（SPA）的临时页面状态。
IndexedDB（索引数据库）：
- 特点： 一种在浏览器端运行的 NoSQL 事务型数据库，支持存储大量的结构化数据（甚至是二进制大对象 Blob），提供索引和高效查询，容量通常按磁盘剩余空间的百分比分配（可达几百 MB 甚至 GB）。
- 常见用途： 离线 Web 应用（如 Google Docs 离线编辑）、复杂的前端数据缓存、Web 游戏数据存储。
Web SQL（已废弃）：
- 旧版浏览器使用的关系型数据库存储方式，目前大多数主流浏览器已停止支持，全面转向 IndexedDB。

2. 缓存与离线文件（Cache & Offline Assets）

为了提高加载速度、节省网络流量，浏览器会把静态资源保存在本地。

HTTP 磁盘缓存（Disk Cache / Memory Cache）：
- 保存网页的 HTML、CSS、JavaScript 文件、图片、字体文件以及音视频。
- Memory Cache 保存在内存中（随标签页关闭而释放），Disk Cache 保存在硬盘中。
Service Worker 缓存（Cache API）：
- 现代 Progressive Web App (PWA) 的核心组件，允许脚本拦截网络请求，并将特定的静态资源和 API 响应手动缓存到本地，实现完全离线运行。

3. 用户个人数据与自动化填充

为了方便用户日常使用，浏览器自带的管理器会保存大量个人信息（通常经过加密）。

密码与凭证（Password Manager）： 保存的账号密码、Passkeys（通行密钥），通常会自动同步到用户的云端账号（如 Google 账号、iCloud）。
自动填充数据（Autofill Data）： 姓名、手机号、电子邮箱、收货地址等。
支付信息： 保存的信用卡/借记卡信息（通常敏感安全码 CVC/CVV 不会保存，只保存卡号和过期时间）。

4. 浏览历史与用户行为痕迹

这些用于支撑浏览器的日常功能，如历史回溯、书签同步等。

历史记录（Browsing History）： 访问过的网址（URL）、页面标题、访问时间及频次。
下载历史（Download History）： 通过浏览器下载的文件列表及本地保存路径（不包含文件本身内容）。
书签与收藏夹（Bookmarks）： 用户保存的网页地址和分类层级。
恢复会话（Session Restore）： 上次关闭浏览器时打开的标签页列表及历史前进/后退栈，用于“重新打开上次关闭的标签页”。

5. 权限管理与网站配置

网站权限设置（Site Permissions）： 每个网站是否被允许使用地理位置、摄像头、麦克风、通知、剪贴板、弹出式窗口等。
站点偏好（Site Preferences）： 针对特定网站设置的页面缩放比例、默认字体大小、自动翻译选项等。

6. 安全、标识符与底层凭证

TLS/SSL 客户端证书（Client Certificates）： 在某些高安全要求的网站（如网银、企业内网）使用的身份认证证书。
HSTS 列表（HTTP Strict Transport Security）： 记录哪些网站必须通过安全的 HTTPS 连接访问，防止降级攻击。
浏览器指纹与特征标志（Device/Browser Identifiers）： 某些特定的 DRM（数字版权管理）凭证（例如播放 Netflix 高清视频需要的 Widevine 凭证），以及浏览器 Flags 设置（chrome://flags 等实验性功能状态）。

2. 在浏览器 F12 开发者工具中，你可以看到上面有几个选项

打红圈的 Fetch/XHR 具体是什么呢？

这问题当时问的我也有点懵，我点开看了一下，直接说这块我也不太熟，不过我看 Fetch/XHR 这里面都是一些后端的接口数据。

正解：

在浏览器的 F12 开发者工具 中，Network（网络） 标签页下的 Fetch/XHR 选项卡，是专门用来监听和展示网页在后台与服务器进行数据交互的请求列表。

简单来说，这里展示的就是网页“偷偷”在后台发送和接收的数据，而不需要刷新整个页面。

1. Fetch 和 XHR 分别代表什么？

它们都是前端 JavaScript 用来向服务器异步请求数据的技术手段（通常被称为 AJAX）：

XHR（XMLHttpRequest）：
- 老牌技术。早在 2000 年左右就已诞生，是早年实现“无刷新更新页面”的功臣。
- 它的语法相对冗长和古老，但在很多老旧项目或底层封装库（如著名的 axios 库）中依然被大量使用。
Fetch：
- 现代标准。是 HTML5 时代推出的新 API，用于替代传统的 XHR。
- 基于现代 JavaScript 的 Promise 机制设计，代码更加简洁、优雅，是目前新项目开发的主流选择。

在 F12 的 Fetch/XHR 筛选器下，浏览器会把通过这两种 API 发出的网络请求集中在一起展示。

2. 它们和普通请求（如 Doc、CSS、JS）有什么区别？

当你在浏览器地址栏输入网址并按回车时：

Doc（文档请求）： 浏览器去下载主 HTML 文件。
CSS / JS / Img（静态资源请求）： 浏览器解析 HTML 时，顺便去下载引用的样式表、脚本和图片。下载完后，页面就渲染出来了。

而 Fetch/XHR（动态数据请求）：

触发时机： 通常是在页面加载完成后，由用户的操作（比如点击“加载更多”、提交表单、切换 Tab）或定时器触发。
传输内容： 它们通常不传输大块的页面样式或图片，而是传输结构化数据（最常见的是 JSON 格式，也有 XML 或纯文本）。
页面体验： 拿到数据后，JavaScript 会局部更新页面的某一部分（例如刷出来 10 条新的评论），而整个浏览器页面不会闪烁或重新加载。

3. 常见的使用场景

开发者前端调试： 检查调用的后端 API 接口是否正常、入参（Payload）有没有传错、服务器返回的数据结构对不对。
网络爬虫/数据采集： 很多动态渲染的网站，其真实数据都是通过 Fetch/XHR 接口返回 JSON 格式的数据。直接抓取这里的接口比解析 HTML 页面效率高得多。
接口逆向/分析： 分析网页前端与服务端的通信逻辑、身份验证方式（如 Bearer Token、自定义 Header）等。

哎！你别说，虽然这俩问题我都答得稀烂，不过和面试官整体聊项目、聊其他的都很愉快，一面结束10分钟HR告诉我一面通过准备二面。

二面：

二面主要问的是人生理想，然后就是为啥选择我们单位，我人还是比较懵圈的（因为我啥都玩，所以我也没啥想法，有啥单位面我就过去了）不过面试官说挺好的，20岁的年轻人懵懂转圈是很正常的事情。

问的唯一的技术相关的问题就是 Python 基础：1.Python 有几种数据结构？你记得啥说啥就行 2.既然你说到了 dict 和 list，讲一下他们的区别

这俩问题都太ez了，答出来之后就没啥了，二面通过一小时之后回家的路上就HR就电话通知我稍后发offer聊待遇了。