描述浏览器的渲染过程，DOM树和渲染树的区别

• 浏览器的渲染过程：

  • 解析HTML构建 DOM(DOM树)，并行请求 css/image/js
  • CSS 文件下载完成，开始构建 CSSOM(CSS树)
  • CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
  • 布局(Layout)：计算出每个节点在屏幕中的位置
  • 显示(Painting)：通过显卡把页面画到屏幕上

• DOM树 和 渲染树 的区别：

  • DOM树与HTML标签一一对应，包括head和隐藏元素
  • 渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性