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 相关文章推荐
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
python中join()方法介绍
2018/10/11 Python
Python中url标签使用知识点总结
2020/01/16 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
借款协议书
2014/09/16 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
简历自我评价优缺点
2015/03/11 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
2015年保送生自荐信
2015/03/24 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
我收到了德劲DE1107
2022/04/05 无线电