单入口页面和模版引擎有什么区别?

发布于 2022-09-02 20:12:57 字数 124 浏览 12 评论 0

用Java开发写前端页面,传统方式如JSP,模版引擎如Freemarker,Velocity,Thymeleaf,单入口(配合Angular.js,Vue.js等前端框架),只有一个index.html,所有的功能都在这个页面中完成。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

唐婉 2022-09-09 20:12:57

单页应用讲究前端渲染,很可能服务器端返回的是一个近乎空的html,类似:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div id="view"></div>
        <script src="http://www.cdn.com/yyy/adsfsafsa234q234.bundle.js" charset="utf-8"></script>
    </body>
</html>

客户端(浏览器)下载这段html可以瞬间完成,然后剩下的事就交给前端的这个adsfsafsa234q234.bundle.js脚本来动态的添加DOM元素,添加样式。。。。。

这里要注意的是,前端渲染照样需要模板引擎,如果你看AngularJS的话,他的数据是这样被绑定的:

<span>{{ pageTitle }}</span>
<ul>
    <li ng-repeat="user in users">
        {{ user.name }}
    </li>
</ul>

而你谈到的诸如:FreemarkerVelocityThymeleaf之类的模板引擎是在后端接收到请求之后,组合数据直接渲染html成字符串,然后返回给前端的方式。

所以二者侧重点不同

猫卆 2022-09-09 20:12:57

@leftstick 回答的真是太棒了。。

根据我工作中的经验,我总结几点。

单页应用的好处:

  1. 只有一个页面,降低了复杂性;

  2. 完全前后端分离,数据交互通过ajax进行;

  3. 部署方便,只要部署css/html/javascript就行;

  4. 把渲染放到了客户端,可以降低服务器的压力;

  5. 后端的工作量会减小。

坏处么?还没有遇到。。欢迎 @leftstick 补充

哦。坏处是前端的工作量会加大。。哈哈。。

但是要有大局意识啊。前后端整体看来,工作量应该还是减小的。


想到了一个老生常谈的坏处:

不利于SEO

但是这种单页应用一般都是做的后台管理,所以根本不需要SEO,如果能被搜索到,我想大部分人都会禁止掉爬虫来爬你的后台的。。

当然,如果是互联网型的单页应用,可能就需要SEO了。貌似也有相应的解决方案。没深究过。

傲影 2022-09-09 20:12:57

服务器端渲染和客户端渲染的区别。
服务器端渲染是在服务器端生成整个页面发送到客户端,而客户端渲染,则只在第一次拉取整个页面,以后就是拉取数据本身,大大节约了网络开销。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文