浅探浏览器基础

浏览器基础

1. 浏览器的主要功能：

浏览器的主要功能是将用户指定的web资源呈现出来，用户用URI（统一资源定位符）来指定所请求资源的位置。它从服务器请求资源，并将其渲染展示在浏览器窗口中。

2. 主流浏览器内核

Trident：IE
Webkit：Safari
WebKit：Chrome, Safari
Gecko：Firefox
Presto: Opera

3. 浏览器的构成

• 用户界面：包括地址栏、书签、后退/前进按钮等，就是你看到的除了主窗口之外的其他部分。
• 浏览器引擎：用来查询及操作渲染引擎的接口。
• 渲染引擎：负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
• 网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
• 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
• JavaScript 解释器。用于解析和执行 JavaScript 代码。
• 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了indexDB，这是一个完整（但是轻便）的浏览器内数据库。

4. 进程和线程的区别：

进程是运行中的程序，线程是进程的内部的一个执行序列
进程是资源分配的单元，线程是执行行单元
进程间切换代价大，线程间切换代价小
进程拥有资源多，线程拥有资源少
多个线程共享进程的资源

浏览器是多进程的，JavaScript是单线程的

5. 渲染引擎：

1. 常说的浏览器内核，其实指的就是浏览器的渲染引擎，所以不同的浏览器引擎会造成部分不同的显示效果。
2. 渲染引擎包括html解释器、CSS解释器、布局Layout和JavaScript引擎。

6. 浏览器输入URL后的全过程：

• 输入的URL为统一资源定位符，用来指定web资源的位置（以https://www.baidu.com/index.h...为例）：

  • https协议: 协议告知浏览器如何访问资源，这里的URL说明使用的是https协议，协议还有http/ftp/rtsp/Websocket等。
  • www.baidu.com主机名：又叫域名，浏览器会查询本地缓存的DNS列表，以获取主机地址，若dns缓存未命中，则浏览器发出请求，进行DNS查询，查询之后的结果缓存起来。
  • 资源路径（index.html），资源路径说明了请求的是服务器上哪个特定的本地资源。
  • 参数(test=1)：?之后的为访问该URL的参数，多个参数以&连接。

• 浏览器与目标服务器建立TCP连接：

  • 主机浏览器通过DNS解析得到目标服务器的IP地址之后，与服务器建立TCP连接。
  • TCP三次握手连接：浏览器所在的客户端向服务器发起连接请求报文，服务器接收到报文后，同意建立连接，向客户端发出确认报文，客户端接收到确认报文后，再次向服务器发出报文，确认以接收到确认报文，此时客户端与服务器之间的额TCP连接建立完成，开始通信。
    （1. 服务端我想和你通信，2. 我知道了,我这边已经准备好了，你现在能连吗。 3. 好的，咱们开始通信吧）

• 发送HTTP请求：

  • 与服务器建立了连接后，就可以向服务器发起请求了。

  • 完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。常用请求头部：

    Accept: 接收类型，表示浏览器支持的MIME类型 （对标服务端返回的Content-Type）
    Accept-Encoding：浏览器支持的压缩类型,如gzip等,超出类型不能接收
    Content-Type：客户端发送出去实体内容的类型
    Cache-Control: 指定请求和响应遵循的缓存机制，如no-cache
    If-Modified-Since：对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内，http1.0中
    Expires：缓存控制，在这个时间内不会请求，直接使用缓存，http1.0，而且是服务端时间
    Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存，http1.1中
    If-None-Match：对应服务端的ETag，用来匹配文件内容是否改变（非常精确），http1.1中
    Cookie: 有cookie并且同域访问时会自动带上
    Connection: 当浏览器与服务器通信时对于长连接如何进行处理,如keep-alive
    Host：请求的服务器URL
    Origin：最初的请求是从哪里发起的（只会精确到端口）,Origin比Referer更尊重隐私
    Referer：该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段)
    User-Agent：用户客户端的一些必要信息，如UA头部等

