1、CSS和JS在网页中的放置顺序是怎样的？
浏览器对于HTML的解析是自上而下逐行解析的，JS下载时会阻塞下面内容的下载，所以我们一般使用 link 标签将css文件链接放在head内，并将JS文件链接放在body底部，需要注意到的是，由于ji的执行机制，js的依赖要放在js文件的前面，比如如果页面内要用到jquery，那么jQuery.js这个依赖文件就要放在js文件的前面。
2、解释白屏和FOUC
白屏现象：浏览器在解析HTML时遇到JS就会立即下载，会停止下面的html以及css的下载，所以当我们把JS文件放在HTML的head里面时，浏览器在下载JS文件间的间隙时，会阻止其他内容的下载，此时浏览器出现白屏现象。
FOUC现象：首屏闪烁现象，主要是因为浏览器的渲染方式的不同，打个比方男孩子开车接女孩子去参加舞会，当男孩子到达女孩家门口后，女孩还没化好妆，此时女孩有两中选择，一是等化好妆再走，二是先上车边走边化妆，这就对应着chrome 以及火狐浏览器的渲染方式，chrome是等CSS下载完成之后在渲染，火狐则是边下载边渲染，下载完成之后可能会对页面整体进行重绘，这就是首屏闪烁，FOUC。
3、async和defer的作用是什么？有什么区别
作用：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
区别：defer:脚本延迟到文档解析和显示后执行，有顺序；async:不保证顺序
4、简述网页的渲染机制
简单页面渲染分几个步骤(chrome)；
a)解析 HTML 标签, 构建 DOM 树
b)解析 CSS 标签, 构建 CSSOM 树
c)把 DOM 和 CSSOM 组合成 渲染树 (render tree)
d)在渲染树的基础上进行布局, 计算每个节点的几何结构
e)把每个节点绘制到屏幕上 (painting)
网友评论