单页应用 / 多页应用、客户端渲染 / 服务器渲染

2020-07-20 11:04:35 浏览数 (1)

序言


现在各种名词泛滥,写下这篇文章补补相关的基础知识吧,当然说的都是 web 应用相关。

单页应用 / 多页应用


单页应用:

1、单页应用并不是说用户最终看到的就只有一个页面,而是指在开发层面上只有一个 html 文件,至于用户看到的多个页面均是在这一个 html 文件中对应生成。

2、由于单页应用中“多页”的生成是在同一个 html 中部分渲染完成的,所以不需要浏览器重新下载、解析、渲染另外的 html 文件,响应速度更快,用户的体验更好,这应该是最大的优势。

3、由于单页应用中的“多页”是通过 js 生成的,而传统的爬虫是需要分析完整的 html 文件,所以不利于 SEO (搜索引擎优化),至于 SEO 就是为了让你输入某个关键词后能够更好更靠前的搜索到你的应用。

4、单页应用在首屏渲染的时候需要加载的东西过多,往往会导致首屏速度很慢。

多页应用:

1、与单页应用相反,多页应用指的是每个页面独立对应一个自己的 html 文件。

2、每个页面的跳转都需要重新下载、解析、渲染 html 文件,响应速度较慢。最大的劣势吧。

3、每个页面都是完整的 html ,便于 SEO 。

4、每个页面相互独立,可以分别升级维护,但涉及到不同页面之间的数据交互就比较麻烦。

小结:简单的展示型的应用,多页应用一般更适合,SEO 也有天然的优势。但对于用户交互要求更高的应用,往往使用单页应用,至于单页应用的 SEO 已经有了很多好的实践和解决方案,而首屏的问题也可以交给服务器渲染来解决。

客户端渲染 / 服务器渲染


服务器渲染:

1、服务器渲染,也叫后端渲染,就是指在后台生成 html 并在相应的地方插入好数据然后传递给前端(浏览器)。

2、后台输出的是完整的 html ,利于 SEO ,但也很死板。

3、服务器一般计算速度更快,但会占用了相应的服务器资源。

4、传递给前端的数据量更大,更加占用网络传输资源。

客户端渲染:

1、客户端渲染,也叫前端渲染,兴起于前后端分离,前端通过 API 接口从后台获取数据然后自行处理。

2、相比于服务器渲染更灵活,但也不便于 SEO 。

3、减轻了服务器的压力,网络传输数据量小,前端专注于用户界面和交互,后台专注于业务逻辑和数据持久化,分工更明确。

小结:服务器渲染其实是一种很古老的方式, PHP、jsp 这种玩意儿就是服务器渲染,重展示、弱交互、重 SEO 的业务场景更适合用服务器渲染,当然还有首屏渲染。前端渲染适合交互性更强的应用。

总结


单页应用、多页应用、服务器渲染、客户端渲染,这四者其实是紧密联系并且相互关联的,在如今移动互联网的时代下,更注重用户交互的单页应用和客户端渲染正在占据更多的份额,而服务器渲染也就配合干干 SEO 和首屏渲染的活儿了。除此之外还有同构渲染的方式也在快速的发展,至于同构渲染我研究的并不多,所以就不多说了。

0 人点赞