从输入URL到页面加载的过程
2020-10-15 本文已影响0人
灯下草虫鸣314
前言
本文为阅读文章时的阅读笔记。为加深记忆,方便日后查找
原文地址: 从输入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的垃圾回收
标记清除法