走进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的作用是什么？有什么区别

通常情况下,当浏览器碰到

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

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

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