浏览器渲染和服务器渲染区别

一、为何会有服务器渲染与客户端渲染？

　　愈来愈复杂的 UI 意味着愈来愈重的渲染工做。目前一般有两种选择：服务器渲染与客户端渲染。

　　以 Jade, YAML 为表明的模板渲染引擎通常做用于服务器做为后端的视图部分。 

　　而使用 JavaScript 直接 处理 HTML DOM 则是 做用于前端，性质是客户端执行渲染。

　　二者在最终用户看到的效果是一致的。 

　　Web App 最终都仍是要落实到HTML，CSS，JavaScript上才能体现到用户界面上。 

　　归根结底，后端渲染是将一些模板规范语言翻译成如上三种语言回传给前端；而前端渲染则是将整个生成逻辑代码所有回传前端，再由客户端生成用户界面。

　　一开始，Web App 直接由若干 HTML，CSS， JS 组成，每个页面须要特殊的逻辑，所以随着App规模的扩大，后端网站目录下的代码文件就愈来愈多，并且，彼此之间是没有同步的，好比你改了站点的布局风格。那么你极可能须要改动成百上千的HTML文件，这谁能忍?

　　聪明的工程师们想到，既然如此多的HTML具备必定的逻辑联系，何不使用代码生成代码？因而后端模板语言诞生了，这但是前端狗的一大痛点啊，因而人们开始普遍使用模板语言代替手写HTML。我认为，模板语言的成功源于它成功地减小了前端工程师的工做量。

　　后端模板渲染的思路应该是源自“如何管理数以千计的存储于后端的前端页面的版本一致？”这个问题的。经过代码生成代码，本质上是编译，他们基于HTML等基础语言做了更高层次的抽象封装，加强了易用性。各类模板语言大同小异，但大多都有模板中的模板这样的性质来完成继承这样的面向对象特性。

　　可能，当时工程师们没有考虑前端渲染的一大缘由是 以JavaScript为表明的前端技术还没有崛起。如今HTML5，CSS3，JS 受到愈来愈广的普及使得前端的可做为性大大提高，特别是在Node.js出现之后 JS 工程师维护后端的成本大大下降。

在一些jQuery用户的角度看来，JS生成前端无非就是这样的

　　var e = document.createElement('div'); 　　$('#container').append(e);

　　你须要先把DOM生成，而后再插入到其余的DOM里去。纯JS处理DOM确实是一件麻烦事，这可能也是客户端渲染迟迟没有发展起来的缘由之一。

　　考虑一下为何后端模板语言方便简洁？ 由于它用了与HTML相似的语法。在PHP，JSP页面里面你可使用大量的HTML语法，只使用少许的变量注入与迭代注入。

使用HTML进行设计明显比纯JS更方便快捷而且直观。

　　那么能够借鉴地，解决客户端渲染问题的最后一个锦囊就是引入模板，在这里咱们称之为组件(Component) 。

　　对待模板，新兴的Angular，React，Vue 意见不一，甚至他们对本身在Web App 的定位也不同。 具体状况能够本身去了解，这并非本文的重点。

　　随着前端也支持了模板语言，那么之前的代码管理问题也解决了，以往的后端渲染引擎也大多有了基于JS的前端版本。

　　先后端真正解耦，前端将专一于UI，后端将专一于数据处理，两端经过设计好的API进行交互，这会是一个趋势。

二、浏览器渲染和服务器渲染路线

　　互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将html拼接好的而后将之返回给前端完整的html文件，浏览器拿到这个html文件以后就能够直接解析展现了，而这也就是所谓的服务器端渲染了。而随着前端页面的复杂性提升，前端就不只仅是普通的页面展现了，而可能添加了更多功能性的组件，复杂性更大，另外，彼时ajax的兴起，使得业界就开始推崇先后端分离的开发模式，即后端不提供完整的html页面，而是提供一些api使得前端能够获取到json数据，而后前端拿到json数据以后再在前端进行html页面的拼接，而后展现在浏览器上，这就是所谓的客户端渲染了，这样前端就能够专一UI的开发，后端专一于逻辑的开发。

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

客户端渲染路线：

　　1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于能够运行，由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. 客户端从无到完整地，把数据渲染为响应页面

服务端渲染路线：

　　1. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. 客户端把剩下一部分渲染完成( 内容小，渲染快 )

三、从 后端渲染到前端渲染，发生了什么变化？

• 计算任务转移 

　　本来由服务器执行的渲染任务转移给了客户端，这在大量用户访问的时候大大减轻后端的压力。让后端专一作后端应该作的事情，性能将大大提升，由于服务器作的事情确实减少了，而如今随着客户端软硬件的发展，也能处理好大多数的渲染工做了。

