0


script标签在HTML放置位置的区别

原文网址:script标签在HTML放置位置的区别_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍script标签在HTML放置位置的区别。

JavaScript引擎读取代码的顺序

    JS引擎读DOM文档的顺序是从上往下的,也就是说:HTML文件的读取顺序是<head>=> <body>=> <body>后方。

    JS引擎读取引入的 CSS 和 JavaScript 的顺序不同。读取引入的CSS 时,程序仍然往下执行;读取 <script> 标签时则中断线程,等该 script 脚本执行结束之后程序才继续执行。

HTML布局原则

    一般原则是:CSS在前面,DOM在中间,script在最后面(遵循先解析再渲染再执行script这个顺序)。

CSS:应当写在 head 中,以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。

script标签可以放置的位置

    编写HTML时,要使用 <script> 标签来写 JS,<script> 标签的位置是有区别的。

放置位置

head内

  1. 优点: 1. 可以统一管理,方便维护。
  2. 缺点: 1. 如果JS比较大,加载页面时会有很明显的卡顿。 1. 原因:浏览器读取HTML文件时,如果遇到<script> 标签则会停下来进行下载、读取、执行,会阻塞解析其他HTML数据的工作。不管JS是不来来自同一个host,浏览器最多只能同时下载两个JS。2. 解决方案:使用async或者defer特性。见:解决HTML的script标签在head中无法访问DOM的问题_IT利刃出鞘的博客-CSDN博客2. <script>引入的JS程序不能操作DOM 1. 原因:此时还没有读取DOM数据2. 实例:见:解决HTML的script标签在head中无法访问DOM的问题_IT利刃出鞘的博客-CSDN博客
  3. 适合将<script>放到head内的场景: 1. 页面初始化需要用到的 JS2. 页面效果实现类的JS3. 比较小的 JS 文件

body内(body标签的最后边)

  1. 优点: 1. 不会影响页面的加载
  2. 缺点: 1. 对于一些高度依赖于JS的网页,就会显得慢了。 1. 解决方案:一边解析页面,一边下载JS。2. 不太方便维护
  3. 适合将<script>放到body内的场景: 1. 需要访问DOM的JS2. 比较大的JS

body后

    从 HTML 2.0 起,放在 </body> 标签之后就是不合标准的。之所以浏览器不会报错,是因为如果在 </body> 标签之后再出现 <script> 或任何元素的开始标签, 都是 parse error,浏览器会忽略之前的 </body>,即视作仍旧在 body 内。所以实际效果和写在 </body> 标签之前是没有区别的。

实例

位置1:head内

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
</head>

<body>
<div class="container">
    这是div元素
</div>
</body>

</html>

位置2:body内(body标签的最后边)

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>

<body>
<div class="container">
    这是div元素
</div>

<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>

</html>

位置3:body后边

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>

<body>
<div class="container">
    这是div元素
</div>

</body>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>

</html>
标签: html javascript css

本文转载自: https://blog.csdn.net/feiying0canglang/article/details/125126269
版权归原作者 IT利刃出鞘 所有, 如有侵权,请联系我们删除。

“script标签在HTML放置位置的区别”的评论:

还没有评论