从网络方面检测
- 先确保网络连接顺畅
-
再检查
URL
地址是否错误 -
打开
控制台
查看是否有报错信息 -
查看
接口访问
是否有请求 -
查看
路由
是否有
path错误
，导致加载了不存在的页面
从js和css方面检测
排除了
网络问题
以后，如果还是白屏，那一般都是
css和js
加载造成的；
css和js
会造成
阻塞渲染
。比如不正确的引入
css和js
， 就会导致它们的加载速度过长，从而导致白屏现象。
正确的引入方式是：
-
在
<head>
标签中引入
css
：因为在加载
HTML
前不先渲染
css
的话，整个页面会乱掉； -
在
</body>
标签之前、
body
标签中
html
内容的
后面
，引入
js
：因为浏览器加载
script
标签时，处理内部代码的顺序都是
从上到下
依次执行的，如果在
html
内容前就引入
js
的话，那么就会导致，在所有的代码处理完毕之前，会阻塞其他资源的加载；会导致页面的其他内容都无法显示，因此如果不规范引入js的话，会对页面的其他内容带来影响。
补充说明：
script
标签里可以添加
async或defer
属性，如果
不添加
这个属性，浏览器就会
立即加载并执行
脚本；也就是在渲染
script
标签之前，不等后续的文档加载前执行；他们的区别在于：
-
async
：加载和渲染后续文档元素的过程将和
script.js
的加载与执行并行进步（异步） -
defer
: 加载后续文档元素的过程中和
script.js
的加载与执行并行进步（异步）。但是
script.js
的执行要在所有元素解析完成之后，
DOMContentLoaded
事件触发之前完成。
defer
和
async
在
网络读取（下载）
方面是一样的，都是
异步的
；区别在于脚本下载完成之后什么时候开始执行。
版权声明：本文为Shivy_原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。