美文网首页
前端模板引擎与后端模板引擎

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

作者: 紫陌于微 | 来源:发表于2016-07-12 02:04 被阅读3931次
什么是模板

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

模板引擎 == 分两种

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

模板引擎渲染原理

  • 后端模板引擎渲染,以jsp为例
1.jpg

上方 <%%>内的是模板内容、<div></div> 是页面内容
当JSP运行被,编译为Servlet Class后,其实做了黄字标注的操作
<%%> 被去掉,内部即为正常的JAVA代码
<div></div> 被加引号成为字符串(回车换行也被变为转义字符)
输出字符串内容。
特点:

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

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

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

基于性能的考虑

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

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

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

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

相关文章

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

    什么是模板 一个包含了各种参数,并能够由模板处理系统通过识别某些特定语法来替换这些参数的文档。模板和数据的分离,使...

  • RESTful

    Api(接口)postman 接口工具模板引擎后端人员 不喜欢玩前端<%= %>前后端:后端提供接口(api)前端...

  • 什么是Mustache?前端流行三大件基础

    Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构中,前端模板引擎是一种可以被考虑的技术选型,随着...

  • Mustache

    Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型,随...

  • 学习笔记《Mustache》

    Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型,随...

  • 模板引擎原理

    # 模板引擎 ## 原理 ![模板引擎原理](F:\前端学习资料\模板引擎原理.jpg) ## 使用到的正则表达式...

  • 无标题文章

    # 模板引擎 ## 原理 ![模板引擎原理](F:\前端学习资料\模板引擎原理.jpg) ## 使用到的正则表达式...

  • 使用Spring创建RESTful的Web服务

    在以前的项目开发当中,大家都把前端和后端放在一起开发,通过模板引擎技术将后台的数据展示在前端页面上,常见的模板引擎...

  • art-template模板引擎

    模板引擎 什么是模板引擎: 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产...

  • velocity学习

    velocity模板引擎 velocity是一个基于Java的模板引擎。它能够做到在前端页面使用模板语言来引用Ja...

网友评论

      本文标题:前端模板引擎与后端模板引擎

      本文链接:https://www.haomeiwen.com/subject/oobjjttx.html