猿问

关于html页面中各种文件的加载问题着重是script加载问题

在一个页面中加载各种文件


<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文件是什么时候加载的，不是很清楚？


不负相思意
浏览 533回答 1
1回答

幕布斯7119047

解答这个问题需要了解浏览器引擎渲染页面是顺序执行的，也就是从上到下执行代码，如果css、js文件放在head中，就会等待这些文件执行完毕才往下执行。由于js是单线程，如果文件过大，或代码质量不高就会发生堵塞，导致下面的代码无法执行，也就是出现白屏现象。为了避免此类情况的出现，一般推荐把css样式代码放置于上方，把js控制代码放置于最后面执行。而且需要知道的是html展现结构，css展现样式，js实现控制，先把结构和样式优先渲染出来也能很好地提升用户体验。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答