浏览器与计算机网络
https://juejin.cn/post/7351301328206331939
1.同步和异步是什么？
同步：任务顺序执行，必须等待前一个任务完成才能开始下一个任务
异步：任务不等待前一个任务完成，先开始执行，通过回调/事件通知结果
2.并行和串行是什么？
并行：任务同时执行，相互独立
串行：任务一次执行，形成依赖链
3.进程和线程是什么？
进程是资源隔离的容器，线程是 CPU 调度的最小单位；一个进程可以包含多个线程。
- 打开 Chrome：每开一个标签页≈新进程，互不影响。
- 一个标签页里：网络下载、JS 执行、页面渲染由不同线程并行完成，共享同一块内存
4.浏览器进程？
1.为什么使用多进程架构？
多个线程共享 相同地址空间和资源，存在 线程之间可能恶意修改/获取 非授权数据 等 安全问题
单进程浏览器：
1、不稳定。单进程中 插件、渲染线程崩溃导致 浏览器崩溃
2、不流畅。脚本（死循环）/插件会使浏览器卡顿
3、不安全。插件和脚本可获取OS 任意资源
多进程浏览器：
1、解决不稳定。进程 相互隔离，一个页面/插件崩溃时，仅影响当前插件/页面
2、解决不流畅。脚本
阻
塞当前页面
渲染进程，不影响其他页面
3、解决不安全。多进程架构使用沙箱。沙箱看成是OS给进程上一把锁，沙箱的程序可以运行，不
能在硬盘上写入数据，不能在敏感位置读取数据
沙箱 将渲染进程和OS隔离
利用OS提供的安全技术，渲染进程在执行过程中无法访问OS的数据，渲染进程需要访问系统资源
时，通过浏览器内核实现，将访问结果通过IPC转发给渲染进程
2.主要进程
1、浏览器主进程
控制页面创建、销毁、网络资源管理、下载等， 提供存储等功能
浏览器进程中线程：
1. UI进程
2. 存储线程：控制文件的访问
2、插件进程
为何使用多进程架构?
主要进程34
负责插件运行，插件易崩溃，需通过插件进程隔离，保证插件进程崩溃不会对浏览器/页面造成影
响
3、GPU进程
最多一个，用于3D绘制等，从浏览器进程中独立出来
4、浏览器渲染进程(浏览器内核)
每个Tab页对应一个进程，互不影响 ， 将HTML、CSS 和 JS转换为可以与用
户交互的网页
5、网络进程
从浏览器进程中独立出来， 负责页面的网络资源加载
3.渲染进程线程
1、GUI 线程
渲染页面。在JS引擎运行脚本期间，GUI渲染线程都是处于挂起状态的，被”冻结”了
2、JS 引擎线程
解析和执行 JS ，v8 引擎
跑在 JS 引擎线程上，没有单/多线程之说，因为解释这个语言的是 的
线程 是单线程；JS 引擎线程与 GUI 线程互斥，浏览器执行 JS 程序的时候，GUI 渲染线程 保存
在一个队列当中；直到 JS 程序执行完成，才接着执行；如果 JS 执行时间过长，会影响页面的渲
染，所有要尽量控制 JS 的大小
3、定时器触发线程
JS引擎是单线程， 处于
阻
塞线程状态会影响记计时的准确， 因此通过单独线程来计时并触发定时
是更为合理的方案
为什么 setTimeout 不阻塞后面程序的运行，因为 setTimeout 不是由 JS 引擎线程完成，是由定
时器触发线程完的，所以它们可以同时进行，定时器触发线程 在定时任务完成后 通知事件触发线
程 往任务队列里添加事件
4、事件触发线程
当一个事件被触发时该线程把事件添加到待处理队列的队尾，等待JS引擎处理。这些事件可以是
当前执行的代码块如定时任务、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等
5、异步 HTTP 请求线程
XMLHttpRequest 连接 通过浏览器新开线程请求， 检测到状态变更，如果设置有回调，异步线程
就产生状态变更事件放到 JS引擎的处理队列中等待处理
5.输入URL回车之后？
1. URL解析
2. 查找缓存
3. 域名解析：浏览器>系统>本地hosts>根域名>顶级域名>二级域名>三级域名
4. TCP三次握手
5. 发送HTTP请求
6. 处理请求并返回
7.解析渲染页面
8. TCP四次挥手
6.浏览器缓存？
当我们访问一个网站时，会加载各种资源，如 HTML文档、JS、CSS、图片等。浏览器会将一些不经常变的资源保存在本地，这样下次访问相同网站时，就直接从本地加载资源，并不通过请求服务器，这就是浏览器缓存
前端常用的缓存方案
强缓存与协商缓存相结合的方案
1）HTML 文档配置协商缓存；
2）JS、CSS、图片等资源配置强缓存
此方案的好处：当项目版本更新时，可以获取最新的页面；若版本未变化，可继续复用之前的缓存资源；既很好利用了浏览器缓存，又解决了页面版本更新的问题
强缓存
如果资源没过期，就取缓存，如果过期了，则请求服务器，一般用于JS、CSS、图片等资源
如何判断强缓存过期？
第一次访问页面，浏览器会根据服务器返回的 response Header 来判断是否对资源进行缓存，如果响应头中有 cache-control 或 expires 字段，代表该资源是强缓存
Cache-Control
是 HTTP1.1 中控制网页缓存的字段，主要取值为：
- public：资源客户端和服务器都可以缓存
- privite：资源只有客户端可以缓存
- no-cache：客户端缓存资源，但是是否缓存需要经过协商缓存来验证
- no-store：不使用缓存
- max-age：缓存保质期，是相对时间
Expires
是HTTP1.0控制网页缓存的字段，值为一个时间戳，服务器返回该资源缓存的到期时间
但 Expires 有个缺点，就是它判断是否过期是用本地时间来判断的，本地时间是可以自己修改的
到了HTTP/1.1，Expire 已经被 Cache-Control 替代，Cache-Control 使用了max-age相对时间，解决了Expires 的缺陷
注意：当 Cache-Control 与 expires 两者都存在时，Cache-Control 优先级更高
memory cache 与 disk cache 的区别？
两者都属于强缓存，主要区别在于存储位置和读取速度上
1）memory cache 表示缓存来自内存， disk cache 表示缓存来自硬盘
2）memory cache 要比 disk cache 快的多！从磁盘访问可能需要5-20毫秒，而内存访问只需要100纳秒甚至更快
- memory cache 特点：
当前tab页关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，原来的 memory cache 会变成 disk cache - disk cache 特点：
关闭tab页甚至关闭浏览器后，数据依然存在，下次打开仍然会是 from disk cache
协商缓存
浏览器携带缓存标识向服务器发送请求，服务器根据缓存标识来决定该资源是否过期，一般用于html资源，验证版本是否更新
触发条件：
- Cache-Control 的值为 no-cache （协商缓存）
- 或者 Cache-Control: max-age=0
协商缓存的标识
Last-Modified
Last-Modified：文件在服务器最后被修改的时间，从服务器 Respnse Headers 上获取
Last-Modified 的验证流程：
1）第一次访问页面时，服务器的响应头会返回 Last-Modified 字段
2）客户端再次发起该请求时，请求头 If-Modified-Since 字段会携带上次请求返回的 Last-Modified 值
3）服务器根据 if-modified-since 的值，与该资源在服务器最后被修改时间做对比，若服务器上的时间大于 Last-Modified 的值，则重新返回资源，返回200，表示资源已更新；反之则返回304，代表资源未更新，可继续使用缓存
Etag
ETag：当前资源文件的一个唯一标识(由服务器生成)，若文件内容发生变化该值就会改变
ETag 的验证流程：
1）第一次访问页面时，服务器的响应头会返回 etag 字段
2）客户端再次发起该请求时，请求头 If-None-Match 字段会携带上次请求返回的 etag 值
3）服务器根据 If-None-Match 的值，与该资源在服务器的Etag值做对比，若值发生变化，状态码为200，表示资源已更新；反之则返回304，代表资源无更新，可继续使用缓存
为什么要有 Etag ？
Etag 的出现主要是为了解决一些 Last-Modified 难处理的问题：
1）一些文件也许会周期性的更改，但是内容并不改变(仅仅改变的修改时间)，这时候并不希望客户端认为这个文件被修改了而重新去请求；
2）某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说 1s 内修改了 N 次)，If-Modified-Since 能检查到的粒度是秒级的，使用 Etag 就能够保证这种需求下客户端在 1 秒内能刷新 N 次 cache
注意：Etag 优先级高于 Last-Modified，若 Etag 与 Last-Modified 两者同时存在，服务器优先校验 Etag
协商缓存的两种状态
服务器根据请求头携带的缓存标识，判断该资源是否变化，资源未变化返回304，反之返回200
1）资源未变化，返回304
2）资源已更新，返回200
协商缓存的流程
1）第一次请求
客户端发送请求，服务器处理请求，返回文件内容和一堆Header，包括Etag 和 Last-Modified，状态码200
2）第二次请求
1、客户端发起请求，此时请求头上会带上 if-none-match值为Etag 和 if-modified-since值为last-modified
2、服务器优先判断 Etag，若资源未变化状态码为304，客户端继续使用本地缓存，若资源发生变化，状态码为200 并返回最新的资源