在一个页面中加载各种文件<head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="1.css" /> <link rel="stylesheet" href="2.css" /></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script src="1.js"></script> <script src="2.js"></script></body>如上所示，css文件跟body中的dom是不是同时进行加载，亦或还有script中的文件也是进行同时加载，看了很多关于页面渲染的文章，但还是没搞懂到底是怎么加载的。看到的最多的就是解析js文件的时候其他文件会被阻塞，但是js文件是什么时候加载的，不是很清楚？
1 回答
幕布斯7119047
TA贡献1794条经验 获得超8个赞
解答这个问题需要了解浏览器引擎渲染页面是顺序执行的，也就是从上到下执行代码，如果css、js文件放在head中，就会等待这些文件执行完毕才往下执行。由于js是单线程，如果文件过大，或代码质量不高就会发生堵塞，导致下面的代码无法执行，也就是出现白屏现象。
为了避免此类情况的出现，一般推荐把css样式代码放置于上方，把js控制代码放置于最后面执行。而且需要知道的是html展现结构，css展现样式，js实现控制，先把结构和样式优先渲染出来也能很好地提升用户体验。
添加回答
举报
0/150
提交
取消