CSS和JS在网页中的放置顺序是怎样的？
css 一般放在html文件的<head></head>标签中
js 一般放在<body></body>的底部
解释白屏和FOUC
不同浏览器的处理CSS和HTML的方式是不同的，这就造成了白屏和FOUC问题的差异。
比如，IE、chrome浏览器的渲染机制，采用的是等CSS全部加载解析完后再渲染展示页面。
Firefox则是在CSS未加载前先展示html的内容，等CSS加载后重新对样式进行修改。
白屏
白屏的根本原因是浏览器在渲染的时候请求时间过长造成的。
如果把样式放在底部,对于 IE 或者 chrome 浏览器,,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
如果把 JavaScrip 放在头部，因为脚本会阻塞后面内容的呈现和其后组件的下载。对于图片和 CSS，在加载时会并发加载（如一个域名下同时加载两个文件），但在加载 JavaScript 时，会禁用并发，并且阻止其他内容的下载。所以把 JavaScript 放入页面顶部也会导致白屏现象。
FOUC -- Flash of Unstyled Content 无样式内容闪烁
如果把样式放在底部：
对于 IE 浏览器，在某些场景下(点击链接,输入 URL ,使用书签进入等)，会出现 FOUC 现象(逐步加载无样式的内容,等 CSS 加载后页面突然展现样式)。
对于 Firefox 会一直表现出 FOUC 。
async和defer的作用是什么？有什么区别
1.没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是会打断后面HTML的解析，只有等该脚本执行完成后，浏览器才继续解析后面的HTML文档元素。
- async， 脚本延迟到文档解析和显示后执行，有顺序,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
- defer，不保证顺序.加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
简述网页的渲染机制
(1) 解析 HTML 标签, 构建 DOM 树
(2) 解析 CSS 标签, 构建 CSSOM 树
(3) 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
(4) 在渲染树的基础上进行布局, 计算每个节点的几何结构
(5)把每个节点绘制到屏幕上 (painting)
网友评论