[{"data":1,"prerenderedAt":177},["ShallowReactive",2],{"page-\u002Fvue\u002Fspa单页应用的优缺点":3},{"id":4,"title":5,"body":6,"description":169,"extension":170,"meta":171,"navigation":172,"path":173,"seo":174,"stem":175,"__hash__":176},"content\u002FVue\u002FSPA单页应用的优缺点.md","SPA单页应用的优缺点",{"type":7,"value":8,"toc":162},"minimark",[9,13,62,66,94,97,140,143,153,156],[10,11,5],"h1",{"id":12},"spa单页应用的优缺点",[14,15,16,20,21,24,25,27,28,30,31,34,35,34,38,41,42,45,46,48,49,51,52,55,56,58,59,61],"p",{},[17,18,19],"code",{},"Single Page Web Application","是一种特殊的",[17,22,23],{},"Web","应用，其所有的活动局限于一个",[17,26,23],{},"页面中，仅在该",[17,29,23],{},"页面初始化时加载相应的",[17,32,33],{},"HTML","、",[17,36,37],{},"JavaScript",[17,39,40],{},"CSS","文件，一旦页面加载完成，",[17,43,44],{},"SPA","不会进行页面的重新加载或跳转，而是利用",[17,47,37],{},"动态的变换",[17,50,33],{},"，默认",[17,53,54],{},"Hash","模式是采用锚点实现路由以及元素组件的显示与隐藏实现交互，简单来说",[17,57,44],{},"应用只有一个页面，通常多页面应用会有多个页面不断跳转，而单页面应用始终在一个页面中，默认",[17,60,54],{},"模式是通过锚点实现路由以及控制组件的显示与隐藏来实现类似于页面跳转的交互。",[63,64,65],"h2",{"id":65},"优点",[67,68,69,73,88,91],"ul",{},[70,71,72],"li",{},"良好的交互体验，页面首次加载完成后内容的改变不需要重新加载整个页面，具有更快的响应速度，具有桌面应用的即时性、网站的可移植性和可访问性。",[70,74,75,76,79,80,83,84,87],{},"良好的前后端工作分离模式，单页应用可以和",[17,77,78],{},"RESTful","架构一起使用，通过",[17,81,82],{},"RESTAPI","提供接口数据，有助于分离客户端和服务器端工作与",[17,85,86],{},"API","通用化。",[70,89,90],{},"减轻服务端压力，服务端不需要处理页面模板的逻辑与拼接，除首次加载页面外只需要提供数据信息即可，把计算尽量放在客户端，单页应用能提高单位服务器的负载量。",[70,92,93],{},"可维护性高，通常采用组件化与模块化开发，代码复用程度高，相对来说可维护性高。",[63,95,96],{"id":96},"缺点",[67,98,99,127],{},[70,100,101,102,105,106,109,110,112,113,116,117,119,120,123,124,126],{},"不利于",[17,103,104],{},"SEO","，由于是采用前端渲染的方式，搜索引擎不会去解析",[17,107,108],{},"Js","从而只能够抓取首页未渲染的模板，如果需要单页面应用有更好的",[17,111,104],{},"，那么通常需要使用",[17,114,115],{},"SSR","服务端渲染，搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，但是由于是服务端进行渲染，那么会对服务器造成一定压力，",[17,118,115],{},"服务端渲染属",[17,121,122],{},"CPU","密集型，当然如果只是需要",[17,125,104],{},"少数几个页面，可以采用预渲染的方式。",[70,128,129,130,132,133,34,135,34,137,139],{},"首次加载速度慢，",[17,131,44],{},"单页应用通常首次加载页面时就会将相应的",[17,134,33],{},[17,136,37],{},[17,138,40],{},"文件全部加载，通常可以通过采取缓存措施以及懒加载即按需加载组件的方式来优化。",[63,141,142],{"id":142},"每日一题",[144,145,150],"pre",{"className":146,"code":148,"language":149},[147],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[17,151,148],{"__ignoreMap":152},"",[63,154,155],{"id":155},"参考",[144,157,160],{"className":158,"code":159,"language":149},[147],"https:\u002F\u002Fwww.jianshu.com\u002Fp\u002F9258583ef4ab\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6844903512107663368\nhttps:\u002F\u002Fblog.csdn.net\u002Fhuangpb123\u002Farticle\u002Fdetails\u002F86183453\n",[17,161,159],{"__ignoreMap":152},{"title":152,"searchDepth":163,"depth":163,"links":164},2,[165,166,167,168],{"id":65,"depth":163,"text":65},{"id":96,"depth":163,"text":96},{"id":142,"depth":163,"text":142},{"id":155,"depth":163,"text":155},"Single Page Web Application是一种特殊的Web应用，其所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS文件，一旦页面加载完成，SPA不会进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML，默认Hash模式是采用锚点实现路由以及元素组件的显示与隐藏实现交互，简单来说SPA应用只有一个页面，通常多页面应用会有多个页面不断跳转，而单页面应用始终在一个页面中，默认Hash模式是通过锚点实现路由以及控制组件的显示与隐藏来实现类似于页面跳转的交互。","md",{},true,"\u002Fvue\u002Fspa单页应用的优缺点",{"title":5,"description":169},"Vue\u002FSPA单页应用的优缺点","ShI28vGgzVQbPLmWaWMDR3K2O1jUgUTqp17t_X-qtQM",1791042467960]