从用户输入URL到页面显示知识梳理

前言

https://juejin.cn/post/6854573210109739021#heading-4

本文目标

1.通过从输入URL到页面显示这一整个运行过程，梳理一下相关知识点

• http1.0  http2.0  https  TCP/UDP  网络架构  缓存
• 浏览器进程&线程，渲染机制，跨域，安全（XSS，CSRF）

2.主要是把知识成体系的建立起来

依赖知识

1.线程、进程

2.并发、并行

3.同步、异步

4.阻塞、非阻塞

5.浏览器的进程和线程

主体大纲

1. 用户输入（输入解析）
2. 检查缓存（强缓存和协商缓存）
3. DNS解析（IP发查，DNS缓存）
4. 建立TCP连接（三次握手，UDP，网络架构，等待tcp队列）
5. 建立TLS连接（https）
6. 发起http请求（http1.0，http1.1, http2.0, 请求行，请求头，请求体）
7. 服务器处理请求
8. 服务器响应请求（响应行，响应头，响应体，状态码）
9. 端口TCP连接（四次分手）
10. 渲染开始（从进程的角度看，中间有一个导航流程）
11. 构建dom树
12. 样式解析计算（css阻塞问题，结构化，属性标准化，元素样式具体化）
13. 构建布局树（创建可见元素的布局树，计算节点位置，优化（重绘，重排相关））
14. 分层，生成分层树（原因，分层条件）
15. 生成绘制列表，交给合成线程
16. 合成线程将图层分为图块，光删化将图块变成位图（分图块原因）
17. 合成线程发送绘制图块命令，给浏览器进程
18. 浏览器生成页面，显示到显示器上

依赖知识

1.线程和进程

1. 进程

• 他是程序的一次执行过程，就是一个程序的运行实例，程序执行过程中分配和管理资源的基本单位
• 启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫做进程

1. 线程

• 是CPU调度和分派的基本单位，和同一进程的其他线程共享资源

1. 关系

• 线程是进程的一部分，不能单独存在的，它是由进程来启动和管理的，一个进程有多个线程

2.并发和并行

• 开发的关键是你有处理多个任务的能力，不一定要同时。（吃饭吃到一半电话来了，去打电话，再吃饭）
• 并行的关键是你有同事处理多个任务的能力（一边打电话，一边吃饭）