前端面试要点（四）：HTML & 浏览器

2022-06-22 147 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路

前言

在面试和复习过程中总结的一些前端知识点，记录下来，风格较简洁，尽量涵盖内容要点和简单例子。本文是前端面试系列第四篇：HTML & 浏览器，持续更新...

一、如何定位内存泄漏

全局变量中存了大量的数据；
滥用闭包；

二、跨页面通信的方式有几种

对于 同源页面 之间，可以通过 LocalStorage 当做中央站存储消息，然后各个页面可以监听 storage 事件获取消息的更新信息；另外 Service Worker 也可以实现这种广播效果。
对于 非同源页面 之间，则可以通过嵌入同源 iframe 作为 “桥” ，将非同源页面通信转换为同源页面通信。

三、hash 和 history 两种路由的区别

hash 只能修改 # 号后面的内容；
hash 不会触发页面重新加载，完全属于前端路由，但不利于 SEO；
history 需要服务端配置，否则有可能出现 404；
history 的兼容性较差，需要浏览器支持 html5 History 对象中新增的 pushState() 和 replaceState()；

四、对 DOM 树的理解

DOM 是浏览器渲染引擎能够直接理解的结构，它的作用是允许程序可以动态的访问和修改文档。
HTML解析器 将 HTML文件流 转化为 DOM树；
CSS解析器 将 CSS文件流 转化为 CSSOM树；
通过 DOM树 和 CSSOM树，浏览器就可以通过二者构建 渲染树 了。

五、说下事件模型

一次事件共有三个过程：

事件捕获阶段：事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
事件处理阶段：事件到达目标元素，触发目标元素的监听函数。
事件冒泡阶段：事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

六、浏览器的缓存策略

浏览器缓存过程： 强缓存，协商缓存。

强缓存 是当我们访问 url 的时候，不会向服务器发送请求，直接从缓存中读取资源，但是会返回 200 的状态码。如果响应头中有 expires 或者 cache-control 字段，代表这是强缓存，浏览器就会把资源缓存在 memory cache 或 disk cache 中。
协商缓存 就是强缓存失效后，浏览器携带缓存标识向服务器发送请求，由服务器根据缓存标识来决定是否使用缓存的过程。协商缓存使用 Last-Modified / If-Modified-Since 或者 Etag / If-None-Match，如果使用缓存，返回 304。

七、聊下你知道的浏览器架构

Chrome 的架构：

渲染引擎（浏览器内核）使用的是 WebKit
JS 解释器使用的是 V8 引擎

八、描述下浏览器从输入网址到页面展现的整个过程

DNS 解析
发起 TCP 连接
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
解析 HTML 形成 DOM 树
解析 CSS 形成 CSSOM 树
合并 DOM 树和 CSSOM 树形成渲染树
浏览器开始渲染并绘制页面
连接结束

九、并发和并行的区别

并发：操作系统会按照一定的调度策略，将 CPU 的执行权分配给多个进程，多个进程都有被执行的机会，让它们交替执行，形成一种 “同时在运行” 的假象，因为 CPU 速度太快，人类根本感觉不到。（实际上在单核的物理环境下同时只能有一个程序在运行）
并行：是物理存在的，他们可以真正实现同时处理多个任务。

并行可以是并发，而并发不一定是并行，两种不能划等号，并行一般需要物理层面的支持。

十、安全攻击

XSS 攻击：

定义：Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
防范：
1. 使用转义函数 escapeHTML；
2. 对于链接跳转禁止以 javascript: 开头

CSRF 攻击：

定义：CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
防范：
1. 同源检测，阻止不明外域的访问；
2. 提交接口时带上本域才能拿到的信息如 token 验证