js的加载顺序

1.

js 放在 <head>标签中会立即执行,阻塞后续资源的下载与执行。因为js有可能会操作DOM,如果不阻塞后续的资源下载,DOM的操作顺序不可控。

如果外部脚本加载时间很长,就会造成网页长时间失去响应,浏览器就会呈现“假死”状态。这被称为“阻塞效应”。html 需要等<head>中所有的js和css加载完后才开始绘制。因此要把 js 文件放在 <body>之后,这样可以避免阻塞其他文件的加载,同时,使html页面迅速显示。

把js放在网页尾部加载还有一个好处,可以保证当js操作dom时,dom已经生成。

2.

外链js如果含有 defer='true',浏览器就会等到DOM加载完成后再执行脚本。对于内置script,以及动态生成的scriptdefer = 'true' 不生效

3.

外链js如果含有 asnyc = 'true',不会依赖于任何 js 和 css 的执行。此时js加载完成后立刻执行。不会保证按书写的顺序执行。因为 asnyc = 'true'会告诉浏览器,js不会操作dom 和修改 css 。
asnyc属性的作用:使用另一个进程下载脚本;下载时不会阻塞渲染。asnyc可以保证脚本下载的同时,浏览器会继续渲染,一旦采用这个属性,就无法保证js的执行顺序。即,不能保证哪个js先下载,哪个后下载。
一般来说,如果js之间没有依赖关系,就使用 asnyc ,如果有依赖关系,就使用defer,同时设置 asnyc 和 defer, defer不起作用

猜你喜欢

转载自blog.csdn.net/lizhengxv/article/details/81877340