javascript在HTML中使用方法,在HTML中使用JavaScript(示例代码)

前言:

向HTML页面中插入JavaScrip的主要方法,就是使用

要点:

1.script标签用外链的src引入文件时,内嵌的js代码无效。

2.只要不存在defer和async属性,浏览器都会按照script元素在页面中出现的先后顺序对他们依次进行解析(文件下载和代码执行)。换句话说,在第一个script元素包含的代码解析完成后,第二个script包含的代码才会被解析,然后第三个,第四个……。这种方式会阻塞页面的渲染。

3.defer:延迟脚本。脚本会被延迟到整个页面都解析完毕后再运行。相当于告诉浏览器立即下载,但是延迟执行。这种方式不阻塞页面的渲染。h5规范要求脚本按照出现的顺序执行,因此第一个延迟的脚本会优先于第二延迟脚本执行,都会先于DOMContentLoaded事情。在现实中,可能顺序不能一定得到保证。ps:用最新谷歌浏览器测试过,能保证顺序。

4.async:异步脚本。与defer类似,告诉浏览器立即下载文件,但是延迟执行,也不阻塞页面渲染。但是不能保证执行顺序。所有,带有async属性的script文件之间无法保证顺序,不应该有包含互相依赖的js代码。

总结:

一点思考:

1、一般性都要保证js文件的引入顺序就是它的执行顺序,所以async慎用。

2、script的解析包括:js文件的下载和执行。下载可不阻塞页面渲染,执行一定会阻塞页面渲染(有待考究)。

3、假如defer在现代浏览器(特别是移动端),都能遵循h5规范按顺序执行。那么是否可以在每个script标签加上defer属性,优点如下:1.js文件解析不阻塞HTML页面的渲染。2.js文件解析可分为两步,第一步下载js文件,相较不加defer属性的多个script标签而言,加了defer可实现异步并行下载script文件(有待考究);第二部解析js文件,按顺序同步执行js代码。以此达到最快的js解析速度(下载js文件效率提高)。

以上总结是一些思考,有些地方有待demo测试验证。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值