1.CSS和JS在网页中的放置顺序是怎样的
css的放置位置是在head中，这是由于浏览器的渲染过程决定的，这样可以防止在IE中出现白屏。
js的放置位置一般是在body的闭合标签之前，因为js一般会涉及到一些DOM操作，所以要等全部的dom元素都加载完再加载js。还有一个原因是相对于页面中的图片或css来说js是阻塞的，css和图片是可以同步加载的，但是js要执行完之后才能加载后面的内容，如果把js放在前面可能会造成白屏的现象。
2.解释白屏和FOUC
白屏的根本原因是浏览器在渲染的时候请求时间过长造成的。
如果把样式放在底部，对于IE浏览器，页面会出现白屏，而不是内容逐步展现
如果使用@import，即使css放入link，也可能出现白屏
js脚本会阻塞后面内容的呈现和其后组件的下载，在加载js时，会禁用并发，并且阻止其他内容的下载。所以将js放在页面的顶部也可能会导致白屏。
FOUC(flash of unstyled content)无样式内容闪烁，这是firefox浏览器的解析原理造成的，会先把和html解析出来渲染到页面上，然后再不断加载cssdom再不断重新渲染将最终的结果逐步呈现。
3.async和defer的作用是什么？有什么区别
（1）没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
（2）有async，加载和渲染后续文档元素的过程和src中的js文件的加载与执行并行进行。(异步)
（3）有defer，加载后续文档元素的过程和src中js文件的加载并行进行（异步），但是执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
image
4 简述网页的渲染机制
首先解析html标签形成，DOM树
然后解析css，构建cssom树
把DOM和CSSOM组合成渲染树（render tree）。
在渲染树的基础上进行布局，计算每个节点的几何结构。
把每个节点绘制到屏幕上（painting）。
网友评论