django 模板js文件为什么最后引入

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> 为什么最后引入

例子

<!-- templates/inspection_records.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机房巡检记录</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4">机房巡检记录</h1>

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>机房名称</th>
                        <th>巡检人员</th>
                        <th>巡检日期</th>
                        <th>温度（摄氏度）</th>
                        <th>湿度（百分比）</th>
                        <th>服务器状态</th>
                        <th>交换机状态</th>
                        <th>发现的问题</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td>{{ record.room_name }}</td>
                        <td>{{ record.inspector }}</td>
                        <td>{{ record.inspection_date }}</td>
                        <td>{{ record.temperature }}</td>
                        <td>{{ record.humidity }}</td>
                        <td>{{ record.get_server_status_display }}</td>
                        <td>{{ record.get_switch_status_display }}</td>
                        <td>{{ record.issues_found }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在典型的Web开发流程中，通常将页面的样式（CSS）文件放在 <head> 标签中引入，而将页面的脚本（JavaScript）文件放在页面底部，即在 </body> 标签之前引入。这样做有几个原因：

提高性能: 将 JavaScript 文件放在页面底部可以提高页面加载性能。当浏览器遇到 JavaScript 文件时，它会阻塞页面的渲染，直到该文件完全加载和执行。通过将 JavaScript 文件置于页面底部，可以使页面其他内容更快地加载和呈现给用户。
避免阻塞渲染: 放置 JavaScript 文件在底部有助于避免阻塞页面内容的渲染。如果 JavaScript 文件位于页面顶部，浏览器会等待 JavaScript 加载和执行后才继续渲染其余内容，导致页面显示延迟。
保证脚本依赖性: 通常，JavaScript 文件可能依赖于页面上已经存在的元素或结构。将 JavaScript 文件放在底部可以确保页面上所需的 HTML 结构已经加载，避免了可能由于缺少依赖项而导致的错误。

总结来说，将 JavaScript 文件放在页面底部可以改善页面加载性能并确保更好的用户体验。在上述示例中，我们将 Bootstrap 的 JavaScript 文件放在页面底部，以便达到这些优势。

展示效果

在这里插入图片描述
根据这个文章使用django model 建立一个机房巡检记录表
然后写了一个前端页面

再次优化

<!-- templates/inspection_records.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机房巡检记录</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4">机房巡检记录</h1>
    
        <div class="table-responsive">
            <table class="table table-striped table-hover">
            <thead>
        <tr>
            <th>机房名称</th>
            <th>巡检人员</th>
            <th>巡检日期</th>
            <th>温度（摄氏度）</th>
            <th>湿度（百分比）</th>
            <th>服务器状态</th>
            <th>交换机状态</th>
            <th>发现的问题</th>
        </tr>
    </thead>
    <tbody>
        {% for record in records %}
        <tr>
            <td>{{ record.room_name }}</td>
            <td>{{ record.inspector }}</td>
            <td>{{ record.inspection_date }}</td>
            <td style="color: {% if record.temperature > 25 %}red{% else %}green{% endif %}">{{ record.temperature }}</td>
            <td style="color: {% if record.humidity > 70 %}red{% else %}green{% endif %}">{{ record.humidity }}</td>
            <td style="background-color: {% if record.server_status == '异常' %}red{% else %}green{% endif %}">{{ record.get_server_status_display }}</td>
            <td style="background-color: {% if record.switch_status == '异常' %}red{% else %}green{% endif %}">{{ record.get_switch_status_display }}</td>
            <td>{{ record.issues_found }}</td>
        </tr>
        {% endfor %}
    </tbody>
    </table>
        <!-- 引入Bootstrap JS -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>