单页应用

单页应用模式和多页应用模式

最近学习VUE,了解到 “Vue.js 提供了一个官方命令行工具,可用于快速搭建大型单页应用”  之前做过项目,改过项目,基本都是小部分单页,大部分多页的模式,也没有在这方面进行细致的学习,这次通过学习VUE进行了细致的区分与学习

部分来源于:

https://www.zhihu.com/question/20792064

http://www.php.cn/js-tutorial-401276.html

https://blog.csdn.net/u013291076/article/details/53667382

《单页Web应用:JavaScript从前端到后端》点击下载pdf  如404  请联系博主私发

 

目录

单页应用模式与多页应用模式的对比图

单页应用的定义?

单页应用的优缺点

单页应用给传统网站带来的好处?

单页应用的特点

单页应用给传统网站带来的缺点

关于单页Web应用的现状和未来发展


 

单页应用模式与多页应用模式的对比

webx5

单页模式打开方式:justep.shell.showpage();

多页模式打开方式:window.loacation.href = require.tourl();

单页应用的定义?

单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。

单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。

单页应用的优缺点

单页应用给传统网站带来的好处?

相对于传统网站,我们认为单页应用的主要好处是:

  • 它提供了更加吸引人的用户体验。单页应用可以做到一举两得:

单页应用和多页应用理解

多页面

多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用。

在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写。

页面跳转=》返回HTML,优点:首屏时间快,SEO效果好,缺点是页面切换慢。

首屏时间快?访问页面,服务器只需要返回一个HTML文件,这个过程就经历了一个HTTP请求,请求响应回来,页面就能被展示出来。

SEO(搜索引擎排名)效果好?搜索引擎能识别HTML的内容,根据内容进行排名。

页面切换慢:每一次切换页面都需要发起一个HTTP请求,假设网络较慢就会出现卡顿情况。

单页面

单页应用:用vue写的项目是单页应用,刷新页面会请求一个HTML文件,切换页面的时候,并不会发起新的请求一个HTML文件,只是页面内容发生了变化

vue.js原理:JS感知URL变化,当URL发生变化后,使用JS动态把当前的页面内容清除掉,再把下一个页面的内容挂载到页面上。此时的路由就不是后端来做了,而是前端来做,判断页面到底显示哪一个组件,再把以前的组件清除掉使用新的组件。就不会每一次跳转都请求HTML文件。

页面跳转 =》 JS渲染,优点页面切换快,缺点首屏时间稍慢,SEO差

页面跳转不需要去做HTML文件的请求,节约HTTP请求发送的时延。

SEO差?搜索引擎只认识HTML内容不认识JS内容。单页应用的渲染都是靠JavaScript渲染出来的。搜索引擎不好识别排名。