CSS和JS在网页中的放置顺序是怎样的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
html tag
<script src="./js/jquery.js"></script>
</body>
</html>
为了防止白屏，最好是吧css刚在head里面，js放在body的最后面。如上。
为什么会白屏，还有FOUC是什么
-
白屏：
- 从上面的渲染机制可以看出来，当CSS文件写在最下端的时候，浏览器先解析html形成dom树，再解析css形成cssom树，两者结合形成渲染树，之后再将内容绘制到屏幕上，所以如果将css放在底部，那么加载时间就会变长，那么在形成渲染树绘制之前就会是白屏。
- 当JavaScript被置于顶部时，会禁用并发，并且阻止其后的文件的加载及组件的下载，所以也可能出现白屏。
-
FOUC：
对于firefox浏览器，当CSS样式被置于底部，html会先呈现出来，待到html加载完毕，再一次性加载CSS样式使得样式突然呈现，就有了闪屏的现象。
async和defer的作用是什么？有什么区别
- async:
- HTML5 为<script>元素定义了 async 属性。
- 这个属性与 defer 属性类似，都用于改变处理脚本的行为。同样与 defer 类似， async 只适用于外部脚本文件，并告诉浏览器立即下载文件。但与 defer不同的是，标记为 async 的脚本并不保证按照指定它们的先后顺序执行。
- defer:
- HTML 4.01 为<script>标签定义了 defer 属性。
- 这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。
我觉得如果不用这两个属性的话，<script>标签会中断浏览器的渲染来解析脚本，如果加上这两属性他们会在浏览器渲染的同时把他们下载下来先不解析，等到页面dom，cssdom渲染完毕在执行，而defer会把脚本先后顺序按照你写的顺序解析，而async则没有这个功能。
浏览器渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
网友评论