为什么会出现首页白屏？

最新推荐文章于 2025-03-15 17:03:35 发布

这个东西不好和你解释，因为我是菜狗

最新推荐文章于 2025-03-15 17:03:35 发布

阅读量1.8k

点赞数 1

分类专栏： # VUE框架

本文链接：https://blog.csdn.net/weixin_43912756/article/details/108354495

版权

VUE框架专栏收录该内容

21 篇文章

订阅专栏

参考：首页白屏优化实践
 首页白屏的引发的思考(一)

Vue React Angular这三大框架都是JS驱动，单页面的应用的html是靠js生成，首屏需要加载很大的js文件，在JS没有解析加载完成之前页面无法展示，会处于长时间的白屏。

以Vue来说，在应用启动时，Vue会对组件中的data和computed中状态值通过Object.defineProperty方法转换成get和set访问属性，以便对数据变化进行监听。而这一过程都是在启动应用时完成的，这也势必导致页面启动阶段比非 JS 驱动（比如 jQuery 应用）的页面要慢一些。

2020.9.24更
针对移动端，输入url出现白屏有哪些原因？

1、webview是什么？

WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页

2、出现首页白屏的原因

参考：网页白屏具体原因分析

浏览器兼容：
- vue代码在谷歌中正常使用，但是在ie中显示白屏
- 原因：是因为js文件没有加载，需要引入babel-polyfill这个东西，而用vue脚手架搭建的项目是没有引入此工具的
- 解决方案：（1）npm i babel-polyfill （2）在APP.vue 文件中引入，语句为 import “babel-polyfill”
js封装问题：js如果有问题，页面就不会显示
URL网址无效或含有中文字符（入门级错误）
缓存导致的白屏：参考：vue构建项目入口文件index.html缓存引发的白屏问题
- vue项目打包后，在非首次线上替换dist文件时，某些手机/浏览器在之后首次打开页面，可能出现白屏情况
- 原因：在用户端会默认缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此会出现找不到css/js的情况，导致白屏的产生。在服务端更新包之后，由于旧的文件被删除，而index.html所链接的路径依然是旧文件路径，因此会找不到文件，从而白屏。解决方案一般是强制刷新页面或者清除缓存重新加载。
- (1) 直接在网站后台清除缓存，(2) 在后台无法清理的情况下，我们可以直接删除缓存文件。连接FTP，找到home/cache文件夹，然后进入里面删除cachedata.php
- FTP（File Transfer Protocol，文件传输协议）是 TCP/IP 协议组中的协议之一。FTP协议包括两个组成部分，其一为FTP服务器，其二为FTP客户端。其中FTP服务器用来存储文件，用户可以使用FTP客户端通过FTP协议访问位于FTP服务器上的资源。