优化vue 首屏加载过慢，减少白屏时间

最新推荐文章于 2025-04-30 11:31:18 发布
原创 最新推荐文章于 2025-04-30 11:31:18 发布 · 972 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
16 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了一系列提高网页性能的方法，包括减少HTTP请求损耗、延迟加载、压缩请求内容、优化浏览器渲染路径，以及使用加载进度条等策略，旨在提升用户体验。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

1. 加速或减少HTTP请求损耗
使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等；
2. 延迟加载
非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
2. 减少请求内容的体积
开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等；
3. 浏览器渲染原理
优化关键渲染路径，尽可能减少阻塞渲染的JS、CSS；
4. 浏览器渲染原理
白屏使用加载进度条、菊花图、骨架屏代替等；

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看
标签
#vue
vue白屏优化（defer）
2303_76218115的博客
03-13 2487
说到VUE项目优化，老生常谈的一个话题，就是首页白屏问题，当然造成白屏的原因有很多，我们要根据不同的情况灵活的进行处理，在这呢我单单指出其中一种使用场景，以及其中一种优化手段，这种优化手段比较冷门，相信很多同学都不一定知道，但是超级好用！！！这种经典的优化方案，只是vue优化里的冰山一角，希望大家一起学习，共同进步。
Vue首屏加载白屏问题及解决方案
码小余の博客
08-12 9153
Vue首屏加载白屏问题及解决方案 首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程 首先就是 html ,也就是 FP 阶段 FP（全称“First Paint”，翻译为“首次绘制”） 是时间线上的第一个“时间点”，它代表浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次发生视觉变化的时间。 注意：FP不包含默认背景绘制，但包含非默认的背景绘制。 <div id="app"></div> 页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来
【vue 首屏加载优化】
前端-CV全粘工程师
10-04 650
使用 Vue SSR（服务端渲染）：SSR 可以将 Vue 组件在服务端直接渲染为 HTML，然后再将渲染结果发送到客户端，这样可以大大缩短首屏加载时间。Vue 首屏加载优化指的是通过一系列的技术手段，尽可能地缩短首屏（即页面中可见的部分）的加载时间，提高用户体验。配置 webpack 的代码分割：将代码按照不同的功能或页面进行分割，提高首屏加载速度。使用懒加载：将页面中的图片、视频等资源分割成多个部分，只有在用户需要访问的时候才加载。使用异步组件：将页面中的某些组件异步加载，可以降低首屏加载所需的时间。
vue-ssr(上)
qq_35828720的博客
01-15 315
vue-ssr解决什么问题？ spa全部靠的是js来渲染，默认首页显示内容是一个空的div标签，不利于SEO搜索引擎搜索 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的 spa应用会有首页白屏时间过长的问题，服务器渲染的好处是将访问好的数据拼接好给前端，首页白屏时间缩短 服务端渲染的缺点？ 需要占用服务器的CPU和内存，前端中的一些生命周期函数无法使用 vue-ssr使用 使用的包 vue vue-server-renderer koa koa-rou..
【Web性能优化】在Vue项目中使用defer优化白屏，秒加载！
qq_42582773的博客
07-14 1344
当浏览器遇到了带有async属性的script时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析HTML，一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器会暂停解析，会让JS引擎执行代码，执行完毕后再进行解析。相对而言，流芳千古的钱谦益先生，就有点儿区别了，除了家产外，也很能挣钱（怎么来的就别说了），经常出没红灯区，六十岁多了，还娶了柳如是，明朝亡时，说要跳河殉国，脚趾头都还没下去，就缩了回来，说水冷，不跳了，就投降了清朝。----《明朝那些事儿》很明显，执行JS脚本和渲染占据了大量时间。
使用defer优化页面白屏加载时间
weixin_49022197的博客
09-19 477
vue性能优化
Vue 项目中首页长时间白屏的原因及解决方法
weixin_48723799的博客
05-14 7333
在 Vue 项目中，首页长时间白屏的问题会影响用户体验和搜索引擎优化。本文介绍了首页长时间白屏的。
【VUE】解决图片视频加载缓慢/首屏加载白屏的问题
热门推荐
学无止境
07-13 4万+
在 Vue3 项目中，有时候会出现图片视频加载缓慢、首屏加载白屏的问题,文中会介绍几种解决方案，希望可以帮到你
vue 首屏加载过慢如何优化
HHX_01的博客
12-17 3226
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。对于纯静态页面，可以使用预渲染插件将页面提前渲染成 HTML 文件。开启 HTTP/2 协议，支持多路复用，加快资源加载速度。服务端渲染可以大幅加快首屏加载速度，解决首屏白屏问题。) 和业务代码分开打包，利用 CDN 加速加载。，只在需要时加载组件，减小首屏包体积。在首屏渲染前显示骨架屏，提升用户体验。：移动端适配时，使用低分辨率图片。：将路由对应的组件进行异步加载。：实现本地缓存，提高加载速度。只在图片进入视口时加载。
vue项目首屏加载优化
重楼的博客
10-15 6655
vue项目首屏加载优化1、存在的问题2、什么是首屏加载2.1 首屏加载时间的计算3、加载慢的原因4、解决的办法4.1 路由懒加载4.1.1 什么是路由懒加载？4.1.2 为什么需要懒加载呢？4.1.3 路由懒加载的原理4.1.4 如何实现路由懒加载？4.2 压缩图片4.3 gzip 压缩4.3.1 服务器压缩文件4.3.2 前端 webpack 打包生成 gz 文件4.4 Webpack打包体积优化4.4.1 splitChunks4.4.2 splitChunks优化5、时间轴回放 最近这几个月一直在开发
vue 项目首页加载速度优化以及解决首页白屏问题
郝峰vip的博客
12-14 1万+
Vue项目优化首页加载速度达到秒开以及解决首页白屏问题
在vue项目中使用骨架屏
感恩、奋进、自信
05-18 7235
现在的应用开发，基本上都是前后端分离的，前端主流框架有SPA、MPA等，那么解决页面渲染、白屏时间成为首要关注的点 webpack可以按需加载，减小首屏需要加载代码的体积； 使用CDN技术、静态代码等缓存技术，可以减小加载渲染的时长 问题：但是首页依然存在加载、渲染等待时长的问题。那么如何从视觉效果上减小首屏白屏的时间呢？ 骨架屏：举个例子：其实就是在模版文件中id=app容器下面写想要展示的效果，在new Vue(option)之后，该id下的内容就被替换了( 这时候，可能Vue编译生成的内容还没
【VUE】解决VU2项目图片视频加载缓慢/首屏加载白屏的问题
学无止境
07-17 7682
前端项目中，有时候会出现图片视频加载缓慢、首屏加载白屏的问题之前写了一篇在VU3项目中的解决方案，现在讲一下在 Vue2 项目中的解决方法，方法思路都差不多，在代码示例上会有一些小差别。
Uniapp 性能优化实战：减少首屏加载时间的 7 种有效方法
最新发布
前端开发探索之旅
04-30 2646
开发期：优先处理分包、懒加载、DOM 精简，从源头减少资源体积；构建期：开启压缩、配置 CDN，优化静态资源传输；运行期：利用缓存和预加载提升用户后续访问体验；服务端：配合接口优化，减少首屏依赖的网络请求耗时。通过以上方法，可显著缩短 UniApp 首屏加载时间，建议结合插件监控各阶段耗时，针对性优化瓶颈点。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
Vue首屏加载过慢出现白屏的六种优化方案
09-19 1万+
公司业务展示官网开发，构建版本后在测试环境下，发下首屏加载损耗高达几十秒（服务器在国外，所以也导致加载时间变长），于是采用了以下方法来达到提速目的。
浅谈自己知道的首屏加载时间的优化策略
踩坑小王子
03-10 1万+
最近我在使用vue全家桶开发一个移动端的页面，经过一个半月项目接近完工，处于优化的阶段。 用过前端框架的都知道，spa(单页面应用)的一个最大的缺点就是首屏的加载时间比较长。 缩小首屏载时间是一个重要的优化项，总结来主要有以下几种方式： 1、尽可能的缩小webpack或者其他打包工具生成的包的大小 2、使用服务端渲染的方式 3、使用预渲染的方式 4、使用gzip减小网络传输的流量大小 ...
Vue首屏加载过慢出现长时间白屏
qq_27824793的博客
11-25 2007
前言：本人第一次尝试写博客，如文章讲述不对的地方还望大家指出，多多包含，不胜感激！！ 需求场景：公司业务展示官网开发，构建版本后在外网测试环境下，发下首屏加载损耗高达几十秒（服务器在国外，所以也导致加载时间变长），于是采用了以下方法来达到提速目的。 问题攻克解决步骤如下： 1. 采用懒加载的方式（官网有所提及，这里就不做详细描述） 2. webpack开启gzip压缩文件传输模式： 　　- gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、
vue页面白屏的原因及优化
nick_zhang的博客
10-18 1万+
一、原因： 单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏 二、解决办法： （1）优化 webpack 减少模块打包体积，code-split 按需加载 （2）服务端渲染，在服务端事先拼装好首页所需的 html （3）首页加 loading 或 骨架屏 （仅仅是优化体验） （4）缓存一定要使用，但是请注意合理使用 （5）代码压缩，服务端压缩，浏览器端解压缩 三、HTTP压缩的过程 浏览器发送Http r
Vue首页加载白屏原因以及解决的10种方法
weixin_45389051的博客
10-20 3万+
首先说一下首页加载为什么会白屏? 先说下Spa单页面的加载过程 首先就是html,也就是FP阶段 <div id="app"></div> 页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来渲染在页面上了 然后是静态资源css，js，之后解析js，生成HTML,也就是FCP阶段，css,js资源加载下来了，首次的内容绘制，有一个大结构了 <div id="app"> <div class="header"></div> &lt
面试官：首屏加载速度慢怎么解决？
SCUhzs
12-19 6110
文章目录前言首屏加载时间的计算首屏的定义首屏加载过程计算首屏时间加载慢的原因面试中常涉及的解决方案减小入口文件体积懒加载减小文件大小静态资源本地缓存UI框架按需加载组件重复打包webpack3webpack4图片懒加载图片资源的压缩开启GZip压缩合理使用Web Worker使用SSR结语参考 前言 减少首屏渲染时间的方法有很多，总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化。 下面主要简答地介绍一下首屏时间和优化首屏加载的部分做法，面试的时候不用答得很全面，抓住其中最重要的几个点展开就很ok
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值