浏览器加载机制&白屏和FOUC演示

1、如何异步加载脚本？

一般情况下，浏览器在加载js文件时，会阻塞其他组件的加载，因为js可能会改变页面结构或js之间的依赖关系，但特殊情况下，如果要求js文件异步加载，一般可通过以下几种手段：

a、为Script增加async属性，当浏览器解析到具有async属性的script文件时，会异步去加载解析执行脚本；

b、script标签里可以设置defer，表示延迟加载脚本：浏览器解析到HTML里的该行script标签，发现指定为defer，会暂缓下载解析执行脚本。而是等到页面加载完毕后，才加载脚本（更精确地说，是在DOM树构建完成后，在window.onload触发前，加载defer的脚本）。

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

ES，即ECMAScript的简写，ES3指的是1999年发布的ECMAScript 3.0版本，成为JavaScript的通行标准，得到广泛支持；

ES5，为了功能强化，版本升级，2007年，开发商提出ECMAScript 4.0草案，对于ES3版本做了大幅升级，但后期Microsoft、Google等大公司对于这过度激进的方案表示分歧，最终4.0版本停止发布，仅仅将其中一些小的改进保留，以ECMAScript 3.1版本发布，之后3.1版本改名ECMAScript 5，即ES5；

ES6，2013年ES6草案发布，2015年ECMAScript 6正式发布，并更名为ECMAScript 2015。

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

浏览器向服务器发送的请求得到响应后，接收到对应的Html、css和js文件，浏览器首先根据html解析出对应的DOM树，根据加载的css解析每个节点对应的CSSOM树并将DOM树和CSS树结合组成渲染树，然后根据渲染树对每个节点元素进行布局，之后按照布局在页面上绘制出对应的页面。

4、repaint 和 reflow 分别指什么？

repaint/reflow意为“重新绘制”/“重新解析”，在浏览器展示每一个页面的时候，其DOM结构中的每个元素都有对应的盒模型，这些都需要浏览器根据各种样式来计算并根据计算结果来对每一个元素进行布局，当DOM结构中的某一个或多个发生样式改变导致页面布局发生改变，此时浏览器会对整个页面元素进行重新布局，这个过程就是reflow；

当某个节点仅仅是简单样式发生轻微改变，如字体颜色、背景等不涉及到整体布局变化的改变时，浏览器会将页面进行重新绘制，而无需进行重新布局，这种情况就是repaint。

存在reflow的情况下一定需要repaint。

5、解释白屏和 FOUC。

白屏指的是渲染页面所需的文件未完全加载或js加载执行过程阻塞页面内容展现的过程中页面完全空白的现象，取决于不同浏览器的页面展示机制，如Chrome必须要在所有样式完全加载完毕才会去统一展现整个页面，此时，如果css加载速度较慢，在css加载的这段时间内，浏览器就会出现白屏；

FOUC (Flash of Unstyled Content)，即“无样式内容闪烁”，以Firefox浏览器的页面展示机制为例，其DOM元素在样式未完全加载也会以当前加载的样式展现在页面上，DOM元素样式在加载过程中需要一定的时间，随着样式的逐步加载，页面内容样式逐步变化，当样式文件完全加载后，页面展示对应最终样式，这就是无样式内容闪烁。