JavaScript的发展历史
JavaScript因为互联网而生,紧随着浏览器的出现而问世。
1994年12月,Navigator浏览器发布了1.0版,市场份额一举超过90%。Netscape公司很快发现,Navigator浏览器需要一种可以嵌入网页的脚本语言,用来控制浏览器行为。管理层对这种浏览器脚本语言的设想是:功能不需要太强,语法较为简单,容易学习和部署。那一年,正逢Sun公司的Java语言问世,市场推广活动非常成功。Netscape公司决定与Sun公司合作,浏览器支持嵌入Java小程序(后来称为Java applet)。
1995年,Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言。Brendan Eich有很强的函数式编程背景,希望以Scheme语言(函数式语言鼻祖LISP语言的一种方言)为蓝本,实现这种新语言。1995年5月,Brendan Eich只用了10天,就设计完成了这种语言的第一版。
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脚本语言。
1996年11月,Netscape公司决定将JavaScript提交给国际标准化组织ECMA(European Computer Manufacturers Association),希望JavaScript能够成为国际标准,以此抵抗微软。
1997年7月,ECMA组织发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。 ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。
1997年7月,ECMAScript 1.0发布。
1998年6月,ECMAScript 2.0版发布。
1999年12月,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。
2007年10月,ECMAScript 4.0版草案发布,对3.0版做了大幅升级,预计次年8月发布正式版本。
2009年12月,ECMAScript 5.0版正式发布。
2011年6月,ECMAscript 5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。
2015年6月,ECMAScript 6正式发布,并且更名为“ECMAScript 2015”。
TIPS: JavaScript与Java的关系
JavaScript和Java是两种不一样的语言,但是它们之间存在联系。
JavaScript的基本语法和对象体系,是模仿Java而设计的。但是,JavaScript没有采用Java的静态类型。正是因为JavaScript与Java有很大的相似性,所以这门语言才从一开始的LiveScript改名为JavaScript。基本上,JavaScript这个名字的原意是“很像Java的脚本语言”。
在JavaScript语言中,函数是一种独立的数据类型,以及采用基于原型对象(prototype)的继承链。这是它与Java语法最大的两点区别。JavaScript语法要比Java自由得多。
另外,Java语言需要编译,而JavaScript语言则是运行时由解释器直接执行。
总之,JavaScript的原始设计目标是一种小型的、简单的动态语言,与Java有足够的相似性,使得使用者(尤其是Java程序员)可以快速上手。
浏览器的渲染机制
- 解析HTML,构建DOM树
- 解析CSS,构建CSSOM
- 将DOM与CSSOM组成渲染树
- 根据渲染树计算页面布局及节点的几何结构
- 把所有节点绘制在屏幕上
样式、JS 在 HTML 中如何放置?
样式置于HTML<head>里面用link
引入
JS置于<body>标签内,放在所有HTML元素之后(因为脚本会阻塞后面内容的呈现和阻塞其后组件的下载)
解释白屏和 FOUC
白屏和FOUC(Flash of Unstyled Content 无样式内容闪烁)的出现是由于不同浏览器对HTML和CSS处理不同造成的,部分浏览器先将HTML和CSS加载完毕,再对页面进行渲染,而在浏览器加载HTML和CSS的时间内并没有内容显示,这就造成了白屏问题;FOUC(无样式内容闪烁),是由于部分浏览器先对HTML展示,等待CSS加载完成之后在对样式进行修改,因此导致FOUC。
介绍下 repaint和 reflow的概念(可选)
reflow:浏览器根据各种样式(浏览器默认、开发人员定义等)计算各个元素的盒模型所应在的位置,并根据计算结果将元素置于其应在的位置的过程;
repaint:各元素的属性全部确定下来之后,浏览器按照这些元素的特性将其绘制出来的过程。
如何异步加载脚本
使用defer或async
使用 async使加载和渲染后续文档元素的过程将和js脚本的加载与执行并行进行;
使用defer使加载后续文档元素的过程将和js脚本的加载并行进行,但js脚本的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。