应该把script标签放在哪里

目录:

概述:

如果在页面中写JS的话,那必然会用到script标签,理论上script标签放在哪里都是可以的,但是到底放在哪里好?我们今天来讨论一下。

script标签放在底部的好处:

虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,还是放在底部是最佳的,因为如果JS执行出现错误了,最起码页面中的元素还能加载出来,因为DOM文档是从上往下的顺序执行的。 如果你还不了解DOM的加载顺序,请阅读jQuery中ready与load事件的区别

应该放在底部的哪里:

许多人认为只要放在底部了,无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的,其实还是有差别的,
因为从HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错,是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签, 都是parse error,浏览器会忽略之前的</body>,即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。
所以,只要是让浏览器做了多余的事都是不好的,虽然差别细微,但是咱们还是按照标准来,放在“body标签闭合之前”。

应该把script标签放在哪里的更多相关文章

  1. html文件中script标签放在哪里?

  2. 在html代码中js的script标签建议放在那里?

    今天编写了一个简单的js代码,F12有错误,然后发现是<script>放的位置有问题.之前在我的印象当中,说的是这个标签放在哪里都可以,然而...并不是这样的,例如我现在练习的这个代码,写 ...

  3. (转)script标签到底该放在哪里

    一般script标签会被放在头部或尾部.头部就是<head>里面,尾部一般指<body>里[4-5]. 将script放在<head>里,浏览器解析HTML,发现s ...

  4. JS之script标签

    1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外 ...

  5. js标签放在html的什么位置比较好

    推荐的是js的script标签放在body的末尾,</body>标签之前,包含在body内! <body> <!--其它Html标签--> <script&g ...

  6. script标签的位置

    1.在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的. 2.为什么很多人把script标签放在底部: 初 ...

  7. script标签的同步和异步

    1).把<script>标签放在<head>中意味着必须等到全部的js代码都下载解析和执行完成以后,才开始展现页面内容,为避免这个问题一般把js代码全部放在<body&g ...

  8. script标签加载顺序(defer & async)

    script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...

  9. [译]我们应该在HTML文档中何处放script标签

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

随机推荐

  1. int (*p)[4] p 是二级指针 二维数组 二级指针 .xml

    pre{ line-height:1; color:#2f88e4; background-color:#e9ffff; font-size:16px;}.sysFunc{color:#3d7477; ...

  2. springMVC框架访问web-inf下的jsp文件

    博客原文章:http://td.xue163.com/1042/1/10425265.html 用户提出问题:springMVC框架访问web-inf下的jsp文件,具体如下: 使用springMVC ...

  3. Intellij IDEA开发第一个Android应用

    1.创建一个项目 File——>New Project——>.......——>Finish 2.创建模块 3.MyActivity.java package com.example ...

  4. VS2010安装EntityFramework5.0

    EntityFramework 当前最新版本是6.0,2012年10月份发布,不过是alpha1版本,稳定版本是8月份发布的5.0版本,对于初学者来说,还是别在测试版上折腾了,先学习稳定的5.0版本, ...

  5. rhel及相关linux系统版本知识

    Rhel 此处Rhel非等同redhat哦,RedHat是红帽公司在1994年左右开发维护的linux桌面版本,在2004年左右红帽公司放弃redhat开始进军linux服务器版本开发,具体见下截图 ...

  6. java进程状态

    A thread state. A thread can be in one of the following states: NEWA thread that has not yet started ...

  7. class int

    class int(object): """ int(x=0) -> integer int(x, base=10) -> integer Convert a ...

  8. C# 消息处理机制及自定义过滤方式

    一.消息概述 Windows 下应用程序的执行是通过消息驱动的.消息是整个应用程序的工作引擎,我们需要理解掌握我们使用的编程语言是如何封装消息的原理. 1. 什么是消息(Message) 消息就是通知 ...

  9. 转载 在 Linux 虚拟机中手动安装或升级 VMware Tools

    http://pubs.vmware.com/workstation-12/index.jsp?lang=zh_CN&topic=/com.vmware.ws.using.doc/GUID-0 ...

  10. java使用org.apache.poi读取与保存EXCEL文件

    一.读EXCEL文件 package com.ruijie.wis.cloud.utils; import java.io.FileInputStream; import java.io.FileNo ...