第2章 HTML中的JavaScript

时间：2020-12-05 10:44:20 阅读：7 评论：0 收藏：0 [点我收藏+]

标签：append 动态 element 扩展 ade 默认 syn child head

1. script标签
2. noscript标签

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

标签：append 动态 element 扩展 ade 默认 syn child head

原文地址：https://www.cnblogs.com/hycstar/p/14065618.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行