浏览器相关知识点-笔记

96

第一章 浏览器

一、浏览器的多进程架构(chrome浏览器为例)

1.1 并行处理
 计算机同一时刻并行处理多个任务,能够大大提升性能(多线程处理)
1.2 进程和线程
 多线程可以并行处理多个任务,但是线程的存在是依赖进程的,由进程进行启动和管理
 一个进程就是一个程序的运行实例
 

启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。

线程依附于进程,进程中使用多线程进行并行处理能够提升运算效率
1.3 进程和线程关系特点
  1. 进程中任意一个线程的执行错误,都会导致整个进程崩溃
  2. 线程之间共享线程中的数据
  3. 当一个进程关闭之后,操作系统会回收进程所占用的内存
  4. 进程之间的内容相互隔离
1.4 单进程浏览器

what

浏览器的所有功能模块都运行在同一进程里(网络、模块、js运行环境、渲染引擎和页面等)
2007年之前市面上都是单进程浏览器
缺点:不稳定、不流畅、不安全

why:

不稳定:插件是最容易出问题的模块、渲染引擎模块也不稳定,复杂的js会引起渲染引擎模块崩溃
不流畅:单进程浏览器意味着所有页面的渲染模块、js执行环境以及插件都运行在同一线程中,同一时刻只有一个模块可以执行、页面的恶内存泄漏也会导致浏览器变慢
不安全:恶意插件、页面脚本通过浏览器漏洞获取系统权限

为什么单进程浏览器不能使用安全沙箱

如果一个进程使用安全沙箱后,该进程对操作系统的权限就会受限,比如不能对一些位置的文件进行读写操作,而这些权限浏览器主进程所需要的,所以安全沙箱不能应用到浏览器的主进程上

1.5 多进程浏览器

起初的多进程

  进程间相互隔离解决不稳定的问题
  js运行在渲染进程中,发生阻塞只会影响当前页面,不会影响浏览器和其他页面
  关闭一个页面,渲染进程会被关闭,该进程占用的恶内存会被系统回收,轻松解决了浏览器页面的内存泄漏问题
  安全沙箱

目前的多进程

  浏览器进程:主要负责界面显示、用户交互、子进程管理,同时提供存储等功能
  渲染进程:核心任务将HTML、css、js转换为交互网页,排版引擎、js引擎v8都是运行在该进程中,渲染进程都运行在沙箱模式下(安全考虑)
  GPU进程:初衷是实现3D CSS效果,随后网页、chrome的UI都采用GPU来绘制
  网络进程:网络资源加载,刚开始是作为一个模块运行在浏览器进程中,后来独立出来,成为一个单独的进程
  插件进程:负责插件的运行,进程存在的目的是保证浏览器不会因为插件进程的奔溃影响页面和浏览器
  
  

image.png

缺点:

 更高的占用资源
 更复杂的体系架构
1.6 未来
 面向服务架构

二、TCP/IP如何工作

2.1 理论

互联网中的数据都是通过数据包来传输的,IP就是把数据包送达目的主机。数据包在互联网上进行传输,就要符合《网际协议Internet Protocol,简称IP》标准。

互联网上不同的在线设备都有唯一的地址,地址只是一个数字。计算机中的地址就称为IP地址,访问任何网站实际上就是你的计算机向另一台计算机请求信息。

IP是非常底层的协议,只负责把数据包传输给对方电脑,对方电脑并不知道交给哪个程序,因此需要基于IP协议上开发能和应用打交道的协议,即《用户数据包协议User Datagram Protocol》简称UDP

UDP中一个重要的信息就是端口号,通过端口号可以把数据包发送给指定的程序了.

IP 通过 IP 地址信息把数据包发送给指定的电脑,而 UDP 通过端口号把数据包分发给正确的程序。

UDP 不能保证数据可靠性,但是传输速度却非常快

TCP 可以把数据完整的送到应用程序,适合传输邮件这类需要数据传输可靠性应用,UDP会出现丢包,但是速度快,适合在线视频、互动游戏等。

TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。

2.2 TCP

一个完整的 TCP 连接的生命周期包括了建立连接``传输数据断开连接三个阶段。

image.png

  1. 首先,建立连接阶段。这个阶段事通过三次握手来建立客户端和服务器的链接关系,TCP提供面向连接的通信传输。客户端和服务器总共要发送三次数据包以确认连接关系。

  2. 开始传输,接收端需要对每个数据包进行确认操作,也就是接收端在接收到数据包之后,需要发送确认数据包给发送端。同样,一个大的文件在传输过程中会被拆分成很多小的数据包,这些数据包到达接收端后,接收端会按照 TCP 头中的序号为其排序,从而保证组成完整的数据。

  3. 断开连接阶段。数据传输完毕之后,就要终止连接了,涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。

