[重读JS红宝书]一、JS历史和script元素

重读JavaScript高级程序设计，反向碾压面试官？

手边的JS红宝书从第三版到第四版，跟了我很久，一直当做字典来翻，这次想要整体提升一下，准备认真的从头到尾读一遍。没想到从没认真读过的第一章就给了我惊喜！我在读书笔记里可能会把书里基础性的知识汇总，总结性的结论展开~

ECMA-262为什么有个262，是版本号吗？

不知道有没有人像我一样，曾经去搜索引擎搜索过ECMA-262里面的262是什么意思￣□￣｜｜

• ECMA-262是一份标准，定义了ECMAScript
• 262只是这个标准名里的一部分，可能是内部编号，但不是版本号，就像张三里的三
• ECMA-262是TC39这个组织制定的
• TC39：欧洲计算机制造商协会(Ecma)第39技术委员会，这个协会现在已经改名叫Ecma International了，可以在Github上看到组织成员里面也有来自中国的开发者
• ECMAScript来跟着我读：“ek-ma-script”

JavaScript和ECMAScript的关系

前端开发者经常会听到 ES6 ，为什么不直接叫JS6呢？

先来看看JavaScript发展历史

1. 1995年，网景公司的工程师Brendan Eich开发一个叫Mocha（后来改名叫LiveScript）的脚本语言，准备用在Netscape Navigator2上。为了赶工，网景和 Sun公司 共同开发LiveScript。发布前，为了蹭 Java 的热度，改名成了JavaScript。
2. 同年，微软发布了IE3，也包含了JavaScript的实现，不过微软取名叫JScript。
3. 1996年8月，微软重磅进入Web浏览器领域。从此两个版本的JavaScript都有了影响力。“打架”也开始了。
4. 1997年，JavaScript1.1 作为提案提交给了Ecma。TC39委员会打造出了ECMA-262，定义了ECMAScript这个新的脚本语言。
5. 1998年，ISO和IEC将ECMAScript采纳为标准。从此，各家浏览器都以ECMAScript作为自己JavaScript实现依据。

注意：虽然依据了同一个标准，但各家浏览器具体的实现方式和实现程度是不一样的。

看图

ECMAScript运行在哪？

宿主环境需提供ECMAScript的基准实现和与环境自身交互必须的扩展（如DOM）。

• Web浏览器
• 服务器端JavaScript平台Node.js

ECMA-262定义了什么？

语法、类型、语句、关键字、保留字、操作符、全局对象

ECMAScript版本

ES6。2015年6月发布的ECMA-262第6版，俗称ES6、ES2015或ES Harmony。这个版本包含了大概是这个规范有史以来最重要的一批增强特性。ES6正式支持了类、模块、迭代器、生成器、箭头函数、期约、反射、代理和众多新的数据类型。

所有的浏览器基本上都对ES5提供了完善的支持，对ES6和ES7的支持度也在不断提升。当然TC39也没闲着，ECMAScript仍然在进化。

浏览器对ECMAScript的支持

在经过了一长段时间的浏览器“战争”之后，在2008年，五大浏览器全部兼容了ECMA-262第3版。 查看浏览器对各个API的支持程度，可以参考这个网站：caniuse.com/

JavaScript

JavaScript是一门用来与网页交互的脚本语言，包含了三个组成部分：

• ECMAScript，提供核心功能。
• DOM，提供与网页内容交互的方法和接口，W3C组织制定了DOM标准。
• BOM，提供与浏览器交互的方法和接口。各个浏览器对BOM的实现一直没有相关的标准，直到HTML5的出现，以正式规范的形式涵盖了尽可能多的BOM特性。

在HTML里使用JavaScript

行内和外部引入

通过 script 标签可以在HTML里面嵌入JS代码或引入外部JS文件。

• 可维护性。如果直接将HTML和JS代码混写到一个文件里，项目将会变得难以维护，因此建议独立编写JS代码。

不过现代的开发方式，最终的HTML文件可能是通过打包工具生成输出的，行内或是外部引入主要考虑到资源加载效率或是首屏性能。

• 缓存。外部链接的静态资源会有缓存。
• 为了提升下载效率，前端常常把多个JS文件合并成一个，以减少请求。

而在SPDY/HTTP2中，已经不用担心预请求的消耗了，我们可以以组件的形式分开引入多个JS文件。

动态加载脚本

• 通过向DOM中动态的添加script元素来加载指定的脚本。

JSONP 实现跨域请求数据，就是利用的这一点。

script 元素放在什么位置

• 默认情况下，script 元素是会阻塞浏览器渲染的。因此我们把它放在body元素中页面内容的后面，这样可以减少页面空白的时间。
• 对script元素设置 defer 属性，脚本会立即下载但等到整个页面都解析完（解析到结束的</html>）才执行。不过浏览器对这个属性的支持不一致，推荐使用第一种方法。
• H5为script定义了async属性。和defer类似，都是为了不阻塞页面的加载和渲染。和defer不同的是：defer是有执行顺序的，而async加载完即执行。

非服务端渲染的情况下，使用React等MVVM框架，HTML里只有一个占位容器，还是需要等到JS运行完才能看到内容。

ES6模块

当type属性设置为module时，引入的代码会被当成ES6模块，支持import和export关键字。

Vite就是利用了原生ES模块特性来实现开发时快速模块热更的。

noscript 元素

指定在浏览器不支持脚本时显示的内容。

第一章和第二章终于读完了~收获还是超出预期的！