本文主要向大家介绍了机器人之浏览器加载机制&白屏和FOUC，通过具体的内容向大家展现，希望对大家学习机器人有所帮助。

1. 如何异步加载脚本？

用defer或者async

defer是有顺序的，等文档读取和解析完成之后，再开始解析脚本。

async是不保证顺序的，读取和解析文档的过程会和解析脚本的过程同时进行。

2. ES3、ES5、ES6分别指什么？

国际标准化组织ECMA（European Computer Manufacturers Association）规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。ES3 就是1999年12月发布的ECMAScript 3.0版，成为JavaScript的通行标准，得到了广泛支持。

2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本），将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5就是 ES5。

Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6也就是ES6

3. 解释浏览器的渲染机制

首先先解析HTML中的内容创建一个DOM树，再解析CSS的样式成一个树的形状。
把上述两个树结合起来就得到一个对象，不单有元素还有他的具体位置和关系。这就是渲染树。
然后开始布局计算出每个节点的位置，将每个节点绘制到页面上。

4. repaint 和 reflow 分别指什么

reflow当某一处的位置发生变化时，其他地方的位置都需要重新的计算位置并布局。需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置。

reflow一般都会有repaint，当某元素的尺寸和位置发生变化时，会带动着使其他元素都需要重新绘制repaint。
但当只需要改变某个元素颜色等就只需要单独重绘。
浏览器将各自元素的特性都绘制一遍就是repaint

5. 解释白屏和 FOUC。

白屏：就是在加载一个网页时，屏幕是白色的，之后全部样式才呈现。 如果把样式放在文档底部,浏览器会等HTML和CSS完全加载完成之后再绘制到屏幕上去，譬如我们打开某些国外的网站可能出现加载时间过长，页面会出现白屏,而不是内容逐步展现。
使用 @import 标签，即使 CSS 放入 link, 并且放在头部,也可能出现白屏。

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。 但在加载 JavaScript 时，会禁用并发，并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.

FOUC： 就是当加载一个网页时，首先会出现一些内容但是样式并没有完全加载好，过一段时间后样式才发生变换。或者样式时一个个加载并呈现的。
如果把样式放在底部,对于FireFox浏览器，会逐步加载无样式的内容，等CSS加载完成之后突然展现样式。
这是由于FireFox的渲染逻辑是解析HTML就会直接画到页面上，这时你会看到没有样式的内容，CSS再通过不断的解析将页面重绘一遍，也就是闪烁一下突然展现样式，这就是FOUC。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标人工智能智能机器人频道！