一、延迟脚本 defer

HTML4.0中为<script> 标签添加了个defer属性。属性的用途是表民脚本在执行时不会影响页面的构造。

脚本会被延迟到页面加载完毕的时候,执行。也就是当浏览器解析到</html> 标签后才会执行代码。在HTML5规范中,defer属性中适用于外部脚本。

而家了defer  的脚本文件会比DOMContentLoaded事件触发前执行。

二、异步脚本 async

HTML5为<script>添加了个async属性。这个属性与defer属性类似。都是只对外部脚本有用。并告诉浏览器立即下载文件。但与defer不同的是,async并不能保证按照他们指定的

先后顺序执行。因此要确保两者之间互不依赖。指定async的目的是不让页面等待两个脚本下载执行。异步脚本一定会在页面的load事件之前执行。

原生 JS 中 延迟脚本和异步脚本的更多相关文章

  1. JavaScript值延迟脚本和异步脚本

    Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造.也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<scri ...

  2. 关于js中的同步和异步

    最近看到前端面试问到js中的同步和异步,这个问题该怎么回答? 梳理一下,js对于异步的处理,很多人的第一反应是ajax,这只能说是对了一半. 1.个人觉得,js中,最基础的异步是setTimeout和 ...

  3. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  4. 原生js中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...

  5. ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

    问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

  6. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  7. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

  8. koa 基础(十七)原生 JS 中的类、静态方法、继承

    1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...

  9. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

随机推荐

  1. android camera 摄像头预览画面变形

    问题:最近在处理一下camera的问题,发现在竖屏时预览图像会变形,而横屏时正常.但有的手机则是横竖屏都会变形. 结果:解决了预览变形的问题,同时支持前后摄像头,预览无变形,拍照生成的jpg照片方向正 ...

  2. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  3. XMl转Map-map调用公共模板

    效果 <?xmlversion="1.0"encoding="utf-8"?> <SERVICE> <SERVICE_HEADER ...

  4. Vue购物车

    index.html <!DOCTYPE html><html>    <head>        <meta charset="utf-8&quo ...

  5. mysql自定义函数并在存储过程中调用,生成一千万条数据

    mysql 自定义函数,生成 n 个字符长度的随机字符串 -- sql function delimiter $$ create function rand_str(n int) returns VA ...

  6. 如何在ASP.NET Core中构造UrlHelper,及ASP.NET Core MVC路由讲解

    参考文章: Unable to utilize UrlHelper 除了上面参考文章中介绍的方法,其实在ASP.NET Core MVC的Filter拦截器中要使用UrlHelper非常简单.如下代码 ...

  7. LoRa---她的简介和她的专业术语

    LoRa是LPWAN(低功耗广域网)通信技术的一种,其作用距离超过 15 公里,连接节点可达 100 万个.低功耗与长距离极限的组合可将最大数据速率提升至每秒 50千比特(Kbps). LoRa 是  ...

  8. Codeforces 950D A Leapfrog in the Array (思维)

    题目链接:A Leapfrog in the Array 题意:给出1-n的n个数,从小到大每隔一个位置放一个数.现在从大到小把数往前移动,每次把最右边的数移动最靠右边的空格处直到n个数都在前n个位置 ...

  9. Html_div圆角

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 软件测试_测试工具_APP测试工具_对比

    以下是我自己整理的APP测试工具对比,各个工具相关并不全面.尤其关于收费一项,我只是针对自己公司的实际情况进行对比的,每个工具还有其他收费套餐可以选择,详情可进入相关官网进行查看 以下是部分官网链接: ...