HTML中的JavaScript

最新推荐文章于 2024-05-06 18:26:11 发布

少年呀

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量134

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_44742440/article/details/115609446

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本章内容

使用<script>元素
行内脚本与外部脚本的比较
文档模式对JavaScript有什么影响
确保JavaScript不可用时的用户体验

<script>元素

将JavaScript引入HTML主要方法是使用<script>元素，有下列8个属性

async：可选。脚本下载与HTML解析并行，一旦脚本加载完成，就会中断HTML解析，同时执行脚本
defer：可选。脚本下载与HTML解析并行，等HTML解析完成后脚本按顺序执行
- async 和 defer 异同之处
  - async 和 defer 都是并行下载的，主要区别就是下载后何时执行
  - async 和 defer 都只适用于外部脚本文件（defer 在IE7及更早的版本中，对行内脚本也可使用该属性）
  - 每一个 async 属性的脚本都在它下载结束后立刻执行，有可能出现脚本执行顺序被打乱的情况
  - 每一个 defer 属性的脚本会在HTML解析完成后，按照顺序执行
charset：可选。可指定代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值；
crossorigin：可选。属性可以是 anonymous（不必配置凭据）、use-credentials（设置凭据）。如果没有属性值，默认为 anonymous
- crossorigin 会让浏览器启动CORS访问检查，检查http响应头的 Access-Control-Allow-Origin
integrity：可选。允许为 script 提供一个 hash，用于检验JavaScript是否完整
- integrity 的作用有
  - 减少由【托管在CDN的资源被篡改】而引入的XSS 风险
  - 减少通信过程资源被篡改而引入的XSS风险（同时使用https会更保险）
  - 可以通过一些技术手段，不执行有脏数据的CDN资源，同时去源站下载对应资源
- 注意：启用 SRI 策略后，浏览器会对资源进行 CORS 校验，这就要求被请求的资源必须同域，或者配置了 Access-Control-Allow-Origin 响应头
src：可选。表示要执行的外部文件
language：废弃。为了显示脚本使用的语言
type：可选。表示代码块中脚本语言的内容类型
- language 和 type
  - 都可声明<script>标签中的脚本类型
  - JS 一统天下，不需要 language 声明
  - 浏览器优先识别 type 属性内的脚本类型

标签位置

<body>元素中页面内容的后面，DOM解析完成后再下载js文件，用户会以为加载速度变快了

推迟执行脚本

若想 css 和 JavaScript 文件都集中放在一起，可定义 defer 属性

异步执行脚本

可定义 async 属性，无法保证执行顺序，若有依赖关系会出现一些bug，不被推荐使用

动态加载脚本

let script = document.createElement('script');
script.src = 'a.js';
document.head.appendChild(script)

会有人使用这个方法？？？？？

XHTML中的变化

<script>
	function compare(a, b) {
    	if(a < b) {
        	console.log('A 小于 B')
    	} else if(a > b) {
        	console.log('A 大于 B')
    	} else {
        	console.log('A 等于 B')
    	}
	}    
</script>

XHTML 中的小于号会被解析成一个标签的开始

XHTML 需要把小于号替换成转义符 <

<script>
	function compare(a, b) {
    	if(a &lt; b) {
        	console.log('A 小于 B')
    	} else if(a &gt; b) {
        	console.log('A 大于 B')
    	} else {
        	console.log('A 等于 B')
    	}
	}    
</script>

第二种包含在CDATA块中

<script><![CDATA[
	function compare(a, b) {
    	if(a < b) {
        	console.log('A 小于 B')
    	} else if(a > b) {
        	console.log('A 大于 B')
    	} else {
        	console.log('A 等于 B')
    	}
	}    
]]</script>

行内代码与外部文件

推荐使用外部文件，理由如下

可维护性：每项功能做一个单独 js 文件，出现bug的时候可快速定位
缓存：两个页面用到同一个 js 文件，则该文件只需要下载一次，页面加载更快
适应未来：HTML 和 XHTML 外部JavaScript 文件的语法一样

文档模式

混杂模式：省略文档开头 doctype声明开关。使用浏览器自己的方式解析执行代码，基本上没有兼容性可言
标准模式：使用W3C标准解析执行代码，不能使用已废弃的标签
准标准模式：遵循标准模式的基础上兼容部分非标准代码，比如一些已废弃的标签
标准模式和准标准模式非常接近，很少进行区分

<noscript>元素

下列两种情况下，浏览器将显示<noscript>的内容

浏览器不支持JavaScript
浏览器对脚本的支持被关闭

少年呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML中的JavaScript

本章内容使用<script>元素将JavaScript引入HTML主要方法是使用<script>元素，有下列8个属性async：可选。脚本下载与HTML解析并行，一旦脚本加载完成，就会中断HTML解析，同时执行脚本defer：可选。脚本下载与HTML解析并行，等HTML解析完成后脚本按顺序执行async 和 defer 异同之处async 和 defer 都是并行下载的，主要区别就是下载后何时执行async 和 defer 都只适用于外部脚本文件（defer
复制链接

扫一扫