js的延迟执行问题分析


Posted in Javascript onJune 23, 2014

看这段代码:

<body>
  <script src="deffer.js"></script>
  content
 </body>

deffer.js的内容为:

alert(1)

这样在alert窗口没有被关闭之前,页面都会是一片空白。因为alert窗口阻止了页面的继续渲染。

为了避免此类问题,html规范里定义了deffer和async属性,这两个属性的具体定义这里不讨论,反正他们都是用来告诉浏览器,一定要在页面渲染完成以后再执行本脚本的内容,这样脚本执行的时候页面已经渲染完毕了。

<body>
  <script deffer async src="deffer.js"></script>
  content
 </body>

注意,对于多个加了deffer或者async的脚本,他们的执行顺序和他们在页面上出现的顺序无关。即使html规范定义了deffer脚本应该按照顺序来执行,但是浏览器事实上并没有全部遵守这个约定。

Javascript 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 #Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 #Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 #Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 #Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 #Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 #Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 #Javascript
You might like
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
实时获取Python的print输出流方法
2019/01/07 Python
python如何制作英文字典
2019/06/25 Python
opencv python图像梯度实例详解
2020/02/04 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
python实现五子棋程序
2020/04/24 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
《老王》教学反思
2014/02/23 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA