-
CSS和JS在网页中的放置顺序是怎样的？
css放在head中，用link标签引入：
<head>
<link type="text/css" src="index.css" rel="stylesheet">
</head>
JS放在body中，且在所有元素的后面，靠近body结束标签。
外部JS用script标签的src引入：
<script src="index.js"></script>
内部JS用script标签包裹：
<script>
alert (1);
</script>
-
简述网页的渲染机制。
对于webkit内核：
1.读取解析html文件，构建DOM树；
2.读取解析css文件，构建CSSOM树；
3.将DOM树和CSSOM树组合，构成Render tree（渲染树）；
4.在渲染树的基础上进行布局, 计算每个节点的几何结构；
5.将每个节点绘制到屏幕上。
webkit渲染流程
-
async和defer的作用是什么？有什么区别？
对于以下script脚本：
<script src="script.js"></script>
1.正常情况下，浏览器会立即加载并执行指定的脚本，读到就加载并执行，后续文档的载入全部停止，直到该脚本执行完成；
2.有async，加载和渲染后续文档元素的过程将和脚本的加载与执行并行进行（异步）；
3.有defer，加载和渲染后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有的元素解析完成以后。
引用一张图解说明：
蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
-
解释白屏和FOUC.
白屏：由于webkit的渲染机制，页面的绘制只有在渲染树完成后才进行。在读取解析html和css到渲染树的构建完成期间，页面会一片空白。（原因：将css放在html的尾部或css中用@import再引入外部标签，页面顶部有JS，网络缓慢等）；
FOUC（无样式内容闪烁）：这是基于另外一种渲染机制造成的，html的读取解析绘制与css的读取解析同步进行，当某些原因css加载过慢，页面便会出现无样式的内容，当css加载了以后，便会刷新页面对内容加载样式，表现出闪烁。
网友评论