关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面。这一次我们着重讲解一下放在标签内部。在我们用Js操作DOM元素时,如果不延时执行,DOM元素其实是根本还没有被渲染出来的。所以各种getElementByIdgetElementsByTagName实质上是获取不到的,也谈不上如何进行Style样式的修改或者更多的操作。所以当我们把Js脚本放在了标签里,我们需要延时执行Js脚本文件。


1、标签属性deferasync

  这个是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事件,因为这会导致延迟很久才执行,造成用户体验不佳。所以我们什么时候用DOMContentloadedload,我们要作出一个选择。


  最后,我们习惯把Js脚本放在前是最好的,它是会在DOM渲染后便执行,可以兼容更多旧的浏览器。

哎哟用Markdown好辛苦,写的东西感觉都怪怪的,调皮不起来了~~看来要多练习

关于Js脚本的延迟执行的更多相关文章

  1. js中的延迟执行和定时执行

    在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} s ...

  2. json转换为go类文件,js脚本,nodejs执行

    js写的代码生成脚本,json生成对应的go type对象 作json转换用 js脚本无甚何依赖,可以直接运行 执行前,按需更改文件 示例 var topname="Data"; ...

  3. 异步执行js脚本——防止阻塞

    JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaS ...

  4. JS脚本加载与执行对性能的影响

    高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...

  5. JS脚本不能执行

    这段时间在做前端的动态页面,出了很多问题,因为js平时用的很少,所以花了不少无用功. 其中有两点一定要注意: 1.当js中有语法错误时,js脚本会无法执行. 2.当js脚本中有未定义的变量时,后边的语 ...

  6. 无阻赛的脚本(js脚本延迟方法)

    js脚本的加载与执行 1.延迟脚本(defer属性) 带有defer属性的script标签,可以放置在文档的任何位置,在页面解析到该标签时,会开始下载该脚本,但是不会立即执行,直到dom加载完成(on ...

  7. AngularJs中,如何在render完成之后,执行Js脚本

    AngularJs是Google开源的前端JS框架.使用AngularJs, 我们能够容易地.健壮的开发出类似于Gmail一样的单页Web应用.AngularJs这个新兴的MVC前端框架,具有以下特点 ...

  8. ASP.NET UpdatePanel实现点击按钮无刷新且执行js脚本

    [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3770779.html]  *.aspx: <asp:ScriptManager ID=& ...

  9. A标签执行JS脚本

    A标签执行JS脚本 分类: Web2012-12-25 22:48 1368人阅读 评论(0) 收藏 举报 前言 A标签是html中常用的标签,它与button按钮是实现页面跳转的两种最常用的方式,经 ...

随机推荐

  1. java23中设计模式

    原文来自:http://zz563143188.iteye.com/blog/1847029 设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design patt ...

  2. eclipse jetty插件安装(离线版)

    按照网上的说法安装jetty插件,run-jetty-run,google那个网址根本链接不上.所以插件装不上,网上搜索本地版,试了几个都不好使,功能不全,这是因为下载的本地资源jar包不全导致,好坑 ...

  3. Python中的split()函数的使用方法

    函数:split() Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(lis ...

  4. iOS方法封装

    (void) setSubView:(UIView *)masterView subCCGRect:(CGRect)subCCGRect imageName:(NSString *)imageName ...

  5. C#获取一个文件的扩展名

    C#获取一个文件的扩展名System.IO.Path.GetExtension( "文件名 ");ChangeExtension   更改路径字符串的扩展名. Combine   ...

  6. SQL server函数大全

    函数类别 作用 聚合函数 执行的操作是将多个值合并为一个值.例如 COUNT.SUM.MIN 和MAX. 配置函数 是一种标量函数,可返回有关配置设置的信息. 转换函数 将值从一种数据类型转换为另一种 ...

  7. Redis系列文章导读

    1. Redis简介 1.1 Redis VS Memcached 2. Redis安装教程 3. Redis数据类型 4. Redis常用命令 4.1 key 4.2 string 4.3 hash ...

  8. 1287. Mars Canals(DP)

    1287 水DP #include <iostream> #include<cstdio> #include<cstring> #include<algori ...

  9. hdu 1243 反恐训练营(dp 最大公共子序列变形)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1243 d[i][j] 代表第i 个字符与第 j 个字符的最大的得分.,, 最大公共子序列变形 #inclu ...

  10. iOS开发:在Swift中调用oc库

    先列举这个工程中用到的oc源码库: MBProgressHUD:半透明提示器,Loading动画等 SDWebImage:图片下载和缓存的库 MJRefresh: 下拉刷新,上拉加载 Alamofir ...