用户打开你的页面,一片空白,什么都不显示,原因可能是什么呢?
在用户端会默认缓存 index.html 入口文件,而由于构建工具(比如Webpack,rollup等)在每次代码更新后,打包生成的css/js文件名都带有哈希值,跟上次的文件名都不同,因此会出现找不到 css/js 文件的情况,导致白屏的产生。常用框架,比如 Vue React Angular 都是依靠JS进行驱动的,在渲染页面的时候需要加载很大的JS文件,在JS解析加载完成之前无法展示页面,从
·
排除网络和URL地址等用户端原因外,应用本身的问题可能有:
● 前端JS代码问题
常用框架,比如 Vue React Angular 都是依靠JS进行驱动的,在渲染页面的时候需要加载很大的JS文件,在JS解析加载完成之前无法展示页面,从而导致了白屏。
● 用户端浏览器兼容问题
比如 Vue 在 IE 低版本浏览器中,再比如在低版本浏览器里运行了ES6以上的原生ES代码等等。
● 接口请求慢
第一个打开的页面,如果请求一个缓慢的后端接口,引发JS阻塞,导致页面白屏。
● 缓存问题
在用户端会默认缓存 index.html 入口文件,而由于构建工具(比如Webpack,rollup等)在每次代码更新后,打包生成的css/js文件名都带有哈希值,跟上次的文件名都不同,因此会出现找不到 css/js 文件的情况,导致白屏的产生。
更多推荐
已为社区贡献1条内容
所有评论(0)