怎么解决SPA首屏加载速度慢?

标签: spa 加载 速度 | 发表时间:2022-12-17 18:46 | 作者:爱划水de鲸鱼哥
出处:https://juejin.cn/frontend

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第 20 天, 点击查看活动详情

首屏加载

首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中 最重要的环节

关于计算首屏时间

利用 performance.timing提供的数据:

通过 DOMContentLoad或者 performance来计算出首屏时间

  // 方案一:
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});
// 方案二:
performance.getEntriesByName("first-contentful-paint")[0].startTime

// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例,结构如下:
{
  name: "first-contentful-paint",
  entryType: "paint",
  startTime: 507.80000002123415,
  duration: 0,
};

加载慢的原因

在页面渲染的过程,导致加载速度慢的因素可能如下:

  • 网络延时问题
  • 资源文件体积是否过大
  • 资源是否重复发送请求去加载了
  • 加载脚本的时候,渲染内容堵塞了

解决方案

常见的几种SPA首屏优化方式

  • 减小入口文件积
  • 静态资源本地缓存
  • UI框架按需加载
  • 图片资源的压缩
  • 组件重复打包
  • 开启GZip压缩
  • 使用SSR

减小入口文件体积

常用的手段是路由懒加载,把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加

vue-router配置路由的时候,采用动态加载路由的形式

  routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件

静态资源本地缓存

后端返回资源问题:

  • 采用 HTTP缓存,设置 Cache-ControlLast-ModifiedEtag等响应头
  • 采用 Service Worker离线缓存

前端合理利用 localStorage

UI框架按需加载

在日常使用 UI框架,例如 element-UI、或者 antd,我们经常性直接引用整个 UI

  import ElementUI from 'element-ui'
Vue.use(ElementUI)

但实际上我用到的组件只有按钮,分页,表格,输入与警告 所以我们要按需引用

  import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

组件重复打包

假设 A.js文件是一个常用的库,现在有多个路由使用了 A.js文件,这就造成了重复下载

解决方案:在 webpackconfig文件中,修改 CommonsChunkPlugin的配置

  minChunks: 3

minChunks为3表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件

图片资源的压缩

图片资源虽然不在编码过程中,但它却是对页面性能影响最大的因素

对于所有的图片资源,我们可以进行适当的压缩

对页面上使用到的 icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻 http请求压力。

开启GZip压缩

拆完包之后,我们再用 gzip做一下压缩 安装 compression-webpack-plugin

  cnmp i compression-webpack-plugin -D

vue.congig.js中引入并修改 webpack配置

  const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /.js$|.html$|.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

在服务器我们也要做相应的配置 如果发送请求的浏览器支持 gzip,就发送给它 gzip格式的文件 我的服务器是用 express框架搭建的 只要安装一下 compression就能使用

  const compression = require('compression')
app.use(compression())  // 在其他中间件使用之前调用

使用SSR

SSR(Server side ),也就是服务端渲染,组件或页面通过服务器生成html字符串,再发送到浏览器

从头搭建一个服务端渲染是很复杂的, vue应用建议使用 Nuxt.js实现服务端渲染

结语

本文到此结束,谢谢大家的观看!

如有问题,欢迎各位指正!

相关 [spa 加载 速度] 推荐:

怎么解决SPA首屏加载速度慢?

- - 掘金 前端
这是我参与「掘金日新计划 · 12 月更文挑战」的第 20 天, 点击查看活动详情. 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容. 首屏加载可以说是用户体验中 最重要的环节.

SQL Performance Analyzer SPA常用脚本汇总

- - CSDN博客数据库推荐文章
附件为 一个SPA报告  spa_buffergets_summary. SQL 性能分析器 SQL Performance Analyzer SPA. Oracle Database 11g 引入了 SQL 性能分析器;使用该工具可以准确地评估更改对组成工作量的 SQL 语句的影响. SQL 性能分析器可帮助预测潜在的更改对 SQL 查询工作量的性能影响.

宜家小浴室空间里打造SPA

- 国铸 - 每日鲜果精选
在小型浴室中腾出小块空间用作洗衣区,仍有空余地方可供休闲. 只需对开关设施进行创新,充分利用墙壁的储物功能,浴室再小也可以发挥很多作用. 例如,宜家在这个微型浴室中安装了所有洗衣功能,同时还腾出足够的休闲空间. 虽然不是真正的水疗间,但是在2.7平方米的空间内也差不多相当于水疗间了. 幸运的是,小型浴室内部十分温馨.

Chrome 17将大幅提升网页加载速度

- 韬光养晦 - cnBeta.COM
据国外媒体报道,Chrome 17已经作为Chromium nightly版通过Webkit渠道发布,这是Google今年发布的第九个修订版浏览器. 新版Chrome首次整合HTTP管线化(HTTP pipelining)技术. 用户可以通过chrome://flags进入设置界面,点击HTPP Pipelining选择框激活这项功能.

JavaScript表格组件加载速度测试

- - 博客 - 伯乐在线
网络技术一直在发展并提高,人们期望Web应用程序能提高桌面程序那样的性能和用户体验. 而数据表格又是企业级Web应用最为重要的部分,我们已经用了大量的数据(行数和列数)来测试流行的 JavaScript 表格的页面加载速度. 在我们的测试中,我们针对每种表格组件创建了一个示例,在页面中用不同的行数和列数初始化表格.

优化listview的加载速度getview写法

- - Web前端 - ITeye博客
在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候,会占据大量内存,影响性能,这时候就需要按需填充并重新使用view来减少对象的创建. 最快的方式是定义一个ViewHolder,将convetView的tag设置为ViewHolder,不为空时重新使用即可 static class ViewHolder { TextView text; ImageView icon; }.

网页加载速度 最多不能超过3秒!

- - 雷锋网
【编者按】本文由Cucumbertown联合创始人Cherian Thomas撰写,阐述了其对网页加载的看法. 在Cucumbertown我们运用各种方法来确保我们的页面加载时间保持在2秒内,最多不能超过3秒,我们真的非常看重这个. 如果响应超过3秒的话我们就会收到不少的警报. 几天之前,那时候Chris Zacharia还没写那篇说明页面权重重要性及 YouTube应对之策的文章.

10余种提升WordPress博客加载速度的方法

- - 软矿
我们都知道一个网站的加载速度直接影响到搜索引擎爬虫对网站页面的抓取,也直接影响到网站用户体验. 网站加载速度过慢会造成搜索引擎无法抓取到页面内容而丢弃对该网站的一些页面的收录,同时可以丢失部分用户. 在月光博客读到SEOtime一篇较好的文章,小编转载过来以借花敬佛,愿对一些正在建站或者即将要建站的朋友有所帮助.

页面加载速度优化的12个建议

- - Web前端 - ITeye博客
Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷. 那么该如何补救,提高网站页面的加载速度呢. 报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验.

iOS图片加载速度极限优化—FastImageCache解析

- - bang's blog
FastImageCache是Path团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动起来更顺畅,来看看它是怎么做的. iOS从磁盘加载一张图片,使用UIImageVIew显示在屏幕上,需要经过以下步骤:. 从内核缓冲区复制数据到用户空间. 生成UIImageView,把图像数据赋值给UIImageView.