从头开始说起，可能有些地方不是很全，以后学习过程中慢慢补齐
1、用户在地址栏输入一个URL，首先在浏览器里查找有无与当前域名对应的ip地址，若没有再查看操作系统有无缓存，若没有再查看路由器有无缓存；
若没有，会发送DNS请求到本地DNS服务器（一般为移动、电信等），查看本地DNS服务器有没有；若有，则在本地域名服务器查找，采用递归查找；
若仍然没有，本地DNS服务器回向根DNS服务器发起请求，采用迭代查找。依次向顶级、权限域名服务器查找，最终获取到对应的ip地址。
2、缓存服务器CDN
3、进行http请求，三次握手四次挥手
拓展：为啥是三次握手和四次挥手，不是其他次数呢？这几次连接中到底发生了什么？
4、服务器返回结果，304或202
304：客户端有缓存，直接使用客户端缓存就行
202：返回结果成功
拓展：客户端返回的状态码有哪些？
5、开始解析返回的HTML代码
浏览器渲染引擎从上往下执行代码（包括HTML,CSS和JS），解析html生成DOM树，同时解析CSS代码生成css rule tree，同时把DOM tree和css rule tree合并生成render tree，同时还会去请求另一些资源，所以渲染引擎会同时干很多事，迫不及待地把内容渲染出来，如果后面的代码会改变之前的样式，会引起回流和重绘。
6、计算图层布局
render tree生成之后，会进行计算图层布局，所有元素的相对位置和大小信息都在这一步计算
7、绘制图层
将页面图层转化为像素
8、整合所有图层，得到页面
继续详细解释第5步
外联的资源会不会影响当前DOM的解析呢？有些会有些不会，分为两类：阻塞型、非阻塞型，区分它们的标志是派发DOMContentLoaded事件的时间点，DOMContentLoaded的派发相当于DOM树的创建完成
阻塞型（DOMContentLoaded派发前）:
1、内联js代码
2、外联普通js代码
3、外联defer属性js代码
4、内联css代码
5、script标签之前的外联css文件（该css文件被js依赖）
说明：
1、为啥defer js代码也算阻塞型？
实际上defer js是在DOMContentLoaded派发前，DOM树创建完成之后执行的，应该不会阻塞dom树的解析，但是这里是用DOMContentLoaded的派发时间做区分的，因此它属于阻塞型。
2、为啥外联的在script标签以前的css文件是阻塞型？
因为后面的js文件会阻塞dom的解析，js代码里也有可能会获取样式，所以浏览器一般会把script标签之前的css文件都解析掉
非阻塞型（DOMContentLoaded派发后）：
1、外联async属性js代码
2、img
3、iframe
4、script标签之后的外联css文件
可以通过检查window.onload事件来判断非阻塞事件是否完成
外联JS的种类
外联JS可分为三种：普通型，自带defer属性和自带async属性
1、普通型
外联JS文件一般通过script标签引入，默认是同步加载，即执行完js文件才继续执行下面的HTML代码。当浏览器解析到<script>标签时，会交由js引擎执行，同时不会解析script标签包含的内容，遇到</script>标签结束。
<script src='abcd'>console.log('1111')</script>
//不会输出1111他在页面中有两种放置位置，第一种是在head标签内，第二种是在body标签里的最下面，</body>前面。
head标签内：会先下载完所有head标签内的js代码，再去解析body标签内的HTML代码，当js文件过多过大时，浏览就会在短时间内显示空白，用户体验不好
body标签内：这样不会影响html代码的解析，但是对于一些依赖js的网页，就显得慢了。
所以最好的方法是一边解析，一边下载
2、自带defer属性
defer属性：一边解析HTML一边下载js文件，下载好之后放到一个序列里，等到DOM树创建完成之后在执行
如果有多个外联defer js文件，则肯定会按照书写顺序执行，且一定在DOMContentLoad事件前执行，因此引入注意顺序
3、自带async属性
async属性：一边解析HTML一边下载js文件，下载完成后立马执行，执行时仍然会阻塞html代码解析
如果有多个外联async js文件，则哪个先下载完先执行哪个，不一定按照书写顺序执行
