共有：defer和async、动态创建DOM方式（用得最多）、按需异步载入js

defer属性：(页面load后执行)

HTML 4.01 为 <script>标签定义了 defer属性。 
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。

<head>

    <script src="test1.js" defer="defer"></script>

    <script src="test2.js" defer="defer"></script>

</head>

　　

async属性:(页面load前执行)

HTML5 为 <script>标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。 
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行。

<head>

    <script src="test1.js" async></script>

    <script src="test2.js" async></script>

</head>

<body>

　　

动态创建Dom：

//这些代码应被放置在</body>标签前(接近HTML文件底部)

<script type="text/javascript">

   function downloadJSAtOnload() {

       varelement = document.createElement("script");

       element.src = "defer.js";

       document.body.appendChild(element);

   }

   if (window.addEventListener)

      window.addEventListener("load",downloadJSAtOnload, false);

   else if (window.attachEvent)

      window.attachEvent("onload",downloadJSAtOnload);

   else

      window.onload =downloadJSAtOnload;

</script>

　　

js延迟加载的方式有哪些？的更多相关文章

  1. 13. js延迟加载的方式有哪些

    JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件. JS延迟加载有助于提高页面加载速度.   一般有以下几种方式:   1)defer 属性 <script src=&q ...

  2. 关于js延迟加载（异步操作）的方式

    一.概述 最近重新开始学习js,在第一章的一个小节里写到了“脚本调用策略”,书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js文件写在head里, ...

  3. js延迟加载优化页面响应速度

    网页打开速度是衡量网站性能的一个极为重要的指标,今天就来说说如何通过JS延迟加载的方式提高页面响应速度: JS延迟加载的 含义:即等页面加载完成之后再加载 JavaScript 文件.作用:JS延迟加 ...

  4. JS --- 延迟加载的几种方式

    标题:JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件.  JS延迟加载有助于提高页面加载速度. 1. defer 属性 HTML 4.01 为 <script>标 ...

  5. JavaScript脚本延迟加载的方式有哪些？

    延迟加载就是等页面加载完成之后再加载 JavaScript 文件. js 延迟加载有助于提高页面加载速度. 一般有以下几种方式: defer 属性: 给 js 脚本添加 defer 属性,这个属性会让 ...

  6. css js 的引入方式和书写位置

    css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...

  7. Lazyr.js – 延迟加载图片（Lazy Loading）

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  8. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  9. js延迟加载，提升网页加载速度

    JS延迟加载,简单例子,不多说: 代码如下: 程序代码 <script language="JavaScript" src="" id="my& ...

随机推荐

  1. Windows Store 应用获得设备 ID 的几种方案

    本文为个人博客备份文章,原文地址: http://validvoid.net/solutions-get-device-id-for-uwp/ 通过生成唯一的设备 ID 进行数据统计是应用开发中一个非 ...

  2. [JAVA][Liferay] Duplicate key value violates unique constraint for resourcepermissionid in Liferay

    Unexpected exception thrown when create new site: 09:47:10,114 ERROR [ajp-bio-8009-exec-113][JDBCExc ...

  3. 多个ModelForm组合成一个表单

    打个比方: 我将用户的基本信息 如用户名密码存在继承了Django auth认证组件中的 AbstractUser 类的模型中,并和第二个存了Details模型中,此模型继承UserInfo模型 继承 ...

  4. vue-样式问题

    问题: 今天在用vue开发单页面应用的时候,遇到一个问题,在A页面,直接刷新,页面的布局样式之类的是没有问题的,不过在B页面跳转到A页面,那么A页面有一些样式就不是预期的效果. 发现解决问题: 用调试 ...

  5. C++学生信息处理

    #include #include using namespace std; template int getArrayLen(T& array) //使用模板定义一个函数getArrayLe ...

  6. springboot文件上传： 单个文件上传 和 多个文件上传

    单个文件上传 //文件上传统一处理 @RequestMapping(value = "/upload",method=RequestMethod.POST) @ResponseBo ...

  7. linux基础命令-mkdir/tree/rmdir

    命令行的展开 ~: 展开为用户的主目录 ~USERNAME: 展开为指定用户的主目录 {}:可承载一个以逗号分隔的列表,并将其展开为多个路径 [root@host01 tmp]# mkdir -vp ...

  8. Oracle编程入门经典 第11章 过程、函数和程序包

    目录 11.1          优势和利益... 1 11.2          过程... 1 11.2.1       语法... 2 11.2.2       建立或者替换... 2 11.2 ...

  9. ARM实验4—按键轮询实验

    key_poll按键轮询实验 实验内容: 通过FS_4412开发板上的按键控制LED灯并打印信息. 实验目的: 熟悉开发环境的使用. 掌握猎户座4412处理器的GPIO接口, 实验平台: FS4412 ...

  10. 如何使用Win32API绘制树

    一.这个已经有几年时间了,刚开始学习charlie的<windows程序设计>的时候做的.现在看来,代码很乱,虽然后来还整理过几次,现在这方面没什么兴趣了,有兴趣的可自由下载. 二.绘制二 ...