关于单⻚应⽤⾸屏加载速度慢，出现⽩屏时间过⻓问题怎么处理

最新推荐文章于 2022-04-01 16:11:30 发布
最新推荐文章于 2022-04-01 16:11:30 发布
阅读量403 收藏
点赞数
分类专栏： 【BS学习】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42758288/article/details/104641437
版权
  • 将公⽤的JS库通过script标签在index.html进⾏外部引⼊，减少我们打包出来的js⽂件的⼤⼩，让浏览器并⾏下载资源⽂件，提⾼下载速度
  • 在配置路由的时候进⾏路由的懒加载，在调⽤到改路由时再加载次路由相对应的js⽂件
  • 加⼀个⾸屏loading图或⻣架屏，提⾼⽤户的体验
  • 尽可能使⽤CSS Sprites和字体图标库图⽚的懒加载等
詹姆斯东
关注
专栏目录
进一步优化SPA的首屏打开速度（模块化与懒加载） by 嗡
嗡汤圆的博客
04-01 8699
前言单页应用的好处在于一次载入所有页面资源，利用本地计算能力渲染页面，提高页面切换速度与用户体验。但缺点在于所有页面资源将被一次性下载完，此时封装出来的静态资源包体积较大，使得第一次打开SPA页面时候需要的载入时间较长。在上一篇文章Angular2 单页应用一些优化总结 中提到的利用压缩、混淆、开启gzip传输后，我们成功将3.5兆的资源包压缩到350k。但是如果SPA应用的页面数进一步增加，100
vue首屏加载过慢是为什么？怎么解决？
qq_38262409的博客
10-22 1万+
最近在重构一个使用Vue做的网站，这个网站不可避免地出现了首屏加载过慢的问题，那么为什么出现这个问题？怎么解决这个问题呢？这就是本篇博客要讨论的话题。 一、vue首屏加载过慢的原因 毋庸置疑的，网速慢肯定会导致首屏加载过慢，但是在这里我们不做讨论； vue项目作为一个单页面应用，如果不对路由进行处理，在加载首页的时候，就会将所有组件全部加载，并向服务器请求数据，这必将拖慢加载速度； 通...
什么是纯函数、如何优化SPA应⽤的⾸屏加载速度慢的问题
陈小陈的博客
03-09 135
前端面经 解释一下什么是纯函数 简单来说，⼀个函数的返回结果只依赖于它的参数，并且在执⾏过程⾥⾯没有副作⽤，我们 就把这个函数叫做纯函数。 两大特点 函数的返回结果只依赖于它的参数。 函数执⾏过程⾥⾯没有副作⽤。 如何优化SPA应用的首屏加载速度慢的问题？ 将公⽤的JS库通过script标签外部引⼊，减⼩app.bundel的⼤小，让浏览器并⾏下载资源⽂件，提高下载速度； 在配置路由时，⻚⾯和组件使⽤懒加载的⽅式引⼊，进⼀步缩小 app.bundel 的体积，在调⽤某个组件时再加载对应的js⽂件
关于Vue单页面应用的首屏加载优化
weixin_45791692的博客
04-01 9079
Vue单页面应用的首屏加载优化
单页面开发首屏加载慢，白屏如何解决
weixin_30273501的博客
08-01 1016
1、路由懒加载 　　①vue异步组件的方式　　　　component:resolve=>require(["../page/home/index.vue"],resolve) 　　②ES6的import方式---推荐　　　　component:()=>import("../page/home/index.vue") 2、骨屏架构加载 3、首屏采用服务端渲染 ...
Kubernetes Handbook-Kubernetes中⽂指南/云原⽣应 ⽤架构实践⼿册
最新发布
07-29
《Kubernetes Handbook》是针对Kubernetes这一开源容器编排系统的深度指南，专为理解、部署和管理云原生应用架构的实践者所设计。这本书详细介绍了如何利用Kubernetes实现高效、可扩展且高可用的分布式系统。...
商用密码应用安全性评估管理办法 《商⽤密码应⽤与安全性评估》第⼀章密码基础知识-⼩结
03-05
然而，密码应用也存在安全问题，如技术过时、误用或滥用，因此必须进行定期评估和更新，以适应不断变化的安全威胁。通过严格的密评，可以识别并解决这些问题，提升整体网络安全水平，保障国家和个人信息安全。
函数计算应⽤场景探讨及 FaaS 设计和实现.pdf
12-31
例如，它可以在数据处理、实时流分析、物联网(IoT)事件处理、Web应用后端、图像和视频处理、机器学习模型推理等领域发挥重要作用。通过将业务逻辑拆分成独立的、无状态的函数，开发者可以实现按需执行，从而节省成本...
ChatGPT从入门到精通-压缩版：ChatGPT 作为⼀种强⼤的⾃然语⾔处理模型，其应⽤前景⼴泛，可以应⽤于⾃然语⾔⽣成等
05-23
ChatGPT 作为⼀种强⼤的⾃然语⾔处理模型，已经成为⼈⼯智能领域的重要研究⽅向之⼀。在不断的发展和创新中，ChatGPT 已经具备了很强的⾃然语⾔处理能⼒，其可以实现⾃然语⾔的⽣成、理解和交互，为⼈类的⽣产和⽣活...
2018中国区块链应⽤生态发展报告(1)
04-11
2018中国区块链应⽤生态发展报告(1)2018中国区块链应⽤生态发展报告(1)2018中国区块链应⽤生态发展报告(1)2018中国区块链应⽤生态发展报告(1)2018中国区块链应⽤生态发展报告(1)
【前端性能优化】如何应对首屏加载白屏？
公众号：前端充电宝
08-05 4075
1. 骨架屏 1.1 绘制静态骨架屏 1.2 代码绘制骨架屏 1.3 自动化解决方案 2. 使用动态的Polyfill 3. 代码分割 4. 使用资源预加载
浏览器白屏原因思路分析
qq_45715615的博客
03-24 3873
首先，我们打开我们的浏览器，查看在访问网站时，我们的电脑网络连接是否正常，若无网络连接或网络连接异常，则无法正常上网，打开网页也很有可能显示白屏。 2.F12进入开发者模式，进行检查，是否是程序出现了错误，或者浏览器器哪一个接口出现了错误。查看设置中的哪个协议出现问题 3.如果都没有问题在检查服务端的出错情况。 ...
优化SPA首屏加载速度
MCY的博客
12-18 5832
Laravel+vue@^2.0 1、修改webpack配置 laravel环境根目录下 webpack.mix.js 原版 let mix = require('laravel-mix'); //const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; mix.js('resou...
面试官：SPA（单页应用）首屏加载速度慢怎么解决？
weixin_44475093的博客
12-04 1万+
一、什么是首屏加载首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前...
web前端遇到的坑（bug）！！！
I_am_ken的博客
03-11 6480
前言：看到这个标题，大家肯定有一定的幻想，我想大家都没想错，我今天就是要来说说我遇到的bug，还有解决的方法。 原生JS篇 1、微信屏蔽链接 问题：在微信打开下载链接或某些链接，无法直接通过微信页面直接打开？ 原因：微信内置浏览器屏蔽了链接，比如竞争对手某宝的链接，当然就不会有其他关于商业性的链接（除了自家的或者合作伙伴的某东的链接）。 解决方法：使用原生JS获取浏览器版本号及是否是微信打开...
浏览器加载、解析、渲染的过程
热门推荐
季诗筱的博客
07-24 4万+
浏览器的加载、解析、渲染过程； css和js代码的几个最佳实践； js阻塞
CSS基础知识总结之盒子模型详解
自知者明，知人者智
11-26 758
前言  day3主要讲述了  盒子模型、盒子边框及内外边距 1、 盒子模型   盒子，相当于装内容的一个容器，它由四部分组成，分别是内容， 边框（border）、内边距（padding）、和外边距(margin)组成  盒子里面的文字和图片等元素是 内容区域  盒子的厚度 我们成为 盒子的边框  盒子内容与边框的距离是内边距（类似单元格的 cellpadding)  盒子与盒子之间的距离是外...
SingleThreadExecutor和CachedThreadPool为什么不推荐使⽤，会出现哪些问题
06-09
SingleThreadExecutor适用于需要保证任务按顺序执行的场景，它只会创建一个线程来执行任务。CachedThreadPool则会创建可缓存的线程池，线程数量不固定，会根据任务的数量动态调整线程池的大小。这两种线程池都存在以下问题： 1. SingleThreadExecutor只有一个线程，如果该线程在执行任务时发生了异常，线程池会停止工作，后续任务将无法执行。 2. CachedThreadPool创建的线程都是非核心线程，如果任务数量非常大，会导致大量线程被创建，从而导致系统资源不足。 3. CachedThreadPool的线程存活时间为60秒，如果60秒内该线程没有执行新的任务，线程就会被回收，如果后续有新任务到来，需要重新创建线程，线程创建的过程会消耗一定的系统资源。 4. 如果任务执行时间过长，CachedThreadPool会创建过多的线程，这样会占用大量的系统资源，从而导致系统崩溃。 因此，如果应用程序需要执行大量的短期任务，建议使用FixedThreadPool线程池，它可以控制线程的数量，避免线程数过多导致系统崩溃。如果应用程序需要执行大量的长期任务，建议使用ScheduledThreadPool线程池，它可以控制线程的执行时间，避免线程执行时间过长导致系统资源不足。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值