首屏加载空白的解决方案

llb_27

于 2023-07-23 10:54:14 发布

阅读量186

点赞数 1

文章标签： html5 javascript

本文链接：https://blog.csdn.net/llb_27/article/details/131877235

版权

介绍：因单页面应用的html是靠js生成的，首屏加载很大的js文件，当网速差的时候会产生一定程度的白屏。

解决方式：

1.优化webpack减少打包体积

2.服务端渲染

3.打包文件分包

4.首页加loading(仅是优化体验)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

llb_27

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端性能优化-白屏时间(白屏经历了什么&白屏优化方案&CSS性能优化&内联关键CSS)

LYFlied的博客

03-28

4765

从输入url，到页面的画面展示的过程一、白屏时间二、白屏时间的重要性三、白屏的过程四、白屏-性能优化 1. DNS解析优化 2. TCP网络链路优化 3. 服务端处理优化 4. 浏览器下载、解析、渲染页面优化内联关键CSS

【面试题】如何解决 Vue首屏加载过慢出现长时间白屏？_vue首页白屏优化面试题(1)

最新发布

2401_84447043的博客

04-27

505

gzip_disable “msie6”;gzip_vary on;gzip_proxied any;gzip_comp_level 6; #压缩级别:1-10，数字越大压缩的越好，时间也越长gzip_buffers 16 8k;gzip_http_version 1.1;gzip_min_length 256; #gzip压缩最小文件大小，超出进行压缩（自行调节）gzip_types text/plain text/css application/json application/x-javascript

参与评论您还未登录，请先登录后发表或查看评论

head 动态添加script标签

weixin_40597855的博客

05-01

1293

head 动态添加script标签 //字符串中有script标签需要替换掉 var datas="<script>!function(g,d,t,e,v,n,s){if(g.gdt)return;v=g.gdt=function(){v.tk?v.tk.apply(v,arguments):v.queue.push(arguments)};</script>" let script=document.createElement('script'); var scripts

webpack入门使用（一）

weixin_48463527的博客

12-28

560

什是webpack？ webpack是一款很火的打包工具，把依赖的文件生成一个图，打包成文件当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。webpack中文官网： webpackwebpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）...

umi 3.0模版

qq_38629292的博客

07-15

857

umi4.0版本已经发布的、，不知道3.0的版本你是否已经上手了。下面是umi3.0基础版的配置文件，大家可以根据基础版本自行调整使用。

JS的使用方式

Cupido

05-09

421

1.直接嵌入js <!DOCTYPE html> <html> <body> <script> alert("这是一个js的脚本") </script> </body> </html> 2.头部定义js <!DOCTYPE html> <html> <head> <script> function myFunction() { alert("hello js".

JS加载iFrame出现空白问题的解决办法

10-22

然而在老旧的浏览器，例如IE6中，开发者往往会遇到页面加载空白的问题。本文分享了针对在IE6环境下，通过JavaScript来加载iframe时遇到的空白问题的解决方案。通过合理的代码处理，可以确保即使在兼容性较差的浏览器...

Vue项目部署在Spring Boot出现页面空白问题的解决方案

12-02

在开发Vue应用并将其部署到Spring Boot环境中时，可能会遇到页面加载空白的问题。这通常是由于文件路径配置不正确，导致CSS、JavaScript等静态资源无法被正确加载。在本篇文章中，我们将深入探讨这个问题，并提供一...

vue项目出现页面空白的解决方案

12-13

在Vue项目中，遇到页面加载后显示空白的情况可能有多种原因。本文主要针对描述中提到的问题，即由于路由配置不当导致的页面空白进行详细的解答。首先，错误信息提示"path: '/’ 只能有1个整个项目只能有一个"，这...

script标签动态引入js，并且加载执行

热门推荐

jayson_hk的博客

01-10

1万+

先创建一个common.js文件在html文件中引入，设置好要动态引用的js路径 var url1 = "test1.js"; var url2 = "test2.js"; test1.js的内容为： alert(1111111) test2.js的内容为： alert(2222222) html head部分的引用如下： <script src="common.js">&lt...

动态给head添加script

09-03

动态给head添加script 动态给head添加script

浅谈script标签的defer和async

weixin_33989058的博客

08-31

199

1. 什么鬼今天在做一个小需的时候，忽然看到前辈一句吊炸天的代码 <script src="#link("xxxx/xx/home/home.js")" type="text/javascript" async defer></script> 卧槽，竟然同时有async和defer属性，心想着肯定是前辈老...

script在head和在body中的区别

qq_43654065的博客

01-19

3650

转载：原博文加载的顺序不一样，html是从上往下加载的。如果在网速慢的情况下把js代码放在body底部用户会先看到网页结构，等js加载完成后才出现特效。区别：在HTML body部分中的JavaScript会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。 1. JavaScript应放在哪里 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部

script 写在body和head中的区别

m0_51865787的博客

10-31

511

script 写在body和head中的区别区别简述：在HTML body部分中的JavaScripts会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被调用的时候才执行。 —————————————————————————— JavaScript应放在哪里 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 body 部分中的脚本: 当页面被加载时立即

Vue首屏加载白屏问题及解决方案

码小余の博客

08-12

8774

Vue首屏加载白屏问题及解决方案 首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程首先就是 html ,也就是 FP 阶段 FP（全称“First Paint”，翻译为“首次绘制”）是时间线上的第一个“时间点”，它代表浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次发生视觉变化的时间。注意：FP不包含默认背景绘制，但包含非默认的背景绘制。 <div id="app"></div> 页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来

webpack打包优化与首页白屏渲染问题【低性能移动端】解决方案

Park_Geun_hye的博客

06-04

2005

转眼间已经来到了2019年的6月份，我也已经实习半年多了，这半年尽管没有写过博客，但积累下来的经验还是不少的，日后慢慢补上今天来讲讲的是webpack的打包优化经验，优化的角度从路由组件懒加载和常用库CDN引入两大块入手，至于nginx的Gzip还没有尝试过，后续尝试过再做补充【因为暂时手头上负责的项目都是在pad端上做的单机版应用.......】 1. 路由组件懒加载这样在路由配置...

【设计】1359- Umi3 如何实现插件化架构

pingan8787

06-22

647

插件化架构插件化架构（Plug-in Architecture），也被称为微内核架构（Microkernel Architecture），是一种面向功能进行拆分的可扩展性架构，在如今的许多前端主流框架中都能看到它的身影。今天我们以 umi 框架为主，来看看插件化架构的实现思路，同时对比一下不同框架中插件化实现思路的异同。各个主流框架插件化异同二话不说先上结论。触发方式插件...

Zend Framework教程-Zend_Helpers-视图助手-常见的视图助手-Doctype、HeadLink、HeadMeta、HeadScript、HeadStyle、HeadTitle

梦想摆渡的专栏

04-23

3365

以下是官方提供的文档说明，并带有例子说明。已经很详细。这里不再详细解释。文档类型助手（Doctype Helper）有效的HTML和XHTML文档应当包括一个 DOCTYPE 声明。但是文档类型声明很难记忆，而且会影响到文档中的特定元素的解析（例如，在和元素中转义的CDATA）。 Doctype 助手允许指定下列类型之一： XHTML11 XHTML1_STR

全屏瀑布流特效实现及无限加载的jQuery解决方案

全屏自适应意味着网页内容和布局将占据整个屏幕，不留下不必要的空白或滚动条。自适应布局依赖CSS媒体查询、响应式设计策略以及适当的JavaScript处理来实现。知识点四：无限加载的机制无限加载是一种动态加载内容...