2-1.JS相关概念
2017-05-12 本文已影响0人
guidetheorient
一、CSS和JS在网页中的放置顺序？
CSS应放在头部;
一般情况下，JS应放在body结束标签前。
<!--头部引入CSS-->
<head>
<link rel="stylesheet" href="css/layout.css" type="text/css">
</head>
<!--body闭合标签前引入JS-->
<script type="text/javascript" src="script.js"></script>
</body>
二、解释白屏和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还是按顺序执行；
<script src="script1.js" async></script><!--async-->
<script src="script2.js" defer></script><!--defer->
<script src="script3.js"></script><!--normal-->
async defer and normal attributes
