服务端渲染和客户端渲染的一些理解

服务端渲染 (SSR)

　　服务端在返回 html 以前，在特定的区域，符号里用数据填充，再给客户端，客户端只负责解析 HTML 。

客户端渲染(CSR)

　　html 仅仅做为静态文件，客户端端在请求时，服务端不作任何处理，直接以原文件的形式返回给客户端客户端，而后根据 html 上的 JavaScript，生成 DOM 插入 html。

二者本质区别 

　　客户端渲染和服务器端渲染的最重要的区别就是到底是谁来完成html文件的完整拼接，若是是在服务器端完成的，而后返回给客户端，就是服务器端渲染，而若是是前端作了更多的工做完成了html的拼接，则就是客户端渲染。

二者异同

• 1.渲染本质同样，都是字符串拼接，将数据渲染进一些固定格式的html代码中造成最终的html展现在用户页面上。

• 2.拼接字符串必然引发性能的消耗。

• 3.服务端渲染性能消耗在服务端，当用户量比较多时，缓存部分数据以免过多数据重复渲染。

  4.客户端渲染，如当下火热的 spa 框架，Angular、React、Vue，在首次渲染时，大可能是将原 html 中的数据标记（如 {{ text }} ）替换。客户端渲染较难的一点是数据更新之后，页面响应式更新时如何节省资源，直接 DOM 的读写，是很消耗性能的。 Vue 2.0 + 有 Vnode，进行 diff 后，渲染到页面上。

服务器端渲染的优缺点是怎样的？

优势：

1. 前端耗时少。由于后端拼接完了html，浏览器只须要直接渲染出来。
2. 有利于SEO。由于在后端有完整的html页面，因此爬虫更容易爬取得到信息，更有利于seo。
3. 无需占用客户端资源。即解析模板的工做彻底交由后端来作，客户端只要解析标准的html页面便可，这样对于客户端的资源占用更少，尤为是移动端，也能够更省电。
4. 后端生成静态化文件。即生成缓存片断，这样就能够减小数据库查询浪费的时间了，且对于数据变化不大的页面很是高效 。

缺点：

1. 不利于先后端分离，开发效率低。使用服务器端渲染，则没法进行分工合做，则对于前端复杂度高的项目，不利于项目高效开发。另外，若是是服务器端渲染，则前端通常就是写一个静态html文件，而后后端再修改成模板，这样是很是低效的，而且还经常须要先后端共同完成修改的动做； 或者是前端直接完成html模板，而后交由后端。另外，若是后端改了模板，前端还须要根据改动的模板再调节css，这样使得先后端联调的时间增长。
2. 占用服务器端资源。即服务器端完成html模板的解析，若是请求较多，会对服务器形成必定的访问压力。而若是使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实彻底交给了一个服务器。

客户端渲染的优缺点是怎样的？

优势：　　

1. 先后端分离。前端专一于前端UI，后端专一于api开发，且前端有更多的选择性，而不须要遵循后端特定的模板。
2. 体验更好。好比，咱们将网站作成SPA或者部份内容作成SPA，这样，尤为是移动端，可使体验更接近于原生app。

缺点：

1. 前端响应较慢。若是是客户端渲染，前端还要进行拼接字符串的过程，须要耗费额外的时间，不如服务器端渲染速度快。
2. 不利于SEO。目前好比百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，因此SEO不好。由于服务器端可能没有保存完整的html，而是前端经过js进行dom的拼接，那么爬虫没法爬取信息。 除非搜索引擎的seo能够增长对于JavaScript的爬取能力，这才能保证seo。

使用服务器端渲染仍是客户端渲染？

　　盲目选择使用何种渲染方式都是耍流氓。如企业级网站，主要功能是展现没有复杂的交互，而且须要良好的SEO，则这时咱们就须要使用服务器端渲染；而相似后台管理页面，交互性比较强，不须要seo的考虑，那么就可使用客户端渲染。

　　另外，具体使用何种渲染方法并非绝对的，好比如今一些网站采用了首屏服务器端渲染，即对于用户最开始打开的那个页面采用的是服务器端渲染，这样就保证了渲染速度，而其余的页面采用客户端渲染，这样就完成了先后端分离。

首屏服务器端渲染

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

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

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

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

　　4.浏览器渲染原理：优化关键渲染路径，尽量减小阻塞渲染的JS、CSS；

　　5.优化用户等待体验：白屏使用加载进度条、loading图、骨架屏代替等；

一些相关技术:

　　1.强缓存和协商缓存强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间

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

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

　　4.DNS 预解析：浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的链接时就无需进行DNS的解析，减小用户等待时间，提升用户体验。

　　5.<link rel="dns-prefetch" href="www.ytuwlg.iteye.com" />

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