前端八股记录-浏览器+网络相关
绝不平凡 2024-10-13 14:33:07 阅读 62
文章目录
一、HTTP缓存策略及浏览器存储方式1. 缓存策略强缓存：协商缓存
2. 存储方式
二、前端安全、中间人攻击三、src和href有什么区别四、`<!DOCTYPE html>`标签有何作用五、DOM树的解析过程（浏览器渲染原理）六、如何优化DOM树解析过程
一、HTTP缓存策略及浏览器存储方式
1. 缓存策略
<code>根据是否需要向服务器发起HTTP请求，将缓存过程划分为强缓存和协商缓存两部分，强缓存优先于协商缓存
HTTP缓存都是从第二次请求开始的：
第一次请求资源时，服务器返回资源，并在response header中回传资源的缓存策略；第二次请求时，浏览器判断这些请求参数，击中强缓存就直接200，否则就把请求参数加到request header头中传给服务器，看是否击中协商缓存，击中则返回304，否则服务器会返回新的资源。
强缓存：
服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。强缓存命中则直接访问浏览器资源常见HTTP请求头：面试如果遇到强缓存有哪些方法来控制就是问请求头
a. Expires：HTTP1.0字段。资源到期的绝对时间，在这个时间点之前发起请求可以直接从浏览器中读取数据，而无需发起请求
b. Cache-Control：HTTP1.1字段。资源到期的相对时间，自上次请求正确的资源之后的多少秒的时间段内缓存有效。优先级高于Expires，主要是为了解决Expires在浏览器时间被手动更改导致缓存判断错误的问题。
c. Cache-Control字段的常用值:
max-age:最大有效时间
must-revalidate：超过max-age的时间，浏览器必须向服务器发送请求，验证资源是否还有效
no-cache：不使用强缓存，需与服务器验证缓存是否新鲜
public：所有内容都可以被缓存(包括客户端和代理服务器，如CDN)
private：所有内容只有客户端才可以缓存，代理服务器不能缓存，默认值。
协商缓存
请求头设置了If-Modified-Since或者If-None-Match时，客户端向服务端发送请求验证是否命中协商判断，当浏览器再次加载资源时，如果资源没有变化则继续使用本地缓存，记录为304状态； 如果资源发生变化，服务端响应数据，记录为200状态。两组字段协商缓存有哪些参数
a. Last-Modified & If-Modified-Since：服务器通过 Last-Modified 字段告返回给客户端资源最后一次被修改的时间；浏览器将这个值和内容一起记录在缓存数据库中；下一次请求相同资源时时，浏览器从自己的缓存中找出“不确定是否过期的”缓存。因此在请求头中将上次的 Last-Modified 的值写入到请求头的 If-Modified-Since 字段；服务器将 If-Modified-Since 的值与 Last-Modified 字段进行对比。如果相等，则表示未修改，响应 304；反之，则表示修改了，响应 200 状态码，并返回数据。
b.ETag & If-None-Match：服务器为资源生成唯一标识符（ETag），If-None-Match是浏览器在请求时携带的头，附带 ETag，服务器根据 ETag 来判断资源是否变化。Etag 的优先级高于 Last-Modified。
二者区别：
强缓存-浏览器在未与服务器交互的情况下直接从本地缓存中读取资源。协商缓存：浏览器会与服务器交互，确认资源是否更新。
2. 存储方式
cookie
Cookie 是一种存储在用户浏览器中的小型文本文件。用于在浏览器和服务器之间传输少量数据，可以设置过期时间，通常用于会话管理、身份验证、记录用户偏好等。
受限于大小（通常约 4KB），每次请求时都会附带到 HTTP 头部中，增加带宽消耗。sessionstorage
用于在一个会话期间存储数据。当会话结束时(浏览器关闭时)，存储的数据会被清除。（同一个会话期指在同一个浏览器窗口或标签页中，并且不会在不同标签页或窗口之间共享数据。）
sessionStorage.setItem('key', 'value');
const data = sessionStorage.getItem('key');
localstorage
用于持久化地存储数据，即使关闭浏览器窗口或标签页，数据仍然存在。其存储的数据需要手动删除或通过 JavaScript 代码清除。
localStorage.setItem('key', 'value');
const data = localStorage.getItem('key');
IndexedDB
是一种用于在浏览器中存储大量结构化数据的数据库。它提供了一个异步的 API，可以进行增删改查等数据库操作。IndexedDB 可以存储大量的数据，并支持事务操作。通常需要异步处理。
IndexedDB 存储空间大小是如何约束的
单个数据库的大小限制：每个 IndexedDB 数据库的大小通常会有限制，这个限制可以是固定的（如某些浏览器限制为特定的大小，如 50MB），也可以是动态的（如某些浏览器根据设备剩余存储空间来动态调整大小）。
整个浏览器的大小限制：除了每个数据库的大小限制外，浏览器还可能设置整个 IndexedDB 存储的总大小限制。这个限制可以根据浏览器的策略和设备的可用存储空间来决定。
二、前端安全、中间人攻击
XSS（Cross-Site Scripting）和 CSRF（Cross-Site Request Forgery）是两种常见的网络安全攻击类型。
XXS：跨站脚本攻击
定义：攻击者想尽一切办法将可执行的恶意代码注入网页
类型：
存储型（server端）：
场景：带有用户保护数据的网站功能，如论坛发帖、商品评论、用户私信等
攻击步骤：
1.攻击者将恶意代码提交到目标网站的数据库中
2.用户打开目标网站时，服务端将恶意代码从数据库中取出来，拼接在HTML中返回给浏览器
3.用户浏览器在收到响应后解析执行，混在其中的恶意代码也被执行
4.恶意代码窃取用户数据，并发送到指定攻击者的网站，或冒充用户行为，调用目标网站接口，执行恶意操作反射型（server端）：
与存储型的区别：存储型的恶意代码存储在数据库中，反射型的在URL上
CSRF：跨站请求伪造
三、src和href有什么区别
| 特点 | src属性 | href属性 |
|---|---|---|
| 适用标签 | 标签加载时立即执行 | 用户与链接交互时加载 |
| 对页面功能的影响 | 对页面功能至关重要，不能加载或加载错误会影响页面 | 不会直接影响页面功能，无法加载或加载错误时链接无效 |
| 资源类型 | 脚本文件、图像文件、音频文件等 | HTML文件、CSS文件、图像文件、音频文件等 |
| 是否必须有效链接 | 是 | 否 |
| 作用 | 嵌入外部资源 | 指向其他页面或资源 |
四、<!DOCTYPE html>标签有何作用
DOCTYPE html是HTML5的申明文档（Document Type Declaration），它的作用是告诉浏览器当前文档使用的是 HTML5 规范，确保一致的行为和渲染结果，为不同浏览器提供更好的兼容性和一致性。
具体而言，DOCTYPE html的作用有以下几个方面：
指定文档类型：告诉浏览器当前文档所使用的 HTML 版本是 HTML5。让浏览器可以按照 HTML5 的规范来解析和渲染文档。规范浏览器行为：影响浏览器的行为。HTML5 的文档类型声明告诉浏览器以标准模式（standards mode）来解析文档，以确保一致的行为和渲染结果。提供更好的兼容性：使用 <!DOCTYPE html> 确保文档在不同浏览器中具有一致的处理方式。不同的浏览器对不同版本的 HTML 有不同的处理方式，而使用 HTML5 的文档类型声明可以使浏览器以最新的标准模式来解析文档，提供更好的兼容性和一致性。
五、DOM树的解析过程（浏览器渲染原理）
DOM树是浏览器解析HTML文档时自动生成的。其一般过程为：
解析HTML：浏览器从上到下逐行解析HTML文档，将文档分解为一系列的标记（tokens）构建DOM节点：调用HTML解析器构建DOM节点，并将这些节点将这些节点连接到树形结构中。每个标记对应一个DOM节点，包括元素节点、文本节点、注释节点等。构建父子关系：解析器根据标记的嵌套关系，将构建的DOM节点连接成一个树形结构。嵌套关系表示标记间的父子关系。处理样式和脚本：当解析器遇到样式（CSS）和脚本（JS）时，调用相关的解析器或执行器来处理并应用样式和脚本。生成渲染树：根据DOM树和样式信息生成渲染树（Render Tree），用于页面渲染和绘制树形结构。布局和绘制：根据渲染树进行布局（Layout）和绘制（Painting），确定每个节点在屏幕上的位置和样式，并将其绘制到屏幕上。
六、如何优化DOM树解析过程
减少DOM元素数量：通过合并或删除不必要的元素，使用CSS样式代替多个元素等方式实现。使用语义化HTML结构：合适的HTML标签和语义化结构，能够提高解析效率，减少解析错误的可能。避免深层嵌套的DOM结构：因为深层嵌套会增加DOM节点的数量，增加解析和渲染的时间。使用外部脚本和样式表：外部引入JS代码和CSS样式可以避免在解析过程中阻塞DOM树的构建。使用异步加载脚本：将需要的脚本使用async或defer属性进行异步加载，可以让DOM树解析和脚本加载并行进行，提高解析效率。优化CSS选择器：复杂的选择器需要更多的计算和匹配，会影响解析速度。批量修改DOM：可以减少浏览器的重排和重绘。使用文档片段（DocumentFragment）：将需要频繁操作的DOM元素先添加到文档片段中，然后再一次性将文档片段添加到文档中，可以减少重排和重绘次数。使用虚拟DOM：减少对真实DOM的直接操作，通过比较虚拟DOM树的差异进行最小化的DOM操作，提高效率。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。