上一章咱们学过了如何在和在html中引入script脚本,上一章有一个要点忘说了,不管用什么方式引入script脚本,只要属性里面不存在defer和async浏览器都会按照script在页面中出现的前后顺序进行解析,也就意味着,解析script标签的时候中,咱们全部的在该script标签以后的html是不被解析的css
因此咱们从这里知道script标签的
放置位置是很是重要滴!有的时候甚至会影响页面的加载速度和性能
按照传统的作法,全部script元素应该被放置到页面的head元素中
这种方法是为了把外部全部的css文件和js文件统一的放在同一个位置,这种传统的方式会使在文档中的head元素中包含全部javaScript文件,意味着必须等到所有js代码都被下载解析执行完成之后,才能开始呈现页面的内容,会形成上面所说过的页面可能出现的延迟。因此大多数的前端规范(包括雅虎的31条军规)中都要求把script标签放在body标签的后面以下:
这样,在解析包含的JavaScript代码以前,页面的内容将彻底呈如今浏览器中。而用户也会由于浏览器窗口显示空白页面的时间缩短而感到页面的速度加快了(也就是页面性能好了)
可是你们别忘记我们上面提到了两个属性“defer”和“async”这两个属性就是为了
“延迟脚本”(有些地方也叫作异步加载js代码)而建立的
上面的写法等同于:
而async属性,让加载和渲染后续文档元素(也就是HTML和CSS)的过程将和 script.js 的加载与执行并行进行(异步)。 若是仍是不是很清楚的话看一下下面的表格:
上面的红色的线表示的是html的解析,黄色的线表示在async/defer的状况下js的解析,怎么样是否是明了了不少