CSS和JS在网页中的放置顺序是怎样的？
css放置于head里，
js放到body的末尾部分 外链用<script src=""></script>，内部的用<script></script>
解释白屏和FOUC
白屏和fouc 跟浏览器的渲染机制 有关，不算是bug。白屏是css放到body之后，谷歌浏览器会将html的DOM树和css的 CSSOM树构建好之后，在展现页面，如果css和html内容较多，导致绘制比较慢，就会出现白屏，当然@import 和css用link放到head里也会出现白屏，建议将css用link放到head里。
fouc ：火狐浏览器是将先将html树构建好绘制到页面，在逐渐加载css，重新绘制一次页面，直到css加载完毕。
async和defer的作用是什么？有什么区别
async不保证顺序，在加载和渲染的过程中，将和script.js的加载与执行，并行执行。
defer ：脚本延迟到文档解析和显示后执行，等所有的元素解析完后之后。
简述网页的渲染机制
网页=HTML（网页元素内容）+css（控制网页样式）+JavaScript（操作网页内容），实现功能或者效果。
浏览器渲染：解析HTML标签，构建DOM树， 同时解析CSS标签，构建CSSOM树，把DOM和cssOM组合成渲染书，先解析html标签，然后看css样式，如果没有就用默认样式，再去加载body标签，解析对应的css标签一次类推，都解析完后，再渲染树 的基础上进行布局，计算每个节点的几何结构，，把每个节点绘制到屏幕上。
Paste_Image.png
网友评论