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)