持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

SPA

是什么

SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。

我们熟知的JS框架如react,vue,angular,ember都属于SPA

区别

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

单页应用优缺点

优点：
1. 具有桌面应用的及时性，网站的可访问性和可移植性
2. 前后端分离，分工明确
3. 用户体验好、快，内容改变不需要重新全部刷新
缺点：
1. 不利于搜索引擎的抓取
2. 首次加载事件会很快

实现SPA

原理：

监听地址栏中hash变化驱动视图
通过方法pushstate记录浏览器历史，驱动视图变化

实现：

hash模式：监听url中hash来实现路由跳转

// 定义 Router  
class Router {  
    constructor () {  
        this.routes = {}; // 存放路由path及callback  
        this.currentUrl = '';  

        // 监听路由change调用相对应的路由回调  
        window.addEventListener('load', this.refresh, false);  
        window.addEventListener('hashchange', this.refresh, false);  
    }  

    route(path, callback){  
        this.routes[path] = callback;  
    }  

    push(path) {  
        this.routes[path] && this.routes[path]()  
    }  
}  

// 使用 router  
window.miniRouter = new Router();  
miniRouter.route('/', () => console.log('page1'))  
miniRouter.route('/page2', () => console.log('page2'))  

miniRouter.push('/') // page1  
miniRouter.push('/page2') // page2

history模式：核心借用 HTML5 history api，api 提供了丰富的 router 相关属性

history.pushState 浏览器历史纪录添加记录
history.replaceState修改浏览器历史纪录中当前纪录
history.popState 当 history 发生变化时触发

// 定义 Router  
class Router {  
    constructor () {  
        this.routes = {};  
        this.listerPopState()  
    }  

    init(path) {  
        history.replaceState({path: path}, null, path);  
        this.routes[path] && this.routes[path]();  
    }  

    route(path, callback){  
        this.routes[path] = callback;  
    }  

    push(path) {  
        history.pushState({path: path}, null, path);  
        this.routes[path] && this.routes[path]();  
    }  

    listerPopState () {  
        window.addEventListener('popstate' , e => {  
            const path = e.state && e.state.path;  
            this.routers[path] && this.routers[path]()  
        })  
    }  
}  

// 使用 Router  

window.miniRouter = new Router();  
miniRouter.route('/', ()=> console.log('page1'))  
miniRouter.route('/page2', ()=> console.log('page2'))  

// 跳转  
miniRouter.push('/page2')  // page2

怎么做SEO

SSR服务端渲染

将组件或页面发送给服务器端生成html，在返回给浏览器端
静态化

目前主流的静态化主要有两种：（1）一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中（2）另外一种是通过WEB服务器的 URL Rewrite的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果
使用 Phantomjs针对爬虫处理

原理是通过Nginx配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

首屏优化

由于 SPA 的特性，他的首屏加载时间会相对更久，可能性有以下四点：

网络延迟
入口文件体积大
多次发送重复请求
加载脚本文件时渲染内容卡住

解决方法有以下几点：

优化入口文件大小

如使用路由懒加载。component: ()=>import('')
缩小图片体积

如把字体图标改为在线字体图标。
压缩图片请求

把小图片用精灵图保存，减少http请求
公共组件提取

请求多次的组件打包时提取到公共组件中，不用多次调用。
Gzip

需要后端配合
SSR

Vue - SPA

SPA

是什么

区别

单页应用优缺点

实现SPA

怎么做SEO

首屏优化