你需要了解的JavaScript（一）

2017-08-24 本文已影响0人左冬的博客

JavaScript的发展历史

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

1990年底，欧洲核能研究组织（CERN）科学家Tim Berners-Lee，在互联网的基础上发明了万维网（World Wide Web）。但是只能使用命令行操作，非常不方便。
1992年底，美国国家超级电脑应用中心（NCSA）开发了一个叫做Mosaic的独立浏览器。这是人类历史上第一个浏览器，从此网页可以在图形界面窗口浏览。
1994年10月，NCSA程序员Marc Andreessen联合风险投资家Jim Clark成立了Mosaic通信公司，而后改名为Netscape。在Mosaic浏览器的基础上开发新一代浏览器Netscape Navigator。
1994年12月，Navigator发布1.0版，很快Netscape公司认为Navigator浏览器需要一种能嵌入网页脚本的语言来控制浏览器行为。当时网速很慢且价格昂贵，有些操作不宜在服务器端完成，如用户名忘记填写“用户名”就点击了发送，到服务器再发现就太晚了。所以需要在网页中嵌入小程序让浏览器检查每一栏是否都已填写。
管理层希望这种浏览器脚本语言：功能不需要太强，语法简单，容易学习和部署。那一年正逢Sun公司的Java语言问世，Netscape与Sun公司合作，决定脚本语言语法接近Java，并支持Java程序。
1995年5月，程序员Brendan Eich以Scheme语言为蓝本设计完成了这种语言的第一版。
1995年9月，这种浏览器脚本语言由最初的Mocha更名为LiveScript.
1995年12月，这种浏览器脚本语言的命名由最初的Mocha到LiveScript，最终改名为JavaScript。
1995年12月4日，Netscape与Sun公司联合发布了JavaScript语言。
1996年3月，Navigator 2.0浏览器正式内置了JavaScript脚本语言。
1996年8月，微软模仿JavaScript开发了一种相近的语言取名为JScript，内置IE 3.0。
1996年11月，Netscape决定将JavaScript提交给国际标准化组织 ECMA，希望JavaScript成为国际标准，以此抵抗微软。
1997年7月，ECMA发布（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月发布正式版本。由于以Yahoo，Microsoft，Google为首的大公司反对大幅升级主张小幅改动，4.0版未能正式发布。
2008年7月，由于各方分歧太大，ECMA决定终止ECMAScript 4.0的开发，改善其一小部分，发布为ECMAScript3.1。
2009年12月，ECMAScript5.0正式发布。
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。到了2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能。
2013年3月，ECMAScript 6草案冻结，不再添加新功能。
2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。
2016年6月，《ECMAScript 2016标准》发布。

浏览器的渲染机制

解析 HTML 标签, 构建 DOM 树:
渲染引擎开始解析HTML文档，转换树中的html标签或JS生成的标签到DOM节点，它被称为--内容树
解析 CSS 标签, 构建 CSSOM 树
解析CSS（包括外部CS文件和样式元素以及JS生成的样式）
把 DOM 和 CSSOM 组合成渲染树 (render tree)
根据CSS选择器计算出节点的样式，创建另一个树--节点树
布局渲染树
从根节点开始计算每个元素的大小，位置等，给每个节点所应该出现在屏幕上的精确坐标。
绘制渲染树
遍历渲染树，把每个节点绘制到屏幕上

白屏&FOUC (Flash of Unstyled Content) 无样式内容闪烁

不同的浏览器资源加载方式不同，或者有不同的渲染机制，所以会出现白屏或者FOUC。

白屏：对于Chrome浏览器，它的处理机制是白屏。Chrome浏览器会等所有CSS加载并解析完成，CSSOM计算完成后才会把全部的页面展示出来，所以在这个解析时间中页面会出现白屏。
FOUC：对于Firefox浏览器，它的处理机制是FOUC。Firefox浏览器在解析html时不会等待CSS的加载，所以页面会先将解析的html展现在页面上。当CSS加载完成后，页面的内容样式会根据你所设定的样式发生改变，也就是无样式内容闪烁。

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

