应用架构模式
- 单页应用(SPA),整个项目只有一个
HTML文件
;通过JS
感知URL
的变化,动态地将当前页面内容清除,然后将下一个页面的内容挂载到当前页面上。这个时候的路由就不再由后端来做,而是前端控制,判断页面显示相应的组件;我们熟知的Vue
、React
、Angular
都属于SPA
。 - 多页应用(MPA),每个页面都是一个独立的主页面,当访问另外一个页面时,需要重新加载整个
HTML文件
。
下面详细介绍SPA:
SPA
原理
- 通过
hashchange
或popState
监听URL变化
驱动界面变化。 - 用
pushState
记录浏览器的历史,驱动界面变化。
优点
- 内容改变不需要重新加载整个页面,用户体验以及交互比较顺畅。
- 提取组件开发,易于后期维护。
- 减轻服务器压力。
缺点
- 不利于
搜索引擎优化SEO
,搜索引擎爬虫只会抓取HTML
,不抓取JS
。 - 首次渲染速度相对较慢。
优化首屏渲染速度
- 静态资源压缩与合并
- 压缩CSS、JS、HTML等静态资源文件,减小文件大小。
- 合并多个CSS或JS文件,减少HTTP请求数量。
- 图片优化
- 使用合适大小的图片,在保证图片质量的前提下尽可能压缩图片。
- 选择更小体积的图片格式,如webp。
- 图片懒加载,延迟非关键图片的加载。
- 代码分割与按需加载
- 使用 Vue Router 动态导入组件。
- UI框架按需加载。
- 缓存策略
- 利用浏览器缓存,减少重复下载静态资源。
- 使用CDN加速静态资源的加载速度。
- 通过 DNS 缓存等机制来减少 DNS 的查询次数。
- 服务器优化
- 开启Gzip压缩,减少传输数据量。
- 服务端渲染SSR。
- 其他方面
- 尽量把 JS 脚本放在页面底部或者使用 defer 或 async 属性,避免脚本的加载和执行阻塞页面的渲染。