面試考題: 畫面閃爍

1.

避免畫面閃爍，圖片先加上width, height，讓她不會從無到有，而是一開始就有框

2.

 https://juejin.cn/post/6844903474954502151

解秘 FOUC

前言

 对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密FOUC。

P.S. ever green browser means 會自動更新到最新版的瀏覽器，Chrome, Mozilla Firefox, Safari都是Evergreen Browser.

到底什么是FOUC？

 页面加载解析时，页面以样式A渲染；当页面加载解析完成后，页面突然以样式B渲染，导致出现页面样式闪烁。
 样式A，浏览器默认样式 或 浏览器默认样式 层叠 部分已加载的页面样式；
 样式B，浏览器默认样式 叠加 全部页面样式。

为什么会出现FOUC

 我们了解当输入网址按回车后浏览器会向服务器发送请求，然后服务器返回页面给浏览器，浏览器边下载页面边解析边渲染。
下面我们解剖一下边下载页面边解析边渲染的过程:

1. 边下载边解析就是边下载html边构建DOM Tree;
2. 浏览器以user agent stylesheet(浏览器内置样式)为原料构建CSSOM Tree;
3. DOM Tree+CSSOM Tree构建出Render Tree，然后页面内容渲染出来;
4. 当解析到inline stylesheet 或 internal stylesheet时，马上刷新CSSOM Tree，CSSOM Tree或DOM Tree发生变化时会引起Render Tree变化;
5. 当解析到external stylesheet时就先加载，然后如internal stylesheet那样解析和刷新CSSOM Tree和Render Tree了。
    上述步骤5中由于样式文件存在下载这个延时不确定的阶段，因此网络环境不好或样式资源体积大的情况下我们可以看到样式闪烁明显。
    这就是为什么我们将external stylesheet的引入放在head标签中的原因，在body渲染前先把相对完整的CSSOM Tree构建好。但大家都听说过script会阻塞html页面解析(block parsing)，而link不会，那假如网络环境不好或样式资源体积大时，body已经解析并加入到DOM Tree后，external stylesheet才加载完成，不是也会造成FOUC吗？
   
    style,link等样式资源的下载、解析确实不会阻塞页面的解析，但它们会阻塞页面的渲染(block rendering)。