前端渲染

起源

所谓渲染，就是要把一个真实的dom节点渲染到html页面中。vue渲染也不例外。

一般情况下，页面的渲染都要经过以下四个步骤（浏览器为例）：

• 解析html，生称dom树
• 解析css，生成cssom树
• 合并以上两个生成渲染树
• 计算布局、div尺寸（排列），浏览器引擎进行渲染（绘制）

当一些背景样式等不影响布局的样式改变时，会引起浏览器的重绘，重绘就是重新绘制，不会重新布局，不会重新计算尺寸渲染。与之相对应的就是重排，也称为回流，也就是dom结构发生改变或者元素尺寸发生改变时，浏览器需要进行重新排版，当然不是简单的排版，这是根据浏览器引擎重新渲染的。由此可以看出，重排比重绘更加耗费性能，重排必然引起重绘。

因此从浏览器层面来讲，前端渲染优化的终极方向就是：减少重排和重绘。由于浏览器总归要做出变化和交互，所以重绘是不可避免的，但是我们尽可能的减少不必要的重排。之所以引起重排或者重绘，是因为dom结构即dom树发生了改变或者cssom树发生了改变。一旦渲染树发生了改变,浏览器就会执行上边四个步骤，进行重新渲染。减少重排的关键是减少dom操作，或者换句话说，提高dom操作的质量。除此之外，我们也可以巧妙的利用css布局减少重排重绘。如实现功能的前提下，动画过渡较多的可以用定位脱离文档流，可以用visibility代替display属性实现隐藏等等。

dom操作的入口或者说接口是ECMAScript。任何dom的操作，无论是用react还是vue还是jquery,他们的本质都是es的语法糖，最终都会编译成es语法来执行。

我们知道js包括三部分：文档对象模型dom 、浏览器对象模型bom 、ECMAScript。可以看出dom、bom和ECMAScript是三个相互独立的单元，但是我们操作dom和bom时需要利用es语法。这里的es可以看做成js提供给我操作dom和bom的接口方法。我们可以通过js提供的各种函数来获取dom、改变dom、改变css等等。但是ES语法来操作dom是需要耗费性能的。我们利用es语法如getElementbyId等函数来获取dom结构，获取本身就需要一定的时间和空间。如果频繁的利用es获取，这也是一个巨大的性能损耗点。比如同一个功能，我们有很多不同的实现方式。有的实现我们需要操作5次dom，有的实现确需要操作10次dom。每次dom操作之后，都会引起浏览器的重排或者重绘。如果dom操作十次，就发生十次重排或者重绘。浏览器每次都会重新执行以上四个步骤。如果dom频繁的操作，浏览器会频繁的重复四个步骤渲染。每次都要重新计算和布局新的dom。如果可以用3次dom操作解决，就不要用5次dom操作，但3次或者5次的控制权在开发者手里，浏览器或者说js只负责执行。这就引发了性能问题。这个点在于开发者可以肆无忌惮的用任何一种方式去改变dom,甚至是非常糟糕的方式，但它同样实现了功能。

改变

经过以上分析，我们发现原始的浏览器渲染方式有非常耗费性能的可能性。每一次dom操作都会引起高消耗的重排和重绘，但是dom操作的权限在开发者手中。对开发者而言，他可以无限次的操作dom但不考虑性能。 同一个功能的实现方式有很多种，比如他可以把一次性可执行的dom操作被拆分成多次。举个例子，往ul标签插入1000个li，可以一次性操作dom插入1000个li,也可以每次插入一个li,插入1000次。这两种方式都可以实现插入的过程，但是前者执行一次重排，后者执行一千次。在数据量瘦的情况下我们肉眼察觉不到，但是数据两一旦增加，页面立即卡死。这就是区别。操作css也是一样。可以单传一个属性，也可以把所有的属性包装成对象，一次性操作。明白这两者的区别。这只是一个简单的例子，开发者可以通过自身注意考虑到这种情况。但有些情况是开发者注意不到的或者开发也不可能为了性能把精力注重在这个地方。确实es操作dom是需要时间和空间成本的。越是好的页面，越需要好的实时交互性和响应性，而交互性强的页面需要频繁的操作dom,以带来更好的用户体验。于是就有了专业的人做专业的事，这些人试图在以上这些点进行优化。

纵观现在各个框架的流行程度与发展趋势，我们发现目前市场上主要以三大框架为主：

• Vue的成长速度非常快。
• Angular的受欢迎程度基本保持不变。
• React 既庞大又在快速增长。

vue渲染

react渲染

angular渲染

另外，jQuery在市场仍然非常受欢迎，但用户使用量越来越少。jquery,它声称是一个js的封装库。jquery从出现至今依然很受欢迎，并且可以与现今流行的三大框架相提并论。但可惜的是用户量在逐渐降低。三大框架的优势逐渐凸显。jquery只考虑了操作的便捷性和兼容性。用强大的封装库封装了常见的dom操作，让我们可以便捷的操作。当然除此之外还有其他的优势，但是相对渲染而言，它似乎只做到了封装。但是开发者依然可以用不规范的代码降低渲染性能。