一、浏览器五大进程

1、什么是线程和进程

• 一个进程就是一个程序的运行实例，启动一个程序时，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程 进程中的任意一线程执行出错，都会导致整个进程的崩溃
• 线程之间共享进程中的数据
• 当一个进程关闭后，操作系统会回收进程所占用的内存
• 进程之间的内容相互隔离

2、浏览器五大进程

2.1、浏览器主进程

负责界面展示、用户交互、子进程管理、存储等功能

2.2、渲染进程

核心任务是将HTML、CSS和JavaScript转换为用户可以与之交互的网页，排版引擎Blink和JavaScript引擎V8都是运行在该进程中，默认情况下，Chrome 会为每个Tab标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。 其中，渲染进程是多线程，其中包括：

• GUI渲染线程

主要用于构建dom树、css树和Render树，当页面需要重绘或由于某种操作引发回流时，该线程就会执行

• JS引擎线程（JS内核例如V8引擎）

JS引擎线程跟GUI渲染线程互斥，JS引擎执行时GUI线程会被挂起，因此假设js执行时间过长，就会造成页面渲染不连贯，导致页面渲染加载阻塞 但是如果有非常耗时的操作，可以申请浏览器单开一个web worker线程，其中的任何操作都不会影响js引擎主线程

• 事件触发线程

管理一个任务队列，用来控制事件循环，当js引擎执行代码块如setTimeout时，会将对应任务添加到事件线程中，当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待js引擎的处理，由于js单线程关系，所以这些待处理队列中的事件需要排队等待js引擎空闲时处理

• 定时器触发线程

浏览器定时计数器并不是由js引擎计数的，因为js引擎是单线程的，如果处于阻塞线程状态就会影响计时的准确，因此需要通过单独线程来计时并触发定时（计时完毕后添加到事件队列中，等待js引擎空闲后执行）

• 异步http请求线程

XMLHttpRequest连接后通过浏览器新开一个线程请求，当检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将回调函数放到事件队列中，再由js引擎执行

2.3、GPU进程

负责3D渲染

2.4、网络进程

负责页面网络资源加载

2.5、插件进程

主要负责插件的运行，因插件易崩溃 ，所以需要通过插件进程来隔离，保证插件进程崩溃不会对浏览器和页面造成影响

二、Event Loop

1、原理

JS同步任务都在主线程上执行，形成一个执行栈，主线程之外，事件触发线程管理一个任务队列，只要异步任务有了运行结果，就会在任务队列之中放置一个事件，一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

2、宏任务和微任务

在JS中分为两种任务类型：macrotask和microtask，每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行），浏览器为了保证js内部宏任务与DOM任务能够有序执行，会在一个宏任务执行结束后，在下一个宏任务执行前，对页面进行重新的渲染；

在某个宏任务执行完后，会将在他执行期间产生的所有微任务都执行完毕（在渲染之前） macrotask中的事件都是放在一个事件队列中的，而这个队列由事件触发线程维护；

microtask中的所有微任务都是添加到微任务队列（Job Queues）中，等待当前macrotask执行完毕后执行，而这个队列由JS引擎线程维护。

三、浏览器缓存

浏览器的缓存机制其实就是HTTP的缓存机制，其机制是根据HTTP报文的缓存标识进行的。 缓存将存在于进程中的内存或硬盘中。

1、缓存方式

1.1、强缓存

当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文中的HTTP头中和请求结果一起返回给浏览器，控制强缓存的字段分别是Expires（HTTP1.0）和Cache-Control（HTTP1.1），其中Cache-Control优先级比Expires高 Expires的值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端时间小于Expires的值时，直接使用缓存结果 Cache-Control有几种值，其中max-age=xxx代表缓存内容将在xxx秒后失效。

1.2、协商缓存

协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。

控制协商缓存的字段：

- Last-Modified（服务端） / If-Modified-Since（客户端）

Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间。

If-Modified-Since是客户端再次发起该请求时，携带上次请求返回的Last-Modified，通过此字段值告诉服务端该资源上次请求返回的最后被修改时间。服务器收到请求，发现请求头含有If-Modified-Since，则会根据该字段值与该资源在服务器的最后被修改时间做对比，若后者大于前者，则重新返回资源，200，否则返回304,继续使用缓存。

- Etag（服务端） / If-None-Match（客户端）

Etag是服务端响应请求时，返回当前资源文件的一个唯一标识（服务器生成）

If-None-Match是客户端再次发起该请求时，携带上次请求返回的Etag，通过此字段值告诉服务器该资源上次请求返回的唯一标识值，服务器收到请求后，对比If-None-Match和Etag的值，如果不一致返回200,不一致则返回304。

2、缓存过程

