script标签相对于html的位置是否会影响页面加载

最新推荐文章于 2023-12-21 12:50:06 发布

做咩呀？搬砖！

最新推荐文章于 2023-12-21 12:50:06 发布

阅读量588

点赞数 3

文章标签： css javascript js html

本文链接：https://blog.csdn.net/lxs_bzdmn/article/details/118726376

版权

正常情况下，是不影响最终加载的结果的。但无论在哪个位置，script的存在都会影响首屏加载的速度。

1.浏览器的渲染

浏览器在解析时，一般页面会解析三部分内容，即我们常见的html，css以及js。

2.渲染机制

在js高级程序设计里面明确的提到了一段话：解释器在<script>元素内部的所有代码求值完毕以前，页面中其余的内容都不会被浏览器加载或显示。这就意味着什么？在你的dom因为css或者js改变dom中的某些样式时，你在浏览器不会看到页面不断变化的情况。所以，无论是你的script标签放在哪里，理论而言，并不影响页面的最终呈现效果。

3.script本身的一些问题

1) <script>正如上面所说，元素内部的所有代码求值完毕以前，页面中其余的内容都不会被浏览器加载或显示。当将这个标签放在html中间时，会导致在没有加载完毕时引起html的代码解析的阻塞，如下情况：

 
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="first" onclick="wd">我是第一个box</div>
<script type="text/javascript">
function wd(){
    console.log(1111)
}
</script>
<div class="second" onclick="wd">我是第二个box</div>
</body>
<style>
  div{
    width: 100px;
    height: 100px;
    color: yellow;
    background-color: purple;
    margin: 20px 0px;
  }
</style>
 
 
</html>

在这个过程中，第二个div是在script被解析完成以后才继续被解析的。

所以如果为了让html的代码解析完毕以后，再去解析script中的，这里就可以加上script六个属性中的defer属性，这样就可以使得浏览器异步加载js，使得html可以不被阻断解析进程。

2)如上面的代码段，当script标签中再嵌套一个script标签，那么里面的script标签中的代码将会被忽略。