样式可以直接写在<head>的<style>标签中，或者在<head>中使用<link>标签引入外部样式文件，需要优先加载。
JS放在</body>标签之前，通常有两种引入方式，直接放在<script>标签中，或通过<script src=" ">引入外部JS文件。另，也可以放入<head>中,同时使用defer或async来延迟或异步加载JS。

推荐引入方式

将JS放在底部原因：
脚本加载后会立刻执行，JS的加载会影响页面内容的渲染
脚本会阻塞后面内容的呈现
脚本会阻塞其后组件的下载
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象.

Repaint 和 Reflow

页面设计中，不可避免的需要进行repaint和reflow。

Repaint：重绘
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。就称为重绘。
Reflow：回流
当渲染树中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

回流必引起重绘，而重绘不一定引起回流。

在性能优先的前提下，性能消耗reflow大于repaint，下文将重点总结关于reflow的触发场景及优化。

触发reflow的场景：
1. 调整窗口大小（Resizing the window）
2. 改变字体（Changing the font）
3. 增加或者移除样式表（Adding or removing a stylesheet）
4. 内容变化，比如用户在input框输入文字（Content changes, such as a user typing text in）
5. 激活CSS伪类，比如 :hover（Activation of CSS pseudo classes such as :hover）
6. 操作class属性（Manipulating the class attribute）
7. 脚本操作DOM（A script manipulating the DOM），如appendChild
8. 设置style属性的值（Setting a property of the style attribute）
  repaint
优化
对于性能，Opera列出 reflow 和 repaint 是减缓JavaScript的三大主要原因之一，所以如何避免 reflow 或将它们对性能的影响降到最低？
1. 如果想设定元素的样式，通过改变元素的class名（尽可能在DOM树的末端）（Change classes on the element you wish to style (as low in the dom tree as possible )）
  不要一条一条的修改DOM的样式。最好预先定义好CSS的class，然后修改DOM的className.
2. 避免设置多项内联样式（Avoid setting multiple inline styles）
  因为每个都会造成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。
3. 应用元素的动画，使用position属性的fixed值或absolute值（Apply animations to elements that are position fixed or absolute）
  动画效果应用到position属性为absolute或fixed的元素上，它们不影响其他元素的布局，这时修改它们的CSS会大大的减少reflow
4. 权衡平滑和速度（Trade smoothness for speed）
  Opera还建议我们牺牲平滑度换取速度，其意思是指您可能想每次1像素移动一个动画，但是如果此动画及随后的回流使用了100%的CPU，动画就会看上去是跳动的，因为浏览器正在与更新回流做斗争。动画元素每次移动3像素可能在非常快的机器上看起来平滑度低了，但它不会导致CPU在较慢的机器和移动设备中抖动。
5. 避免使用table布局（Avoid tables for layout）
  因为即使一些小的变化将导致表格(table)中的所有其他节点回流。
6. 把 DOM 离线后修改。如：
  a> 使用 documentFragment 对象在内存里操作 DOM。
  b> 先把 DOM 给 display:none (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。
  c> clone 一个 DOM 节点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。
7. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
  会及时更新好的优化方法...

如何异步加载脚本

<script>的六个属性

async：异步脚本可选，表示立即下载脚本，但不妨碍页面中其他操作，只对外部脚本有效。
defer：延迟脚本可选，表示脚本可以延迟到文档完全被解析和显示之后在执行，只对外部脚本有效。
charset：可选，表示通过src属性指定的代码的字符集，由于大多数浏览器会忽略这个值，因此属性很少用。
src：可选，表示包含要执行的外部文件。
language：已废弃。
type：可选，可以看成是language的替代属性。

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

defer：脚本延迟到文档解析和显示后执行，有顺序
async：不保证顺序（用于广告，统计之类，不会影响到页面的元素）