TCP 为了保证数据传输的可靠性,牺牲了数据包的传输速度,因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。

2.3 你怎么理解 HTTP 和 TCP 的关系?
  1. HTTP协议和TCP协议都是TCP/IP协议簇的子集。
  2. HTTP协议属于应用层,TCP协议属于传输层,HTTP协议位于TCP协议的上层。
  3. 请求方要发送的数据包,在应用层加上HTTP头以后会交给传输层的TCP协议处理,应答方接收到的数据包,在传输层拆掉TCP头以后交给应用层的HTTP协议处理。建立 TCP 连接后会顺序收发数据,请求方和应答方都必须依据 HTTP 规范构建和解析HTTP报文。

三、HTTP请求流程

HTTP协议是一种允许浏览器向服务器获取资源(HTML文件、CSS、JS、图片、视频)的协议,是web的基础。也是浏览器使用最广泛的协议。

3.1 浏览器发起HTTP请求流程

1.构建请求 GET /index.html HTTP1.1

  1. 查找缓存 (缓解服务器压力、加速资源加载)

    真正发起网络请求之前,浏览器会先在浏览器缓存中查询是否有要请求的文件。
    浏览器缓存是一种在本地保存资源副本,以供下次请求时直接使用的技术。
    
  2. 准备 IP 地址和端口

    在 HTTP 工作开始之前,浏览器需要通过 TCP 与服务器建立连接
    HTTP 的内容是通过 TCP 的传输数据阶段来实现的
    

image.png

  与服务器建立TCP连接
              建立TCP连接需要准备IP地址和端口号)
              浏览器会请求DNS返回域名对应的IP,拿到 IP 之后,接下来就需要获取端口号了。
              通常情况下,如果 URL 没有特别指明端口号,那么 HTTP 协议默认是 80 端口。
  

4. 等待TCP队列

   同一个域名同时最多只能建立 6 个 TCP 连接。
   如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。
   

5. 建立TCP连接

   浏览器通过TCP与服务器建立连接
  

6. 发送HTTP请求

   一旦建立了TCP连接,服务器和浏览器就可以愉快的通信了
   HTTP 中的数据正是在这个通信过程中传输的。
   

7.服务端处理HTTP请求

3.2 为什么很多站点第二次打开速度会很快?

1、主要原因是第一次加载页面的过程中,缓存了一些耗时的数据。 2、DNS缓存和页面资源缓存这两块数据会被浏览器缓存的

很多网站第二次访问能够秒开,是因为这些网站把很多资源都缓存在了本地,浏览器缓存直接使用本地副本来回应请求,而不会产生真实的网络请求,从而节省了时间。同时,DNS 数据也被浏览器缓存了,这又省去了 DNS 查询环节。

3.3 如何保持登陆状态

如果服务器端发送的响应头内有 Set-Cookie 的字段,那么浏览器就会将该字段的内容保持到本地。当下次客户端再往该服务器发送请求时,客户端会自动在请求头中加入 Cookie 值后再发送出去。服务器端发现客户端发送过来的 Cookie 后,会去检查究竟是从哪一个客户端发来的连接请求,然后对比服务器上的记录,最后得到该用户的状态信息。

image.png

四、导航流程

4.1 在浏览器中,从输入URL到页面展示,这中间发生了什么

image.png

从输入URL到页面展示这个过程需要各个进程之间的配合。

  1. 浏览器进程:负责用户交互、子进程管理、文件存储等
  2. 网络进程:面向渲染进程和浏览器进程等提供网络下载功能
  3. 渲染进程:把从网络上下载的HTML、JS、CSS、图片等资源解析微可以显示和交互的页面。为了保证系统安全,渲染进程运行在沙箱

进程职责:

  1. 浏览器进程接收到输入的URL请求后把URL转给网络进程
  2. 网络进程真正发起URL请求
  3. 网络进程接收到相应头数据,解析响应头数据。并转发给浏览器进程
  4. 浏览器进程接收到响应头数据后,发送提交导航消息到渲染进程
  5. 渲染进程接收到提交导航信息后,开始准备HTML数据,接受数据的方式是直接和网络进程建立数据管道
  6. 最后 渲染进程 会告诉浏览器进程可以解析页面了 7.浏览器进程接收到渲染进程提交的文档消息后,开始移除旧文档、更新页面状态

