js的同步、异步和延迟

1、默认情况下,js是同步和阻塞DOM解析的。在解析DOM的过程中,当遇到script时,会暂停DOM解析,开始请求script并执行js,执行完成之后再接着解析DOM树。

2、之前一直不知道DOMReady是在什么时候,也从来没在书上看到对这个时间点的解释。现在感觉,DOMReady是解析完body的结束标签之后。所以所有的js的应该绑定在body标签之前。否则其中的DOMReady所触发的回调可能无法执行。

3、想要js不阻塞DOM解析的方法有:

  将js写在body的结束标签之前,其它所有的html之后

  为script添加defer和async属性。添加了这两个属性是为了告诉浏览器这个scirpt不会对DOM产生影响,可以继续往下解析DOM树,但此时js请求已经发出。

4、js的执行分两种,一种是在加载后立即执行,另一种是事件驱动执行。

原生js(二)的更多相关文章

  1. .NET中的FileUpload控件的使用-原生JS(二)

    本篇使用原生JS进行数据传输,使用FileUpload控件上传文件,适配IE. HTML <div class="container"> <div class=& ...

  2. 原生JS轮播-各种效果的极简实现(二)面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  3. 微信小程序结合原生JS实现电商模板(二)

    接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...

  4. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  5. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  6. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  9. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  10. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

随机推荐

  1. [ACM] POJ 1611 The Suspects (并查集,输出第i个人所在集合的总人数)

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 21586   Accepted: 10456 De ...

  2. 炫酷霸气的HTML5/jQuery应用及源码

    也许在5年前,HTML5还是一种很前卫的技术,大家还只是将它当做实验来看待,更别说产品应用了.但是现在HTML5已经非常流行,无论从PC端还是移动端,HTML5都扮演着非常重要的角色.今天我们要分享的 ...

  3. thinkphp 配置加载

    状态配置 每个应用都可以在不同的情况下设置自己的状态(或者称之为应用场景),并且加载不同的配置文件. 举个例子,你需要在公司和家里分别设置不同的数据库测试环境.那么可以这样处理,在公司环境中,我们在入 ...

  4. django 配置中STATICFILES_DIRS 和STATIC_ROOT不能同时出现

    系统环境: win7 django版本查看: 启动django项目的时候,一直找不到静态资源,很奇怪放在linux服务器上的时候好好的,拿下来随便修改了配置就说url找不到了. 用wingIDE没有任 ...

  5. 线程与COM

    场景: C++部分封装为COM,C#来调用.调用可能是在线程中的. 应用程序退出时,C#的部分 自动清理,某些线程可能还没有完全停掉. COM内部的东西也在释放内存. 这个时候,稍有不慎,就会崩溃. ...

  6. Redis集群版在Java中的应用

    1.配置redis集群 <?xml version="1.0" encoding="UTF-8"?> <redisCluster> &l ...

  7. 申请LINE 帐号的所有方法

    如果你打算用LINE 交朋友或是做行销,你就必须先要拥有一个甚至许多个LINE 帐号.在本篇文章中,将分享给你目前申请LINE 帐号的所有可能方法. 目前LINE 公司允许大家使用以下二种身分申请LI ...

  8. mysql中json_merge函数的使用?

    需求描述: 通过mysql中的json_merge函数,可以将多个json对象合并成一个对象 操作过程: 1.查看一张包含json列的表 mysql> select * from tab_jso ...

  9. Android播放器推荐:可以播放本地音乐、视频、在线播放音乐、视频、网络收音机等

    下载链接:http://www.eoeandroid.com/forum.php?mod=attachment&aid=MTAxNTczfGMyNjNkMzFlfDEzNzY1MzkwNTR8 ...

  10. 7 -- Spring的基本用法 -- 12... Spring 3.0 提供的表达式语言(SpEL)

    7.12 Spring 3.0 提供的表达式语言(SpEL) Spring表达式语言(简称SpEL)是一种与JSP 2 的EL功能类似的表达式语言,它可以在运行时查询和操作对象图.支持方法调用和基本字 ...