JavaScript

• JavaScript因为互联网而生，紧随着浏览器的出现而问世。回顾它的历史，就要从浏览器的历史讲起。

• 1990年底，欧洲核能研究组织（CERN）科学家Tim Berners-Lee，在全世界最大的电脑网络——互联网的基础上，发明了万维网（World Wide Web），从此可以在网上浏览网页文件。最早的网页只能在操作系统的终端里浏览，也就是说只能使用命令行操作，网页都是在字符窗口中显示，这当然非常不方便。

• 1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做Mosaic。这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览。

• 1994年10月，NCSA的一个主要程序员Marc Andreessen联合风险投资家Jim Clark，成立了Mosaic通信公司（Mosaic Communications），不久后改名为Netscape。这家公司的方向，就是在Mosaic的基础上，开发面向普通用户的新一代的浏览器Netscape Navigator。

• 1994年12月，Navigator发布了1.0版，市场份额一举超过90%。Netscape公司很快发现，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为。当时，网速很慢而且上网费很贵，有些操作不宜在服务器端完成。比如，如果用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现这一点就有点太晚了，最好能在用户发出数据之前，就告诉用户“请填写用户名”。这就需要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。管理层对这种浏览器脚本语言的设想是：功能不需要太强，语法较为简单，容易学习和部署。那一年，正逢Sun公司的Java语言问世，市场推广活动非常成功。Netscape公司决定与Sun公司合作，浏览器支持嵌入Java小程序（后来称为Java applet）。但是，浏览器脚本语言是否就选用Java，则存在争论。后来，还是决定不使用Java，因为网页小程序不需要Java这么“重”的语法。但是，同时也决定脚本语言的语法要接近Java，并且可以支持Java程序。这些设想直接排除了使用现存语言，比如Perl、Python和TCL。

• 1995年，Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言。Brendan Eich有很强的函数式编程背景，希望以Scheme语言（函数式语言鼻祖LISP语言的一种方言）为蓝本，实现这种新语言。

• 1995年5月，Brendan Eich只用了10天，就设计完成了这种语言的第一版。它是一个大杂烩，语法有多个来源：

1. 基本语法：借鉴C语言和Java语言。
2. 数据结构：借鉴Java语言，包括将值分成原始值和对象两大类。
3. 函数的用法：借鉴Scheme语言和Awk语言，将函数当作第一等公民，并引入闭包。
4. 原型继承模型：借鉴Self语言（Smalltalk的一种变种）。
5. 正则表达式：借鉴Perl语言。
6. 字符串和数组处理：借鉴Python语言。

• Netscape公司的这种浏览器脚本语言，最初名字叫做Mocha，1995年9月改为LiveScript。12月，Netscape公司与Sun公司（Java语言的发明者和所有者）达成协议，后者允许将这种语言叫做JavaScript。这样一来，Netscape公司可以借助Java语言的声势，而Sun公司则将自己的影响力扩展到了浏览器。

• 1995年12月4日，Netscape公司与Sun公司联合发布了JavaScript语言。

• 1996年3月，Navigator 2.0浏览器正式内置了JavaScript脚本语言。

CSS和JS的放置顺序

当浏览器从服务器接收到了html文档，并把html在内存中转换成DOM树，在转换过程中如果发现某个节点上引用了CSS或者image，就会再发一个request去请求CSS或image，然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就可以了。但当引用了JS的时候，浏览器发送一个JS request就会一直等待该request的返回。

• CSS应该放在页面顶部的标签中

由于Render Tree是由DOM树和CSSOM树组合成的，html页面需要等到CSS解析完后才能完成渲染，所以CSS应放在head标签内，优先下载解析，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。

• JS应该放在的底部

因为浏览器需要一个稳定的dom树结构，而且js中很有可能有代码直接改变了dom树结构，浏览器为了防止出现js修改dom树，需要重新构建dom树的情况，所以就会阻塞其他的下载和呈现。

将JavaScript放在head内和body底部的区别也在于此，放在head里面，由于浏览器发现head里面有JavaScript标签就会暂时停止其他渲染行为，等待JavaScript下载并执行完成才能接着往下渲染，而这个时候由于在head里面这个时候页面是白的；如果将JavaScript放在页面底部，render Tree已经完成大部分，所以此时页面有内容呈现，即使遇到JavaScript阻塞渲染，也不会有白屏出现

• 如果CSS和JS都在标签内，则应将JS放在所有CSS的前面

JS的执行有可能依赖最新样式。比如，可能会有var width=$('#id').width，这意味着，JS代码在执行前，浏览器必须保证在此JS之前的所有CSS（无论外链还是内嵌）都已下载和解析完成。

把JS放在CSS后会导致页面阻塞，去等待CSS的下载。
另外如果要在head引入JS尽量将JS内嵌。

• async和defer也可以达到不阻塞渲染的效果

带有 defer 属性的

2. async 属性规定一旦脚本可用，则会异步执行。