前端性能优化到底在优化什么？怎么优化( 二 ) _前端性能优化

渲染优化客户端的渲染
前端去取后端的数据生成DOM树，加载过来后，自己在浏览器由上而下跑执行JS，随后就会生成相应的DOM 。
优点：

客户端的渲染使得前后端分离，开发效率高
用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转

缺点：

前端响应速度慢，特别是首屏，这样用户是受不了的
不利于seo优化，因为爬虫不认识SPA，所以它只是记录了一个页面

服务端的渲染
DOM树在服务端生成，然后返回给前端，页面上展现的内容，我们在HTML源文件也能找到。
优点：

服务端渲染尽量不占用前端的资源，前端这块耗时少，速度快
利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息

缺点：

不利于前后端分离，开发的效率降低了
对html的解析，对前端来说加快了速度，但是加大了服务器的压力

类似企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。
现在很多网站使用服务端渲染和客户端渲染结合的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。
区分：源码里如果能找到前端页面中的内容文字，那就是在服务端构建的DOM，就是服务端渲染，反之是客户端渲染。
浏览器渲染
浏览器渲染机制一般分为：

分析HTML并构建DOM树
分析CSS构建CSSOM树
将DOM和CSSOM合并成一个渲染树
根据渲染树布局，计算每个节点的位置
调用GPU绘制，合成图层，显示页面

在渲染DOM的时候，浏览器所做的事情：

获取DOM后分割为多个图层
对每个图层的节点计算样式结果（recalculate style -- 样式重计算）
为每个节点生成图形和位置（layout -- 回流和重布局）
将每个节点绘制填充到图层位图中（paint setup 和 paint -- 重绘）
图层作为纹理上传至GPU
复合多个图层到页面上生成最终屏幕图像（composite layers -- 图层重组）

新建独立图层会减少重回回流带来的影响，但是在图层重组的时候会消耗大量的性能，所以要权衡利弊，有所选择。
渲染流程的CSS优化
CSS的渲染是从右到左进行匹配的，我们应该注意：

避免大量使用通配符，可选择需要用到的元素
关注可以通过继承实现的属性，避免重复匹配，重复定义
少用标签选择器，例如.header ul li a
id和class选择器不应该被多余的选择器拖后腿，例如.header#title
减少嵌套，后代选择器的开销最高，不要一大串，要将选择器的深度降到最低，尽可能使用类来关联每一个标签元素。

CSS阻塞
我们将css放在head标签里和尽快启用CDN实现静态资源加载速度的优化，因为只要CSSOM不OK，那么渲染就不会完成。
JS阻塞
JS引擎是独立于渲染引擎存在的，就是说插在页面那，就在那执行，浏览器遇到script标签时，它就会停止交于JS引擎渲染，等它渲染完，浏览器又交于渲染引擎继续CSSOM和DOM的构建。
DOM渲染优化
也就是说重绘回流问题

回流：前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
重绘：最终，我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。

当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：