文档章节

服务端模版引擎和客户端模版引擎随手写写

王潭不是王雨潭
 王潭不是王雨潭
发布于 2017/08/30 20:12
字数 524
阅读 24
收藏 0

模版引擎

模版引擎(Template Engine),是一项展现层与数据分离的技术。可以分开处理展现层和数据,再通过模版引擎按照一定的语义将数据填充进展现层,形成最终的HTML页面。

模版引擎分为两种:服务端模版引擎、客户端模版引擎。

服务端模版引擎

在服务端将数据填入模版,返回相应的HTML页面。

优点:

  • 需要在服务端做相关计算
  • 首屏响应速度快,不用等待js的加载和渲染

缺点:

  • 页面的每一次改动都要重新请求模版,和服务端交互频繁,影响效率。

客户端模版引擎

将模板和数据分别传送到客户端,在客户端由js渲染出最终的HTML视图。自从有了ajax,用户交互部分直接可以用过ajax请求传回的数据在客户端做渲染,不用每次都请求服务端模版,所以客户端模版引擎的使用开始变得频繁。

优点:

  • 需要用户交互的地方不用频繁对服务器发请求,节省交互时间。
  • 使前后端分离,后端专心做业务逻辑,而前端专心做用户交互。
  • 客户端可以对模版文件进行缓存,大大减小服务端负荷。

缺点:

  • 不利于SEO
  • 客户端需要做大量的渲染计算,影响首屏响应时间。

前后端模版引擎的结合

  • 将不需要频繁变化、要减少初始化加载的部分放在服务端
  • 将和用户交互相关、可能会频繁变化的部分放在客户端处理

*小tips:

SEO(Search Engine Optimization 搜索引擎优化):因为搜索引擎只识别HTML代码,对JS代码不识别。导致客户端模版引擎不利于SEO。

SEO收集文本的元素:

  • <title> 标记。

  • <meta name="description"> 标记。

  • <meta name="keywords"> 标记。

  • 标题标记(<h1> 至 <h6>)。
  • 超链接(<a> 标记)。

© 著作权归作者所有

王潭不是王雨潭
粉丝 8
博文 19
码字总数 19745
作品 0
杭州
私信 提问
基于 yaf 接口框架 - YafApi

YafApi YafApi是基于yaf写的一个专注于api接口开发的框架,当然了里面集成了smarty模版引擎,也可以用于模版输出。入口集成了Swoole简单的封装了客户端和服务端。基于medoo封装了Db_Tab数据操...

Perma
01/02
0
0
前后端分离的思考与实践(二)

原文出处:淘宝UED - Herman 基于前后端分离的模版探索 前言 在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作。 在传统的开发模式中,浏览器端与服务器端是由不...

淘宝UED - Herman
2014/04/18
0
0
Velocity模板引擎使用笔记

题记 在公司的项目中,前台界面的展现是使用Velocity模版来实现的。现在利用一些时间,把以前的使用经验记录一下,不是什么宝典秘籍,也不是什么高深理论,纯粹为一些使用经验记录,开发知识...

xiaozz
2012/11/20
0
0
【Node】搭建一个静态资源服务器

一个包括文件缓存、传输压缩、ejs 模版引擎、MIME 类型匹配等功能的 Node 静态资源服务器,使用 Node 的内置模块实现,可以通过链接访问资源。 一、创建 HTTP Server 服务器 Node 的 http 模...

Jenny_Tong
05/20
0
0
Play 2.0 用户指南 - 模版引擎 -- 针对Scala开发者

一个基于Scala的类型安全的模版引擎 Play2.0带来了一个全新的真正强大的基于Scala的模版引擎。该引擎的设计灵感源于ASP.NET Razor.特别是: 简洁,富有表达力,流畅:最小化语法字符和击键要...

大东哥
2012/03/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nproc systemd on CentOS 7

Increasing nproc for processes launched by systemd on CentOS 7 Ask Question I have successfully increased the nofile and nproc value for the local users, but I couldn't find a p......

MtrS
今天
3
0
了解微信小程序下拉刷新功能

小程序提供了这个事件。 onPullDownRefresh() 监听用户下拉刷新事件。 如果要开启下拉刷新功能,要先到json配置: "enablePullDownRefresh":true 配置后下拉有反应了但是没有加载效果,在onP...

oixxan__
今天
2
0
springmvc java对象转json,上传下载(未完)拦截器Interceptor以及源码解析(未完待续)

package com.atguigu.my.controller;import java.util.Collection;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contr......

architect刘源源
今天
29
0
[日更-2019.5.24、25、26] Android系统中的Binder通信机制分析(一)--servicemanager

声明 其实对于Android系统Binder通信的机制早就有分析的想法,记得去年6、7月份Mr.Deng离职期间约定一起对其进行研究的,但因为我个人问题没能实施这个计划,留下些许遗憾... 最近,刚好在做...

Captain_小馬佩德罗
昨天
24
0
聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部