最近遇到一个问题：
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. 03(3) 基于GMM-HMM的SR基础

    1.GMM-HMM的训练 1)训练GSM-HMM (1)确定HMM拓扑结构 (2)初始化HMM模型参数 (3)在所有的utterances中计算所需的统计量 (4)使用公式更新模型参数 (5)不收敛, ...

  2. .net应用程序中添加chm帮助文档打开显示此程序无法显示网页问题

    在做.net大作业时添加了chm帮助文档结果在打开时显示“此程序无法显示网页问题”,但是把帮助文档拷到别的路径下却显示正常, 经过从网上查找,终于找到了答案: (1).chm文件的路径中不能含有“#” ...

  3. CVSS3.0打分学习

    打分计算器: Common Vulnerability Scoring System Version 3.0 Calculator: https://www.first.org/cvss/calcul ...

  4. httpd: Could not reliably determine the server's fully qualified domain name

    作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 问题描述: AH00558: httpd: Could not reliab ...

  5. [进程管理] Linux中Load average的理解

    Load average的定义 系统平均负载被定义为在特定时间间隔内运行队列中的平均进程树.如果一个进程满足以下条件则其就会位于运行队列中: - 它没有在等待I/O操作的结果 - 它没有主动进入等待状 ...

  6. Struts2拦截器登录验证

    Struts2拦截器 Struts2拦截器的概念和Spring Mvc拦截器一样. Struts2拦截器是在访问某个Action或Action的某个方法,字段之前或之后实施拦截,并且Struts2拦截 ...

  7. QQ互联第三方登陆 redirect uri is illegal(100010)

    想必第一次大家接触QQ第三方登陆都会遇到各种各样的问题,备受折磨,因此,今天我把自己做QQ登陆的过程描述一下,希望给大家提供参考,少走弯路. 在开发之前,我们先了解下QQ登陆的流程 第一:查看熟悉 网 ...

  8. 通过HPS控制FPGA端的GPIO

    该笔记主要记录HPS端如何通过AXI Bridge控制FPGA端口的GPIO,主要是如何操作FPGA侧的Led 1.AXI Bridge         AXIB主要包括H2FB.F2HB.LWH2F ...

  9. 在Windows上安装MongoDB

    原文官方文档:https://docs.mongodb.org/v2.6/tutorial/install-mongodb-on-windows/ 基于版本:MongoDB 2.6 概览 通过这个示例 ...

  10. JAVA虚拟机系列文章

    本系列文章主要记录自己在学习<深入理解Java虚拟机-JVM高级特性与最佳实践>的知识点总结,文章内容都是基于周志明所著书籍的总结. 1.Java内存区域与溢出 2.垃圾收集器与内存分配策 ...