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不起作用

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在JavaScript,方法的加载顺序可以分为以下几个步骤: 1. 首先,JavaScript加载时会优先加载使用function声明的方法。这些方法会在其他代码执行之前被加载。需要注意的是,只有使用function声明方式的方法才会被优先加载,而使用变量声明方式(如var b = function(){})或匿名函数等是不会被优先加载的。这是加载方法的第一步。 2. 其次,JavaScript会按照script元素在页面顺序从上往下执行。当执行到script标签时,会立即执行代码。如果在执行过程遇到错误,会返回并结束当前标签执行,然后继续执行下一个script标签代码。因此,script标签顺序会决定方法的加载顺序。 3. 此外,还有一种特殊的写法是自执行函数。自执行函数是指在执行界面时,在执行到该函数时自己会执行一次。自执行函数可以有多种写法,例如使用(function(){})()、(function(){}())或者在一个函数前加上-!等运算符。这种写法可以在加载JavaScript时立即执行函数代码。 需要注意的是,浏览器加载JavaScript时有一个特点,即载入之后立即就会执行(先编译后执行)。这是因为JavaScript可能会影响DOM树的结构,所以浏览器在执行完JavaScript后才能继续加载下面的HTML内容。因此,多个js文件会按顺序分开执行,以确保脚本之间的依赖关系被正确处理。 综上所述,JavaScript方法的加载顺序可以通过以上步骤来理解。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [JS加载顺序详解](https://blog.csdn.net/qq_40690077/article/details/103729150)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [深究Javascript的加载执行顺序](https://blog.csdn.net/weixin_45895806/article/details/109715906)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值