前端白屏出现的原因及一些解决方式

前端导致白屏的原因：

JS问题
常用框架Vue React Angular都是依靠JS进行驱动，并且单页面的应用html也是依靠JS生成，在渲染页面的时候需要加载很大的JS文件( app.js 和vendor.js )，在JS解析加载完成之前无法展示页面，从而导致了白屏（当网速不佳的时候也会产生一定程度的白屏）。
浏览器兼容问题
vue代码在ie中显示白屏
URL 网址无效或者含有中文字符
缓存导致 参考
vue项目打包后，在非首次线上替换dist文件时，某些手机/浏览器在之后首次打开页面，可能出现白屏情况

原因：在用户端会默认缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此会出现找不到css/js的情况，导致白屏的产生。在服务端更新包之后，由于旧的文件被删除，而index.html所链接的路径依然是旧文件路径，因此会找不到文件，从而白屏。
页面报错

解决办法：

思路：减小打包后的体积（sourceMap关掉，CDN引入，路由懒加载，组件按需加载）

提高渲染速度；

优化用户体验；

CDN资源优化：

将依赖的第三方npm包全部改为通过CDN链接获取，在index.html里插入相应链接

<body><div id="app"></div><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script><script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script><script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script><script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>

在vue.config.js里配置externals属性

module.exports = {···externals: {'vue': 'Vue','vuex': 'Vuex','vue-router': 'VueRouter','axios':'axios','element-ui': 'ElementUI'}}

卸载相关依赖的npm包

npm uninstall xxx

使用gzip压缩

前端处理：

// npm i compression-webpack-plugin -S
const CompressionPlugin = require('compression-webpack-plugin');module.exports = {productionSourceMap: false,configureWebpack: config => {if (process.env.NODE_ENV === 'production') {return {plugins: [new CompressionPlugin({// 匹配规格test: /\.js$|\.html$|\.css$|\.png$/,// 文件超过多大进行压缩 单位Bytethreshold: 10240,// 是否删除源文件（建议不删除）deleteOriginalAssets: false})],}}},
}

还需要在 nginx开启gzip压缩, eg:

 gzip on;gzip_static on; //当存在.gzip格式的js文件时，优先使用静态文件gzip_min_length  10k; //开启gzip压缩的最小大小gzip_buffers     4 16k;gzip_http_version 1.1;gzip_comp_level 6;gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;gzip_vary on;gzip_proxied   expired no-cache no-store private auth;gzip_disable   "MSIE [1-6]\.";

**注意：**当nginx开启gzip压缩的时候，无论前端打包出来的文件是否压缩，网站加载到的js文件都是经过nginx实时压缩过的。

当gzip_static off的时候，前端上传的js压缩文件（gzip格式那些）并没有什么卵用。
当gzip_static on时，优先加载前端打包的gzip压缩文件，如果没有找到该文件，那么nginx将实时压缩之后传给浏览器。

SSR 服务端渲染

首页加loading或骨架屏（仅仅是在体验上优化）

elementU有骨架屏组件（Skeleton）

所谓的骨架屏，就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现，降低了“白屏”的不良体验。

前端白屏出现的原因及一些解决方式相关推荐

前端白屏问题_记一次白屏统计与修理
记一次白屏统计与修复博文原地址白屏来源上一版部门用的前端结构是python || lua渲染的html页面 + seajs + js模板 + less,但是这种情况发现对应不懂服务端渲染页面,或 ...
前端白屏问题_首页白屏优化实践
前言自从前端三大框架React.Vue.Angular面世以来,前端开发逐渐趋向规范化.统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范,但 ...
【学习笔记】网页出现白屏可能的原因与优化方法
问题描述页面白屏,具体情况如下页面白屏的主要原因是页面渲染被阻塞渲染阻塞的原因可能是因为CSS加载出现阻塞,然后又因为CSS在headb标签内,导致只有加载完CSS,才能显示内容,然而CSS出 ...
uniapp 云打包后IOS白屏，真机调试也是白屏，没有报错！解决办法
uniapp 云打包后IOS白屏,真机调试也是白屏,没有报错!解决办法! 原来用uniapp 写的小程序然后要翻成app 一开始还是很顺利的,因为安卓端测试没有什么大问题:但是IOS直接白屏,只能 ...
Eclipse 的常见报错、警告和原因分析、解决方式以及相关操作快捷键小结（持续更新）
文章目录前言一.常见的三种类型错误二.运行时错误总结前言 Eclipse 作为我们开发中最为常用的一款 IDE,功能齐全(虽然近几年被 IDEA 占尽了风头),但是最为基本的一些操作我们是要 ...
前端白屏问题_小程序白屏问题和内存解决方法
1 关于WKWebview白屏,网上罗列的常见原因大致有以下几种: 1.内存占用比较大时,WebContent Process 会 crash,从而出现白屏现象. 2.URL网址无效或者含有中文字符. ...
前端白屏问题_深入理解前端性能监控
在同样的网络环境下,有两个同样能满足你的需求的网站,一个唰的一下就加载出来了,另一个白屏转圈转了半天内容才出来,如果让你选择,你会用哪一个? 页面的性能问题是前端开发中一个重要环节,但一直以来我们没有 ...
前端白屏问题_H5白屏问题
前言前阵子弄了灰度环境,H5这边需要给灰度环境的接口加上Cookie,配置的期间遇到一些Cookie问题以及白屏在此记录下 1.H5请求接口带不上Cookie 解决方法:前端使用了 webpack ...
前端白屏问题_前端性能优化之白屏时间
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念.重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践. 一.概念白屏时间:即用户点击一个链接或打开浏览 ...

前端白屏出现的原因及一些解决方式

前端导致白屏的原因：

解决办法：

前端白屏出现的原因及一些解决方式相关推荐

最新文章

热门文章