CSS和JS在网页中的放置顺序是怎样的？##
CSS一般是放在<head>位置内，否则容易出现白屏或者FOUC;
JS一般放在<body>内容的最后面
- 1.JS一般是用于操作页面上的元素、节点，如果放在
<head>里，内容还未解析，会报错 - 2.JS如果放在底部，脚本会阻塞后面内容的呈现，以及会阻塞后面组件的下载
- 3.对于图片和CSS，在加载时会并发加载（如一个域名下同时加载2个文件）。但在加载JS时，会禁发并用，并且阻止其他内容的下载，所以把JS放在
<head>也可能会导致白屏。
解释白屏和FOUC##
白屏
如果把样式放在底部，对于IE浏览器，在某些场景下（新窗口打开、刷新等状态）页面会出现白屏，而不是内容逐渐展现，如果使用@import标签，即使CSS放入link，并且放在头部位置，也可能出现白屏。
FOUC
FOUC(Flash Of Unstyled Content)无样式内容闪烁，如果把样式放在底部，对于IE浏览器，在某些场景下（ 点击链接，输入URL，使用书签进入等）会出现FOUC现象，会逐步加载无样式的内容，等CSS加载后页面突然出现样式，对于FireFox会一直表现出FOUS.
原因主要是因为浏览器需要先解析html标签和css标签，生成DOM树和CSSOM树，DOM树和CSSOM树组合成渲染树，而样式放在底部，加载需要一个过程，这个过程就会出现白屏或者FOUC。
async和defer的作用是什么？有什么区别##
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="script.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
defer:脚本延迟到文档解析和显示后执行，有顺序
async:不保证顺序
简述网页的渲染机制##
浏览器的高层结构
浏览器的主要组件为 1.1：
用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
JavaScript 解释器。用于解析和执行 JavaScript 代码。
数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
layers.png
主流程
- 呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构呈现树。
呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。 - 呈现树构建完毕之后，进入“布局(layout)”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。
- 需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
webkitflow.png
gecko.jpg
网友评论