单页面

本节目标：理解“单页面”的核心思路，并能把它用于实际开发或面试表达。 ==单页面是近年来兴起的== Vue==、==React==、==Angular==等前端框架的一种开发模式。==Webpack ==会帮我们打包好要执行的脚本文件，通常就是一个== app.js ==文件，这个脚本文件需要挂在到一个== DOM ==节点上进行渲染== HTML==，也就是通过== JS ==去渲染== HTML==。== 整个过程： ==首先第一次进入页面的时候浏览器会从服务器请求一个== HTML ==文件，然后浏览器渲染== HTML ==文件，并执行内部== script ==标签引入的== app.js ==脚本文件，脚本内的代码通过挂载的== DOM ==节点进行视图渲染。== 单页面的优缺点

• 切换流畅

==上文也提到了单页面的页面是通过== JS ==去构造的，所以一旦加载完== app.js ==之后，加上== Vue-Router ==路由控制插件，==Vue ==就可以通过监听浏览器地址栏的变化去渲染与地址栏地址相对应的页面。如==

newbee.lt/home

==当浏览器切到这个地址的时候，代码会监听到== home ==路径，然后就会去匹配与== home ==相对应的页面组件，并进行渲染，整个过程不涉及到页面的重刷新，所以丝般柔滑就是这样而来的。==

• 能实现类原生 App 的流转动画

==在这里提前透露一下后面实战项目中，会通过路由实现类原生== App ==的流转动画。比如从首页到商品列表页面，会有一个首页往后撤出的动画效果。但如果是传统多页面开发的话，流转动画就不好实现了。因为它是刷新整个页面来进行跳页，一旦页面刷新，动画效果就没了。==

• 公共资源只需要加载一次

==一些工具函数，只需要在入口页加载一次，全局就能使用。而传统多页面在没有实现模块化的情况下，每个页面都是需要加载公共资源。在某种程度上减小了服务器的压力，消耗更少的带宽，能够与面向服务的架构更好地结合。==

• 开发体验

==不得不说，单页面开发极大的增加了前端工作人员的开发体验。工程化、模块化开发已经成了现代前端开发的标配。比起早年牵一发动全身的开发模式，现代的单页面框架已经极大的提升了敲代码的效率，包括这些开源框架周边的工具和样式库等，让开发项目的时候效率提升数倍。==

• 首屏加载时间慢

==当项目的需求越来越多，代码越来越庞大的时候，最终项目打出的静态资源脚本== app.js ==会非常大，有可能会达到几兆甚至十几兆的程度。所以很多时候首次加载一个几兆的文件，可能就会需要耗费几秒钟，甚至网速差的话会耗费十几秒的时间。这不是危言耸听，确实早些时候我们在项目中没有对== app.js ==进行处理的时候，它能大到十几兆，==PC ==端可能还没有太大的感受，但是移动端还是能很明显的感受到页面加载的缓慢。当然也是有解决办法的，组件异步加载，分割公用静态资源等等。==

• 不利于 SEO

==单页面的渲染就是通过片== JS ==脚本去渲染页面，浏览器加载到== app.js ==之后，将执行它并将== DOM ==节点加载到入口== HTML ==的根结点，随后进行页面渲染等一些列后续操作。但是浏览器搜索引擎爬虫只会去爬取你的入口== HTML ==页面，并不会帮你执行== app.js ==等内部脚本文件。所以导致浏览器爬虫不知道你的首页渲染了什么内容，从而你的搜索排名一落千丈。当然，目前有一些== SSR==、==Prerender==等技术去解决这个问题，甚至谷歌浏览器在未来的版本会支持== SEO ==执行页面内的脚本文件，所以单页面的这个缺点其实很好被解决和优化。就我个人而言，多数网站是不需要== SEO ==的，只要涉及到用户登录鉴权，基本上也就是首页、宣传页会被== SEO ==爬虫抓取，其他页面都需要登录权限，自然就会被== SEO ==爬虫忽略。==

• 兼容性问题

==通过脚本去渲染== HTML ==页面，其实对== JS ==的语法要求还是比较高的。这导致很多浏览器对== JS ==较新的语法，在支持上不是特别友好。本课程用到的== Vue ==不支持== IE8 ==及以下的版本，因为== Vue ==使用了== IE8 ==无法模拟== ECMAScript 5 ==特性。但它支持所有====兼容== ECMAScript 5 ==的浏览器====。== 总结 ==传统页面开发和单页面开发，各有优势。从项目的可扩展性和可维护性出发的话，我更倾向于单页面开发，因为随着时间的推移，单页面开发的缺点会被逐一解决，我相信浏览器的性能会越来越好，包括== CSS ==样式展示也会被统一。最关键的还是对开发比较友好，开发效率是一个很重要的衡量因素。== > 来自

 <https://juejin.im/book/6844733826191589390/section/6844733826271281166>