了解浏览器的基本工作原理

了解浏览器的基本工作原理

当在浏览器中输入URL后到网页加载完成，中间涉及到多少过程？

1. 基本流程

2. • 在浏览器中输入URL
3. • 2.1 - 有缓存：直接使用缓存
   • 2.2.1 - 无缓存：DNS查找IP -> 检查DNS缓存 -> UDP传输
   • 2.2.2 - TCP连接服务器 -> - 三次握手确认连接 数据包校验保证数据到达 四次挥手断开连接
   • 2.2.3 - 发送HTTP请求 -> TLS握手，建立加密隧道，保证数据传输不被监听和篡改
   • 2.2.4 - 服务器的永久重定向
   • 2.2.5 - 服务器处理请求
   • 2.2.6 - 服务器返回一个HTTP响应
4. • 加载HTML -CSS - JavaScript
   • 解析HTML文件，构建DOM树；构建CSSOM，然后合并DOM和CSSOM，创建渲染树；
   • DOM树可以由JavaScript控制，浏览器解析HTML时，时顺序执行，只有一个主线程负责解析。遇到script的tag会先加载并运行对应的js文件，主线程解析停止直到程序加载完成。如果遇到图片，css，async和defer的script，则会异步加载，不影响主线程；
   • 浏览器会有预扫描线程，扫描html代码，会事先把css文件，字体和js文件下载下来，这里的代码不会影响主线程，是异步进行的；
5. • 布局 -> 对所有可见节点，进行宽高布局。如果图片节点没有指定宽高，浏览器会等图片加载完浏览器再根据宽高位置调整其他受影响节点的大小和位置（reflow）；
6. • 绘制渲染树各个节点
7. • 显示光栅化
8. • defer等js程序开始运行，回流重绘；

9. 浏览器的信息存储

浏览器会把一些信息存储在本地，主要分为cookie、webStorage、和indexDB;

1. • Cookie主要用来存储状态，为了方便服务器辨别身份。由于http是一个无状态协议，同一来源的请求无法分辨。添加Cookie服务器可以辨别浏览器的身份。特点：兼容所有浏览器、有大小限制4k、存在过期时间、不稳定、可以关闭；
2. • webStorage主要分为localStorage和sessionStorage，是本地持久化的存储，用来保存一些不需要发给服务器的信息。特点：无法兼容IE低版本浏览器、数据大小较大、严格本地、localStorage生命周期除非用户主动清除、sessionStorage仅在当前会话有效（关闭当前页面或浏览器会被清除，刷新不会）
3. • indexDB是HTML提供的一种本地存储。保存大量用户数据并要求数据之间有搜索需要的场景，当网络断开可做一些离线的应用，数据格式为json。是没有容量上限的非关系型数据库；

4. chrome浏览器的工作原理

5. • 进程分配：只要资源允许，CHrome给每个标签一个进程，包括Iframe（站点隔离）
6. • 主要进程：
   • 浏览器进程：控制浏览器的部分：地址栏、书签、向前、向后按钮。以及网络请求和文件获取；
   • 渲染器进程：控制标签内网站的所有展示部分
   • 插件进程：控制网页内的插件，比如flash
   • 处理其他进程中的GPU任务