2-1.JS相关概念

一、CSS和JS在网页中的放置顺序？

待参考文献
1.Where should I put

二、解释白屏和FOUC

参考文献
1.前端基础问题整理-HTML相关

• 原因：当把css样式放在底部或者使用@import方式引入样式时
• 影响：
  • 一些浏览器例如Chrome,他的加载和渲染机制是等css全部加载解析完后再渲染展示页面,而这个等待的时间就为白屏。
  • 另一些浏览器例如Firefox,他会在css未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC (无样式内容闪烁)。

三、async和defer的作用和区别

参考文献
1.async vs defer attributes
2.浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
3.script的defer和async

async:异步下载脚本；下载完成后立即执行，不分脚本的顺序；执行过程还是会阻塞页面解析的；

defer: 设置了defer的脚本下载时不会阻塞页面的解析，而是等到页面解析结束之后再执行。

• 相同点：
  • 下载都不会阻止html页面解析
  • 对外链js有效
• 区别：
  • async下载完立即执行，defer在页面解析完成后执行；
  • async可能未按照顺序执行，defer还是按顺序执行；

async defer and normal attributes