- CSS和JS在网页中正确的放置顺序
(1)css样式一般是放在head中的，避免加载不了出现白屏 闪烁等问题。
(2)js一般情况下是放在页面的body标签中的最下方，最后加载，避免阻塞其他元素的渲染。
根据实际情况，应用 defer 和 async 使用，可放在顶部
- 出现的白屏和FOUC问题
白屏就是在浏览器在打开渲染页面时，由于样式在底部， 没有及时加载到，出现页面空白一片，没有内容展现的情况
白屏不是BUG,而是浏览器机制造成的一种现象
可能出现白屏的问题的情况：
- css样式放置在页面的底部.
- css文件使用@import 标签，css又放入到link外链
- jsf放在页面的顶部，也会导致白屏
FOUC，First Of Unstyle Content ，叫做无样式内容闪烁，
当将样式放在底部，对于IE 浏览器在某些场景下（点击链接、 输入URL、使用书签进入等），逐步加载无样式的内容，等css样式加载后页面“突然”展现样式
FIREFOX火狐 浏览器会经常出现 FOUC
当样式放在页面的底部后，浏览器会出现白屏和闪烁的问题
为了解决这些问题，所以将css样式放在head中
- async和defer的作用
正常情况下，在浏览器解析到js文件时， 禁用并发请求，js不能并发请求，并阻塞js脚本后的内容的加载和组件的下载。
作用 都是加载异步，解决了加载js时 对后面渲染的影响，
当前页面加载，不会影响页面的渲染。
js脚本与后续的元素内容 加载并发执行（异步）。
- async defer 的区别：
- <script async src="index.js"></script>
- async 不保证js顺序，所有的脚本并发加载完就会执行。当并发加载的其他js脚本，虽然位置在其之后，有可能先加载完也先执行了。
- <script defer src="index.js"></script>
defer 保证js顺序，js文件在所有元素解析完成后才加载执行
- 简述网页的渲染机制
(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相关渲染问题
网友评论