Vue——SPA展示性能优化方案

于 2022-06-18 22:05:28 发布
阅读量143 收藏 1
点赞数 1
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zkh129/article/details/125352248
版权

一、资源加载优化

1、减少请求次数

  • 使用强缓存（expires/cache-control）
  • localStorage
  • 使用精灵图
  • 小图使用base64编码

2、加快请求速度

  • 协商缓存（Etag/Last-modified）
  • HTTP2.0（主动推流，多路复用，二进制帧，头信息压缩）
  • CDN

3、降低资源大小

  • 代码压缩打包
  • Gzip

4、加载时机优化

  • 路由懒加载
  • 组件库按需加载

二、页面渲染优化

1、html优化

  • JS和外链放在底部
  • CSS和外链放在顶部

2、JS优化

  • 使用web worker
  • 少操作DOM元素

3、CSS优化

  • 少用性能昂贵的属性
  • 减少重绘和回流的次数
ムラサキ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SPA（单页应用）首屏加载速度慢怎么解决？
高山景行，一尘不染
03-22 741
一、什么是首屏加载 首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中最重要的环节 关于计算首屏时间 利用performance.timing提供的数据： 通过DOMContentLoad或者performance来计算出首屏时间 //方案一： document.addEventListener('DOMContentLoaded.
极致 Web 性能 —— SPA 性能指南
weixin_44526331的博客
03-19 380
前言 前端框架时代，为开发体验、效率与页面性能带来，非常大的革命。大家纷纷拿起一系列打包工具(webpack/parcel etc.)，配合一系列加载器快速搭建起一个 SPA 页面。 SPA 应用带来的好处非常明显； 提升页面切换体验 降低切换时间 易于部署&前后端分离 但是也带来一系列性能问题： 初始加载脚本较大 首屏空白时间较长 页面返回时，数据被动重新拉取 这些问题是使用 ...
前后端分离与性能优化
03-25
本课程从前后端的定义讲起，以实战的方式介绍前后端分离的演变过程，并结合完整的页面示例，由浅入深地介绍前端代码，特别是 Vue 代码在开发过程中的性能优化方式和方法，同时，结合淘宝首面和详细页的实现，介绍中间件定义和合适的方案。
【性能优化】SPA管理
congjiu2607的博客
10-16 212
Spa的主要作用： 主要测试由于系统环境变更包括操作系统变更，数据库升级等对sql性能的影响。尽量减少由于系统环境的变更对业务的影响程度。 SPA管理 ——导入tunning ...
基于Vue的SPA如何优化页面加载速度
weixin_30437481的博客
06-08 554
常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积，常用的手段是路由懒加载，开启路由懒加载之后，待请求的页面会单独打包js文件，使得入口文件index.js变小，开启懒加载之后，js是这样请求加载的： 2. 静态文件本地缓存有两种方式 HTTP缓...
vue项目性能优化方案
最新发布
11-07
vue项目性能优化方案
加速vue组件渲染之性能优化
10-15
主要介绍了加速vue组件渲染之性能优化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue.js 无限滚动列表性能优化方案
12-13
尤其是在页面包含大量元素和复杂布局的情况下，性能会受到影响。那对用户有什么实际的影响呢？ 一个常见的场景是大数据量的列表渲染。通常表现为可无限滚动的无序列表或者表格，当数据很多时，页面会出现明显的滚动...
浅谈Vue 初始化性能优化
12-10
在最近开发的一个Hybrid APP里，Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms，这让我开始重视vue的初始化性能，并最终优化到200 ~ 300ms，这篇文章分享我的优化思路。 性能瓶颈在哪里？ 先看...
Vue SPA项目优化小记
weixin_34319999的博客
06-01 371
概述 之前做了一个React项目和Vue的项目，在做完后不加任何优化的情况下，这2个项目的首屏加载平均时间居然达到了20+s，好一点能进10s，差一点快30s，完全不能忍，优化势在必行，本文章记录下Vue项目的优化过程，React项目的优化后续补上。 上图是Vue项目的首页，整个项目由vue-cli搭建，主要分为4个模块，见页面左侧导航栏，总体代码量不...
Vue的SPA 如何优化加载速度
LuckXinXin的博客
09-25 265
减少入口文件体积 静态资源本地缓存 开启Gzip压缩 使用SSR,nuxt.js
vue应用性能优化 分离css 第三方包 压缩代码 按需加载
八佾舞于庭
11-14 1449
1. 服务端渲染 问题:1.单页面应用不利于SEO,因为所有HTML文档都是由js动态生成的。2.首次加载速度过慢。 2. 分离css 1. 安装插件 npm install [email protected] --save-dev 2. 修改css-loader配置 loader: ExtractTextPlugin....
SPA页面性能优化
weixin_30872337的博客
02-09 451
1. 快速启动 —— 极大提升加载速度（important） 快速启动应用，并行发起 Bundle 加载&拉取初始数据。相信大家已经发现了，SPA 初始化时候，不得不等待 bundle 返回并执行后，才会发起数据加载。 由于在移动设备上（即便有缓存）bundle 加载极为耗时，我们可以充分利用这段时间将数据进行预加载。这项特性，使得后面的优化起到更加明显的效果。 如下示例代码： ...
【性能优化】单页面应用（SPA）
AC_greener的博客
08-18 771
1，传统的web应用（多页面应用） 传统多页面是由后端控制一个 url 对应一个 html 文件，页面之间的跳转需要根据后端给出的 url 跳转到新的 html 上，几乎每一个响应动作都会刷新整个页面。 由多个完整页面构成 页面之间的跳转需要重新加载资源，这样就不能很好的重用公共文件 页面切换加载缓慢，流畅度不够，用户体验比较差 2，单页面应用（SinglePage Web Applic...
进一步优化SPA的首屏打开速度（模块化与懒加载） by 嗡
嗡汤圆的博客
04-01 8677
前言单页应用的好处在于一次载入所有页面资源，利用本地计算能力渲染页面，提高页面切换速度与用户体验。但缺点在于所有页面资源将被一次性下载完，此时封装出来的静态资源包体积较大，使得第一次打开SPA页面时候需要的载入时间较长。在上一篇文章Angular2 单页应用一些优化总结 中提到的利用压缩、混淆、开启gzip传输后，我们成功将3.5兆的资源包压缩到350k。但是如果SPA应用的页面数进一步增加，100
ReactJS修炼之路（四）：组件的性能优化及开发思路
沉淀
08-06 2561
少年，加油昨天周五，那个喊我“少年”的朋友离职了去新加坡了，我的实习生涯又错过了一位大神，不过短短一个月还是被影响不少，例如入坑happy hacking keybord同时学习各类软件的快捷键，例如开始用sass，例如初次使用 flexbox…人生何处不相逢，谢谢你的指导，我会更加努力，也祝你更进一步，加油。回看，事情总有千丝万缕的联系，但是往前，都是迷雾，保持迷茫，保持思考，做好现在，是我最大
框架技术 ---- SPA和Vue的组件化开发
a23452的博客
03-12 2101
Vue框架 内容管理单页面应用程序SPAVite基本使用项目目录结构vite项目的运行流程组件化开发思想vue组件构成template结点script结点style结点组件的基本使用组件的注册全局注册：局部注册组件注册的名称通过name属性注册名称组件样式冲突组件样式冲突原因组件样式冲突的解决style结点的scoped属性/deep/样式穿透【vue3为:deep(选择器)】组件的props组件中声明props无法使用未声明的props动态绑定props的值props的大小和命名Class与Style绑定
关于前端spa项目seo优化改造方案(预渲染，ssr，nuxt比较）
cpa0701的博客
04-27 1796
目前的的前端项目为基于vuecli3搭建的spa项目，由于需求提出需要对首页，部分内容页面做seo优化，涉及到前端项目的框架和不分页面的改造。 经过调研后，目前有以下几种解决方案提供： 一、预渲染 二、ssr服务端渲染 三、更换nuxt框架 修改思路 区别 公共组件的处理（构建自己的包管理仓库，打成npm包进行引用） 公共依赖的处理（webpack打lib包） ...
Vue项目的前端性能优化
04-01
2. 图片懒加载：在需要时才加载图片，可以使用Vue-lazyload等插件实现。 ...10. 使用Vue Devtools进行性能优化：通过Vue Devtools工具，查看组件加载时间、渲染时间、响应时间等，找到性能瓶颈。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值