在html中使用js---part2

上一章我们学过了如何在和在html中引入script脚本,上一章有一个要点忘说了,无论用什么方式引入script脚本,只要属性里面不存在defer和async浏览器都会按照script在页面中出现的先后顺序进行解析,也就意味着,解析script标签的时候中,我们所有的在该script标签之后的html是不被解析的

所以我们从这里知道script标签的 放置位置是非常重要滴!有的时候甚至会影响页面的加载速度和性能
按照传统的做法,所有script元素应该被放置到页面的head元素中

这种方法是为了把外部所有的css文件和js文件统一的放在同一个位置,这种传统的方式会使在文档中的head元素中包含所有javaScript文件,意味着必须等到全部js代码都被下载解析执行完成以后,才能开始呈现页面的内容,会造成上面所说过的页面可能出现的延迟。所以大多数的前端规范(包括雅虎的31条军规)中都要求把script标签放在body标签的后面如下:

这样,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到页面的速度加快了(也就是页面性能好了)
但是大家别忘记咱们上面提到了两个属性“defer”和“async”这两个属性就是为了 “延迟脚本”(有些地方也叫做异步加载js代码)而创建的

上面的写法等同于:

而async属性,让加载和渲染后续文档元素(也就是HTML和CSS)的过程将和 script.js 的加载与执行并行进行(异步)。 如果还是不是很清楚的话看一下下面的表格:

上面的红色的线表示的是html的解析,黄色的线表示在async/defer的情况下js的解析,怎么样是不是明了了很多

猜你喜欢

转载自blog.csdn.net/weixin_34344403/article/details/91398884