什么是服务端渲染？

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

什么是SSR?

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

优点：

        1、利于SEO，例如搜索引擎或者爬虫的数据抓取；

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

缺点：

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

什么是CSR?

  1、通过接口请求数据，前端通过JS动态处理和生成页面需要的结构和页面展示

  优点：

        FP最快、客户端体验较好，因为在数据没更新之前，页面框架和元素是可以在dom生成的

***类似FP的术语还有：FCP和FMP

FP：仅有一个 div 根节点。以VUE为例，div#app 注册一个空的div

FCP：包含页面的基本框架，但没有数据内容。以VUE为例，每个template中的div框架，对应VUE生命周期的mounted

FMP：包含页面所有元素及数据。以VUE为例，通过接口更新到页面的数据后完整的页面展示；对应VUE的生命周期中的updated

缺点：        

        整体加载完速度慢

        优化首屏加载，减少白屏时间，提升加载性能

  如何优化？

        1、加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等；

        2、延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等

        3、减少请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等

        4、白屏使用加载进度条、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的解析，减少用户等待时间，提高用户体验。

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

什么是同构？

        一套react代码在服务端执行一次，在浏览器端再执行一次