带你读书之“红宝书”：第二章HTML中的JavaScript 写在前头 大多数小伙伴看技术书籍都会用“啃”来描述读书的直观感受，当然我也是一个前端小白，白的透明那种，但是我在读技术书籍感觉到“啃”的时候，我希望把我啃红宝书第四版的过程的想法，总结带给大家，以供后来者能够更快上手。 注： 本文由于作者水平原因，如有错误之处，恳请大家指正,另外随着学习的深入，体会的加深，我会不断回来更新，修改这类文章。 思维导图 
脉络 本章节介绍的顺序script的八大属性 p11行内脚本 （行内脚本的执行方式，还有结束问题）p12外部脚本 （src属性，不同文档中的书写模式）p12外部JavaScript扩展名不确定（不一定必须是.js）p13src属性使用的注意点 p13 素特性 p13标签位置 p13推迟执行脚本 p14异步执行脚本 p14动态执行脚本 p15XHTML中代码的书写改变 p16废弃的语法 p17行内代码和外部文件 p18文档模式 p18 15 素 p19 1. script的六大属性 p11 在看着6大的属性时，初学者往往感觉头疼，脑子一篇茫然就接触这一堆不明所以的知识，让人难受。 1. async （异步下载） 在看这个属性是的先了解一下同步，异步，单线程，多线程的一些基本概念。 打个比喻：食堂打饭。 单线程：一个阿姨负责一个窗口，打了菜（一件事），还得打饭（下一件事）。 就是一个人做一件事之后才可以做下一件事情。 多线程：把学生用餐视为一个任务，这个任务分为打饭和打菜2个事情，叫阿姨A在窗口A负责打饭，（打完饭，阿姨A把盘子给阿姨B）阿姨B在窗口B负责打菜。 核心：单线程 , 一个任务从头至尾由一 线程 完成，在一个任务完成之前，不接受第二个任务。（一个阿姨打饭又打菜），多线程 , 将一个任务拆分成不同的阶段（部分），并交给不同的 线程 分别处理。（阿姨A打饭，阿姨B打菜）。 同步： 学生在阿姨没有打菜之前，可以苦等，只有打完饭之后才可以打菜。 异步： 学生在阿姨A打完菜之后，可以在阿姨B的打饭空隙找一个位置。 核心：学生不用傻等，可以抽空做点其他事。 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有等主线程任务执行完毕，”任务队列”开始通知主线程，请求执行任务，该任务才会进入主线程执行。 我估计有人已经看懵了，不过没关系，暂时知道JavaScript不会傻傻的死等就行。 回过头就是 JavaScript在渲染页面时，还不忘记下载脚本。 2. charset 这个属性开发中很少用到，一般出现乱码时，会使用。 3.crossorigin 这玩意目前我也不知道干啥的（初学小白） 4.defer 意思就是延长执行脚本，但是只对外部脚本起作用。怕加载脚本浪费大量时间，于是把渲染界面的任务提前，让执行脚本这事延期。 5.integrity 确保内容分发网络，不会提供恶意内容。 6. language 这个属性已经被废弃，实际开发不会使用，是历史产物，因为过去JavaScript版本太多。 7. src 学过html都知道html文档引用外部css文件。有一个src。还有就是图片标签也有src。 这是开发中使用最多的属性，其实它就是代表一个地址。（可以是外部文件地址，可以是URL）。 src属性主要作用是连接js文件。src对应连接的文件不一定是js文件。 当src对应的文件后缀名不是js时，是kgp或者其他的，这是因为在某些特殊的情况下，我们需要动态的去上传一些js 8.type 用于代替language属性，如果你在html中正常的插入script标签，默认使用text/JavaScript这种形式。 MIME ： 多功能Internet邮件扩展，是用来控制浏览器与服务器之间传输的一种形式。 设置动态js时会用到， 当MIME类型为application/x-JavaScript会返回默认XHTML模式。 2. 行内脚本 （行内脚本的执行方式，还有结束问题）p12 内的代码会从上到下解释。 js中会对函数式的东西预编译，进行预处理，然后把它所需要定义的这个东西，找个地方把他保存起来。 虽然把函数的运行写在上面，然后把函数的定义写在下面，但是运行的时候，这个函数内部的东西仍然会执行。 JavaScript运行原理: js 是有一个预处理的过程，预处理完了之后再执行，整个预处理加执行，是一个阻断式的操作。只有预处理加执行放在一起，才是js从上至下的解释。 js运行机制： 众人皆停，我独行。js是一种阻断式语言。 JavaScript运行原理：从上至下，按照代码块进行预处理和执行。 结束问题 遇到字符串 必须使用转义字符“\”，并且得放入内部。 3. 外部脚本 （src属性，不同文档中的书写模式）p12 要包含外部文件必须使用src属性。 书写模式 XHTML文档里面是可以忽略结束标签 4. 外部JavaScript扩展名不确定（不一定必须是.js）p13 一旦链接的不是.js文件需要对这个返回的文件的type类型做一下定义。 5. src属性使用的注意点 p13 使用了src属性，最后不要再使用行内JavaScript代码。如果使用浏览器会忽略行内JavaScript代码。 6. 素特性 p13 src属性可以引用来自外部域的js文件，用法类似素。 但是在用外部域的js文件时需要考虑安全性，integrity属性就是器到防范作用的。 7. 标签位置 p13 浏览器会根据在页面的出现位置来判断执行先后（没有添加其他属性的前提）。 当标签放在标签里面，会比标签里面的代码先解析并执行。 如果标签放在标签里面，并且在页面代码的后面，那么页面的代码先解析并执行。 总结：在没有其他属性的干扰下，JavaScript或从上到下依次执行代码。 8. 推迟执行脚本 p14 本小段详解defer属性。 总结：延期执行脚本，既然不愿意把标签放在页面代码后面，使用defer就可以起到延期执行的作用，让后面的页面代码等等“插队”。不同版本可能会有不支持的作用，XHTML文档书写格式有变化。example1.js 比 example2.js 文件大的话，在IE中可能example2.js会比example1.js 先执行。 9. 异步执行脚本 p14 总结： 就是脚本下载的时候不会中断HTML解析，一旦脚本文件下载完成，就立刻停下HTML解析，执行脚本，在脚本执行完毕后在继续。 比方 刷剧-HTML解析 削苹果-脚本下载 吃苹果-脚本执行 换句话说，就是你女朋友在刷剧，你在削苹果，你削完苹果，她立刻停止刷剧，吃掉苹果，之后继续刷剧。 10. 动态执行脚本 p15 不再老套的使用标签。 自己“造一个”。 在创建完毕之后，这种标签，会自带async属性。可以手动去除这个属性。 11. XHTML中代码的书写改变 p16 平时不怎么用，了解就行。 像小于符号等等这个在XHTML中必须使用HTML实体形式（<）; CDATA块 12. 废弃的语法 p17 废弃的还学干嘛，了解看看就行。 13. 行内代码和外部文件 p18 推荐使用外部文件，让开发更加方便，逻辑有条理。 可维护性：要改哪里，打开那个js文件改就行，不用去找对应的html页面代码。 缓存：就是买一朵花，送个几个女生，一花多用。“呸，我是渣男”。 适应未来：不用考虑不同文档代码的书写模式，比如上面XHTML里面的CDATA块等等。 14. 文档模式 p18 包含三种模式：混杂模式(quirks mode) 标准模式(standards mode) 准标准模式(almost standards mode) 15 素 p19 使用条件：浏览器不支持脚本，浏览器被禁用脚本。 当浏览器支持脚本时， 素中的代码永远不会被执行。
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/26667.html
