JavaScript代码小技巧-解决页面多次刷新才显示样式问题-（浏览器缓存问题，js代码调入html执行顺序问题)-css样式js样式不出来的问题

本文链接：https://blog.youkuaiyun.com/qq_41593124/article/details/99707211

探讨在前端开发中遇到的样式加载不稳定问题，分享通过调整JS文件引入位置解决样式时断时续现象的经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发的过程中，总是遇到这种情况，有时候写了一些样式，在用浏览器做测试的时候，样式就是死活不出来。在我手速8000的条件下时断时续的出来样式，百度了好久也没有什么具体的答复。

个人猜想：应该适合浏览器的缓存有关，或者和js代码引入得到位置有关，我一般是在<head>标签内引入的，还有一些则写在<body>底部，然而就是这样，我写的样式时断时续的出现。（苦恼。。。）

就在前几天逛贴吧的时候看到一条评论，说在公司上班的时候，写外部js调入的代码写在</body>前面。开始没怎么注意，现在遇到这样的情况，死活不出来的那种，试了一下果然有用。

自定义js文件调入位置：

<body>

</body>

下面是我样式无论怎样刷新样式都能出来的例子：

<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>作业管理主页</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="/css/font.css" th:href="@{/css/font.css}">
        <link rel="stylesheet" href="/css/xadmin.css" th:href="@{/css/xadmin.css}">
        <link rel="stylesheet" href="/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}">
        <!-- <link rel="stylesheet" href="./css/theme5.css"> -->

        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script>
            // 是否开启刷新记忆tab功能
            // var is_remember = false;
        </script>
    </head>
    <body class="index">
        <!-- 顶部开始 -->
        <div class="container">
            <div class="logo">
                <a href="./index.html">作业管理系统</a></div>
            <div class="left_open">
                <a><i title="展开左侧栏" class="layui-icon">&#xe668;</i> </a>

            </div>
            <ul class="layui-nav left fast-add" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;">+新增</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd>
                            <a onclick="xadmin.open('最大化','http://www.baidu.com','','',true)">