将JavaScript放在HTML文件中的何处?

2020/10/15 09:21 · javascript ·  · 0评论

假设我有一个相当庞大的JavaScript文件,压缩到大约100kb左右。通过文件,我的意思是这是一个外部文件,可以通过链接进来<script src="...">,而不是粘贴到HTML本身中。

将其放入HTML的最佳位置在哪里?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

每个选项之间会有功能上的区别吗?

雅虎!由于浏览器下载组件的方式,Exceptional Performance团队建议将脚本放在页面底部

当然,李维斯的评论“就在您需要它之前就不再需要它”确实是正确的答案,即“取决于情况”。

最好的地方就是在您需要它之前,并且不再需要它。

此外,根据用户的实际位置,使用类似Amazon S3服务的服务可能会帮助用户从物理上比您的服务器近的服务器上下载它。

您的js脚本是jQuery或prototype之类的常用库吗?如果是这样,那么许多公司,例如Google和Yahoo,都有工具可以在分布式网络上为您提供这些文件。

根据经验,放置<script>标签的最佳位置是页面底部,紧接</body>标签之前像这样:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

为什么?

脚本引起的问题是它们阻止并行下载。HTTP / 1.1规范建议浏览器每个主机名并行下载最多两个组件。如果从多个主机名提供映像,则可以并行进行两个以上的下载。但是,在下载脚本时,即使使用不同的主机名,浏览器也不会启动任何其他下载。更多...

的CSS

有点偏离主题,但是...将样式表放在顶部。

在Yahoo!研究性能时,我们发现将样式表移动到文档HEAD可以使页面加载速度更快。这是因为将样式表放在HEAD中可以使页面逐步呈现。更多...

进一步阅读

雅虎发布了一个非常酷的指南,其中列出了加速网站的最佳做法。绝对值得一读:https
//developer.yahoo.com/performance/rules.html

如果使用100k的Javascript,则永远不要将其放入文件中。使用外部脚本Javascript文件。在地狱中,您将永远不会只在一个HTML页面中使用这种数量的代码。您可能会问您应该在哪里加载Javascript文件,为此您已经收到了满意的答案。

但我想指出的是,通常,现代浏览器接受gzip ped Javascript文件!只需将x.js文件gzip压缩到x.js.gz,然后在src属性中指向文件即可它在本地文件系统上不起作用,您需要一个网络服务器才能工作。但是节省的传输字节数可能是巨大的。

我已经在Firefox 3,MSIE 7,Opera 9和Google Chrome中成功测试了它。在Safari 3中,这种方法显然行不通。

有关更多信息,请参阅此博客文章,以及另一个非常古老的页面,该页面仍然有用,因为它指出Web服务器可以检测浏览器是否可以接受压缩的Javascript。如果服务器端可以动态选择发送gzip或纯文本,则可以使页面在所有Web浏览器中可用。

将javascript放在顶部似乎比较整洁,但从功能上讲,最好使用HTML。这样,您的Javascript将无法运行,并尝试在加载HTML元素之前对其进行引用。当您通过实际的互联网连接加载页面时,尤其是速度较慢的页面时,这种问题通常只会变得明显。

您也可以尝试通过从其他JavaScript代码中添加标头元素来动态加载JavaScript,尽管只有在您不一直使用所有代码的情况下,这才有意义。

使用cuzillion,您可以使用不同的方法测试脚本标记不同放置位置对页面加载的影响:内联,外部,“ HTML标记”,“ document.write”,“ JS DOM元素”,“ iframe”和“ XHR eval” 。有关差异的说明,请参见帮助它还可以测试样式表,图像和iframe。

答案取决于您如何使用javascript对象。正如已经指出的那样,将JavaScript文件加载到页脚而不是页眉当然可以提高性能,但应注意所用对象的初始化要晚于页脚加载的对象。另一种方法是加载放置在文件夹中的“ js”文件,该文件将对所有文件可用。

就像其他人所说的,它很可能应该放在一个外部文件中。我更喜欢在<head />的末尾包含这些文件。这种方法比机器友好的方法更人性化,但是这样我就始终知道JS在哪里。在其他任何地方(imho)都包含脚本文件并不容易理解。

我真的需要挤出最后一毫秒,然后您可能应该执行Yahoo所说的。

您的javascript链接可以位于body标签的头部或末尾,确实可以通过将链接放在body标签的末尾来提高性能,但是除非性能存在问题,否则将它们放在头部会更好供人们阅读,并且您知道链接的位置,并且可以更轻松地引用它们。

我会说,这实际上取决于您打算用Javascript代码实现什么:

  • 如果您打算在外部插入JS脚本,那么最好的位置是在页面顶部
  • 如果您打算在智能手机上使用页面,则在标签之前,然后选择页面底部。
  • 但是,如果计划组合HTML和JS(例如,动态创建并填充的HTML表),则必须将其放在需要的地方。

脚本应包含在body标签的末尾,因为这样,HTML将由浏览器解析并在加载脚本之前显示。

问题的答案取决于。在这种情况下,有两种情况,您需要根据自己的情况做出选择。

方案1-关键脚本/必需脚本

如果您使用的脚本对于加载网站很重要,建议将其放在HTML文档的顶部,即<head>一些示例包括-应用程序代码,引导程序,字体等。

方案2-次要/分析脚本

还使用了不会影响网站视图的脚本。建议在所有重要段都加载后加载此类脚本。答案将在文档底部,即<body>结束标记之前的底部一些示例包括-Google Analytics(分析),hotjar等。

奖金-异步/延迟

您还可以告诉浏览器,脚本加载可以与其他脚本同时完成,并且可以根据浏览器的选择使用脚本代码中的defer / async参数进行加载。

例如。 <script async src="script.js"></script>

本文地址:http://javascript.askforanswer.com/jiangjavascriptfangzaihtmlwenjianzhongdehechu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!