客户端渲染与服务端渲染

本人是前端小白菜，最近在苦学前端，做点自己的学习小总结。欢迎各位大佬纠错。
模版引擎原来一开始是后端使用的，后来才慢慢支持前端，听起来很高大上的模版引擎，什么页面渲染，我不喜欢这么专业的难懂的叫法，所以我要自己亲自总结一下。

服务端渲染

模版引擎不关心内容，只关心自己能识别的模版语法，比如art-template只识别 {{ }} 这种胡须语法块，在读取HTML静态页面的时候，其实就是读取一大串字符串，然后在字符串之间夹着 {{ name }} , {{ if sex !==‘male’ }} , {{ each XX of List }}等等语法块的时候，就是用字符串替换，把那个占位符作用的语法块替换掉，循环有一套替换规则，if 判断也有自己的一套替换规则，替换的内容可以是自己定义的，也可以是数据库查出来的，可以是请求别人接口得到的等等都可以，然后再把填充好数据的HTML页面（其实就是一个String）,发给浏览器，让浏览器读取，解析，展示。

这样做其实对服务器带宽会有一定要求，因为是服务端一次加载全部展示数据，渲染后的页面很大（包含着大量图片，视频，音频），就会导致页面首次加载很慢，第二次刷新因为有缓存的原因，相对会快一点，这样就是通过模版引擎做的服务端渲染。。。现在很多电商网站都会采用这一种方式吧，算是比较主流。这样只发起一次请求，却要服务端完成这么多替换操作，数据填充，循环，判断，应该算是计算密集型吧？

客户端渲染

而客户端渲染，最常见的例子，就是让我想起了那年夏天，在大学闷热的机房，女老师教我们的静态页面，那些标签，左右浮动效果，以及AJAX异步，在客户发起请求的时候，返回一个页面，数据展示还是空的，需要过一两秒，或者需要鼠标移动，下拉之类的触发ajax异步，通过异步的方式再次向服务器发起请求，再返回数据，这样的用户体验相对会比较好吧，虽然有点奇怪，看着一个空网站，然后才有数据慢慢展示，这样的渲染一个页面，发起的请求是多次的，算是IO密集型吧？

我做过WebMagic+Selenium的动态爬虫（在另外一篇博客），当时需求如果爬取服务端渲染的数据，它是跟随着页面一起展示的，非常好拿，整个页面拿回来再解析就行了，通过简简单单的CURL，JSOUP，XSOUP之类的都可以搞定。如果是客户端渲染，它数据展示有触发条件，所以要用自动化测试工具selenium那一套模拟人的操作，去触发了客户端数据渲染，再放小虫子进去收割。
好了，总结就先到这里，有说的不对的地方欢迎大佬纠错哦