主页 / 问题 / 561755
Accepted
Floyat
Asked:2020-09-01 18:52:40 +0000 UTC2020-09-01 18:52:40 +0000 UTC

在哪里放置 css 和 js 文件 - 在文档的开头还是结尾？

  • 772

毕竟，如何正确地包含样式和 js 文件？

许多资料表明这是最正确的方法：css 在开头（在 head 中），js 在结尾，在关闭之前。但是当我查看 largest resources 是如何完成的时，结果到处都不一样，但是，据我了解，largest resources 首先关心站点加载速度。有人把一切都放在头脑里，有人做这个做那个。

或者有什么“陷阱”需要注意？这非常有趣。我自己总是把css放在最前面，所有的js放在最后。

html

2 个回答

  1. Best Answer

    为什么建模css在上面，js在下面更有吸引力？

    这里的重点是浏览器从上到下加载页面。

    场景#1

    顶部有一个包含脚本和样式的页面

    <html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <script src="scripts.js" type="text/javascript"></script>       
    </head>
    <body>
         <!-- here is page content -->             
    </body>
</html>

    一个示例加载脚本是：

    1. 加载样式
    2. 加载脚本
    3. 加载其余标记

    在这种情况下，有一个缺点，在直接显示页面内容之前，浏览器必须加载样式和脚本，如果这是一个大资源，这会造成相当大的延迟。

    场景#2

    有一个页面，样式在顶部，脚本在结束 body 标记之前

    <html>
    <head>
        <link rel="stylesheet" href="styles.css">       
    </head>
    <body>
        <!-- here is page content -->             
        <script src="scripts.js" type="text/javascript"></script>
    </body>
</html>

    一个示例加载脚本是：

    1. 加载样式
    2. 加载标记
    3. 加载脚本

    这种场景比第一种有优势，在直接显示页面内容之前，浏览器只需要加载样式，它会最后加载脚本，这样可以让用户更快地看到页面内容。

    为什么样式应该留在顶部？ 如果将样式和脚本一起移到页面底部，那么加载后的标记将没有样式，在加载样式之前看起来会很丑。

    • 5

  2. 将您网站设计不需要的内容放在末尾。毕竟，打开网站时，用户首先看到它，然后与之交互。如果（相对而言）在某些脚本中您更改了字体（取决于设备、屏幕大小、Math.random () =)），那么将此脚本放在更高的位置是有意义的，这样用户更愿意看到该站点所需的形式。如果某些脚本用于处理预览图像、在滚动时加载文章或执行其他一些不会影响用户在打开网站的第一刻看到的内容的操作 - 请在下面将其删除。

    总的来说，套用一句口号——“功能无足轻重，外观就是一切！” :)

    • 2

相关问题