最近遇到一个问题：
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. Linux(ubuntu)安装MediaWiki

    本篇文档所述步骤,作者完全验证过.一切OK. 作者:http://gaoxingf.blog.51cto.com/612518/188132,Younger Liu 本作品采用知识共享署名-非商业性使 ...

  2. Hadoop化繁为简-从安装Linux到搭建集群环境

    简介与环境准备 hadoop的核心是分布式文件系统HDFS以及批处理计算MapReduce.近年,随着大数据.云计算.物联网的兴起,也极大的吸引了我的兴趣,看了网上很多文章,感觉还是云里雾里,很多不必 ...

  3. scala练手之数字转汉字小工具

    输入数字,转换成汉字,在统计数据量时很好用,而输入数字转成大写汉字,可以用于填写收据报销单哦 下载链接 https://pan.baidu.com/s/1nv3Ci6l 效果图如下: 直接上代码 ob ...

  4. java web （j2ee）学习路线 —— 将青春交给命运

    RESON TO DO JAVA WEB:1.JAVA WEB(企业级)  2.Android和iOS过于火爆并且不兼容 一.JAVA WEB开发需要的知识储备 1.      基本的网页设计语言:H ...

  5. poj 1088 动态规划

    #include <iostream> #include <string.h> using namespace std; ][];//存储当前位置能得到的最优解 ][];//存 ...

  6. WPF 简易手风琴 (ListBox+Expander)

    概述 之前听说很多大神的成长之路,几乎都有个习惯--写博文,可以有效的对项目进行总结.从而提高开发的经验.所以初学WPF的我想试试,顺便提高一下小学作文的能力.O(∩_∩)O哈哈~ 读万卷书不如行万里 ...

  7. 分布式服务：Dubbo+Zookeeper+Proxy+Restful 分布式架构

    分布式 分布式服务:Dubbo+Zookeeper+Proxy+Restful 分布式消息中间件:KafKa+Flume+Zookeeper 分布式缓存:Redis    分布式文件:FastDFS ...

  8. Java IO详解（六)------序列化与反序列化（对象流）

    File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...

  9. java之 Timer 类的使用以及深入理解

    最近一直在看线程知识,然后看到Timer定时器使用了线程实现的定时功能,于是了解了解: 本文 从Time类的使用和源码分析两个方面讲解: 1---Timer类使用 2---源码分析 1.Time类使用 ...

  10. Win下安装MySQL 5.6

    最近身边有人要win下安装mysql 去学习数据库,问我如何安装MySQL,其实win 下安装要比Linux简单的多,直接运行安装包下一步安装即可. 1.首先我们运行mysql-installer-c ...