面试浏览器框架八股文十问十答第三期
相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
⭐点赞⭐收藏⭐不迷路！⭐
1）什么情况会阻塞渲染？
- CSS和JavaScript资源的加载：浏览器在解析HTML时会遇到外部CSS和JavaScript文件的引用，如果这些文件很大或者服务器响应时间较长，会阻塞页面的渲染，直到它们被下载并解析完成。
- JavaScript执行：当浏览器遇到
<script>标签或内联JavaScript代码时，会立即停止HTML的解析并执行JavaScript。如果JavaScript代码执行时间过长，也会阻塞渲染。 - 同步资源加载：一些资源加载（比如通过
<script>标签引入的JavaScript）会阻塞后续资源的下载和渲染。 - 渲染树构建：浏览器需要构建渲染树（Render Tree）来将HTML和CSS转换成可视化的内容，这个过程也会阻塞渲染。
2）浏览器本地存储方式及使用场景
浏览器提供了几种本地存储的方式：
- Cookies：一小段文本信息，可以存储在用户计算机上。Cookies 有大小限制，通常用于存储少量的文本数据，比如用户的身份认证信息或者个性化设置。
- Web Storage（包括LocalStorage和SessionStorage）：可以在客户端存储键值对数据。LocalStorage 存储的数据在浏览器关闭后仍然存在，而 SessionStorage 存储的数据在会话结束后被清除。适合用于保存用户偏好设置、本地缓存数据等。
- IndexedDB：一个基于索引的高性能客户端存储系统，可以存储结构化数据。适合用于大量数据的本地存储，比如离线应用的数据存储。
3）Cookie有哪些字段，作用分别是什么
Cookie 是一种小型的文本文件，由服务器发送给客户端，并保存在客户端的文件系统中。它包含了一些字段来存储信息，常见的字段包括：
- Name（名称）：Cookie 的名字，用来标识 Cookie。
- Value（值）：Cookie 存储的值，通常是一个字符串。
- Domain（域）：指定了哪些域名可以访问该 Cookie。
- Path（路径）：指定了哪些路径下的页面可以访问该 Cookie。
- Expires（过期时间）：指定了 Cookie 的过期时间，过了这个时间后，浏览器将不再发送这个 Cookie。
- Secure（安全标志）：指定了是否只能在通过 HTTPS 协议加密的请求中传输 Cookie。
- HttpOnly：指定了 Cookie 是否能通过 JavaScript 访问，如果设置为 true，则无法通过 JavaScript 访问。
这些字段共同作用于控制 Cookie 的行为，比如指定了在哪些域名下、哪些路径下有效，是否需要加密传输等。
4）Cookie、LocalStorage、SessionStorage区别
- Cookie:
- 存储大小较小，一般限制在4KB左右。
- 每次请求都会携带在HTTP头中，增加了网络流量。
- 有过期时间，可以设置长期存储。
- 可以被服务器和客户端修改。
- LocalStorage:
- 存储容量较大，通常在5MB左右。
- 始终保存在客户端，不参与服务端通信，因此不会影响网络性能。
- 没有过期时间，除非被用户手动清除。
- 只能被同源的页面访问。
- SessionStorage:
- 存储容量与LocalStorage相似，通常在5MB左右。
- 仅在当前会话期间有效，关闭标签页或浏览器后清除。
- 只能被同源的页面访问。
- 不参与服务端通信。
5）前端储存的⽅式有哪些？
前端储存的方式包括：
- Cookies：小型的文本文件，可以在客户端存储少量数据。
- LocalStorage：提供了更大的存储容量，数据保存在客户端，不随请求发送到服务器。
- SessionStorage：类似于LocalStorage，但数据在会话结束后被清除。
- IndexedDB：一种在客户端存储结构化数据的数据库系统，适用于大量数据的本地存储。
- Cache API：浏览器提供的缓存接口，可以缓存网络请求的响应。
6）IndexedDB有哪些特点？
IndexedDB 是一种在浏览器中存储大量结构化数据的数据库系统，具有以下特点：
- 异步操作：IndexedDB 操作是异步的，使用事件处理程序或者Promise进行处理。
- 事务支持：支持事务，可以确保数据的一致性和完整性。
- 键值对存储：数据以键值对的形式存储，可以通过键快速检索数据。
- 支持索引：可以在数据对象上创建索引，提高检索效率。
- 支持大容量存储：适合存储大量结构化数据，相比LocalStorage和SessionStorage容量更大。
- 同源策略：受同源策略影响，只能在相同的域名下访问。
IndexedDB通常用于需要离线存储、大量数据的本地缓存、或者更复杂数据查询的场景。
7）什么是同源策略
同源策略（Same-Origin Policy）是一种由浏览器实施的安全策略，它限制一个文档或脚本如何能够与另一个来源的资源进行交互。同源指的是协议、域名和端口号都相同。同源策略的目的是防止恶意网站通过脚本等方式访问用户的敏感信息，保护用户隐私和安全。
8）如何解决跨越问题
跨越问题指的是在浏览器中，由于同源策略的限制，不能直接进行跨域的操作。为了解决跨域问题，常见的方法有：
- JSONP：通过动态创建
script标签，利用<script>标签的跨域特性，实现跨域请求。但只支持GET请求，并且存在安全性问题。 - CORS（跨域资源共享）：服务器端设置相应的HTTP头部，允许跨域请求。通过在服务器端设置
Access-Control-Allow-Origin等头部来实现。 - 代理服务器：前端向同域的代理服务器发起请求，由代理服务器转发请求到目标服务器。这样绕过了浏览器的同源策略。
- WebSocket：WebSocket协议不受同源策略限制，可以通过WebSocket进行跨域通信。
9）正向代理和反向代理的区别
- 正向代理：客户端通过正向代理访问服务器，客户端向代理发出请求，代理再将请求发送到服务器，服务器将响应发送给代理，最后由代理将响应返回给客户端。客户端是知道代理的存在的，而服务器则不知道真正的客户端是谁。
- 反向代理：客户端向服务器发出请求，但不是直接发送到目标服务器，而是发送到反向代理服务器。反向代理服务器根据负载均衡等策略，将请求转发到其中一个真正的服务器，服务器处理完请求后将响应返回给反向代理，最后由反向代理将响应返回给客户端。客户端不知道真正的服务器是谁，而服务器知道请求来自反向代理。
10）Nginx的概念及其工作原理
Nginx 是一个高性能的开源的HTTP和反向代理服务器。它具有轻量级、高并发、低内存消耗等特点。
工作原理：
- 接收请求：Nginx监听客户端的请求，可以是HTTP、HTTPS等。
- 处理请求：根据配置文件，Nginx可以处理静态文件的请求，也可以将动态请求转发给后端的应用服务器。
- 反向代理：如果配置了反向代理，Nginx将接收到的请求转发给后端的一组服务器，并将响应返回给客户端。
- 负载均衡：Nginx可以配置负载均衡，将请求分发到多个后端服务器，提高系统的性能和可靠性。
- 缓存：Nginx可以作为缓存服务器，将静态资源缓存起来，减轻后端服务器的压力。
- SSL/TLS终端：Nginx可以处理SSL/TLS终端，进行加密和解密，保护数据传输的安全性。
总体而言，Nginx是一个多功能的服务器，可以用于处理静态资源、负载均衡、反向代理等，是一个常用于提高网站性能和可靠性的工具。
开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star！
⭐点赞⭐收藏⭐不迷路！⭐
