JS相关概念总结

简单介绍JavaScript的发展历史

JavaScript因互联网而生，回顾它的历史要从浏览器的历史讲起。

• 1990年底，欧洲核能研究组织科学家Tim Berners-Lee发明了万维网（World Wide Web），但只能在操作系统的终端里浏览和操作，非常不方便。
• 1992年底，美国国家超级电脑应用中心开发了人类历史上第一个浏览器Mosaic，从此网页可以在图形界面的窗口浏览。
• 1994年10月，NCSA的主要程序员Marc Andreessen联合风险投资家Jim Clark，成立了Mosaic通信公司，后改名为Netscape。这家公司的方向，就是在Mosaic的基础上，开发面向普通用户的新一代的浏览器Netscape Navigator。
• 1994年12月，Navigator发布了1.0版，该公司很快发现浏览器需要一种可嵌入网页的脚本语言来控制浏览器行为。
  管理层对这种浏览器脚本语言的设想是：功能够用，语法简单，容易学习。当时就职于Netscape的Brendan Eich着手计划于1995年2月发布的Netscape Navigator2开发LiveScript脚本语言，那年正逢Sun公司的Java语言问世，市场推广活动非常成功，为赶在发布日期前完成LiveScript开发，Netscape公司与Sun公司建立了开发联盟。
• 1995年5月，Brendan Eich只用了10天，就设计完成了LiveScript第一版，所以这门语言比较随意。
• 1995年12月，Netscape公司与Sun公司达成协议，后者允许将这种语言叫做JavaScript，于是Netscape在二代浏览器问世前顺利蹭到了java的热度，场面一度十分火爆。
• 1996年3月，Navigator 2.0浏览器正式内置了JavaScript脚本语言。
• 1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript。
• 1996年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA，希望JavaScript能够成为国际标准，以此抵抗微软。
• 1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。日常场合这两个词是可以互换的。
• 1998年6月，ECMAScript 2.0版发布。
• 1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
• 2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。
• 2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本），将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，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草案冻结，不再添加新功能。
• 2013年12月，ECMAScript 6草案发布。
• 2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。
• 2016年6月，《ECMAScript 2016标准》发布。

简述网页的渲染机制

1. 解析HTML标签，构建DOM树
2. 解析CSS标签，构建CSSOM树
3. 把DOM和CSSOM组合成渲染树
4. 在渲染树的基础上布局，计算每个节点的几何结构
5. 把每个节点绘制到屏幕上

CSS和JS在网页中的放置顺序是怎样的？

1. css放入head中，link引入样式表和写在head內的style标签里都可以，也可以直接在元素中写入样式，但注意要放在js脚本之前。

2. js放置位置：

• 放入body底部，之前。
• 放入head中同时使用defer或async来延迟或异步加载js。
• 使用creatElement动态生成但要注意加载顺序。
• 用ajax加载。

原因：当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染。原因是因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，这就是JS阻塞后续资源下载的根本原因，即无论当前JS代码是内嵌还是在外部文件中，页面的下载和渲染都必须停下来等待脚本执行完成，JS执行过程越久，浏览器等待响应用户输入的时间就越长，所以尽量把JS放在底部、设置script标签的defer或async属性、合并脚本等方法可起到性能优化效果。

解释白屏和FOUC

1. 白屏：

• 对IE来说，把样式放在底部时，在某些场景下（如打开新窗口／刷新页面等）页面会出现白屏，而不是内容逐步展现。
• 如果使用@import标签，即使将CSS写入外部样式表由link引入并放在头部，也可能出现白屏。
• 把js文件放入页面顶部而未使用defer或async延迟或异步加载js文件，从而阻塞html与css的加载也会导致白屏。
• 另外：Chrome会同时加载html和css分别构建DOM树和CSSOM树，等到二者都构建完成后再绘制渲染树，然后显示出页面，当外部css样式表设置了延时或者加载的时间比较久时就会显示出白屏，与浏览器的渲染机制有关。

2. FOUC：
   Flash of unsettled content：无样式内容闪烁。对IE来说，把样式放在底部时，在某些场景下（如点击链接、输入URL、使用书签进入等）页面会出现FOUC现象，具体表现为逐步加载无样式的内容，等CSS加载完成后页面突然展现样式；对Firefox来说会先显示已加载的html内容，再逐步加载无样式内容，等css全部加载完成后页面突然展现样式，所以Firefox会一直表现出FOUC。

async和defer的作用是什么？有什么区别

async和defer用于异步或延迟加载脚本。
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是读到就加载并执行。也就是说脚本会阻塞其后内容的解析和执行。

1. 作用：

• async（异步）：定义了async属性的脚本相对于页面的其他部分异步执行（同时执行），作用是不让页面等待两个或以上的脚本下载和执行，从而异步加载页面的其他内容。

以上代码中evample2.js可能会在example1.js之前执行，所以确保二者之间互不依赖很重要。

• defer（延迟）：定义了defer属性的脚本会被延迟到整个页面都解析完毕后再执行。

以上代码中虽然我们把