延时加载JavaScript代码提高速度


Posted in Javascript onDecember 27, 2015

延时加载js代码提高速度,具体内容如下所示:

如果网页中存在大量的javascript代码会极大的影响网页的访问速度,下面就简单介绍一下如何处理此问题。

一.延时加载js文件:

可以使用定时器函数setTimeout()让外部的js文件延迟加载,例如:

<script type="text/javascript" src="" id="my"></script> 
<script type="text/javascript"> 
var js=document.getElementById("my"); 
function addjs(){
 js.src="js/js.js"; 
}
setTimeout(addjs,3000);
</script>

以上代码可以实现js代码咋3秒之后再加载,这样可以在一定程度上提高速度。

二.将js代码放到网页内容的后面:

这个比较简单了,就不用说了,就是将js代码放在网页内容的后面,一把是放在body的最底部,这样也可以先加载内容再去执行js代码,也能够提高一定的速度。

下面给大家介绍JS广告代码延迟加载或是最后加载加快页面载入

JS广告代码延迟加载或是最后加载加快页面载入,如果页面中有很多JS广告代码,或者其他的js/' target='_blank' class='u'>JS代码太大,这时候加载起来就会很费时间。使用JS广告代码延迟加载或是最后加载的方法以加快页面载入速度。

第一,JS延迟加载

代码如下:

<script language="JavaScript" src="" id="my"></script>
<script>
setTimeout("document.getElementById('my').src='include/php100.php'; ",3000);//延时3秒
</script>

第二,JS广告代码最后加载

在需要插入JS的地方插入以下代码:

程序代码

<SPAN id=L4EVER>LOADING...</SPAN>

当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.

然后在页面最底端插入:

<SPAN class=spanclass id=AD_L4EVER>
你的JS代码在这里!</SPAN>
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>

第三,JS最后加载

想要显示JS广告代码的位置

<div id="guangg1"></div>

想要显示的广告内容

<div id="ggad1"><script language="javascript"
src="/frontpage/include/php100.js"></script></div>

判断要显示的广告位置是否存在

<script>
function chkdiv(divid){
var chkid=document.getElementById(divid);
if(chkid != null)
{return true; }
else
{return false; }
}   最后就是显示JS广告代码了
if (chkdiv('guangg1')) {
document.getElementById('guangg1').innerHTML= document.getElementById('ggad1').innerHTML;
document.getElementById('ggad1').innerHTML="";
}
</script>
Javascript 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
JavaScript 数组循环引起的思考
Jan 01 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
javascript中Number的方法小结
Nov 21 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 #Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 #Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 #Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 #Javascript
JavaScript的removeChild()函数用法详解
Dec 27 #Javascript
JavaScript构造函数详解
Dec 27 #Javascript
JavaScript生成二维码图片小结
Dec 27 #Javascript
You might like
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
urllib2自定义opener详解
2014/02/07 Python
python中global用法实例分析
2015/04/30 Python
python抽象基类用法实例分析
2015/06/04 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
怎样声明子类
2013/07/02 面试题
意向书范文
2014/03/31 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
产品售后服务承诺书
2014/05/21 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
校园广播稿精选
2014/10/01 职场文书
捐款通知怎么写
2015/04/24 职场文书
保护校园环境倡议书
2015/04/28 职场文书
开学第一周总结
2015/07/16 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js