一、概念
SPA(single-page application):通过动态重写当前页面来与用户交互
代码通过单个页面的加载而检索,或者动态装载适当的资源并添加到页面
JS框架如 react, vue, angular, ember 都属于SPA
二、SPA和MPA的区别
MPA(MultiPage-page application):每个页面都是独立的( 都需要重新加载html、css、js文件,公共文件则根据需求按需加载 )
三、 优缺点
优点:
1)具有桌面应用的即时性、网站的可移植性和可访问性
2)用户体验好、快,内容的改变不需要重新加载整个页面
3)良好的前后端分离,分工更明确
缺点:
1)不利于搜索引擎的抓取
2)首次渲染速度相对较慢
四、实现
原理:1)监听地址栏中hash变化驱动界面变化
2)用pushstate记录浏览器的历史,驱动界面发送变化
hash 模式:监听url中的hash来进行路由跳转
history模式:history 模式核心借用 HTML5 history api
history.pushState
浏览器历史纪录添加记录history.replaceState
修改浏览器历史纪录中当前纪录history.popState
当 history 发生变化时触发
五、给SPA做SEO
SSR服务端渲染将组件或页面通过服务器生成html,再返回给浏览器,如nuxt.js
静态化
目前主流的静态化主要有两种:
(1)一种是通过程序将动态页面抓取并保存为静态页面,这样的页面的实际存在于服务器的硬盘中
(2)另外一种是通过WEB服务器的 URL Rewrite的方式,它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址,一句话来说就是把外部请求的静态地址转化为实际的动态页面地址,而静态页面实际是不存在的。
这两种方法都达到了实现URL静态化的效果使用Phantomjs针对爬虫处理
原理是通过Nginx配置,判断访问来源是否为爬虫,如果是则搜索引擎的爬虫请求会转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫。
六、首屏加载
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容
1️⃣ 加载慢的原因
1)网络延时
2)资源文件体积过大
3)资源重复发送请求
4)加载脚本的时候,渲染内容堵塞了
2️⃣ 解决方案
总的来讲可以分成两大部分 :资源加载优化 和 页面渲染优化
资源加载优化:
减小资源大小(压缩,gzip);减少http请求(缓存);提高响应速度(CDN);优化资源加载(按需加载,懒加载)
页面渲染优化:
优化html代码(减少dom,js外链底部,css外链顶部);优化js,css代码(减少重绘,降低选择器复杂性);优化动画效果(用transform/opacity)
1)减小入口文件体积
路由懒加载,把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由
在vue-router配置路由的时候,采用动态加载路由的形式
routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')]
以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件
2)静态资源本地缓存
利用localStorage
3)UI框架按需加载
import {Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';Vue.use(Button)Vue.use(Input)Vue.use(Pagination)
4)图片资源的压缩
对页面上使用到的icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http请求压力。
5)组件重复打包
在webpack的config文件中,修改CommonsChunkPlugin的配置
minChunks: 3 //表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件
6)开启GZip压缩
用gzip做一下压缩 安装compression-webpack-plugin
7)使用SSR
SSR(Server side ),也就是服务端渲染,组件或页面通过服务器生成html字符串,再发送到浏览器
从头搭建一个服务端渲染是很复杂的,vue应用建议使用Nuxt.js
实现服务端渲染