单页面和多页面的区别、SEO相关

图片来自：https://juejin.cn/post/6844903512107663368

单页面：

指一个外壳和多个内容片段组成。例如vue，是由多个组件组成。（常用于PC端官网、购物等网站）多页面：指多个完整页面构成。（多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于app 或 客户端等）。

优点：

• 用户体验好，快，改变内容的时候不需要重新加载整个页面，spa（single page application单页应用程序）对服务器压力较小（服务器只用出数据就可以，不用展示逻辑和页面合成，吞吐能力会提高几倍）。
• 前后端分离，服务器只用出数据就可以，不用展示逻辑和页面合成，吞吐能力会提高几倍。
• 页面效果可以处理的更炫酷（如切换页面的转场动画）。

缺点：

• 不利于SEO。
• 不能使用游览器中的前进后退功能，所以需要自己建立堆栈管理。
• 初次加载耗时多。
• 页面复杂度提高很多。

多页面

每一次页面跳转的时候，后台服务器会返回一个新的html文档。

优点：

• 首屏时间块。（当访问页面的时候，服务器返回一个html，页面就会显示出来。整个过程只经历了一个http请求，所以页面的展示速度相对于单页面的加载全部快）。
• 搜索引擎优化（SEO）效果好。（搜索引擎在页面排名的时候，要根据页面的内容才能给网页权重进行网页排名。搜索引擎是可以识别html内容的，而多页面每个页面的内容都放在HTML中，所以SEO的效果会更好）。

缺点：

• 页面切换慢。（每次切换都要重新加载新页面的内容。发送一个http请求，如果网络比较慢，在网页中来回的跳转就会发现明显的卡顿）。

SEO

前端需要注意那些SEO？
1、合理的title、description、keywords（搜索时对这三个的权重组件减小）。

• title - 强调重点即可，重点关键词不要出现两次，而且要靠前，不同的页面title不同。
• description - 高度概括页面的内容，长度合适，不同页面description不同。
• keywords - 列举出关键字即可。

2、语义化的HTML标签让搜索引擎更容易理解页面。
3、重要的HTML内容代码放前面。搜索引擎抓取的顺序是从上到下。
4、重要的内容不要用js输出，爬虫爬不到（爬虫不会执行js获取的内容）。
5、少用iframe（搜索引擎抓取不到插件里面的内容）。
6、需要抓取到的图片加上alt（方便搜索引擎抓取）。
7、提高网站速度：网站速度是搜索引擎排序的重要指标。