饥人谷技术博客

js和css在网页中的放置顺序是怎样的

2019-08-28  本文已影响0人  饥人谷张雪莲

css是放在head里面；

js是放在body里面，接近body的底部标签；

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link href="index.css"  rel="stylesheet">
<style>
             h1 {
                     background-color: red;
             }
</style>
<body>
             <h1>标题</h1>
<script src="index.js"></script>
<script>
      alert(1);
</script>
</body>
</html>

这样放置的原因是什么

1.首先浏览器加载页面是按从上到下的顺序加载，加载js并执行的时候，会阻塞其他资源的加载。这是因为js可能会有dom、样式的操作，所以浏览器要先加载这段js并操作，再加载放在它后面的html、css。因此，加入一段巨大的js放在最上面，浏览器首先要加载并执行，在这段时间里面，页面是空白的。和相比加载了部分html和css,但没有js的交互功能，后者对浏览者体验显然更好。
2.为了避免chrome白屏和firefox的无样式内容闪烁；
3.js会阻塞后面内容的呈现以及阻塞其后组件的下载，写js的作用是为了操作页面的元素（节点），若把script 放在css 的前面，则此时页面还无内容，也就无法操作，则可能会报错；对于图片和css,在加载时会并发加载（如一个域名下同事加载两个文件）但在加载javascript 时，会禁用并发，并且阻止其他内容的下载，如果把javascript放在顶部，则可能会有白屏现象的发生。
上一篇下一篇

猜你喜欢

热点阅读