当前位置: 首页 > 面试题库 >

为什么脚本位于body标签的末尾

班安平
2023-03-14
问题内容

我知道这个问题被问过很多次,但是我没有找到答案。那么,为什么建议在body标签的末尾添加脚本以更好地渲染呢?

从Udacity课程和CSSOM准备就绪后开始渲染。JS是HTML解析阻止程序,并且CSSOM准备好后,任何脚本都会启动。

因此,如果我们得到:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- content -->
        <script src="script.js"></script>
    </body>
</html>

CRP为:

CSSOM ready > JS execute > DOM ready > Rendering

如果脚本在头:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

CRP将相同:

CSSOM ready > JS execute > DOM ready > Rendering

这个问题仅与“同步”脚本有关(没有async / defer属性)。


问题答案:

从历史上看,脚本阻止了其他资源的更快下载。通过将它们放在底部,您的样式,内容和媒体可以更快地下载,从而可以 感觉到 性能有所提高。



 类似资料:
  • 本文向大家介绍style标签写在body前和body后的区别是什么?相关面试题,主要包含被问及style标签写在body前和body后的区别是什么?时的应答技巧和注意事项,需要的朋友参考一下 渲染机制的区别,在body前是已经把样式浏览一遍,到了对应标签直接,渲染样式。显示块。 在body后,是浏览器已经把标签浏览了,但基于没有样式,显示的不完全,再把body后的样式表,扫描后,在成为真正的样式。

  • 我有一个带有图像和文本的标签 我得到了一个直观的结果: 如何更改文本位置?我想在图像下面设置文本?

  • HTML: CSS: 我刚刚有链接去谷歌现在。

  • 问题内容: 我遇到了一个场景,为元素赋予属性可以轻松解决问题。然而,阅读后在元素W3Schools的和怪异模式,似乎这样做可能有一些无法预见的后果。 有没有人遇到诸如Chrome,Safari,FF3 up和IE 7 up之类的浏览器中的任何这些问题? 问题答案: 在目前所有的浏览器中都可以。 唯一出错的浏览器是Netscape 4,很久很久以前我们就停止在乎它。 该quirksmode页面似乎已

  • 问题内容: 我需要用ajax调用产生的html替换页面中div的内容。问题是html中包含一些必要的脚本,并且jquery html()函数似乎将它们剥离了,我需要过滤响应并仅获取特定的div。 我正在考虑一种解决方法,该方法是从ajax响应中提取所有脚本标签,然后将其附加到DOM中,但是这样做很麻烦。 这是我的代码; 但这是任何结论。我尝试了那里提出的解决方案,但没有一个起作用。 编辑:我似乎找

  • 问题内容: 在某些脚本中,我看到他们省略了为脚本编写结束标记的过程。为什么会这样,我也应该这样做吗? (我确定他们没有忘记它。) 问题答案: 好吧,省略结束标记只是避免在文件末尾出现空格和其他字符的一种解决方案。例如,在稍后尝试修改标头信息时,意外在结束标记后面添加的任何字符都会触发错误。 参照许多编码准则,删除结束标记是一种“好的做法”。