如何加载外部JavaScript?

时间:2014-07-29 11:28:10

标签: javascript jquery twitter-bootstrap

我正在浏览bootstrap网站,他们提到这个代码片段来加载bootstrap: http://getbootstrap.com/getting-started/

  1. 本质上,引导程序javascript和JQuery在body标记之前加载。这是加载任何外部JavaScript的推荐方法。

  2. 是否有必须在head代码中加载外部JavaScript的情况?因为,我见过很多这样的例子。

  3. 这个google页面有自己的加载javascript的技术,就在body标签之前 https://developers.google.com/speed/docs/best-practices/payload?csw=1#MinifyHTML

  4. <!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">
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    

3 个答案:

答案 0 :(得分:1)

您可以在HTML文档中放置任意数量的脚本。

脚本可以放在HTML的正文 head 部分,和/或两者中。

通常,您会在网页的正文部分的底部看到脚本。这可以缩短显示时间。

有时您会在 head 部分看到所有JavaScript函数。

无论如何,通过将所有代码放在一个地方来分离HTML和JavaScript总是一个好习惯。

将脚本放在body元素的底部是个好主意。 这会改善页面加载,因为加载脚本不会阻止HTML加载。

注意:您可以根据需要在头部或正文中放置外部脚本引用。脚本的行为就像它位于HTML文档中引用的位置一样。

答案 1 :(得分:1)

<Script></Script>可以添加到文档的任何位置,但通常是一种很好的做法,可以在关闭JavaScript之前添加CSS</head>,字体和其他资源等所有资源

你可以注意到;

1)所有元标记&amp;文档呈现标记位于顶部
因为,浏览器首先正确渲染文档,元标记首先完成它们的工作 2)在元标记后添加CSS
因为,一旦网页呈现,它可能看起来很好,因为在文档的早期加载了样式 3)脚本在标题中的样式之后或关闭</body>标记之前加载
通常的做法是在关闭</head>之前添加它们。但是一些开发人员(我也这样做)在关闭</body>标记之前添加它们,以便所有样式和HTML首先呈现,以便用户可以首先看到正确设置样式的页面,并且最终可以加载重载脚本。因此,页面将加载快速,其他加载脚本在最后加载。

答案 2 :(得分:1)

通常在您的页面完全加载后加载javascript文件..因为任何最终用户都不想等待太长时间才能显示网页所以请避免延迟加载的额外和长时间请求。 head标记中包含内联jScript文件和小脚本。 Bootstrap还在jquery.js之后将js文件放在底部。

希望你能理解我想说的话。