• 放弃前端权限 

　　将整个UI逻辑交给客户端之后，一些有经验有能力的用户可能会劫持UI，使得他们可以看到一些不应看到的界面。这彷佛违反了安全的原则。可是“一切在前端谈安全都是耍流氓”，后端不能轻信一切从前端传来的数据，切记必定要作好过滤与验证。只要使用SSL、屏蔽XSS、后端不出漏洞，想伪造身份劫持App仍是难以作到的。

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

• 优势：

1. 前端耗时少。由于后端拼接完了html，浏览器只须要直接渲染出来。

2. 有利于SEO（搜索引擎优化）。由于在后端有完整的html页面，因此爬虫更容易爬取得到信息，更有利于seo。

3. 无需占用客户端资源。即解析模板的工做彻底交由后端来作，客户端只要解析标准的html页面便可，这样对于客户端的资源占用更少，尤为是移动端，也能够更省电。

4. 后端生成静态化文件。即生成缓存片断，这样就能够减小数据库查询浪费的时间了，且对于数据变化不大的页面很是高效 。

• 缺点：

1. 不利于先后端分离，开发效率低。使用服务器端渲染，则没法进行分工合做，则对于前端复杂度高的项目，不利于项目高效开发。另外，若是是服务器端渲染，则前端通常就是写一个静态html文件，而后后端再修改成模板，这样是很是低效的，而且还经常须要先后端共同完成修改的动做； 或者是前端直接完成html模板，而后交由后端。另外，若是后端改了模板，前端还须要根据改动的模板再调节css，这样使得先后端联调的时间增长。

2. 占用服务器端资源。即服务器端完成html模板的解析，若是请求较多，会对服务器形成必定的访问压力。而若是使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实彻底交给了一个服务器。

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

• 优势：　　

1. 先后端分离。前端专一于前端UI，后端专一于api开发，且前端有更多的选择性，而不须要遵循后端特定的模板。

2. 体验更好。好比，咱们将网站作成单页Web应用（single page web application，SPA，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序）或者部份内容作成SPA，这样，尤为是移动端，可使体验更接近于原生app。

• 缺点：

1. 前端响应较慢。若是是客户端渲染，前端还要进行拼接字符串的过程，须要耗费额外的时间，不如服务器端渲染速度快。

2. 不利于SEO。目前好比百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，因此SEO不好。由于服务器端可能没有保存完整的html，而是前端经过js进行dom的拼接，那么爬虫没法爬取信息。 除非搜索引擎的SEO能够增长对于JavaScript的爬取能力，这才能保证SEO。

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

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

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

六、对于先后端分离，若是进行seo优化？

　　若是进行了先后端分离，那么前端就是经过js来修改dom使得html拼接彻底，而后再显示，或者是使用SPA，这样，SEO几乎没有。那么这种状况下如何作SEO优化呢？

　　咱们能够自行提交sitemap，让蜘蛛主动去爬取，可是遇到了sitemap中的url，达到指定页面以后只有元js怎么办呢？这是咱们可使用<noscript>标签来进行简单的优化，好比打印出当前页面信息的一些关键的信息点，可是正经常使用户并不须要这些，会形成额外的负担，且前端能够判断是否支持JavaScript，然后段不行，只好根据百度的spider作UA（用户代理）判断，使用phantomjs或者nginx代理，来对spider访问的页面进行特殊的处理，达到被收录的效果。但这种效果仍是很差。。。

　　而目前的react和vue都提供了SSR，即服务器端渲染，这也就是提供SEO很差的解决方式了。

七、究竟如何理解先后端分离？

　　实际上，时至今日，先后端分离必定是必然或者趋势，由于早期在web1.0时代的网页就是简单的网页，而现在的网页愈来愈朝向app前进，而先后端分离就是实现app的必然的结果。因此，咱们能够认为html、css、JavaScript组成了这个app，而后浏览器做为虚拟机来运行这些程序，即浏览器成为了app的运行环境，成了客户端，总的来讲就是当前的前端愈来愈朝向桌面应用或者说是手机上的app发展了，而好比说电脑上的qq能够服务器端渲染吗？确定不能！因此先后端分离也就成了必然。而咱们目前接触额前端工程化、编译（转译）、各类MVC/MVVM框架、依赖工具、npm、bable、webpack等等看似很新鲜、创新的东西实际上都是传动桌面开发所造成的概念，只是近年来前端发展较快而借鉴过来的，本质上就是开源社区东平西凑作出来的一个visual studio。