文档对象模型
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
浏览器如何渲染页面
1.输入网址通过DNS解析,得到服务器地址
2.浏览器向服务器发起http请求,经过TCP/IP三次握手确认请求后,服务器将需要的代码发回给浏览器
3.浏览器接收代码后进行解析,经过三大步骤:
DOM构造 、布局 、绘制页面
- step1:DOM构造
- 浏览器将收到的html代码,解析构建为一棵DOM树
- 接着将接收到的CSS代码,通过css解析器构建出样式表规则
- 将这些规则分别放到对应的DOM树节点上,得到一棵带有样式属性的DOM树
- step2.布局
- 浏览器从上到下,从左到右读取DOM树节点,顺序存放到一条虚拟的传送带上。
- 传送带上的每一个盒子就是一个DOM节点,而这条流动的传送带就是文档流。如果我们读取到的节点是属于另一个节点下的子节点,那么在放入传送带的时候,就应该按顺序放到该节点盒子的内部;如果子节点下还有子节点,在传送带上的时候就继续套到子一级的盒子内部。
- 档流排完之后,开始获取计算节点的坐标和大小等CSS属性,作为盒子的包装说明。然后把盒子在仓库里一一摆放,这就将节点布局到了页面。
- step3.绘制页面
布局完成之后,我们在页面上其实是看不到任何内容的
浏览器只是计算出了每一个节点对象应该被放到页面的哪个位置上,但并没有可视化。
因此最后一步就是将所有内容绘制出来,完成整个页面的渲染