javascript脚本的延时加载
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脚本的延时加载的更多相关文章
- javascript异步延时加载及判断是否已加载js/css文件
<html> <head> <script type="text/javascript"> /**======================= ...
- MyBatis入门（五）---延时加载、缓存
一.创建数据库 1.1.建立数据库 /* SQLyog Enterprise v12.09 (64 bit) MySQL - 5.7.9-log : Database - mybatis ****** ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- 基于javascript实现图片懒加载（亲测有效）
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
- js实现网页图片延时加载的原理和代码 提高网站打开速度
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- HTML里的哪一部分Javascript 会在页面加载的时候被执行？
最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...
- Image Lazy Load：那些延时加载图片的开源插件(jQuery)
图片延时加载技术对大流量的网站来说是十分实用的.目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源. ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- JAVA的单例模式与延时加载
延迟加载(lazy load)是(也称为懒加载),也叫延迟实例化,延迟初始化等,主要表达的思想就是:把对象的创建延迟到使用的时候创建,而不是对象实例化的时候创建.延迟加载机制是为了避免一些无谓的性能开 ...
随机推荐
- hdu5410(完全背包变形)
这是道完全背包,关键点在于如何处理每种物品,第一次放时,价值为A+B,以后放时,价值为A. 所以有三种决策,对于第i种物品,要么不放,要么是作为第一个放,要么是第二个以后放. 作为第一个放时,需要用到 ...
- C语言的随机发牌程序（红桃、黑桃、梅花、方块）
做一个随机发牌的C语言程序,供大家学习,思考. 未做任何注释,有测试时候留下的一些输出语句,一遍方便测试. /* author:nunu qq:398269786 */ #include<std ...
- bzoj 2288: 【POJ Challenge】生日礼物【链表+堆】
参考:http://blog.csdn.net/w_yqts/article/details/76037315 把相同符号的连续数字加起来,合并后ans先贪心的加上所有正数,如果正数个数sum> ...
- 乐搏讲自动化测试-Python适用公司类型（6）
相信小伙伴们都知道,随着软件测试行业的发展和进步自动化测试已经成为必然.在竞争日益激烈的市场环境中也是你升职加薪的利器. 所以,小编决定从今天起!将要系统.连续.高质量的持续更新「整套自动化测试」文章 ...
- 【BZOJ3514】Codechef MARCH14 GERALD07加强版（LCT_主席树）
题目: BZOJ3514 分析: 看到这题真的是一脸懵逼无从下手,只好膜题解.看到「森林的联通块数 = 点数 - 边数」这一句话就立刻什么都会了 QAQ . 这题最重要的就是意识到上面那个式子(正确性 ...
- Apple Tree POJ - 2486
Apple Tree POJ - 2486 题目大意:一棵点带权有根树,根节点为1.从根节点出发,走k步,求能收集的最大权值和. 树形dp.复杂度可能是O(玄学),不会超过$O(nk^2)$.(反正这 ...
- 题解报告：hdu 1431 素数回文
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1431 Problem Description xiaoou33对既是素数又是回文的数特别感兴趣.比如说 ...
- 188 Best Time to Buy and Sell Stock IV 买卖股票的最佳时机 IV
假设你有一个数组,其中第 i 个元素是第 i 天给定股票的价格.设计一个算法来找到最大的利润.您最多可以完成 k 笔交易.注意:你不可以同时参与多笔交易(你必须在再次购买前出售掉之前的股票). 详见: ...
- Snort里如何将一个tcpdump格式的二进制文件读取打印到屏幕上（图文详解）
不多说,直接上干货! 关于tcpdump二进制格式,这个基本概念不说. 支持tcpdump二进制格式的嗅探器工具,这里我说两个:tcpdump或者ethereal. [root@datatest Se ...
- sdut1283Five in a Row, Again
一简单的状压题 比赛时跑偏了 ,脑子最近乱的跟浆糊似得呢.. #include <iostream> #include<cstdio> #include<cstring& ...