SPA是什么及原生js实现简易SPA单页面

SPA（single-page application）：

就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

SPA单页面与MPA（MultiPage-page application)对比：

	SPA	MPA
组成	一个主页面和多个页面片段	多个主页面
刷新方式	局部刷新	整页刷新
url模式	哈希模式	历史模式
SEO搜索引擎优化	难实现，可使用SSR方式改善	容易实现
数据传递	容易	通过url、cookie、localStorage等传递
页面切换	速度快，用户体验良好	切换加载资源，速度慢，用户体验差
维护成本	相对容易	相对复杂

优点：

• 具有桌面应用的即时性、网站的可移植性和可访问性
• 用户体验好、快，内容的改变不需要重新加载整个页面
• 良好的前后端分离，分工更明确

缺点：

• 不利于搜索引擎的抓取
• 首次渲染速度相对较慢

效果：

实现：

<ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#one">第一个</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#two">第二个</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#three">第三个</a>
        </li>
        <li id="content"></li>
    </ul>

    <script>
        window.addEventListener('hashchange',function(){
            let hash=document.location.hash,
                content=document.querySelector('#content')
            if(hash==='#one') {
                content.innerHTML='我是第一个'
            }
            else if(hash==='#two') {
                content.innerHTML='我是第二个'
            }
            else {
                content.innerHTML='我是第三个'
            }
        })
    </script>