微信登录
微信登录与注册
手机号登录
当我们在浏览器地址栏输入一个合法的url时，浏览器首先进行DNS域名解析，拿到服务器IP地址后，浏览器给服务器发送GET请求，等到服务器正常返回后浏览器开始下载并解析html。这里仅总结浏览器解析html的过程。
html页面主要由dom、css、javascript等部分构成，其中css和javascript既能内联也能以脚本的形式引入，当然html中还可能引入img、iframe等其他资源。其实所有的这些资源也是以dom标签的形式嵌入在html页面中的，因此本篇总结说的html解析过程就是dom的解析过程。
dom解析过程
整个dom的解析过程是顺序，并且渐进式的。
顺序指的是从第一行开始，一行一行依次解析；渐进式则指得是浏览器会迫不及待的将解析完成的部分显示出来，如果我们做下面这个实验会发现，在断点处第一个div已经在浏览器渲染出来了：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
first div
</div>
<script>
debugger
</script>
<div>
second div
</div>
</body>
</html>
既然dom是从第一行按顺序解析，那么我们怎么判断dom何时解析完成呢？这个问题应该经常会在面试中问到，比如一般会问：
window.onload和DOMContentLoaded有什么区别？
其实就是想看看是不是明白dom树何时构建完成，这个问题确实很重要，尤其是对于几年前的jquery技术栈来说，因为我们使用javascript操作dom或者给dom绑定事件有个前提条件就是需要dom树已经创建完成。整个html页面的dom解析完成时，dom树也就构建完成了。dom树构建完成后document对象会派发事件DOMContentLoaded来通知dom树已构建完成。
html从第一行开始解析，遇到外联资源(外联css、外联javascript、image、iframe等)就会请求对应资源，那么请求过程是否会阻塞dom的解析过程呢？答案是看情况，有的资源会，有的资源不会。下面按是否会阻塞页面解析分为两类：阻塞型与非阻塞型，注意这里区分两类资源的标志是document对象派发DOMContentLoaded事件的时间点，认为派发DOMContentLoaded事件才表示dom树构建完成。
代码小兵279
75篇文章贡献270037字
代码小兵49806-11 15:28
代码小兵49806-11 15:51
代码小兵49806-11 16:22
代码小兵51603-29 17:28
暴风城-小飞04-06 20:49
京公网安备 11030102010736号