1.<script>元素的属性有哪些？其中defer和async的区别
- 当解析器遇到
<script>标签时，文档的解析将停止，并立即下载和立即执行脚本，脚本执行完毕后再继续解析文档
- 该元素有6个属性:
-
async：（可选）其他线程立即下载脚本，下载完成后立即执行，脚本执行过程中文档将停止解析，直到脚本执行完毕（只对外部脚本有效）
-
charset：（可选）表示通过src属性指定的代码的字符集（很少用）
-
defer：（可选）文档解析不停止，但其他线程下载脚本，等到文档解析完成之后脚本才会执行（只对外部脚本有效）
-
language：（废弃）表示脚本的语言
-
src：（可选）外部文件路径
-
type：（可选）可理解为language属性的替代属性，默认值text/javascript
-
async与 defer的区别：每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行,所以就有可能出现脚本执行顺序被打乱的情况；每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在document的DOMContentLoaded之前执行（相当于告诉浏览器立即下载，但延迟执行）
-
async与 defer的使用场景：如果脚本不依赖于任何脚本，并不被任何脚本依赖，可以使用defer；如果脚本是模块化的，不依赖于任何脚本则可以使用async
2.页面嵌入与外部文件
- 直接在页面嵌入JS代码：
1.代码将被从上至下依次解析
2.代码内部不可以再出现 "<script>"字符串，可以使用转义字符"<\/script>"
<script type = "text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
- 外部JS文件
1.引用外部文件，src属性是必需的
2.<script>元素内不再出现JS代码，否则只执行外部文件，忽略嵌入的代码
<script type = "text/javascript" src = "demo.js"></script>
3.CSS和JS在网页中的放置顺序是怎样的
- 优先选择使用
<link>将CSS放在顶部<head>里，这样避免出现白屏或者FOUC
-
JS通常放在</body>前，因为JS是阻塞加载（也就是等该部分JS全部加载完成之后才会进行后续代码的执行），会影响页面整体的加载速度；当有些重要的或特殊的JS内容需要放在顶部时，可使用defer或async让后续文档变成并行渲染（异步）
4.解释白屏和FOUC
- 浏览器的白屏和无样式内容闪烁（FOUC），是由于浏览器加载与显示页面方式不同造成的
- IE出现白屏现象，是因为
IE要等CSS全部加载完成之后才对HTML进行渲染和展示样式表在页面中位置并不影响页面中组件的下载时间，但是会影响页面的呈现
- IE为何如此渲染？因为样式表仍在加载，构建
render tree就是一种浪费，因为在所有样式表加载并解释完毕之前无需绘制任何东西，否则，在其准备好之前显示的内容会遇到FOUC问题
这样IE避免了FOUC，也就自然的出现白屏现象，在IE中将样式表放在文档底部会导致白屏问题的情形有以下几种：
1.在新窗口中打开时
2.重新加载时
3.作为主页打开时
如果使用 @import 标签,即使 CSS 放入 <link>,并且放在头部,也可能出现白屏
-
FOUC就是当页面逐步加载时，文字首先显示，然后是图片，最后样式表正确地下载并解析时，已经呈现的文字和图片要用新的样式重绘了；页面在重绘时，颜色、大小等都可能发生变化，看上去就像在闪烁一样，体验也相当不好
- 为了避免白屏和FOUC，最好是使用
<link>将CSS放在<head>中
网友评论