位置: IT常识 - 正文
前端白屏出现的原因及一些解决方式(页面白屏可能原因前端)
发布时间：2024-01-10推荐整理分享前端白屏出现的原因及一些解决方式(页面白屏可能原因前端)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端白屏出现的图标,前端白屏的优化方案有哪些,网页打开白屏,前端怎么处理,前端 白屏,前端白屏的优化方案,前端白屏的优化方案,前端白屏出现的问题,前端白屏出现的问题,内容如对您有帮助，希望把文章链接给更多的朋友！
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 -Sconst 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）
所谓的骨架屏，就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现，降低了“白屏”的不良体验。
上一篇：微笑的树懒,哥斯达黎加 (© Lukas Kovarik/Shutterstock)(微笑的树懒哥斯达黎加)
