JS红宝书之前言与第一二章节

作者: 莘栀 | 来源:发表于2021-01-11 21:53 被阅读0次

    定位

    JavaScript 与其宿主关系密切,实际上宿主为 JavaScript 定义了与外界交互的全部API:DOM、网络请求、系统硬件、存储、事件、文件、加密,还有数以百计的其他API。各种浏览器及其 JavaScript 引擎都按照自己的理解实现了这些规范。对 JavaScript 更准确的定位应该是一组浏览器的实现

    浏览器及其内核

    • Chrome:V8/blink
    • Firefox:Gecko/SpiderMonkey
    • Safari:WebKit/JavaScriptCore
    • 微软:Trident/EdgeHTML/Chakra

    JavaScript

    • 核心:ECMAScript
    • 文档对象模型:DOM;文档对象模型是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点
    • 浏览器对象模型:BOM。支持可以访问和操作浏览器窗口的浏览器对象模型

    JS的引入方式

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>JS引入方式</title>
      <script>
        // 2.内嵌式
        alert('内嵌式 js');
      </script>
      <!-- 3.引入式 -->
      <script src="./outer.js"></script>
    </head>
    <body>
      <!-- 1.行内式 -->
      <button onclick="alert('行内式js')">点我</button>
    </body>
    </html>
    

    <script>标签属性

    浏览器解释 <script> 标签内的代码、使用 src 属性引入的(非defer/async声明)js代码的过程中,页面会阻塞(也就是如果 script 放在 head 标签内的话,页面会等到脚本文件下载、解析和解释完成后开始渲染页面(页面在浏览器解析到<body>的其实标签时开始渲染))

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>引入JS</title>
      <script>
        // 解释这里时按照顺序代码顺序解释,此时页面在等待
        alert('Hello World!');
      </script>
      <!-- 此处会先加载 foo.js 文件,然后加载 bar.js 文件 -->
      <script text="java/javascript" src="foo.js"></script>
      <script text="java/javascript" src="bar.js"></script>
    </head>
    <body>
      <!-- 此处是页面内容 -->
    </body>
    </html>
    
    上述内容会导致页面加载延迟,浏览器窗口留白问题。

    解决办法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>引入JS</title>
    </head>
    <body>
      <!-- 此处是页面内容 -->
      <!-- 即等页面渲染完毕再加载脚本文件 -->
      <script text="java/javascript" src="foo.js"></script>
      <script text="java/javascript" src="bar.js"></script>
    </body>
    </html>
    

    defer 延迟脚本

    为 script 声明 defer 属性表明:脚本执行的时候不修改页面结构,即脚本可以在页面完全渲染后执行
    保证次序:即 bar 在 foo 之后加载(书上又备注说可能不保证,此处我也不太明白)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>引入JS</title>
      <script text="java/javascript" src="foo.js" defer></script>
      <script text="java/javascript" src="bar.js" defer></script>
    </head>
    <body>
      <!-- 此处是页面内容 -->
    </body>
    </html>
    

    async 异步脚本

    async 与 defer都只适用于外部脚本,都会告诉浏览器立即开始下载
    不保证次序:bar 和 foo 不一定谁先加载好

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>引入JS</title>
      <script text="java/javascript" src="foo.js" async></script>
      <script text="java/javascript" src="bar.js" async></script>
    </head>
    <body>
      <!-- 此处是页面内容 -->
    </body>
    </html>
    

    noscript标签

    检测浏览器是否支持 js

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>使用JS</title>
      <script text="java/javascript">
       alert('Hello World!');
      </script>
    </head>
    <body>
      <!-- 不支持js 或者 关闭js 会展示该标签 -->
      <noscript>
       本页面需要浏览器支持(启动)JavaScript
      </noscript>
    </body>
    </html>
    

    扩展一:JS是解释型语言

    编译器:代码执行之前进行编译,生成中间文件(例如Java语言)
    解释器:运行时进行及时解释,并立即执行(例如 JS脚本语言)

    编译or解释.jpg

    扩展二:script位置问题(DOM案例)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>script位置</title>
      <!-- 
        如果js代码不涉及操作页面元素,可以放前面;
        如果需要操作页面元素,则会导致无法获取页面元素
       -->
      <script>
        // 方式二:window.onload()当页面中的结构和内容都加载完成才会执行这里面的代码
        // JQ中也有一个对应的方法 $(document).ready(function(){})
        window.onload = function() {
          let box = document.getElementById('box');
          box.style.backgroundColor = 'tomato';
        }
      </script>
    </head>
    <body>
      <div id="box">啦啦啦</div>
      <!-- 方式一:放在页面底部:保证页面结构加载完成才会做这些事情 -->
      <!-- <script>
        let box = document.getElementById('box');
        box.style.backgroundColor = 'tomato';
      </script> -->
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:JS红宝书之前言与第一二章节

        本文链接:https://www.haomeiwen.com/subject/mckjaktx.html