第2章 HTML中的JavaScript
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的更多相关文章
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- 《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 嵌 ...
- 第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 不推荐 ...
- javascript高级编程3第二章:在html中使用javascript
2.1 <script>元素 向html页面中插入javascript的主要方法,就是使用<script>元素.这个元素被加入到正式的html规范中.html4.01为< ...
- 《JavaScript 高级程序设计》第二章:在HTML中使用JavaScript
script 标记是 netspace 公司最早为在 html中引入 javascript代码而创造的HTML元素,并最终被 HTML规范采纳. script 标记有四个比较重要的属性: src ty ...
- 第二章 在Html中使用JavaScript
https://www.jianshu.com/p/8247a9401725 2.1 Script元素 https://developer.mozilla.org/en-US/docs/Web/HTM ...
- 混合应用中的javascript实践
混合应用中的javascript实践 混合应用(hybird app) 在几年前便进入大众视野,近来更是越发风生水起,深受人民群众的喜爱. 目录 概念 什么是混合应用 混合方式 交互 方法注入 参数传 ...
- Android WebView中的JavaScript代码使用
在WebView中使用JavaScript 如果你想要载入的页面中用了JavaScript,你必须为你的WebView使能JavaScript. 一旦使能之后,你也可以自己创建接口在你的应用和Java ...
- 《jQuery风暴》第2章 必须知道的JavaScript知识
第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...
随机推荐
- Leetcode学习笔记(3)
题目1 ID88 给你两个有序整数数组 nums1 和 nums2,请你将 nums2 合并到 nums1 中,使 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量 ...
- 虚拟IP原理及使用
一.前言 高可用性 HA(High Availability)指的是通过尽量缩短因日常维护操作(计划)和突发的系统崩溃(非计划)所导致的停机时间,以提高系统和应用的可用性.HA 系统是目前企业防止核心 ...
- 软工团队作业--Scrum冲刺集合贴
软工团队作业--Scrum冲刺集合贴 团队 团队名称:广东靓仔六强选手 团队成员: 黄清山 黄梓浩 钟俊豪 周立 邓富荣 郑焕 博客链接 Scrum 冲刺 第一篇 Scrum 冲刺 第二篇 Scrum ...
- 【题解】P6329 【模板】点分树 | 震波
题外话 (其实模板题没必要在这里水题解的--主要是想说这个qwq) 小常数的快乐.jpg 我也不知道我为啥常数特别小跑得飞快--不加快读就能在 luogu 的最优解上跑到 rank5 ( 说不定深夜提 ...
- Fabric v2.0中的隐私数据
文章来源于https://hyperledger-fabric.readthedocs.io/en/release-2.0/ 私有数据集在v1.4中提出,一直使用的是隐私数据集方式,即建立一个隐私数据 ...
- http请求user_agent字段解析
浏览器的常见User Agent 各字段的解释 浏览器的User Agent字段令人迷惑,例如:某一版本的Chrome访问网络时,User Agent字段如下: Mozilla/5.0 (Window ...
- mac系统下用ssh方式连接git仓库
1.应用程序-终端,键入命令 ssh-keygen -t rsa -C "xxxxx@xxxxx.com" ,后面是你的邮箱地址.一直回车,生成密钥. 2.键入 open ~ ...
- 微信小程序下拉加载下一页
小程序做得多了,有些常用功能就有必要记录一下 请看详解: 微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y ...
- c++笔试题3
一.[阿里C++面试题]1.如何初始化一个指针数组.答案: 错题解析:首先明确一个概念,就是指向数组的指针,和存放指针的数组. 指向数组的指针:char (*array)[5];含义是一个指向存放5个 ...
- 容器编排系统之Kubernetes基础入门
一.kubernetes简介 1.什么是kubernetes?它是干什么用的? kubernetes是google公司用go语言开发的一套容器编排系统,简称k8s:它主要用于容器编排:所谓容器编排简单 ...