多个html页面拼接成一个页面_浏览器渲染页面机制以及如何减少DOM操作

为了能更好、更快的为用户呈现出他们想要的页面，基于浏览器的渲染机制，我们在开发中应该了解浏览器，了解浏览器的运行机制，以及在开发中我们能更好的提高性能，虽然现在市面上流行的VUE和react,但也应该了解内在的机制，更好的去理解框架的思想，后续再介绍Vue等

---

1.浏览器开辟的线程
我们都知道计算机在运行的时候，为了提升CPU的利用率，会开辟不同的进程和线程，进程和线程的关系不再赘述。浏览器在运行的时候，就会开辟一个进程，然后计算机把相应的资源分配给这个进程来供浏览器的使用，为了提高性能，异步操作每一个任务，浏览器会开辟多个进程来进行页面的渲染，浏览器开辟的主要线程，包括以下五个：GUI渲染线程渲染和绘制页面、 JS引擎线程运行和渲染JS、 事件触发和管控线程、 定时器触发和管控线程、 异步HTTP请求线程。2.页面的组成以及浏览器的处理
在浏览器渲染页面的时候，由GUI渲染进程从头到尾的渲染页面的各个组成部分，包括HTML/CSS/JS,针对于HTML,浏览器按部就班的执行，当遇到css时，基于css的导入方式有很多，渲染的时候分三种情况：①link导入浏览器碰到link，则会新开辟一个HTTP请求线程，专门去加载css样式。②@import导入浏览器不会新开辟一个线程专门去加载，主线程GUI进行渲染，主线程收到阻碍。③style内嵌式：适用于css代码较少，已介绍开辟新的进程。3.浏览器渲染页面的步骤

• 生成DOM-TREE:渲染页面中所有的HTML,生成DOM树
• 生成CSS-TREE:渲染所有的CSS
• 生成RENDER-TREE:把DOM-TREE和CSS-TREE合并，形成RENDER-TREE
• 进行计算：按照RENDER-TREE，在设备的视口中进行结构和位置的计算。
• 绘制：通过从RENDER-TREE得到的几何信息，得到节点的绝对像素绘制或者栅格化。

4.DOM的回流和重绘重绘 元素的样式发生改变，但是其宽高、大小、位置、并没有改变，比如透明度的改变。 回流 元素的大小、位置发生了改变，就会触发一次回流，导致页面的布局发生了改变
回流一定触发重绘，重绘不一定触发回流5.如何减少回流和重绘在不使用框架
首先在当前浏览器中，也做了相应的优化，为了提高性能，浏览器增加了渲染队列机制以减少回流和重绘。渲染队列的运行机制在代码从上往下执行的时候，把所有要修改DOM样式的代码都放入队列中，然后一次性统一渲染。
在实际开发中如何做到减少回流和重绘？有以下几种方案：

• 分离读写 把设置样式和读取样式分离开
• 集中改变样式有俩种方式：①给盒子添加类名，基于类名选择器来一次性添加样式。②通过box.style.cssText = '';来一次性设置样式。
• 动态操作DOM建立一个文档碎片临时存放动态创建的DOM元素，把所有需要动态创建的元素都创建完成后，再一次性的放到页面中。比如：字符串的拼接
• 动画效果 应用到盒子position属性为absolute上
• css3硬件加速 牺牲平滑度换速度 避免table布局和使用JavaScript表达式