初识Javascript

• 网页一般由三个部分构成，HTML ,CSS，JAVASCRIPT。其中HTML负责网页的整体结构，CSS负责网页的样式，也就是美化HTML，这两个部分构成了一个静态网页，JAVASCRIPT则负责网页上的一些动画，以及与后端数据的交互部分。

CSS和JS在网页中的放置位置

一般而言，因为HTML是一种相对松散的文档类型，同时浏览器的容错性又非常高，所以CSS和JS可以放置在页面上的任何位置，甚至可以放到的外部。
但是在实际使用中，我们习惯上把CSS文件放到head标签内部，这是由浏览器的渲染机制决定的，因为大部分浏览器都是要等HTML和CSS加载完毕后才开始进行网页布局并最终绘制到浏览器窗口；JS则更加的苛刻，因为浏览器的解析器遇到JS脚本后会立刻开始执行JS脚本，这样就会阻塞HTML、CSS的解析，浏览器出现白屏，只有当JS脚本执行完毕，才会继续后面文档的渲染，所以我们一般把JS放到HTML文档的尾部，这样就不会出现白屏现象，用户体验比较好。

白屏和FOUC（flash of unstyled content）

白屏和FOUC（无样式内容闪烁）其实是浏览器渲染机制所固有的特性
Webkit内核的浏览器的渲染过程中页面的绘制要等HTML和CSS都加载完毕才开始，所以在这个加载过程中浏览器会出现白屏现象。

• 如果把样式放在文档底部，对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
• 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
• 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象.

Gecko内核的浏览器则是在加载过程中优先渲染HTML部分，在CSS加载的时候再次进行页面的二次渲染，这样渲染到页面上的无样式内容时就会不断的进行页面二次渲染，无样式内容就会闪烁，这就是FOUC现象。

• 如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .

asynnc和defer的作用与区别

它们的作用主要是作用于script标签。

1. 对于没有这两个关键字的脚本标签，浏览器会立即加载并执行指定的脚本，即在渲染该script标签之下的文档元素之前，不等待后续载入的文档元素，读到就加载并执行。
2. 有了async后，加载和渲染后续文档的过程会和脚本的 加载与执行 同时进行（异步）
3. 如果是defer，加载和渲染后续文档的过程将和脚本的 加载 同时进行，但是脚本的执行要等到所有的后续元素解析完毕以后，DOMContentLoaded事件触发之前完成。

*defer 和 async 的区别

• defer: 脚本延迟到文档解析和显示后执行，有顺序

• async: 不保证顺序

*注意

• defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer属性会被直接忽略，因此