• 浏览器接收服务器的响应：

  • 服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并经过不同的Web服务器进行处理的结果以response对象形式返回，主要包括状态码、响应头、响应报文三部分。

  • 常见状态码：

    状态码	类型	描述
    1XX	Informational（信息性状态码）	接受的请求正在处理(用户几乎不可见)
    2XX	Success（成功状态码	请求正常处理完毕
    3XX	Redirection（重定向状态码）	需要进行操作以完成请求
    4XX	Client Error（客户端错误状态码）	服务器无法处理请求
    5XX	Server Error（服务器错误状态码）	服务器处理请求出错

    1、200 OK：请求已正常处理。

    2、204 No Content：请求处理成功，但没有任何资源可以返回给客户端。

    3、206 Partial Content：是对资源某一部分的请求，该状态码表示客户端进行了范围请求，而服务器成功执行了这部分的GET请求。响应报文中包含由Content-Range指定范围的实体内容。

    4、301: 永久性重定向，请求的资源已经被分配了新的URI，以后应使用资源现在所指的URI。

    5、临时性重定向。和301相似，但302代表的资源不是永久性移动，只是临时性性质的。

    6、304: 资源已找到，但未符合条件请求。

    7、400 Bad Request：服务器端无法理解客户端发送的请求，请求报文中可能存在语法错误。

    8、401 Unauthorized：该状态码表示发送的请求需要有通过HTTP认证（BASIC认证，DIGEST认证）的认证信息。

    9、403 Forbidden：不允许访问那个资源。该状态码表明对请求资源的访问被服务器拒绝了。（权限，未授权IP等）

    10、404 Not Found：服务器上没有请求的资源。路径错误等。

    11、500 Internal Server Error：该状态码表明服务器端在执行请求时发生了错误。也有可能是web应用存在bug或某些临时故障。

    12、503：该状态码表明服务器暂时处于超负载或正在停机维护，现在无法处理请求。

• 页面渲染：

  • 内容将交由浏览器渲染进程进行解析渲染呈现给用户。整个过程涉及两个方面：解析和渲染。在渲染页面之前，需要构建DOM树和CSSOM树。
  • 在浏览器还没接收到完整的 HTML 文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

• 关闭TCP(四次挥手)：

  第一次挥手是浏览器发完数据后，发送FIN报文请求断开连接。

　第二次挥手是服务器发送信息表示同意。

第三次挥手是服务器在处理完数据报文后，便发送给浏览；这样可以保证数据通信正常可靠地完成。

　第四次挥手浏览器浏览器接受返回，连接关闭。

7. 浏览器缓存：

• 缓存能够减少浏览器请求资源的次数，当第一个请求资源完成后，根据响应的缓存机制，将一些静态资源进行存储在本地磁盘中，下次请求该资源直接从本地读取，而不是再次发起请求，减少了网络带宽消耗，减轻服务器压力。

• 浏览器缓存标识：Network中size为memory cache或者disk cache的表示未向浏览器发起请求，而是直接读取本地缓存文件

  • Memory Cache内存缓存: 内存缓存是一种比较特殊的缓存，他不受max-age、no-cache等配置的影响，即使我们不设置缓存，如果当前的内存空间比较充裕的话，一些资源还是会被缓存下来。但这种缓存是暂时的，一旦关闭了浏览器，这一部分用于缓存的内存空间就会被释放掉。
  • Disk Cache磁盘缓存：相比较内存缓存的优势就是长时效，它会根据HTTP Header中设置的字段类型，来判断资源是否需要重新请求。如果当前内存使用率高的话，请求资源大概率会被缓存到disk cache。

• 强缓存：

  • 不会向服务器发起请求，直接从缓存中读取资源，强缓存可以通过设置两种HTTP Header实现：Expires 和 Cache-Control。

  • Cache-Control: 可以在请求头或者响应头中设置，并且可以组合使用

    值	描述
    no-cache	客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存
    no-store	所有内容都不会缓存，即为不使用强制缓存。
    max-age	max-age=xxx 表示缓存内容将在xxx秒后失效

• 协商缓存：

  • 协商缓存可通过 HTTP Header中Last-Modified或者ETag实现。
  • Last-Modified是该资源文件最后一次更改时间。
  • Etag是服务器响应请求时，返回当前资源文件的一个唯一标识，只要资源有变化，Etag就会重新生成。

• 缓存实践：

  • 频繁变动的资源： Cache-Control: no-cache

    使用no-cache使浏览器每次都请求服务器，配合配合 ETag 或者 Last-Modified 来验证资源是否改变。

  • 不常变化的资源： Cache-Control: max-age=31536000

    如图片/js等， 设置较长的时间，这样浏览器之后请求相同的 URL 会命中强缓存，此时如需更新，则需要在路径上加入hash值，以更新响应的文件。

8. 浏览器存储：(cookie、localStorage、sessionStorage、IndexedDB)

类型	大小限制	描述	备注
Cookie	一般为 4 KB(一般最多20个)	服务器发送到用户浏览器并保存在本地的数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上，过期时自动销毁	HttpOnly时js不可访问
localStorage	5MB ~10MB	持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。它是采用键值对的方式存储数据，按域名将数据分别保存到对应数据库文件里。	同源的所有标签页和窗口之间共享数据
sessionStorage	一般最大为5M	sessionStorage 是一种会话级别的缓存，关闭浏览器时数据会被清除	只存在于当前标签页，同源不可共享
IndexedDB	几百兆甚至更多	用于客户端存储大量结构化数据，包括文件、二进制大型对象。	不可跨域访问，键值对存储