关于前端:单页面应用-Single-Page

5次阅读

共计 778 个字符,预计需要花费 2 分钟才能阅读完成。

单页面利用 Single Page

原文链接:https://note.noxussj.top/?source=sifo

什么是单页面利用?

也就是指咱们的零碎只加载一次页面,剩下的页面切换交给路由去解决。页面中的数据替换则是交给 JavaScript 和 Ajax 解决。这些操作解决中页面是不会进行刷新的。

在传统的模式中,如果是传统的前后端不拆散,你每次批改页面中的数据基本上都要从新申请服务器资源,而后刷新整个页面进行从新渲染。在起初就是传统模式的前后端拆散,能够通过 Ajax 获取数据,通过 JavaScript 给指定 DOM 进行替换内容。然而这种形式的页面切换时,也是会刷新整个页面的,而且个别都是通过 a 标签进行页面跳转,或者是 JavaScript 的 location.href 属性进行页面跳转。

刷新整个页面,使得页面所有元素进行从新渲染,这个是很耗费计算机性能开销的。路由的工作原理,基本上就是在一个页面内进行模块切换,把上一个模块在 DOM 移除,把新的模块在 DOM 中新增,就很相似 Vue 中的 v-if 指令。往后面的趋势基本上都是单页面利用了。


长处

  • 良好的交互体验,切换页面时是看不到页面刷新成果的,平时的刷新页面都会空白几秒,用户体验很差
  • 优良的架构,前后端拆散,前端负责界面的展现,后端负责数据的存储和计算
  • 资源加载的次数少,性能有很好的晋升,基本上都是按需加载 / 替换内容

毛病

  • 不利于 SEO 优化,因为整个页面在 Vue 实例化之前只有一个 <div id=”app”></div> 标签。基本上就是一个空白的页面
  • 单页面利用不能应用浏览器的后退后退,因为它原本就没有切换页面。页面切换须要建设本人的堆栈治理
  • 单页首次加载耗时会比拟长,也就是会白屏一会,因为要把资源都加载进来。然而加载结束之后的性能会大幅晋升

原文链接:https://note.noxussj.top/?source=sifo

正文完
 0