第2章 HTML中的JavaScript

2021-03-13 01:29

阅读:540

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

目录
  • 1. script标签
    • 1.1 标签位置
    • 1.2 defer推迟执行脚本
    • 1.3 async异步执行脚本
    • 1.4 动态加载脚本
  • 2. noscript标签

1. script标签

  • 无论是内嵌JS代码还是外联JS代码,在代码被计算完成之前,页面剩余的内容不会被加载,即

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

1.1 标签位置

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

1.2 defer推迟执行脚本

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

1.3 async异步执行脚本

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

1.4 动态加载脚本

let script = document.createElement("script");
script.src = "http://www.soscw.com/js/tools.js";
// 将元素添加到DOM中后就会立即发送请求加载js文件
// 默认是以异步的方式加载的
document.body.appendChild(script);
  • 以这种方式获取资源对浏览器预加载器是不可见的,可能会严重影响性能,若想让预加载器知道这些动态文件的存在,可以在文档头部中显式声明:

2. noscript标签

  • 在下面两种情况下浏览器将显示包含在

第2章 HTML中的JavaScript

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

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


评论


亲,登录后才可以留言!