前端学习之------浏览器渲染页面的原理

从用户在浏览器地址栏输入网址，到看到整个页面，中间发生了什么？

1、发请求：

浏览器向服务器发送HTTP请求

2、响应：

服务器返回 “ 二进制 ” 的HTML文件（以字节为单位），本质上是一个文本文件

3、生成DOM树：

浏览器按照一定的规则，把HTML文本文件转成浏览器自己能识别的符号标签序列，再把所有标签转为JS节点对象，并生成DOM树

4、生成CSSOM树：

浏览器在生成DOM树的过程中，会遇到<link>标签（样式链接），就会向服务器请求样式文件（也是二进制文本文件），再按照一定规则把样式文件转成自己能识别的符号标签序列，再把标签转为JS节点对象，并生成CSSOM树

5、生成渲染树：

DOM树和CSSOM树结合，就形成渲染树，渲染树的任务就是匹配DOM树和CSSOM树的节点，并且捕获可见内容

注：<meta>标签、<link>标签、display：none的标签是不会在渲染树中的

6、布局：

获取渲染树的结构、节点位置和节点大小，依据 “ 盒子模型 ” 排列和嵌套所有的节点

7、页面绘制：

把渲染树以像素的形式绘制在屏幕上