（04）Vue 实战准备——④ 单页应用 🆚 多页应用 | Vue.js 项目实战： 移动端“旅游网站”开发

itsOli
1,027 阅读9分钟 
转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。


涉及面试题：
单页面应用和多页面应用区别及优缺点？

编号：[vue_04]

1 多页应用

❓什么是多页应用？

1️⃣随便打开一个网页（如“去哪儿网”）进入检查，切换至 iPhone6/7/8 设备显示的模式： travel04-01.png

2️⃣点开控制台里的 Network ，选择 Doc ，然后刷新页面。可以看到，当刷新网页重新访问首页的时候，会请求一个首页的 HTML 文件出来 touch/ ：travel04-02.png

3️⃣点击右上角的城市“深圳”访问一下城市列表页，返回了一个城市列表的 HTML toNewCityList.htm ： travel04-03.png

4️⃣从城市列表页返回首页，又会重新请求一个首页的 HTML 的文件： travel04-04.png

5️⃣再进入一个“世界之窗”的页面试试，请求到了一个 detail.htm 的文件： travel04-05.png

🏆在这个网页中，我们每一次页面跳转的时候，后台服务器都会返回一个新的 HTML 文件。这种类型的网站，就把它称之为“多页网站”，或者叫做“多页应用”。

❓多页应用有什么优缺点？
当我们使用一个多页面应用时，每次页面跳转，后端都会返回一个新的 HTML 文件。

这也就带来了它的几个优点：

  1. 首屏时间快（“首屏时间”即页面首个屏幕的内容展现出来的时间）；
  2. 搜索引擎优化（SEO，Search Engine Optimization）效果好。
  • ❓为什么首屏时间快？

答：当访问一个页面时，服务器给我们返回一个 HTML 文件，然后页面就会被展示出来。这个过程只经历了一次 HTTP 请求，所以页面展示的速度会很快。当请求回来了，页面也就展示出来了。

  • ❓为什么它的 SEO 效果好？

答：因为搜素引擎在做网页排名的时候，它需要知道网页的内容，根据网页的内容它才能给网页权重，来进行排名。并且非谷歌浏览器搜索引擎（如“百度”）的爬虫只认识 HTML 中的文本内容，不认识 JS 中的文本内容。而多页应用中，我们每个页面所有的内容都放在 HTML 中，所以多页应用的搜索引擎排名效果非常的好。

任何事情都是双面的，多页应用也有一个缺点：页面之间的切换有时会比较慢。

因为每一次跳转页面时，都需要发一个 HTTP 请求。当网络慢的时候，我们需要在页面之间来回跳转时，就会发现有明显的卡顿情况出现。

我们先在正常网速下切换页面，再把网速调为低速查看对比效果：

travel_04-06.gif

可以看到，正常网速下切换流畅，而当切换为低网速后，从“世界之窗”页面跳转到首页，再从首页跳转进“世界之窗”页面，页面加载完成的时间比网速正常时慢了很多。

2 单页应用

❓什么是单页应用？

在终端中进入到 qdywxs-travel 文件夹下，运行 npm run dev 命令来启动服务器，访问 http://localhost:8080 。 travel04-07.png

此时访问的是 Home 首页，而在我们的项目中还有一个 List 列表页，需要手动输入 list 进行访问。

❓如何可以不修改 URL，而是通过在首页点击某个链接跳转至列表页？
答：可以在首页增加链接。

提到链接，我们很容易就能想到 <a> 标签，但在 Vue 中，一般使用 <router-link> 标签来进行页面跳转。

打开 Home.vue ，对其代码进行一些调整：

<template>

  <div> <!-- 5️⃣在两个元素外层包裹一个 div，使 template 下只包含一个根元素。 -->
    
    <!-- 3️⃣给首页的元素添加 home 类名，增加一些样式； -->
    <div class="home">Home</div> <!-- 3️⃣-①：添加 home 类名； -->

    <router-link to="/list" class="home">List</router-link> <!-- 1️⃣添加 List 的
                                                     			router-link 标签；
                                                     	 		2️⃣属性 to 表示跳转的目标路由；
                                                     	 		3️⃣-②：添加 home 类名； -->
  </div>

</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
.home { /* 4️⃣.home 的字体设为 2em； */
  font-size: 2em;
}
</style>

travel_04-08.gif

🏆以上，我们使用 Vue 写的这个项目，它就是一个单页应用。

❓如何理解单页应用？
打开检查，还是点到 Network 下的 Doc。

刷新页面后，先清除一下 Doc 下的内容，再重新点开列表页：

travel_04-09.gif

可以看到，当刷新页面第一次进入页面时，请求到了一个 HTML 文件。把它清除后进入列表页，我们并没有再去请求一个 HTML 文件。当再次返回首页，依然不会请求 HTML 文件。

❓为什么不请求 HTML 文件，但是页面却依然会变呢？
答：因为 JS 会感知到 URL 的变化。 通过 JS 感知到 URL 的变化之后，我们可以用 JS 动态的把当前页面的内容清除掉，再把下一个页面的内容挂载到页面上。

