前端模板引擎与后端模板引擎

什么是模板

一个包含了各种参数，并能够由模板处理系统通过识别某些特定语法来替换这些参数的文档。
模板和数据的分离，使得HTML的维护变得更加轻松：更改标签、添加class和重写li等。

模板引擎 == 分两种

用以生成html等多种文件，以html为例：
客户端引擎，主要结合js实现html，一种以handlebar mustache为代表，实现方式为拼字符串。另一种以react为代表，实现方式为virtual Dom。
服务端引擎，以velocity这种为代表，可结合Java等语言实现，由服务端生成html返回客户端。

模板引擎渲染原理

---

• 后端模板引擎渲染，以jsp为例

1.jpg

上方 <%%>内的是模板内容、

是页面内容
当JSP运行被，编译为Servlet Class后，其实做了黄字标注的操作
<%%> 被去掉，内部即为正常的JAVA代码

被加引号成为字符串（回车换行也被变为转义字符）
输出字符串内容。
特点：

    转换模板代码为目标源码执行，后续直接调用源码运行。
    依赖服务器端，对我们来说，需要用idea运行在tomcat中发布之后才能将jsp正确的装换成html

• 前端模板引擎

2.jpg

特点：
依赖客户端，在浏览器渲染页面，而不依赖与服务端

模板引擎使用情况

• 全前置、前后各半、全后模板
• 前端模板会分担一部分服务器压力，但是也会给客户端增加压力，所以我们需要根据实际情况选择合适的方法。

---

基于性能的考虑

使用客户端模板重新渲染UI的更新部分已是司空见惯之事。然而性能最佳的方法仍然是通过将最初的页面整体进行加载。使用这种做法，浏览器可以直接渲染HTML页面，而无需解析任何JavaScript代码，也不必发出额外的数据请求。这对于那些既是动态，又需要尽可能最大化初始加载速度的页面而言，是一项挑战。然后，最理想的是模板已开发，能重用于客户端中，这样服务器能提供最佳性能，而且维护性仍然很好。

这里需要考虑到两个问题：

• 程序的那些部分主要是动态的？而哪些部分需要减少初始化加载的时间？
• 需要把处理过程交给客户端？还是让服务器做这样的繁重工作？

这个问题只有在实际测试了几种不同的方法才能回答。不过，使用预编译模板，客户端通常不会在渲染过程中遭罪。并且在客户端、服务端复用模板的情况下，你会发现无逻辑性模板语法更为通用。