Skip to content

应用架构模式

  • 单页应用(SPA),整个项目只有一个HTML文件;通过JS感知URL的变化,动态地将当前页面内容清除,然后将下一个页面的内容挂载到当前页面上。这个时候的路由就不再由后端来做,而是前端控制,判断页面显示相应的组件;我们熟知的VueReactAngular都属于SPA
  • 多页应用(MPA),每个页面都是一个独立的主页面,当访问另外一个页面时,需要重新加载整个HTML文件

下面详细介绍SPA:

SPA

原理

  • 通过hashchangepopState监听URL变化驱动界面变化。
  • pushState记录浏览器的历史,驱动界面变化。

优点

  • 内容改变不需要重新加载整个页面,用户体验以及交互比较顺畅。
  • 提取组件开发,易于后期维护。
  • 减轻服务器压力。

缺点

  • 不利于搜索引擎优化SEO,搜索引擎爬虫只会抓取HTML,不抓取JS
  • 首次渲染速度相对较慢。

优化首屏渲染速度

  • 静态资源压缩与合并
    • 压缩CSS、JS、HTML等静态资源文件,减小文件大小。
    • 合并多个CSS或JS文件,减少HTTP请求数量。
  • 图片优化
    • 使用合适大小的图片,在保证图片质量的前提下尽可能压缩图片。
    • 选择更小体积的图片格式,如webp。
    • 图片懒加载,延迟非关键图片的加载。
  • 代码分割与按需加载
    • 使用 Vue Router 动态导入组件。
    • UI框架按需加载。
  • 缓存策略
    • 利用浏览器缓存,减少重复下载静态资源。
    • 使用CDN加速静态资源的加载速度。
    • 通过 DNS 缓存等机制来减少 DNS 的查询次数。
  • 服务器优化
    • 开启Gzip压缩,减少传输数据量。
    • 服务端渲染SSR。
  • 其他方面
    • 尽量把 JS 脚本放在页面底部或者使用 defer 或 async 属性,避免脚本的加载和执行阻塞页面的渲染。

Released under the MIT License.