走进JavaScript

JavaScript的发展历史

1995年12月4日，Netscape公司与Sun公司联合发布了JavaScript语言。
1996年3月，Navigator 2.0浏览器正式内置了JavaScript脚本语言。
1997年7月，ECMAScript 1.0发布，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
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版的全部功能。
2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。这是因为TC39委员会计划，以后每年发布一个ECMAScirpt的版本，下一个版本在2016年发布，称为“ECMAScript 2016”。

浏览器的渲染机制

浏览器解析

• 浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。
• 解析HTML标签，开始构建DOM Tree
• 解析CSS标签，开始解析和构建CSS Rule Tree
• Javascript 脚本文件加载后， 通过DOM API和CSSOM API来操作DOM Tree 和CSS Rule Tree

浏览器渲染

• 浏览器把 DOM 和 CSSOM 组合成 渲染树 (render tree)
• 在渲染树的基础上进行布局, 计算每个节点的几何结构
• 通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout
• 最终把每个节点绘制到屏幕上 (painting)

image.png

CSS 和 JS 放置顺序

• CSS应该使用 link 标签放在页面顶部的head标签中
  html页面需要等到CSS解析完后才能完成渲染，所以CSS应放在head标签内，优先下载解析，以避免页面元素由于样式缺失造成白屏或者内容闪烁。

• JS应该放在body标签的底部
  如果将JS放在head里面，浏览器就率先发现head里面有JS标签并暂时停止其他渲染行为，这样就会阻塞后面内容的呈现，等待JS下载并执行完成才能接着往下渲染，也会阻塞其后组件的下载。

白屏 和 FOUC

浏览器在对于图片和CSS, 加载时会并发加载，也就是同时加载几个文件。但在加载 JS 时,会禁用并发,并且阻止其他内容的下载。

白屏

• 不同的浏览器对于CSS和HTML的处理方式不同，比如像IE、chrome，采用的是等CSS全部加载解析完后再渲染展示页面。
• 对于白屏的出现情况往往因为CSS样式被置于底部（最后加载）,当新窗口打开,刷新等的时候，页面会出现白屏。
• 如果使用 @import标签，即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
• 当JavaScript被置于顶部时，会禁用并发，并且阻止其后的文件的加载及组件的下载，这时候也会出现白屏的情况。

FOUC

• 像Firefox浏览器是先逐步加载无样式的内容,等CSS加载后页面突然展现样式，也就是FOUC无样式内容闪烁。
• 如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等)，也会出现 FOUC 现象。

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

通常情况下,当浏览器碰到<script>标签时,浏览器会立即加载并执行指定的脚本，并且阻塞后续的页面渲染。

• 有async时，加载和渲染后续文档元素的过程将和 js脚本 的加载与执行并行进行（异步）。有 async 的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。
• 有 defer的情况下，加载后续文档元素的过程将和 js脚本 的加载并行进行（异步），但是 js脚本 的执行要在DOM加载完成之后，DOMContentLoaded 事件触发之前完成。

1.defer 和 async 在网络读取（下载）这部分是一样的，都是异步的（相较于 HTML 解析）。
2.两者的差别在于脚本下载完之后何时执行，defer是按照加载顺序执行脚本的，这一点要善加利用。
3.async 则是乱序执行，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。

Repaint 和 Reflow

当用户在浏览网页时进行交互或通过 js 脚本改变页面结构时，以上的部分操作有可能重复运行，此过程称为 Repaint 或 Reflow。

Repaint
当元素改变的时候，将不会影响元素在页面当中的位置，浏览器仅仅会应用新的样式重绘此元素，于是页面的内容出现了，此过程称为 Repaint。

Reflow
对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，如果某元件的几何尺寸发生了变化，需要重新布局，这个过程称之为reflow。

Reflow的成本比Repaint的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。

参考：Repaint 、Reflow 的基本认识和优化 (2)

如何异步加载脚本

defer和asnyc是脚本异步加载的两种方式。
由于JS的加载会阻塞文档的渲染和其他的加载，并且立即执行。所以出现了async和defer。

<script async src="script.js"></script>

加入async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）下载完毕立即解释执行代码。

<script defer src="script.js"></script>

加入defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

• 如果有多个声明了defer的脚本，则会按顺序下载和执行。
• 如果有多个声明了async的脚本，其下载和执行也是异步的，但不能确保彼此的先后顺序