最近遇到一个问题：
HTML里的哪一部分Javascript 会在页面加载的时候被执行（）
A : 文件头部

B : 文件尾

C : <head>标签部分

D : <body>标签部分

虽然大家都知道选D,但是关于答案的解析众说纷纭，由此可见大家对于浏览器的加载解析渲染还是不够了解。

浏览器是从上到下依次加载并解析的。

当浏览器加载html文件并解析到<head>时,页面也就是<body>并没有被解析,浏览器会等到<head>中的js执行完再加载页面。

这是为什么呢？

原因：JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。

示例代码：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript">

    console.log('this is head js ');

    </script>

    <script type="text/javascript" src='test.js'></script>

    <style type="text/css">

    body{

        color: red;

    }

    </style>

</head>

<body>

<script type="text/javascript">

console.log('this is body js');

window.onload=function(){

    console.log('this is onload js');

};

</script>

<p >this is body</p>

</body>

</html>

输出：

this is head js
this is test js
this is body js
this is onload js

由此可见head和头部引进的script脚本最先加载并执行，而onload是最后执行的，所以处于<body>和</body>中的元素是在页面加载的时候被执行的。

了解这个有什么用呢？

假如说你把DOM操作放在了<head>标签里，你会发现报错，这是因为DOM树还没建立，getElementById获取的是undefined。

所以说最好把<script>放在</body>之前。

HTML里的哪一部分Javascript 会在页面加载的时候被执行？的更多相关文章

  1. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  2. Windows Store App JavaScript 开发：页面加载

      在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...

  3. 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）

    写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...

  4. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  5. webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载

    webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载 原文:https://my.oschina.net/u/2344787/blog/400 ...

  6. jQuery和javaScript页面加载完成时触发的事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. javascript的加载、解析、执行对浏览器渲染的影响

    javascript的加载方式,总得来说是在页面上使用script来声明,以及动态的加载这些方式,而动态的加载,在很多js库中都能够很好的去处 理,从而不至于阻塞其他资源的加载,并与其并行加载下来.这 ...

  8. JavaScript在A页面判断B页面加载完毕（iframe load）

    今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...

  9. javascript页面加载完执行事件

    <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...

随机推荐

  1. stl_组件

    2.1.STL中: 2.1.1.包含常用的数据结构. 2.1.2.包含常用的基本算法.结构和算法其实就是一些接口. 2.1.3.提供了一套可扩展的框架. 2.2.六大组件: 2.2.1.容器组件(基本 ...

  2. macOS 中使用 phpize 动态添加 PHP 扩展的错误解决方法

    使用 phpize 动态添加 PHP 扩展是开发中经常需要做的事情,但是在 macOS 中,首次使用该功能必然会碰到一些错误,本文列出了这些错误的解决方法. 问题一: 执行 phpize 报错如下: ...

  3. JavaScript高级程序设计 第三章 基本概念

    ch3 基本概念 标签(空格分隔): JavaScript 语法 标识符 - 第一个字符必须是字母.下划线或美元 - 驼峰大小写格式 严格模式 ECMAScript5引入,定义了一种解析和执行模型.此 ...

  4. OC—Setter、Getter

    一.本篇以Setter和Getter 来进行成员变量的赋值. 二.Setter 与 Getter 1. 命名规范 为对象中的某个实例变量赋值的方法称为修改方法,用来修改对象的状态这类修改方法称为set ...

  5. 北京赛车PK10 幸运飞艇 重庆时时彩 PC蛋蛋 快乐8 福彩3D 十分彩

    QQ:1395239152 2017-3.14最新修复完整运营版时时彩源码PC+手机版本功能齐全 重庆时时彩是一种经中国国家财政部批准,重庆市福利彩票发行中心承销的福彩快开彩票,2元1注,分为&quo ...

  6. PS不能存储，因为程序错误

    当PS中遇到不能存储文件,因为程序错误时,可以这样: http://www.zcool.com.cn/article/ZMTgwOTQw.html

  7. Centos6.5安装memcached

    1.检查libevent 首先检查系统中是否安装了libevent(Memcache用到了libevent这个库用于Socket的处理). # rpm -q libevent libevent-1.4 ...

  8. Cygwin Unable to get setup from *

    Cygwin Unable to get setup from * 错误 解决方案 是因为用自定义镜像站点,比如 http://mirrors.xdlinux.info/cygwin/x86_64/ ...

  9. 无分类编址（CIDR）构成超网

    CIDR(无分类域间路由选择) CIDR最主要有两个以下特点: 消除传统的A,B,C地址和划分子网的概念,更有效的分配IPv4的地址空间,CIDR使IP地址又回到无分类的两级编码.记法:IP地址::= ...

  10. 最常用的缓存技术---redis入门

      Redis简介 Redis是基于内存,也可以基于磁盘持久化nosql数据库,使用c语言开发. 数据存储结构:key-value 安装环境准备 Redis使用c语言开发,需要使用gcc编译程序进行编 ...