ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

第2章 HTML中的JavaScript

2020-11-30 23:32:40  阅读:111  来源: 互联网

标签:脚本 文件 浏览器 script 标签 JavaScript HTML 加载


目录

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)
    • 浏览器对脚本的支持被关闭

标签:脚本,文件,浏览器,script,标签,JavaScript,HTML,加载
来源: https://www.cnblogs.com/hycstar/p/14065618.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有