JS相关概念

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

css文件放在head闭合标签里面，script文件放在body闭合标签的底部

2.解释白屏和FOUC

白屏：

第一种：打开浏览器，请求网页后出现短暂的页面无任何内容
第二种：请求网页后首先出现js功能，比如弹框，但是弹框下面没有任何网页内容

第一种出现的原因有两种：
1，在谷歌或IE浏览器中，css文件放在html的底部，html文件和css文件下载完成到浏览器后，才解析文件，所以在解析文件显示到浏览器之前会出现短暂页面无任何内容的现象
2，任何浏览器中，css文件中使用@import引入css样式文件，引入css样式文件会需要一点时间
第二种出现的原因有一种：
1，js的文件或者js的 代码放在head标签里面时，当浏览器解析到关于js内容的时候，浏览器会阻止其他文件的下载和解析，所以，出现弹框下面没有任何内容这种情况，就是执行了js alert(); 这个时候html和css文件的内容并没有被解析渲染到浏览器，所以会出现弹框下面白屏的效果

FOUC：

火狐浏览器：不管css文件或内容放在head还是body底部，所有文下载完成后，首先在网页上加载html内容，然后再解析css文件内容对html内容进行渲染，这样的结果看到无样式的html内容，再看到解析css样式后的网页
除了火狐和谷歌浏览器：当css文件放在body的底部时，首先下载html文件，然后解析html文件内容，从上到下，先解析html的无样式内容到浏览器，当读到body底部的css文件时，下载并解析css样式文件渲染到html内容，这样的过程导致，首先看到的是无样式的html内容，然后再看到css文件渲染后的网页。

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

当浏览器读到关于js文件或内容时，下载并且解析js文件内容完成之后再下载解析其他文件内容，这样通常会报错（因为，js是操作html内容的语言，如果在js解析执行的时候页面还没有html的内容，就会报错）。

async:加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行

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

区别：

async:解析html文件内容和解析js文件内容是同时进行的，有html内容然后解析相应js内容
defer:是在html内容全部解析完成再解析j执行js文件内容。

4.简述网页的渲染机制

步骤：
1）html代码转换成Dom
2）css代码转换成cssom
3）结合Dom和cssom生成一颗渲染树
4）生成布局（layout），将所有的渲染树的所有节点进行平面合成
5）将布局绘制到屏幕上

5，博客

pc白屏和FOUC