浏览器渲染及注意问题

1. CSS和JS在网页中正确的放置顺序

(1)css样式一般是放在head中的，避免加载不了出现白屏 闪烁等问题。
(2)js一般情况下是放在页面的body标签中的最下方，最后加载，避免阻塞其他元素的渲染。
根据实际情况，应用 defer 和 async 使用，可放在顶部

2. 出现的白屏和FOUC问题

白屏就是在浏览器在打开渲染页面时，由于样式在底部， 没有及时加载到，出现页面空白一片，没有内容展现的情况
白屏不是BUG,而是浏览器机制造成的一种现象
可能出现白屏的问题的情况：

1. css样式放置在页面的底部.
2. css文件使用@import 标签，css又放入到link外链
3. jsf放在页面的顶部，也会导致白屏

FOUC，First Of Unstyle Content ，叫做无样式内容闪烁，
当将样式放在底部，对于IE 浏览器在某些场景下（点击链接、 输入URL、使用书签进入等），逐步加载无样式的内容，等css样式加载后页面“突然”展现样式
FIREFOX火狐 浏览器会经常出现 FOUC
当样式放在页面的底部后，浏览器会出现白屏和闪烁的问题
为了解决这些问题，所以将css样式放在head中

3. async和defer的作用

正常情况下，在浏览器解析到js文件时， 禁用并发请求，js不能并发请求，并阻塞js脚本后的内容的加载和组件的下载。

作用 都是加载异步，解决了加载js时 对后面渲染的影响，
当前页面加载，不会影响页面的渲染。
js脚本与后续的元素内容 加载并发执行（异步）。

4. async defer 的区别：

• async 不保证js顺序，所有的脚本并发加载完就会执行。当并发加载的其他js脚本，虽然位置在其之后，有可能先加载完也先执行了。
• 
  defer 保证js顺序，js文件在所有元素解析完成后才加载执行

4. 简述网页的渲染机制

(1) 解析html标签，构造DOM树
(2) 解析css标签，构造CSSOM树
(3)DOM和CSSOM组成渲染树Render Tree;
(4)在渲染树的基础上布局，计算出每个节点的几何结构
(5)把每个节点绘制到屏幕上显示

浏览器渲染的流程图

详细渲染过程
输入URL，浏览器会向服务器发出请求，服务器响应浏览器返回对应的资源，浏览器的HTML解析器就会解析文件，创建DOM树。当解析html标签时，遇到了js或css元素，那么就先解析js或css元素，将控制权交给js或css解析器。解析完成后，HTML解析器再继续解析下面的标签，直到完成整颗DOM树。
DOM树与CSSOM树合并，生成渲染树
根据渲染树计算出各个节点在屏幕中的位置，最后绘制到屏幕显示。

注意区别的一点：
当解析CSS时，请求CSS，然后继续解析下面的元素，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就可以了。
但当引用了JS的时候，浏览器发送一个JS request就会一直等待该request的返回。

DOM \ CSSDOM \Render Tree图

渲染机制详解
详解2
DTD相关渲染问题