初识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。
• Netscape公司很快发现，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为。1995年，Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言。5月，Brendan Eich只用了10天，就设计完成了这种语言的第一版。它是一个大杂烩，语法有多个来源。
• Netscape公司与Sun公司（Java语言的发明者和所有者）达成协议，后者允许将这种语言叫做JavaScript。这样一来，Netscape公司可以借助Java语言的声势，而Sun公司则将自己的影响力扩展到了浏览器。
• 1996年3月，Navigator 2.0浏览器正式内置了JavaScript脚本语言。
• 1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript。Netscape公司面临丧失浏览器脚本语言的主导权的局面。
• 1996年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA，希望JavaScript能够成为国际标准，以此抵抗微软。
• 1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。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月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本），将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本。会后不久，ECMAScript 3.1就改名为ECMAScript 5。
• 2009年12月，ECMAScript 5.0版正式发布。
• 2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。到了2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能。
• 2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。
• 2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
• 2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。下一个版本在2016年发布，称为“ECMAScript 2016”。

简述页面的渲染机制

• 解析 HTML 标签, 构建 DOM 树
• 解析 CSS 标签, 构建 CSSOM 树
• 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
• 在渲染树的基础上进行布局, 计算每个节点的几何结构

• 把每个节点绘制到屏幕上 (painting)

  
  
  

样式、JS 在 HTML 中如何放置?

• 使用 link 标签将样式表放在顶部
• 将JS放在底部
  1.脚本会阻塞后面内容的呈现
  2.脚本会阻塞其后组件的下载

解释白屏和 FOUC

• 白屏是由于把script标签放在了head头部进行加载，由于script标签的特性会阻碍其他文件加载，必须等待脚本加载完毕，其他资源才能进行加载显示，应该放在body的尾部进行加载避免白屏，把CSS文件放在底部同样也会造成白屏，用@import也会。
• FOUC(flash of unstyled cotent)无样式内容闪烁：是由于把css的link标签放在了HTML标签后面，那么浏览器就会先渲染到HTML标签展示无样式的标签，等到加载到对应的CSS样式后，会进行重绘，回流，造成无样式闪烁。

如何异步加载脚本

• 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
• 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
• 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

介绍下 repaint和 reflow的概念