从输入URL到页面加载的过程

2020-10-15 本文已影响0人灯下草虫鸣314

前言

本文为阅读文章时的阅读笔记。为加深记忆，方便日后查找
原文地址: 从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

正文

一、从浏览器接收url到开启网络请求线程

1、浏览器多进程的

浏览的进程主要包括：

主控进程：主进程只有一个。负责协调和主控
1. 负责浏览器界面的显示、用户交互：前进后退
2. 负责管理每个页面。创建及销毁其他进程
3. 网络资源的管理和下载
4. 将render进程得到的内存中的bitmap绘制到用户界面
插件进程：第三方插件进程。每种类型的插件就是一个进程。只有改插件使用时才会创建
GPU进程：最多只有一个，用于3D绘制
render进程：浏览器内核进程，每一个tab页面都是一个独立的进程，互不影响(如果两个都是空白的tab，可能会合并为一个进程)

2、浏览器的内核进程是多线程的

内核进程包括以下几个线程：

GUI线程：用于HTML的渲染
1. 解析html，css，构建DOM树，css树。合并为render树。
2. 负责重绘和重排
3. GUI线程和JS线程是互斥的。当JS执行时GUI线程会怪气。这样会造成页面渲染白屏、不连贯的问题
JS引擎线程：JS代码的执行线程（JS为啥是单线程的？）
1.和GUI线程互斥
事件触发线程：用于处理事件
定时器触发器线程：定时器
异步http请求线程：发送http请求

3、浏览器解析URL

URL主要包括：

protocol：协议头，譬如有http，ftp等
host：主机域名或IP地址
port：端口号
path：目录路径
query：即查询参数
fragment：即#后的hash值，一般用来定位到某个位置

了解浏览器的线程进程后，进入到本文主题：
第一步：浏览器线程解析URL取到主机域名

4、DNS解析

如果用户输入的是域名。就需要将域名解析为IP
如果浏览器有缓存，直接使用缓存，否则使用本机缓存，再没有就是用host，如果还没有就需要想dns服务器查询对应的IP
dns解析很耗时，如果解析域名过多的话，可以dns-prefetch优化
第二步：DNS解析IP

5、tcp\ip请求

三次握手、四次挥手

图例

get和post的区别：

两者本质上都是tcp/ip，get请求只会产生一个tcp数据包，post请求会产生两个。

get请求：浏览器会将headers和data一起发送出去 —>服务器响应200
post请求：浏览器会先发送headers —> 服务器响应100 continue —>浏览器发送data —> 服务器响应200
这里的区别是specification（规范）层面，而不是implementation（对规范的实现）

五层网络协议

应用层(dns,http) DNS解析成IP并发送http请求

传输层(tcp,udp) 建立tcp连接（三次握手）

网络层(IP,ARP) IP寻址

数据链路层(PPP) 封装成帧

物理层(利用物理介质传输比特流) 物理传输（然后传输的时候通过双绞线，电磁波等各种介质）

http1.0、http1,1、http2.0和https的区别

首先看长连接和短连接
在tcp/ip层面：

长连接：一个tcp/ip连接上可以发送多个数据包。在tcp保持期间如果没有数据发送，需要双发发送检测报来维持连接
短连接：一个tcp/ip连接只可以发送一个数据包。完成此发送后就断开连接

http层面

http1.0：默认使用短连接。每完成一次请求就会断开连接
http1.1：默认使用长连接。Connection: keep-alive，在一个http请求中可以发送多个数据包，当用户建立一个http请求后tcp连接不会断开，下次再次请求相同的资源依然会使用已经建立的tcp连接。但是没请求一个新的资源都会有一个新的tcp/ip连接。但是由于tcp/ip有并发限制。所以当同时请求数量过多时，速度就会下降。
http2.0：默认使用长连接。而且一个tcp/ip连接可以请求若干资源，分隔成为更小的帧，速度得到提升。
具体特性：
- 多路复用（即一个tcp/ip连接可以请求多个资源）
- 首部压缩（http头部压缩，减少体积）
- 二进制分帧（在应用层跟传送层之间增加了一个二进制分帧层，改进传输性能，实现低延迟和高吞吐量）
- 服务器端推送（服务端可以对客户端的一个请求发出多个响应，可以主动通知客户端）
- 请求优先级（如果流被赋予了优先级，它就会基于这个优先级来处理，由服务器决定需要多少资源来处理该请求。）
https
与http的区别：在请求前，会建立ssl链接，确保接下来的通信都是加密的，无法被轻易截取分析

http缓存问题

协商缓存和强缓存
这里单独写一篇文章
http缓存机制-简书
 http缓存机制-掘金

二、浏览器拿到服务器返回的HTML渲染

主要流程

浏览器内核拿到HTML后渲染主要有以下步骤：

解析HTML，生成DOM树
解析CSS，生成CSS树
将DOM树和CSS树合并为Render树
布局Render树，布局、重排，计算个元素的尺寸位置
绘制render树，重绘。
将各个图层信息发送给GPU，让GPU合成各图层，显示在屏幕上。

如图

重绘和重排

重排：当元素的内容、结构、尺寸、位置发生变化时需要重新计算样式和渲染树。
重排：元素只发生了一些只影响元素外观的属性时。如背景色，文字颜色。
重排的成本开销远大于重绘，所以我们应该尽量避免重排。
会引发重排的操作：

页面初始化渲染
DOM结构的改变，比如删除，添加节点
render树发生变化，比如减少padding，margin
窗口 resize
通过js获取某些属性时
1. offset(Top/Left/Right/Height)
2. scroll(Top/Left/Right/Height)
3. client(Top/Left/Right/Height)
4. width,height
5. 调用getComputedStyle()

BFC模型

又名块格式化上下文

BFC有以下几个特点：

在当前box中元素会按照垂直方向一个一个排列
box的垂直方向由margin决定，同属于一个BFC的两个box间的margin会重叠
BFC区域外是不会和float box 重叠（用于实现左侧固定，右侧占剩余全部）
BFC就是页面内一个隔离的独立容器，容器内的子元素不会影响外面的元素。
计算BFC的高度时，浮动元素也会参与计算

触发BFC的方法

根元素
float属性不为none
position为absolute或fixed
display为inline-block, flex, inline-flex，table，table-cell，table-caption
overflow不为visible
ps: display: table，它本身不产生BFC，但是它会产生匿名框（包含display: table-cell的框），而这个匿名框产生BFC