CSS和JS在网页中的放置顺序是怎样的？
- CSS放置head标签里面，可以使用link标签引入css文件，也可以用style标签包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
- JS放置body闭合标签之前，也就是页面底部,可以使用script标签引入js文件，也可以用script标签包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>javascript</h1>
<script src="index.js"></script>
<script>
var a = 10;
</script>
</body>
</html>
## 解释白屏和FOUC
#### 白屏
1. 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
2. 如果使用 `@import` 标签,即使 CSS 放入 `link`, 并且放在头部,也可能出现白屏
3. 把 JavaScript 放入页面顶部也会导致 白屏 现象（因为加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载）
#### FOUC： (Flash of Unstyled Content) 无样式内容闪烁
1. 如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC
## async和defer的作用是什么？有什么区别
[async和defer区别](http://www.jianshu.com/p/92d354d5ac81)
## 简述网页的渲染机制
1. 浏览器请求到HTML代码后，解析 HTML 标签, 构建 DOM 树
2. CSS文件下载完成，开始构建CSSOM
3. CSSOM构建结束后， DOM和CSSOM 一起生成 Render Tree。
4. 有了Render Tree然后Layout， 计算出每个节点在屏幕中的位置
5. 按照算出来的规则，然后把每个节点绘制到屏幕上 (Painting)
网友评论