javascript脚本的延时加载

向HTML页面中插入js代码的主要方法是使用<script>标签，在实际的开发中多采用外部文件的方式，主要考虑到外部js代码的可维护性及可缓存性等优点。传统的做法是将所有的外部文件放在<head>元素中，这意味着等到所有的javascript代码都被下载、解析和执行之后，再开始渲染页面内容。这种情况下，当加载的外部js代码很多的时候，会导致浏览器渲染页面出现明显的延时，延时期间窗口会显示一片空白，即所谓的假死状态，也成为阻塞状态。

为了避免这种“假死”状态的出现，我们一般建议将外部js代码放在<body>元素之后加载。

defer延时脚本

为了更好的解决页面渲染出现阻塞问题，在HTNL4.01中为<script>标签定义了defer属性，改属性只适用于外部脚本，其意图是在加载或执行脚本时不影响DOM的渲染。

<html>

    <head>

        <script type="text/javascript" defer="defer" src="demo1.js"></script>

        <script type="text/javascript" defer="defer" src="demo2.js"></script>

    </head>

    <body>

        //DOM创建等操作

    </body>

</html>

上文代码中加入了两个外部script脚本，且其中都设置了defer属性，相当于告诉浏览器，立即下载脚本，但延时执行，在整个DOM加载完成后再执行。

另外，在HTML5中要求脚本按照期出现的先后顺序执行，即demo1要先于demo2执行，且两者都要先于DOMContentLoaded事件执行，而在现实中延时脚本不一定会按顺序执行，也不一定在DOMContentLoaded事件触发前执行，因此建议在页面中只包含一个延时脚本。

async异步加载

async表示异步，是单词asynchronous[异步的]简写。顾名思义，该属性表示异步加载脚本，与defer属性一样，也只适用于外部脚本。

async属性通知浏览器立刻下载脚本，与defer不同的是，async并不保证它们的先后执行顺序。async属性是为了让页面实现异步加载，而无需等待脚本的加载和执行。

<html>

    <head>

        <script type="text/javascript" async src="demo1.js"></script>

        <script type="text/javascript" async src="demo2.js"></script>

    </head>

    <body>

        //DOM创建等操作

    </body>

</html>

在上述代码中，第二个脚本可能会优先于第一个脚本执行，因此一定要保证两个脚本之间没有依赖关系。

javascript脚本的延时加载的更多相关文章

  1. javascript异步延时加载及判断是否已加载js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  2. MyBatis入门（五）---延时加载、缓存

    一.创建数据库 1.1.建立数据库 /* SQLyog Enterprise v12.09 (64 bit) MySQL - 5.7.9-log : Database - mybatis ****** ...

  3. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  4. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  5. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  6. HTML里的哪一部分Javascript 会在页面加载的时候被执行？

    最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...

  7. Image Lazy Load：那些延时加载图片的开源插件(jQuery)

    图片延时加载技术对大流量的网站来说是十分实用的.目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源. ...

  8. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  9. JAVA的单例模式与延时加载

    延迟加载(lazy load)是(也称为懒加载),也叫延迟实例化,延迟初始化等,主要表达的思想就是:把对象的创建延迟到使用的时候创建,而不是对象实例化的时候创建.延迟加载机制是为了避免一些无谓的性能开 ...

随机推荐

  1. POJ3233:Matrix Power Series(矩阵快速幂+递推式)

    传送门 题意 给出n,m,k,求 \[\sum_{i=1}^kA^i\] A是矩阵 分析 我们首先会想到等比公式,然后得到这样一个式子: \[\frac{A^{k+1}-E}{A-E}\] 发现要用矩 ...

  2. StretchedBillboard 实现

    参考Unity粒子系统的StretchedBillboard,在保持模型的右朝向不变的情况下,尽量朝向摄像机 转化为数学问题: 一个向量在一个面上的投影 基础的Billboard的方向应为: 从中点指 ...

  3. bzoj 3083: 遥远的国度【树链剖分】

    首先,如果没有换根操作的话,那么这就是一个普通的树链剖分. 先按照以1为根进行树链剖分,用线段树维护最小值.现在考虑换根操作,设当前根为root,查询的子树根节点为想,会发现有如下三种情况: \( r ...

  4. 洛谷P4141消失之物（背包经典题）——Chemist

    题目地址:https://www.luogu.org/problemnew/show/P4141 分析:这题当然可以直接暴力枚举去掉哪一个物品,然后每次暴力跑一遍背包,时间复杂度为O(m*n^2),显 ...

  5. 状压入门--bzoj1087: [SCOI2005]互不侵犯King【状压dp】

    Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上 左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行, ...

  6. Zoj 1610 Count the Colors （线段树+区间更新+暴力计数）

    题目大意: 有n次操作,每次都是对一根线中的一段区间进行染色(颜色并不相同),有时候后面的颜色有可能覆盖前面的颜色,问最后涂完色,能看到的颜色有几种,每种颜色有几部分? 解题思路: 这个题目建树的时候 ...

  7. F - Function

    Bryce1010模板 先找到数组A中的循环节,再找到数组B中的循环节,如果B中的循环节是A中循环节的循环因子,说明可以配对,结果累积起来. #include<bits/stdc++.h> ...

  8. 扩展KMP的应用

    扩展KMP的应用: 给出模板串S和串T,长度分别为Slen和Tlen,要求在线性时间内,对于每个S[i](0<=i<Slen),求出S[i..Slen-1]与T的 最长公共前缀长度,记为e ...

  9. Maven环境搭建操作记录

    Maven官方网站: http://maven.apache.org/index.html Maven下载地址: http://maven.apache.org/download.cgi Maven历 ...

  10. C# Equals的重写

    using System; using System.Collections.Generic; using System.Text; namespace Equal {     using Syste ...