• javascript中的defer是什么?


    今天看到stackoverflow上的这样一个问题(问题链接),大概是说用jQuery获取不到元素,这是我们刚开始接触javascript常常会碰到的问题,回答者列举了4中方法去解决获取不到元素的问题。

    前三种我们应该都很熟悉:

    1.将脚本放在要获取的元素的下面;

    2.使用window.onload;

    3.使用事件委托;

    4.使用<script>标签的defer属性;

    我在看这个问题前,还真的不知道script标签有这么一个属性,写法是这样的:

    <script src="http://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>

    简单的在script标签中加上defer,这是HTML5的写法,也可以写成defer=true;

    那么这个属性的作用是什么呢?

    我们知道HTML的加载是同步的,如果我们把一个script标签写在页面的最顶端,页面加载时会先加载这个script标签,再执行这个脚本,然后再继续往下加载页面,如果我们的脚本文件过大,这会使我们的网页看起来很慢。

    其实defer属性,你可以想象成和jQuery中的ready()类似,都是等到页面元素结构加载完毕再执行脚本,但是ready()在第一次加载时,浏览器就已经编译了ready()中的所有脚本内容,但是带有defer属性的script标签加载进来的脚本文件并不会立刻编译,而是等到页面元素结构加载完毕再去编译和执行,这样就大大加速了页面的加载速度。

    当然,我们得考虑到脚本间的依赖关系,所以defer并没有想象中的那么好用,而且要IE10及以上才识别这个属性。还有一点要注意,defer只能用于外部脚本,即那些具有src属性的script标签。

     

  • 相关阅读:
    iscsi-分区类型
    NFS
    测试目录
    测试
    函数
    循环、枚举、条件判断、选择排序
    格式化、列表、元组、字典、集合
    常量、注释、变量、堆栈、数据类型、强制转换
    站点迁移至https://traceless.site/
    CENTOS7 源码安装NGINX
  • 原文地址:https://www.cnblogs.com/chinajins/p/5796135.html
Copyright © 2020-2023  润新知