浏览器第一次向服务器发起请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中； 当浏览器再次向服务器发起请求时，会在浏览器缓存中查找该请求的返回结果以及缓存标识。

如果是强缓存，则存在三种情况：

• 不存在缓存结果和缓存标识 ，强制缓存失效 ，则直接向服务器发起请求。
• 存在该缓存结果和缓存标识，但该结果已经失效，强制缓存失效，则使用协商缓存。
• 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果。

如果命中协商缓存，则存在两种情况：

• 协商缓存生效，返回304。
• 协商缓存失效，返回200和请求结果。

四、cookie、session和token的区别

cookie是一种在客户端存储的小型数据文件；session是服务端一种会话管理机制；token是一种验证用户身份和权限的令牌，通常在用户登录后生成。

1、cookie与session的区别

为了处理http无状态的情况，即对于同一请求，http无法识别是哪个客户端发出的，也无法判断是否是已登录用户的请求，cookie设计的初衷就是为了弥补http的无状态，帮助记录客户端的用户状态，作为用户登陆凭证的载体。 session是服务端的一种机制，使用类似散列表的数据结构来保存用户信息，如登录状态 cookie则可以用于服务端保存登录状态，比如为客户端设置cookie来保存session对应的sessionId，下次请求时客户端自动携带cookie，服务端从中取出sessionId，再从session表中获取用户登录状态及用户信息。

2、cookie与token的区别

token是另一种处理http无状态的方式，一般设置在请求头中。当用户登录成功时返回token给客户端，客户端再次请求时携带token，服务端获取token后，再从session中获取用户信息及登录状态；但是与cookie相比，因为token请求时不会自动携带，而cookie由于缺乏域控制，即可以跨域共享；缺乏验证机制，请求时自动携带；存在一定持久性等原因，容易造成CSRF（跨站请求伪造）攻击和XSS（跨站脚本攻击）。（可设置cookie的http-only和安全属性来防止攻击）。

五、跨域

1、iframe跨域

• otherWindow.postMessage
• document.domain
• window.name

2、API跨域

• JSONP

• Nginx （同源策略只是浏览器的一个策略而已，它是限制不到后端的，也就是前端->后端会被同源策略限制，但是后端->后端则不会被限制）

• Node代理

• websocket

• CORS

  Nginx都有哪些能力？

• 静态资源托管，托管HTML、CSS、JavaScript、图片、字体等静态资源

• 反向代理 将客户端请求转发到后端服务器，隐藏后端服务器的实际地址

• 负载均衡 将请求分发到多个后端服务器，提升应用的可用性和性能

• HTTPS配置和SSL终止 为网站启用HTTPS，确保数据传输的安全性

• 缓存机制 缓存静态资源以提高加载速度，减少服务器负载

• 压缩 压缩传输内容以减少带宽使用和加快加载速度

六、浏览器输入url到页面展示发生了什么

1、解析URL

浏览器首先解析输入的URL，提取出协议（如HTTP或HTTPS）、域名、端口号、路径以及查询参数等信息。 建立连接：浏览器根据提取出的信息，通过网络与目标服务器建立TCP连接。如果是HTTPS协议，还会进行SSL/TLS握手，以确保连接的安全性。

2、发送请求

浏览器向服务器发送一个HTTP请求，请求可以包括GET、POST等方法，以及请求的资源路径。如果页面包含JavaScript、CSS、图片等资源，浏览器会为每个资源发送单独的请求。

3、服务器响应

服务器接收到请求后，会根据请求处理相应的资源，并将响应结果返回给浏览器。响应通常包括状态码（如200表示成功）、响应内容以及可能的头部信息。

4、处理HTML内容

浏览器接收到HTML响应后，开始解析HTML内容。在这个过程中，浏览器会处理HTML标签、属性、样式和脚本等，并构建DOM（文档对象模型）树。

5、加载资源

浏览器会发现HTML文档中引用的资源（如CSS、JavaScript文件、图片等），并发送请求加载这些资源。这个过程是并行的，浏览器可以同时加载多个资源。

6、执行脚本

加载的JavaScript脚本会被执行，这可能会改变DOM结构、调整页面样式或与服务器进行进一步交互。

7、渲染页面

浏览器根据DOM树、CSS样式和加载的资源，将页面渲染到屏幕上。这个过程包括布局（Layout）、绘制（Paint）和合成（Compositing）。 显示完成：一旦页面渲染完成，用户就可以看到完整的网页内容。如果页面包含动态内容或交互，浏览器会继续处理用户的操作和事件。 整个过程涉及到网络协议、服务器处理、浏览器解析和渲染等多个复杂的步骤，而现代浏览器还包含了许多优化机制，如缓存、并行加载和预加载等，以提高网页加载速度和用户体验。