关于Js脚本的延迟执行
关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面。这一次我们着重讲解一下放在标签内部。在我们用Js操作DOM元素时,如果不延时执行,DOM元素其实是根本还没有被渲染出来的。所以各种getElementById
、getElementsByTagName
实质上是获取不到的,也谈不上如何进行Style样式的修改或者更多的操作。所以当我们把Js脚本放在了标签里,我们需要延时执行Js脚本文件。
1、标签属性defer
和async
这个是HTML5的属性,在标签内部标注了defer
或者async
。我们来看一下这两个属性是做什么的。
- async属性:Js脚本加载和文档渲染是异步进行的, 但当脚本加载完成后便执行。所以当两个外部脚本都有这个属性的时候,我们是无法确定哪个文件先执行,很难解决依赖问题。
- defer属性:Js脚本加载和文档渲染也是异步进行的,不同的地方是,它是等DOM元素渲染完后才会执行。并且按照HTML标准规定,它是会按顺序执行的,并且是在
DOMContentLoaded
这个事件触发之前发生。这个会更符合我们的实际要求。
2、关于这个DOMContentLoaded
事件
这个事件我们是用过挺多的,例如Jquery里的ready
事件。这个事件就是当DOM元素渲染结束后触发的,和load
事件不同,load
事件我接下来会说。那我们该怎么使用这个事件呢,当然也是很简单的啦,直接看看代码。
document.addEventListener("DOMContentLoaded", function(){
/* 放置代码 */
}, false);
3、最后一个load
事件
在这个load
事件里,会在DOM元素渲染并加载完毕后才会触发。那在实际到底加载完毕是指的什么呢,最明显的就是加载图片。如果仅仅是DOM渲染后便去获取图片的宽度,图片是完全没有加载完的。所以这个时候我们需要用load
事件,这个事件会在图片加载完后触发。但是如果我们不需要图片加载后再执行Js脚本,我们最好不使用load
事件,因为这会导致延迟很久才执行,造成用户体验不佳。所以我们什么时候用DOMContentloaded
和load
,我们要作出一个选择。
最后,我们习惯把Js脚本放在前是最好的,它是会在DOM渲染后便执行,可以兼容更多旧的浏览器。
哎哟用Markdown好辛苦,写的东西感觉都怪怪的,调皮不起来了~~看来要多练习
关于Js脚本的延迟执行的更多相关文章
- js中的延迟执行和定时执行
在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} s ...
- json转换为go类文件,js脚本,nodejs执行
js写的代码生成脚本,json生成对应的go type对象 作json转换用 js脚本无甚何依赖,可以直接运行 执行前,按需更改文件 示例 var topname="Data"; ...
- 异步执行js脚本——防止阻塞
JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaS ...
- JS脚本加载与执行对性能的影响
高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...
- JS脚本不能执行
这段时间在做前端的动态页面,出了很多问题,因为js平时用的很少,所以花了不少无用功. 其中有两点一定要注意: 1.当js中有语法错误时,js脚本会无法执行. 2.当js脚本中有未定义的变量时,后边的语 ...
- 无阻赛的脚本(js脚本延迟方法)
js脚本的加载与执行 1.延迟脚本(defer属性) 带有defer属性的script标签,可以放置在文档的任何位置,在页面解析到该标签时,会开始下载该脚本,但是不会立即执行,直到dom加载完成(on ...
- AngularJs中,如何在render完成之后,执行Js脚本
AngularJs是Google开源的前端JS框架.使用AngularJs, 我们能够容易地.健壮的开发出类似于Gmail一样的单页Web应用.AngularJs这个新兴的MVC前端框架,具有以下特点 ...
- ASP.NET UpdatePanel实现点击按钮无刷新且执行js脚本
[一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3770779.html] *.aspx: <asp:ScriptManager ID=& ...
- A标签执行JS脚本
A标签执行JS脚本 分类: Web2012-12-25 22:48 1368人阅读 评论(0) 收藏 举报 前言 A标签是html中常用的标签,它与button按钮是实现页面跳转的两种最常用的方式,经 ...
随机推荐
- java23中设计模式
原文来自:http://zz563143188.iteye.com/blog/1847029 设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design patt ...
- eclipse jetty插件安装(离线版)
按照网上的说法安装jetty插件,run-jetty-run,google那个网址根本链接不上.所以插件装不上,网上搜索本地版,试了几个都不好使,功能不全,这是因为下载的本地资源jar包不全导致,好坑 ...
- Python中的split()函数的使用方法
函数:split() Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(lis ...
- iOS方法封装
(void) setSubView:(UIView *)masterView subCCGRect:(CGRect)subCCGRect imageName:(NSString *)imageName ...
- C#获取一个文件的扩展名
C#获取一个文件的扩展名System.IO.Path.GetExtension( "文件名 ");ChangeExtension 更改路径字符串的扩展名. Combine ...
- SQL server函数大全
函数类别 作用 聚合函数 执行的操作是将多个值合并为一个值.例如 COUNT.SUM.MIN 和MAX. 配置函数 是一种标量函数,可返回有关配置设置的信息. 转换函数 将值从一种数据类型转换为另一种 ...
- Redis系列文章导读
1. Redis简介 1.1 Redis VS Memcached 2. Redis安装教程 3. Redis数据类型 4. Redis常用命令 4.1 key 4.2 string 4.3 hash ...
- 1287. Mars Canals(DP)
1287 水DP #include <iostream> #include<cstdio> #include<cstring> #include<algori ...
- hdu 1243 反恐训练营(dp 最大公共子序列变形)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1243 d[i][j] 代表第i 个字符与第 j 个字符的最大的得分.,, 最大公共子序列变形 #inclu ...
- iOS开发:在Swift中调用oc库
先列举这个工程中用到的oc源码库: MBProgressHUD:半透明提示器,Loading动画等 SDWebImage:图片下载和缓存的库 MJRefresh: 下拉刷新,上拉加载 Alamofir ...