脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 延时加载js代码提高速度

延时加载JavaScript代码提高速度

 更新时间：2015年12月27日 12:30:59   作者：zhengzebiaodashi  
这篇文章主要介绍了延时加载JavaScript代码提高速度的相关资料,需要的朋友可以参考下

延时加载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中手动实现Array.prototype.map方法

    JavaScript中手动实现Array.prototype.map方法

    在前端开发中,我们经常需要对数组进行操作和处理,本文主要介绍了JavaScript中手动实现Array.prototype.map方法,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • 一文详解Proxy和Object.defineProperty的使用与区别

    一文详解Proxy和Object.defineProperty的使用与区别

    在JavaScript中,对象是一种核心的数据结构,而对对象的操作也是开发中经常遇到的任务,本文将深入比较Proxy和Object.defineProperty,感兴趣的小伙伴可以了解下
    2023-12-12
  • javascript面向对象程序设计（一）

    javascript面向对象程序设计（一）

    这篇文章主要介绍了javascript面向对象程序设计，分享给大家一段代码，注释里讲解的非常详细，有助于我们理解面向对象，这里推荐给大家。
    2015-01-01
  • 通过JAVASCRIPT读取ASP设定的COOKIE

    通过JAVASCRIPT读取ASP设定的COOKIE

    通过JAVASCRIPT读取ASP设定的COOKIE...
    2007-02-02
  • 利用Console来Debug的10个高级技巧汇总

    利用Console来Debug的10个高级技巧汇总

    通常，我们在编写一个新的JavaScript代码过程中经常会发生错误，可能是语法错误，可能是逻辑错误，如果没有一个调试工具帮助我们的话，相信你怕是头都要炸了。下面这篇文章主要给大家总结介绍了关于利用Console来Debug的10个高级技巧，需要的朋友可以参考下。
    2018-03-03
  • 微信小程序获取网络类型的方法示例

    微信小程序获取网络类型的方法示例

    这篇文章主要介绍了微信小程序获取网络类型的方法,结合完整实例形式分析了微信小程序通过wx.getNetworkType获取网络类型的相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 微信小程序模板与设置WXML实例讲解

    微信小程序模板与设置WXML实例讲解

    这篇文章主要介绍了微信小程序模板与设置WXML，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Bootstrap CSS布局之列表

    Bootstrap CSS布局之列表

    这篇文章主要为大家详细介绍了Bootstrap CSS布局之列表的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Javascript中arguments对象的详解与使用方法

    Javascript中arguments对象的详解与使用方法

    ECMAScript中的函数并不介意传递的参数有多少，也不介意是什么类型。由于JavaScript允许函数有不定数目的参数，所以我们需要一种机制，可以在 函数体内 部读取所有参数。这就是arguments对象的由来。这篇文章将详细介绍Javascript中的arguments对象和使用方法。
    2016-10-10
  • javascript在IE下trim函数无法使用的解决方法

    javascript在IE下trim函数无法使用的解决方法

    这篇文章主要介绍了javascript在IE下trim函数无法使用的解决方法,分别叙述了javascript以及jQuery下的解决方案,对于WEB前端javascript设计人员进行浏览器兼容性调试有不错的借鉴价值,需要的朋友可以参考下
    2014-09-09

最新评论