CSS和JS在网页中的放置顺序是怎样的？
CSS放置在head标签内。
JS放置在body标签底部。
解释白屏和FOUC
导致白屏的原因是
- 如果把样式放在底部,对于IE或者chrome浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现（html解析完毕才开始请求下载解析CSSOM。）
- 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏（import请求新的CSS时间可能过长）
所以不用@import，把样式用link标签放在顶部
FOUC (Flash of Unstyled Content) 无样式内容闪烁
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
async和defer的作用是什么？有什么区别
正常来讲，当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。
当使用async和defer属性时。
两者都是异步加载js脚本。(即脚本加载和html解析同时进行。)
但是async是加载完毕立即执行，而defer是等html解析完毕以后才执行
并且，对于defer，它是按照加载顺序执行脚本的，这一点要善加利用
async 则是脚本的加载和执行是紧紧挨着的，所以不管声明的顺序如何，只要它加载完了就会立刻执行，不会按顺序来。
简述网页的渲染机制
解析 HTML 标签, 构建 DOM 树
解析 CSS 标签, 构建 CSSOM 树
把 DOM 和 CSSOM 组合成 渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制到屏幕上 (painting)
网友评论