1.加载资源的第一步就是进行url解析，提取出里面的信息。
2.然后，拿到上一步解析出来的域名，去DNS服务器上查找该域名对应的ip。
3.带着所有的请求信息去这个IP地址请求资源，再服务器上把请求的资源下载回来，
4.最后根据不同的资源进行不同的解析。
url包括：协议，域名，端口，路径，参数，哈希（前端页面的锚点，标记页面位置)
dns缓存
dns优化：
dns_prefetch:再<head>中的加入
<link rel="dns-prefetch" href="img.XXXX.com">他的原理是再页面一加载时就把href里面的网址进行dns查询，并且缓存起来。等到真正请求时就会省去查询的时间。
资源请求：
请求的资源可以是html.css.js.接口等。
发起请求时浏览器带着信息去后端服务器上寻找资源。这个请求包含：1.request-header，也就是请求头，里面包含了我要请求谁，我从哪来，我想要得到什么样的数据，我用的什么浏览器，还有比较重要的cookie。2.请求带的参数。一般get请求在url 里；post请求会在参数的body里。当这些信息到达服务器，服务器会根据信息找到匹配的资源。然后返回给浏览器。返回的信息包括1.状态码：表示请求是否成功。2.response-header：响应头。表示响应信息，包含文本长度，响应时间，压缩方式，还有响应内容：如果是图片，内容就是图片信息；如果是接口，内容就是json字符串。
浏览器解析：
一般最先加载是一个HTML文件。在加载html的同时就开始构建DOM树了，遇到一个HTML节点就把它放到树里。
假如加载html时，遇到一个js文件,那么就需要先暂时停下构建DOM树的工作。先加载和执行js文件。而js有高的优先级是因为，它可以做DOM元素，就可能导致之前构造的DOM都白干了。所以要等js执行完成后，在继续构建DOM树，若遇到style标签就不会造成堵塞，dom树 的构建与样式的加载时并行进行的。构造完dom树后，会进行构造渲染树。渲染树是dom树与css样式的结合的产物，这个渲染树在不同的浏览器构造的机制也不一样。比如chrome用的webkit内核是在原来的DOM树上附属一些样式。而Firefox是根据DOM树和样式表重新构建出一个渲染树，渲染树构建好后每个元素的大小，布局方式也就确定了。然后根据每个元素的大小，布局方式计算出元素的实际位置。然后进行绘制，调用浏览器负责显示的部分，将元素按照对应的位置和样式绘制在屏幕上
1712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
