一：SSR：服务端渲染（Server side render）

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

SSR优点

例如SEO–因为访问一个请求，返回的就是页面全部的HTML结构，包含所需要呈现的所有数据，于是有利于搜索引擎或者爬虫的数据抓取；

目前使用MVVM架构的项目，大都是前后端分离，数据都是动态生成，不利于SEO优化；
利于首屏渲染性能高–首屏的页面加载来自于服务器，不依赖与服务端的接口请求再数据处理；

SSR缺点

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

通常服务器的资源瓶颈主要有下面几个：

  • CPU
  •  内存
  •  磁盘
  •  I/O
  •  网络

二：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页面压缩，像服务器发送压缩文件，同时服务器需要设置解析