前言
本文为阅读文章时的阅读笔记。为加深记忆，方便日后查找
原文地址: 从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
正文
一、从浏览器接收url到开启网络请求线程
1、浏览器多进程的
浏览的进程主要包括：
- 主控进程：主进程只有一个。负责协调和主控
- 负责浏览器界面的显示、用户交互：前进后退
- 负责管理每个页面。创建及销毁其他进程
- 网络资源的管理和下载
- 将render进程得到的内存中的bitmap绘制到用户界面
- 插件进程：第三方插件进程。每种类型的插件就是一个进程。只有改插件使用时才会创建
- GPU进程：最多只有一个，用于3D绘制
- render进程：浏览器内核进程，每一个tab页面都是一个独立的进程，互不影响(如果两个都是空白的tab，可能会合并为一个进程)
2、浏览器的内核进程是多线程的
内核进程包括以下几个线程：
-
GUI线程：用于HTML的渲染
- 解析html，css，构建DOM树，css树。合并为render树。
- 负责重绘和重排
- 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获取某些属性时
- offset(Top/Left/Right/Height)
- scroll(Top/Left/Right/Height)
- client(Top/Left/Right/Height)
- width,height
- 调用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
三、js执行
js执行上下文VO、AO、作用域链、this
我不会啊我不会
js的垃圾回收
标记清除法