所以，这时的路由不是由后端来处理，而是由我们前端来做的。我们判断页面到底是显示哪一个组件，然后把前一个组件先清除掉再去显示新的组件。单页应用这种处理过程之中，就不会每次跳转都需要请求 HTML 文件了。

❓单页应用有什么优缺点？
当我们使用单页应用进行页面跳转时，页面上每次跳转并不用去加载一个 HTML 文件，而是通过 JS 动态的把当前页面的内容清除掉，再去把新的页面内容的 DOM 结构渲染出来。

  • 单页应用这种做法的优点是：页面切换快。当页面之间进行跳转时，不需要去请求 HTML 文件，这就节约了很多 HTTP 请求发送时延。

  • 单页应用的缺点是：

    • 首屏时间相比多页应用会稍微慢点；
    • 搜索引擎优化（SEO）效果比较差。

❓什么导致单页应用首屏时间相比多页应用会慢点？
答：在后面随着项目的深入，我们会发现单页应用首屏展示出来需要请求一次 HTML，同时还需要发一个 JS 的请求。当两个请求都回来后，首屏才会展示出来。

❓为什么 SEO 效果较差？
答：因为非谷歌浏览器搜索引擎（如“百度”）的爬虫只认识 HTML 中的文本内容，不认识 JS 中的文本内容。而单页应用中，所有页面内容都是依赖 JS 渲染生成的。所以非谷歌浏览器搜索引擎的爬虫就不识别这块的内容，就不会给网页一个好的排名。这样就会导致单页应用做出来的网页在“百度”这样的搜索引擎之中，排名效果会比较差。

❓既然单页应用也有一些缺点，我们为什么要使用 Vue 开发后续的 qdywxs-travel 这样的单页应用呢？
答：因为 Vue 中还提供了一些其他的技术，比如服务器端渲染等。通过这些技术，我们可以完美的解决单页应用之中的问题。而解决了这些问题后，单页应用实际上对我们前端来说是一个非常完美的页面开发解决方案。

❓【拓展】什么是“服务器端渲染”，什么是“客户端渲染”？
答： ① 服务端渲染（SSR）：页面上的内容是由服务器上的代码决定的。

即，页面上的内容在服务器上已经生成好了，服务器把这个内容给到浏览器，浏览器拿到这个内容直接显示在页面上即可。

② 客户端渲染（CSR）：一个网页是由 JS 文件渲染出来的，而不是服务器直接返回回来的——我们传统的 React 和 Vue 单页应用都是“客户端渲染（CSR）”。

SSR.png

❓【拓展】当前主流“服务器渲染（SSR）”框架有哪些？
答：

  • NEXT.js——对应 React.js 应用；
  • Nuxt.js——对应 Vue.js 应用。

在实际项目工作中，若真的有需要，我们仅需照着 NEXT.js 或 Nuxt.js 的文档，创建目录结构，使用对应的 API，就可以相对轻松地构建一个“服务端渲染（SSR）”的项目。

❗️❗️❗️其实还是比较复杂，一旦用了“服务端渲染”，虽然解决了“首屏展示”和“SEO”的问题，但缺点也暴露出来了： ① 使用 SSR 后，整个项目架构会变得复杂——由于会在前端和后端之间引入一个 Node 中间层，维护时，就需要一个好的前端工程师 + 一个好的 Node 工程师 + 一个好的后端工程师。

② 使用 SSR 后，我们的 JS 代码不仅需要在客户端执行一次，还需要在服务器端（Node 端）执行一次——“同构”。这就意味着，服务器端（Node 端）需要进行大量的计算，这种计算是非常损耗性能的。很多时候，就需要在 Node 中间层增加很多台服务器，这就大大增加了费用成本以及维护负担。

③ 使用 SSR 后，调错上也增加了很多难度。以往前后端进行联调或测试的时候，或线上出现 BUG 的时候，不是前端就是后端出的错；现在不一样了，多了一个 Node 中间层，定位错误的成本又增加一层。

❗️❗️❗️因此： ① 如果你所做的项目并不特别在意那 300ms 左右的首屏展示快慢（SSR 首屏展示要比 CSR 平均快 300ms 以上），且 SEO 需求不大的话，完全可以不用去管“服务端渲染”，直接用 React.js、Vue.js 或原生 JS 完成你的项目即可。并且，随着 5G 商用的普及，网速得到了进一步提高，这个首屏展示时间差异基本可以忽略。

② 但，若你不在意首屏展示快慢，却对 SEO 需求很大的话，除了直接在“百度”买广告排名，你依然可以不用进行“服务端渲染”！用什么呢？一个很好且简单的方式就是“预渲染”。

一句话概括“预渲染”干的事情：这个工具会先去访问你的网页（React.js、Vue.js 等框架做的单页面应用），然后将网页渲染出来的内容全部自己拿过来，重新生成一个新的、有文本内容的 HTML，最后返回给搜索引擎的爬虫。

“预渲染”这个知识点，大家后续有需要可以自行去拓展，GitHub 上也有高 star 的“预渲染”工具——prerender，照着文档使用即可。

若对 prerender 很感兴趣，推荐仔细研读以下网站，其对 prerender 有详细的介绍：

https://prerender.io

祝好，qdywxs ♥ you！

avatar
文章
阅读
粉丝