1. script标签

  • <script>标签的type属性值如果是module，代码会被当成ES6模块，只有在这个时候代码中才能出现import和export关键字
  • 无论是内嵌JS代码还是外联JS代码，在代码被计算完成之前，页面剩余的内容不会被加载，即<script>会造成页面阻塞（阻塞时间包含下载文件的时间）

JS文件的文件扩展名.js并不是必须的，浏览器不会检查JS文件的文件扩展名。但服务器经常会根据文件扩展名来相应MIME类型，所以如果不适用.js扩展名，就要确保服务器能返回正确的MIME类型

1.1 标签位置

  • 通常将JS引用放在<body>元素中的页面内容后面以防止阻塞页面加载

1.2 defer推迟执行脚本

  • 只对外部脚本文件有效
  • 脚本会被延迟到整个页面都解析完毕后在运行。即告诉浏览器：立即下载，但延迟执行
  • HTML5规范要求脚本应该按照他们出现的顺序执行，但实际上不一定是这样，所以最好只使用一次defer

1.3 async异步执行脚本

  • 只对外部脚本文件有效
  • 和defer效果类似，但明确脚本不会按顺序执行
  • 异步脚本不应该在加载期间修改DOM

1.4 动态加载脚本

let script = document.createElement("script");

script.src = "./js/tools.js";

// 将元素添加到DOM中后就会立即发送请求加载js文件

// 默认是以异步的方式加载的

document.body.appendChild(script);
  • 以这种方式获取资源对浏览器预加载器是不可见的，可能会严重影响性能，若想让预加载器知道这些动态文件的存在，可以在文档头部<head>中显式声明：
<link rel="preload" href="./js/tools.js">

2. noscript标签

  • <noscript>可以包含任何可以出现在<body>中的HTML元素
  • 在下面两种情况下浏览器将显示包含在<noscript>中的内容
    • 浏览器不支持脚本（如今浏览器已经100%支持JavaScript）
    • 浏览器对脚本的支持被关闭

第2章 HTML中的JavaScript的更多相关文章

  1. 第十一章：WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  2. 《JavaScript高级程序设计（第3版）》阅读总结记录第二章之在HTML中使用JavaScript

    本章目录: 2.1 <script> 元素 2.1.1 标签的位置 2.1.2 延迟脚本 2.1.3 异步脚本 2.1.4 在XHTML 中的用法 2.1.5 不推荐使用的语法 2.2 嵌 ...

  3. 第2章 在 HTML中 使用 JavaScript

    第2章 在 HTML中 使用 JavaScript 2.1 script 元素 2.1.1 标签的位置 2.1.2 延迟脚本 2.1.3 异步脚本 2.1.4 在XHTML中的使用 2.1.5 不推荐 ...

  4. javascript高级编程3第二章：在html中使用javascript

    2.1 <script>元素 向html页面中插入javascript的主要方法,就是使用<script>元素.这个元素被加入到正式的html规范中.html4.01为< ...

  5. 《JavaScript 高级程序设计》第二章：在HTML中使用JavaScript

    script 标记是 netspace 公司最早为在 html中引入 javascript代码而创造的HTML元素,并最终被 HTML规范采纳. script 标记有四个比较重要的属性: src ty ...

  6. 第二章 在Html中使用JavaScript

    https://www.jianshu.com/p/8247a9401725 2.1 Script元素 https://developer.mozilla.org/en-US/docs/Web/HTM ...

  7. 混合应用中的javascript实践

    混合应用中的javascript实践 混合应用(hybird app) 在几年前便进入大众视野,近来更是越发风生水起,深受人民群众的喜爱. 目录 概念 什么是混合应用 混合方式 交互 方法注入 参数传 ...

  8. Android WebView中的JavaScript代码使用

    在WebView中使用JavaScript 如果你想要载入的页面中用了JavaScript,你必须为你的WebView使能JavaScript. 一旦使能之后,你也可以自己创建接口在你的应用和Java ...

  9. 《jQuery风暴》第2章 必须知道的JavaScript知识

    第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...

随机推荐

  1. anaconda 配置虚拟环境

    工作时有时候会遇到不同版本的问题,比如深度学习tensorflow 1.14版本 和 2.0版本,或者cpu版本和gpu版本,那么这个时候建立虚拟环境就很方便了 anaconda命令行下 1) act ...

  2. 【题解】P6329 【模板】点分树 | 震波

    题外话 (其实模板题没必要在这里水题解的--主要是想说这个qwq) 小常数的快乐.jpg 我也不知道我为啥常数特别小跑得飞快--不加快读就能在 luogu 的最优解上跑到 rank5 ( 说不定深夜提 ...

  3. 【题解】Casting Spells(UVA1470)

    虽然训练指南上没有讲 Manacher--但是这题几乎就是一个裸的 Manacher啊-- 然而书上的标签是:有难度,配合数据结构 Manacher详解 题意 问给定字符串中最大的W串的长度.其中W串 ...

  4. 【题解】Fuzzy Google Suggest(UVA1462)

    题目链接 题意 给定一个字符串集合,有n次搜索,每次有一个整数x和一个字符串,表示可以对字符串进行x次修改, 包括增加.修改和删除一个字符,问修改后的字符串可能是字符集中多少个字符串的前缀. 思路 简 ...

  5. uniapp-vuex实现tabbar提示点

    底部入口栏的红点提示是app中常见的功能,或者说是必要功能,通常用来提醒用户去查看或操作某个模块内容. 看项目性质如果需要比较多并且灵活的提示,则需要用到长连接技术. 1.红点提示是根据接口返回的数据 ...

  6. web前端js实现资源加载进度条

    进度条核心方法,通常j不考虑判断到100,根据项目中的图片数量可能有所差异所以到95就可以了 //根据图片load进度条 function loadingAsImgLength(){ var prec ...

  7. win+mac全网视频无水印采集工具

    把网址填入输入框,点击下载即可.支持全网几十个平台,方便使用 window版:https://sansuinb.lanzous.com/i00Rjej0fib mac版:https://sansuin ...

  8. Consul 多数据中心下的服务注册发现与配置共享

    1. Consul简介   Consul是HashiCorp公司推出的开源软件,它提供了一套分布式高可用可横向扩展的解决方案,能为微服务提供服务治理.健康检查.配置共享等能力.   Eurake2.x ...

  9. 2020-2021-1 20209307 《Linux内核原理与分析》第八周作业

    这个作业属于哪个课程 <2020-2021-1Linux内核原理与分析)> 这个作业要求在哪里 <2020-2021-1Linux内核原理与分析第八周作业> 这个作业的目标 & ...

  10. Shiro实现Basic认证

    前言 今天跟小伙伴们分享一个实战内容,使用Spring Boot+Shiro实现一个简单的Http认证. 场景是这样的,我们平时的工作中可能会对外提供一些接口,如果这些接口不做一些安全认证,什么人都可 ...