前端编程手记

Appearance

浏览器 ​

浏览器相关知识

浏览器渲染一帧都做了什么 ​

浏览器渲染一帧的过程包括以下几个步骤：

  • 处理用户输入：浏览器会处理用户的输入事件，如鼠标点击、键盘输入等。
  • JavaScript执行：浏览器会执行页面中的JavaScript代码。
  • 请求动画帧回调：浏览器会执行requestAnimationFrame回调函数。
  • 样式计算：浏览器会计算元素的最终样式。
  • 布局：浏览器会根据元素的样式和大小计算它们在页面中的位置。
  • 绘制：浏览器会根据元素的样式和位置绘制它们。
  • 合成：浏览器会将多个图层合并为一张图像，并显示在屏幕上。

这些步骤是浏览器渲染一帧的基本过程。不同的浏览器可能会有一些细微的差别，但总体流程是相同的。

从输入url到页面展示出来的整个过程 ​

  1. 浏览器会检查缓存，如果请求的资源在缓存中并且未过期，就会直接使用缓存中的资源。如果资源未缓存或缓存已过期，浏览器会发起新请求。
  2. 浏览器会解析URL，获取协议、主机、端口和路径。
  3. 浏览器会通过DNS查询获取主机的IP地址。
  4. 浏览器会与目标IP地址和端口建立TCP连接。
  5. TCP连接建立后，浏览器会发送HTTP请求。
  6. 服务器接收到请求并进行处理，然后返回HTTP响应。
  7. 浏览器接收到HTTP响应，并根据情况选择关闭TCP连接或保留重用。
  8. 浏览器检查响应状态码，并根据资源类型决定如何处理。如果资源是HTML文档，浏览器会解析HTML文档，构建DOM树，下载资源，构建CSSOM树，执行js脚本等操作。

浏览器缓存机制 ​

浏览器提供了多种缓存机制，包括HTTP缓存、Cookie、Web Storage（包括localStorage和sessionStorage）和IndexedDB等。

HTTP缓存：HTTP缓存是一种通过重复使用之前获取的资源来提高网站性能的机制。它通过设置HTTP响应头中的缓存控制字段来实现。

Cookie：Cookie是一种用于在客户端存储少量数据的机制。它通常用于保存用户的登录状态、偏好设置等信息。Cookie的大小有限制，通常不能超过4KB。

Web Storage：Web Storage包括localStorage和sessionStorage两种类型。它们都提供了一种在客户端存储键值对数据的机制。localStorage和sessionStorage的区别在于，localStorage中存储的数据会持久保存在客户端，即使浏览器关闭也不会丢失；而sessionStorage中存储的数据只在当前会话期间有效，当浏览器关闭时会被清除。

IndexedDB：IndexedDB是一种在客户端存储大量结构化数据的机制。它提供了丰富的查询功能，并支持事务。

此外，还有一种名为session的机制，它用于在服务器端存储用户会话信息。session与上述几种缓存机制不同，它不是在浏览器中实现的，而是在服务器端实现的。

Cookie、sessionStorage、localStorage 的区别 ​

生命周期：Cookie的生命周期可以通过设置过期时间来控制，过期后会被自动删除。sessionStorage中存储的数据只在当前会话期间有效，当浏览器关闭时会被清除。localStorage中存储的数据会持久保存在客户端，即使浏览器关闭也不会丢失。

存储容量：Cookie的大小有限制，通常不能超过4KB。sessionStorage和localStorage的存储容量要大得多，一般可以达到5MB或更多。

作用域：Cookie在同一个域名下是共享的，可以在不同页面之间共享数据。sessionStorage和localStorage的作用域是以窗口或标签页为单位的，它们只能在同一个窗口或标签页中共享数据。

数据传输：Cookie会随着每次HTTP请求一起发送到服务器端，这会增加额外的网络流量。而sessionStorage和localStorage中存储的数据只存在于客户端，不会被发送到服务器端。

浏览器缓存 ​

通常浏览器缓存策略分为两种：强缓存（Expires，cache-control）和协商缓存（Last-modified ，Etag），并且缓存策略都是通过设置 HTTP Header 来实现的。

强缓存 ​

强缓存是指在缓存期间不需要请求，state code为200。它可以通过Expires和Cache-Control来实现。

Expires是HTTP/1.0的产物，表示资源的过期时间，受限于本地时间。如果修改了本地时间，可能会造成缓存失效。

Cache-Control是HTTP/1.1的产物，用来控制资源在本地缓存的有效期。它的max-age属性可以指定资源的最大生命周期。

协商缓存 ​

协商缓存是指在强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。其中协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的。它可以通过Last-Modified/If-Modified-Since和Etag/If-None-Match来实现。

如果用的是 Last-Modified/If-Modified-Since 这对标识，服务器会在响应头里告诉浏览器这个资源上次修改的时间（Last-Modified）。浏览器下次请求时，就会在请求头里带上这个时间（If-Modified-Since）。服务器对比这个时间，如果资源没改动，就告诉浏览器用缓存就行，返回 304 状态码；要是改了，就返回新的资源。

Etag/If-None-Match 的原理也类似。服务器给资源生成一个唯一的标识（Etag），浏览器下次请求时带上（If-None-Match）。服务器对比这个标识，来决定是否让浏览器用缓存。

当浏览器请求资源时，首先会检查资源的Expires和Cache-Control。如果命中强缓存，状态仍然返回200，但不会请求数据，在浏览器中能明显看到from cache字样。如果强缓存失效，则会携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存。如果命中协商缓存，则返回304状态码，并且不会返回数据。