延时加载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 相关文章推荐
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
Node.js Buffer用法解读
May 18 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
Jquery ui css framework
2010/06/28 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
nodejs教程之入门
2014/11/21 NodeJs
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
JS创建Tag标签的方法详解
2017/06/09 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
小程序实现分类页
2019/07/12 Javascript
js实现日历
2020/11/07 Javascript
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
标准导师推荐信(医学类)
2013/10/28 职场文书
个人实习生的自我评价
2014/02/16 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
消防隐患整改通知书
2015/04/22 职场文书
心术观后感
2015/06/11 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang