zoukankan      html  css  js  c++  java
  • HTML里的哪一部分Javascript 会在页面加载的时候被执行?

    最近遇到一个问题:
    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>之前。

  • 相关阅读:
    初识反射
    eclipse简单使用
    常见的原生javascript DOM操作
    你知道CSS实现水平垂直居中的第10种方式吗?
    localStorage 存满了怎么办?
    localStorage使用总结
    js中利用cookie实现记住密码功能
    利用PHP将图片转换成base64编码的实现方法
    php获得可靠的精准的当前时间 ( 通过授时服务器 )
    校正PHP服务器时间不准的问题
  • 原文地址:https://www.cnblogs.com/herozhou/p/6864038.html
Copyright © 2011-2022 走看看