延时加载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鼠标经过变色效果示例
Dec 05 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
在Express中提供静态文件的实现方法
Oct 17 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
el-form 多层级表单的实现示例
Sep 10 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中文本操作的类
2007/03/17 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js中replace的用法总结
2013/12/27 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python实现事件驱动
2018/11/21 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
详解python内置模块urllib
2020/09/09 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
小学生植树节活动总结
2014/07/04 职场文书
授权收款委托书范本
2014/10/10 职场文书
个人贷款收入证明
2014/10/26 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
任命书怎么写
2015/03/02 职场文书
django上传文件的三种方式
2021/04/29 Python