从输入 URL 到页面展示,发生了什么?

  1. 地址栏判断搜索内容(使用搜索引擎合成带关键字的URL)或者请求的URL是否符合URL规则,组装协议,构成完整的URL

  2. 用户输入完内容,按下回车键,浏览器导航栏显示loading状态,但是页面还是呈现前一个页面,这是因为新页面的响应数据还没有获得,需要等待提交文档阶段才会被替换

  3. 接下来进入页面资源请求过程,浏览器利用进程间通信(IPC)把URL请求发送到网络进程,网络进程真正发起URL请求,请求流程如下。

    (1) 网络进程会查找本地缓存是否缓存了该资源,如果有缓存,直接返回资源给浏览器。
    (2)如果没有缓存,则进入网络请求流程,第一步就是DNS解析,来获取IP
    (3)利用IP地址和服务器建立TCP连接
    (4)服务器接收到请求信息,会根据请求信息生成响应数据,发送给网络进程
    (5)网络进程接收到响应信息后,开始解析响应头的内容
    
  4. 网络进程解析响应流程

    (1)检查状态码,如果是301/302,说明服务器需要浏览器重定向到其他URL
    (2)如果响应行是200,那么表示浏览器可以继续处理该请求
    
  5. 处理响应数据类型

    浏览器会根据HTTP头中的Content-Type字段决定如何处理响应体内容
    (1)如果Content-Type 的值是 application/octet-stream显示数据是字节流类型,通常情况下会按照下载类型处理该请求,会被提交给下载管理器
    (2)如果是HTML,浏览器会继续进行导航流程,所以会准备渲染进程了
    
  6. 准备渲染进程

    1)通常来说打开新的页面会使用单独的渲染进程
    (2AB页面属于同一站点,则复用渲染进程
    渲染进程准备好后,下一步就是提交文档阶段
    
  7. 提交文档

    浏览器进程把网络进程接收到的HTML数据交给渲染进程
    
    (1)浏览器进程接收到网络进程的响应头数据后,向渲染进程发起“提交文档”的消息;
    (2)渲染进程和网络进程建立传输数据的通道了
    (3)文档数据传输完,渲染进程会返回确认提交的消息给浏览器进程
    (4)浏览器进程在收到“确认提交”的消息,更新浏览器界面状态,地址栏URL、前进后退历史状态,更新Web页面
    
  8. 渲染进程对文档进行页面解析和子资源加载

    HTML 通过HTML解析器转成DOM Tree(二叉树类似结构的东西),CSS按照CSS 规则和CSS解释器转成CSSOM TREE,两个tree结合,形成render tree(不包含HTML的具体元素和元素要画的具体位置),通过Layout可以计算出每个元素具体的宽高颜色位置,结合起来,开始绘制,最后显示在屏幕中新页面显示出来           
        
    

五、渲染流程

5.1 渲染流程

image.png

(1)浏览器讲HTML数据转换为浏览器认识的DOM树结构 (2)生成DOM树后根据CSS样式计算出DOM树所有节点的样式

  样式计算:渲染引擎接收到CSS文本时,会执行一个转换操作,将CSS文本转换为浏览器可以认识的结构我们-styleSheets
  
  将CSS中的属性值转换为渲染引擎能够理解的、标准的计算值
  
  计算过程中会根据继承关系、层叠样式合理计算节点样式
  

(3)最后计算DOM元素的布局信息,保存在布局树中 (4)对布局树进行分层,并生成分层树 (5)为每个图层生成绘制列表,并将其提交到合成线程 (6)合成线程将图层分为图块,并在光栅化线程池中将图块转化为位图 (7)合成线程发送绘制图块命令DrawQuad给浏览器进程 (8)浏览器根据DrawQuad消息生成页面,并显示到显示器上

5.2 相关概念

重排

触发重新布局:通过JS、CSS修改元素的几何位置属性(高度、宽度) 重排需要更新完整的渲染流程,开销最大

image.png 重绘

JS更改某些元素的背景颜色等并没有引起几何位置的变换,就会跳过布局阶段直接进入绘制阶段,执行效率会比重排操作高一些

image.png

合成

更改一个既不要布局也不要绘制的属性,渲染引擎会跳过布局和绘制,只执行后面的合成操作,这个过程叫做合成。

比如使用CSS的transform来实现动画效果,直接在非主线程上执行合成动画操作,相对于重绘和重排,合成能大大提升绘制效率。

image.png

5.3 减少重绘、重排的实践方法
  1. 使用class操作样式,而不是频繁的操作style

  2. 避免使用table布局

  3. 批量dom操作,例如 createDocumentFragment,或者使用框架,例如 React,减少重绘重排的次数

参考:浏览器工作原理与实践 --李兵