进阶任务一

一 CSS 和 JS 在网页中的放置顺序是怎样的？

• css 样式放在 head 中

• js 放在 body 标签内的最后，script 标签内。外链接用 <script src=""></script>，内部的用 <script></script>。

二 解释白屏和 FOUC

1.白屏

• 对IE来说，把样式放在底部时，在某些场景下（如打开新窗口／刷新页面等）页面会出现白屏，而不是内容逐步展现。

• 如果使用@import标签，即使将 CSS 写入外部样式表由link引入并放在头部，也可能出现白屏。

• 把 js 文件放入页面顶部而未使用 defer 或 async 延迟或异步加载js文件，从而阻塞 html 与 css 的加载也会导致白屏。

• 另外：Chrome会同时加载html和css分别构建DOM树和CSSOM树，等到二者都构建完成后再绘制渲染树，然后显示出页面，当外部css样式表设置了延时或者加载的时间比较久时就会显示出白屏，与浏览器的渲染机制有关。

2. FOUC

• Flash of unsettled content：无样式内容闪烁。对IE来说，把样式放在底部时，在某些场景下（如点击链接、输入URL、使用书签进入等）页面会出现FOUC现象，具体表现为逐步加载无样式的内容，等CSS加载完成后页面突然展现样式。

• 对Firefox来说会先显示已加载的html内容，再逐步加载无样式内容，等css全部加载完成后页面突然展现样式，所以Firefox会一直表现出FOUC。

三 async和defer的作用是什么？有什么区别

• 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

• 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

• 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

image.png

上图的意思是：浏览器在解析HTML文件时，遇上没有设置defer或async属性的脚本，浏览器读到该脚本就加载并执行，脚本会阻塞其后内容的执行；
遇上设有async属性的脚本，会在HTML解析过程中下载该脚本，并在完成下载后暂停HTML的解析来执行这个异步脚本，直到执行完成后再继续HTML的解析；
遇上设有defer属性的脚本，会在HTML解析过程中下载该脚本，在HTML解析完成后才执行该文件。延迟脚本按照它们在文档中出现的顺序执行。

四 简述网页的渲染机制

1. Grome 等浏览器

image.png

• 解析 HTML 标签，构建 DOM 树

• 解析 CSS 标签，构建 CSSOM 树

• 把 DOM 和 CSSOM 组合成渲染树 （render tree）

• 在渲染树的基础上进行布局，计算每个节点的几何结构

• 把每个节点绘制到屏幕上（painting）

2 Firefox 等浏览器

image.png

• 解析 HTML 标签到 Content Sink

• 这时，先加载Content Sink 里面的内容，页面上会显示一个无样式的内容

• 循环加载 CSS 样式，每次加载一部分 CSS 样式后，会重新渲染页面

五 从上面4个题目中随机选择一题写成博客，投递到饥人谷技术博客6(可选题目)