延时加载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 相关文章推荐
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
js严格模式总结(分享)
Aug 22 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 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 各种应用乱码问题的解决方法
2010/05/09 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
浅析PHP与Python进行数据交互
2018/05/15 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python tornado上传文件的功能
2020/03/26 Python
详解pandas映射与数据转换
2021/01/22 Python
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
酒店副总岗位职责
2013/12/24 职场文书
异地年检委托书范本
2014/09/24 职场文书
2014年材料员工作总结
2014/11/19 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
Node.js实现断点续传
2021/06/23 Javascript
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL