延时加载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 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
vue学习笔记之slot插槽基本用法实例分析
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
php中cookie的使用方法
2014/03/29 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
php实现微信支付之现金红包
2018/05/30 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python中包的用法及安装
2020/02/11 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
美发活动策划书
2014/01/14 职场文书
幼儿园秋游感想
2014/03/12 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
主题团日活动总结
2014/06/25 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
求职自我评价参考范文
2019/05/16 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
Android中的Launch Mode详情
2022/06/05 Java/Android