延时加载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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php框架Phpbean说明
2008/01/10 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
javascript this用法小结
2008/12/19 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
专业销售业务员求职信
2013/11/18 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
节能减排倡议书
2014/04/15 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
python tqdm用法及实例详解
2021/06/16 Python
python使用torch随机初始化参数
2022/03/22 Python
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技