页面资源加载过程

第一步：解析URL

对拿到的URL做解析，提取里面的信息。

URL结构：协议+域名+端口号+路径+参数+[,哈希（前端页面锚点，用于标记前端页面位置）]

第二步：DNS查找

拿到上一步解析出来的域名，去DNS上查找该域名对应的IP

域名系统（英文：Domain Name System，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网，浏览器，路由器，服务器上都有DNS，DNS还有DNS缓存，设有缓存时间，越靠近用户缓存时间越短

DNS查询有两个端，发出请求的浏览器，接收请求的DNS服务器，DNS服务器为了解决大量查询造成的负担设了DNS缓存。浏览器给DNS服务器一个url地址，经过查询，DNS会返回一个IP地址。

//dns-prefetch作用是页面一加载时，就立即将url进行DNS查询，这样DNS缓存里面就会记录信息，下载查询时就会快速返回需要的IP,省去了DNS查询的时间
<link rel="dns-prefetch" href="xxxx" />

第三步：下载资源

带着所有的请求信息，去这个IP地址上请求资源，然后从服务器上把请求的资源下载下来

请求信息一般包含Request-header+参数(url或body)+cookie。
服务器返回的信息一般包括status(状态码：表示请求成功与否)、Response-header(响应头，文本长度，缓存时间，压缩方式)+body(响应信息)

第四步：解析页面

浏览器拿到这些资源后，根据不同的类型，进行不同的解析

我们先加载的一般是HTML文件，在加载文件的同时就开始构建DOM树了，遇见HTML节点就放进树里，在这个过程中如果遇到js文件，构建DOM树的过程就停下来，先去加载js文件和执行（js有这么高的优先级是因为它可以直接操作DOM树，不让它执行，DOM树就白搭了），js执行完就继续构建DOM树。如果遇见style标签，这个时候不会阻塞，DOM数的构建和样式的加载会并行的进行。DOM树构建完就是构建渲染树，渲染树是DOM树和CSS共同构成的产物，在不同浏览器上渲染树的构建是有区别的。webpack是在原来的DOM数上附属一些样式，FireFox是通过DOM树和样式表重新构建出渲染树。渲染树构建好，每个元素的大小和布局方式方式就确定了。然后就是根据布局方式计算元素的位置。最后一步就是绘制，就是调用浏览器负责显示的部分，将元素的位置和样式绘制在浏览器上 。

上面的加载方式只是一个理想的模型，实际上不同浏览器为了优化加载进行了更多复杂的处理