CSS和JS在网页中的放置顺序是怎样的？
- 为什么引入js文件?
因为网页 = Html+CSS+JavaScript;
Html: 网页元素内容
CSS: 控制网页样式
JavaScript：操作网页内容，实现功能或者效果.
-
css放在head标签里面
方式: - link标签推荐使用
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
- <style type="text/css"> 样式 </style>
<head>
<style>
.content {
background: red;
}
</style>
</head>
- 引入外部 CSS 文件
<style>
@import url(style.css);
</style>
-
引入js方式如下
JS代码存放在标签对<script>...</script>中,而<script>...</script>放在body中.推荐放在闭合标签</body>之前
<body>
<script type="text/javascript">
//这里编写JavaScript程序
</script>
</body>
- 使用script标签的src属性引入一个js文件
引用外部JS文件的script标签可以放在head标签内，也可以放在body标签中.
<script src="js/index.js" type="text/javascript"></script>
- 元素事件中引入JS
<body>
<input type="button" onClick="alert('绿叶学习网')" value="按钮"/>
</body>
- 页头引入JS，指的就是在<head></head>标签内编写JavaScript
<head>
<title></title>
<script type="text/javascript">
//这里编写JavaScript程序
</script>
</head>
解释白屏和FOUC?
白屏产生原因:
渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。render树:将 DOM 与 CSSOM 合并成一个渲染树.
为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
如果我们在Render树未完全绘制并渲染之前，向下快速拖动滚动条会看到上图所示的白屏现象,浏览器渲染不及时造成.场景:
如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
如果把js文件放在头部，脚本会阻塞后面内容的呈现，脚本会阻塞其后组件的下载，出现白屏问题FOUC:
FOUC 全称 Flash of unstyled content,无样式内容闪烁.是指 HTML 页面在打开过程中，内容先于样式展示，导致页面样式在瞬间出现剧变，并且人眼可见
1、使用@import方法导入CSS时，例如：
<style type="text/css" media="all">@import "../fouc.css";</style>
此方式由于IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
2、将样式表链接放在页面不同位置时，在IE5/6下某些页面会无样式显示内容且瞬间闪烁，这现象就是文档样式短暂失效（Flash Of Unstyled Content），即FOUC。关于FOUC，其实是FireFox的渲染逻辑和Chrome的不太一样，一开始Chrome是等待渲染树和位置计算好才会出来网页的内容，但到了FireFox每加载一次dom树就会重绘一次网页样式
解决方法：避免使用@import方法导入CSS，且将样式表链接都放在head中即可避免
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:不保证顺序
简述网页的渲染机制?
处理 HTML 标记并构建 DOM 树。
处理 CSS 标记并构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树render 树。
计算每个Frame（也就是每个Element）的位置，这又叫layout
根据渲染树来布局，以计算每个节点的Frame（也就是每个Element）的位置,这又叫layout和reflow过程。
最后通过调用操作系统Native GUI的API绘制,将各个节点绘制到屏幕上。
