最近遇到一个问题：
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. 【算法系列学习】[kuangbin带你飞]专题十二 基础DP1 C - Monkey and Banana

    https://vjudge.net/contest/68966#problem/C [参考]http://blog.csdn.net/qinmusiyan/article/details/79862 ...

  2. c++ STL stack & queue

    Stack 主要的方法有如下: empty() 堆栈为空则返回真                  pop() 移除栈顶元素(不会返回栈顶元素的值)                  push() 在 ...

  3. Redis学习-发布/订阅

    Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息.Redis 客户端可以订阅任意数量的频道. 常用命令 命令 描述 复杂度 返回 PSUBS ...

  4. 看完48秒动画，让你不敢再登录HTTP网站（附完整示例代码）

    在我的 单点登录SSO示例代码 一文中,强烈不建议部署HTTP的SSO服务站点. 在此写个基于网络包嗅探的HTTP会话劫持程序,给大家一个直观的危害性展示. 示例中,我在一台Mac上登录58同城,被另 ...

  5. MySQL编译安装错误提示合集

    1>安装mysql在初始化的时候,出现/usr/local/mysql/bin/mysqld:error while loading shared libraries:libaio.so.1 : ...

  6. SG函数学（hua）习（shui）记录

    ---恢复内容开始--- 听说有一个东西叫SG函数 觉得自己好像原来是懂一些粗浅的应用但现在感觉要再深♂入一点呢 让我们先来介绍一下SG函数吧 这是某类满足下列条件的玄学博弈问题解法 双人.回合制: ...

  7. 15、TCP/IP协议

    15.TCP/IP协议       几台孤立计算机系统组在一起形成网络,几个孤立网络连在一起形成一个网络的网络,即互连网.一个互连网就是一组通过相同协议族互连在一起的网络. 互联网的目的之一是在应用程 ...

  8. 2-LPC1778之GPIO

    其实这篇文章主要是介绍自己为其写的GPIO库,自己借鉴了原子写的STM32,野火写的K60,还有LPC官方库,然后按照自己平时用的,然后写了一个..其实写库的主要目的是为了方便(主要是方便操作)以后自 ...

  9. 那些年我遇到的ERP顾问

    当我写下这篇随笔的时候,算起来在我从业9年的时间里,也差不多遇到了4-5拨的ERP咨询顾问,严格来说是4家ERP顾问公司.分别是:IBM.汉得.鼎捷以及盈通金服.从实施水准.技术力量.沟通技巧.做事态 ...

  10. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...