服务端渲染（SSR）和客户端（CSR）渲染的区别

SSR：Server side render

将组件或页面经过服务器生成html字符串，再发送到浏览器，简单理解下来，发了一个请求，服务器返回的不是接口数据，而是一整个页面的HTML结构，再结合界面以前定义的CSS把页面展现出来；VUE 服务器渲染文档

SSR优势

例如SEO（搜过引擎优化）–由于访问一个请求，返回的就是页面所有的HTML结构，包含所须要呈现的全部数据，因而例如搜索引擎或者爬虫的数据抓取；
目前使用MV*架构的项目，大都是先后端分离，数据都是动态生成，不利于SEO优化

利于首屏渲染性能高–首屏的页面加载来自于服务器，不依赖与服务端的接口请求再数据处理；

SSR缺点

性能全都依赖于服务器
前端界面开发可操做性不高

CSR：Client side render

经过接口请求数据，前端经过JS动态处理和生成页面须要的结构和页面展现

CSR 优势

FP最快
客户端体验较好，由于在数据没更新以前，页面框架和元素是能够在dom生成的

在CSR的FP术语之间，和FP相相似的术语还有：FCP和FMP；

FP：仅有一个 div 根节点。以VUE为例，div#app 注册一个空的div
FCP：包含页面的基本框架，但没有数据内容。以VUE为例，每一个template中的div框架，对应VUE生命周期的mounted
FMP：包含页面全部元素及数据。以VUE为例，经过接口更新到页面的数据后完整的页面展现；对应VUE的生命周期中的updated

CSR的缺点

不利于SEO–爬虫数据很差爬呀~~
总体加载完速度慢

优化首屏加载，减小白屏时间，提高加载性能：

加速或减小HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减小预检请求，页面内跳转其余域名或请求其余域名的资源时使用浏览器prefetch预解析等；
延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
减小请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减小cookies大小，SSR直接输出渲染后的HTML等；
浏览器渲染原理：优化关键渲染路径，尽量减小阻塞渲染的JS、CSS；
优化用户等待体验：白屏使用加载进度条、loading图、骨架屏代替等；

以上优化方案的中的技术术语

强缓存和协商缓存
强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间
协商缓存：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存以前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存；其中Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的惟一标识

Access-Control-Max-Age：缓存能够被缓存的时间

DNS 预解析：浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的链接时就无需进行DNS的解析，减小用户等待时间，提升用户体验。
<link rel="dns-prefetch" href="www.ytuwlg.iteye.com" />

Gzip页面压缩，像服务器发送压缩文件，同时服务器须要设置解析