服务端渲染、客户端渲染和CRP性能节点优化

1. 服务端渲染

在先后端分离这个概念还没出现的时候，一个团队开发网站的时候是这样来开展工做的：

那个时候的前端开发叫作网页制做，只是简单的开发网站的结构和样式，而后提交给后端，后端进行数据绑定；后端经过jsp、php或asp的语法来实现数据绑定。

这种服务端渲染时，浏览器拿到的既有数据也有样式，能够直接展现出来，可是这样对服务器的压力太大了，而且这个时候的页面不能实现局部刷新的功能；可是服务端渲染有利于SEO优化。

SEO：百度/谷歌浏览器会不定时开启一个爬虫（搜索引擎搜录）爬取网站上的内容，收录的内容越多，网站的权重越大（不一样标签的权重不一样，因此标签语义化有利于提升网站的权重），可是爬虫只会爬取源代码中存在的信息，例如客户端渲染的技术就会致使源代码里面没有内容，不利于优化。

1) 优势

1. 有利于SEO优化。

2) 缺点

1. 数据全从服务器渲染致使服务器压力很大；
2. 不能实现局部刷新的效果，由于每次修改后都是直接整个页面；
3. 不利于团队协做开发，前端不会jsp等技术，后端不会html、css等技术，配合起来难度很高。

2. 客户端渲染

随着时代的发展，在服务器渲染以后出现了客户端渲染技术，实现了先后端分离，解放了服务器的巨大压力，浏览器首次获取的只有结构和样式，并无动态绑定的数据；数据是在后面的ajax请求中才返回回来，由客户端本身渲染，完成数据的绑定。

1) 优势

1. 经过AJAX实现局部刷新效果；
2. 团队配合很方便，先后端工做泾渭分明；
3. 服务器压力会小不少。

2) 缺点

1. 客户端渲染是基于js动态绑定的数据，在源代码中没有值，不利于SEO优化。

3. 办分离半不分离

1. 须要SEO的部分服务器渲染，其余地方客户端渲染（再或者第一次服务器渲染，后期操做想要局部刷新，再交给客户端渲染） => SSR服务器渲染； vue->nuxt.js react->next.js
2. 骨架屏技术（服务器）：若是服务器承压能力比较好，咱们项目的首屏信息是服务器渲染的，其他屏幕信息再滚动条滚动到指定位置的时候，再基于客户端渲染；
3. 骨架屏技术（客户端）：第一次从服务器获取回来的只有结构样式，没有数据，此时咱们用占位图或者默认的灰色块，先把结构样式撑起来（或者作一个loding的状态，真实数据获取到以后再修改），当页面第一次渲染完成，再从服务器获取数据，进行客户端渲染（真实项目中的数据请求是异步的，这样能够防止数据的请求阻碍GUI的渲染）。

4.白屏

所谓白屏，就是当前设备打开页面，第一步从服务器请求回来HTML，而后渲染，渲染过程当中请求CSS资源，生成DOM树、CSSOM树、Render-Tree渲染树，最后整个渲染页面，这个过程是须要时间的，从请求页面到整个全部东西没有完成以前所经历的时间会产生一个白屏的效果。 白屏优化：减小第一次页面渲染时间，包括后续打开时间，这些优化就是项性能优化的关键点。

5. CRP性能节点优化

为了提升性能；Webkit浏览器预测解析：chrome的预加载扫描器html-preload-scanner经过扫描节点中的“src”, “link”等属性，找到外部链接资源后进行预加载，避免了资源加载的等待时间，一样实现了提早加载以及加载和执行分离。

1. 减小DOM树的渲染时间（HTML层级不要太深，注意标签语义化）；
2. 减小CSSOM树渲染时间（选择器是从右向左解析，因此尽量减小使用选择器的层级【less/sass虽然好用可是是个大坑】）；
3. 尽早尽快地把CSS下载到客户端（充分利用HTTP多请求并发机制），把请求放在头部；
4. 为了不白屏，能够进来第一件事，快速生成一套 loding 的渲染树（前端骨架屏）；服务器的SSR骨架屏所提升的渲染是避免了客户端再次单独请求数据，而不是样式和结构上的（首屏处理）；
5. 把JS放在页面底部以及尽量使用defer或者async；
6. 减小DOM回流和重绘；

1) 回流repaint和重绘reflow

1. 重绘：元素样式的改变（但宽高、大小、位置不变）
2. 回流：元素的大小或者位置发生了变化（当页面布局和几何信息发生了变化的时候），触发了从新布局，致使渲染树从新计算布局和渲染；

回流必定会触发重绘，可是重绘不必定触发回流。

优化：放弃操做DOM，分离读写，集中式改变。

现代版浏览器存在一个渲染队列机制，对于修改样式的操做会存放到渲染队列中，接着执行代码，若是仍是修改代码的继续添加进去（只要不是获取元素样式直接无视），直到代码是获取元素样式或者执行结束为止，最后当即把队列中的样式统一进行渲染，最后只引起一次回流重绘。

box.style.width = '200px';
box.style.height = '200px';
// 这样只触发一次回流

box.style.width = '200px';
box.offsetWidth;
box.style.height = '200px';
// 这样触发两次回流

box.cssText = 'width:200px;height:200px;'
// 这样只触发一次回流
复制代码

缓存布局信息和元素批量修改：

for (let i = 0; i < 10; i++) {
	let span = document.createElement('span');
	span.innerHTML = i;
	document.body.appendChild(span);
}
// 这样会触发十次回流

let frg = document.createDocumentFragment();
	for (let i = 0; i < 10; i++) {
		let span = document.createElement('span');
		span.innerHTML = i;
		frg.appendChild(span);
	}
document.body.appendChild(frg); 
// 这样利用文档碎片只触发一次回流；用字符串拼接也能实现相同效果
复制代码