共有：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. Java取得一个对象里所有get方法和set方法, 读取某个类下所有变量的名称

    所有get方法和set方法public void getMethod(Object obj){ Class clazz=obj.getClass();//获得实体类名 Field[] fields = ...

  2. 应该知道的一些Markdown语法

    目录 快速输入标题 斜体和粗体,删除线 分隔线 外链接 无序列表 有序列表 定义型列表 插入图片 文字引用 标签分类 表格 行内代码块 代码段 注脚 待办事宜 Todo 列表 显示当前文章的目录 快速 ...

  3. Redis数据类型（字符串）

    Redis存放的字符串为二进制是安全的.字符串长度支持到512M. incr 递增数字INCR key 当存储的字符串是整数时,redis提供了一个实用的命令INCR,其作用是让当前键值递增,并返回递 ...

  4. CSS的框模型(div)与边距（margin、padding）

    所谓框模型,例如div标签,你就可以直接把它理解成一个相框. 这个相框里面的相片有高度和宽度,框本身也有一定的宽度.相框和别的相框之间,还有一定的边距. div设置常见属性 border:边框 pad ...

  5. Java笔记 —— 初始化

    Java笔记 -- 初始化 h2{ color: #4ABCDE; } a{ text-decoration: none !important; } a:hover{ color: red !impo ...

  6. c语言 Implement strStr()【Leetcode】

    实现在一个母字符串中找到第一个子字符串的位置. #include <stdio.h> #include <string.h> #define _IRON_TRUE 1 #def ...

  7. 初识ImageSwither

    imageswitcher继承自viewswitcher,使用ImageSwither只需要两步: 1.为ImageSwither提供一个ViewFactory,该ViewFactory生成的View ...

  8. centos6.5_64bit-Tomcat7安装部署

    此次安装系统版本及软件版本 centos6.5-64bit java -1.7.0_45 jdk1.8.0_111 apache-tomcat-7.0.73   一.检查java版本信息        ...

  9. 解压war包

    unzip cat-alpha-3.0.0.war -d /tmp/test 说明:-d指定解压的路径和文件,文件名不存在会自动创建

  10. 笨办法学Python（二十）

    习题 20: 函数和文件 回忆一下函数的要点,然后一边做这节练习,一边注意一下函数和文件是如何在一起协作发挥作用的. from sys import argv script, input_file = ...