几种延迟加载JS代码的方法加快网页的访问速度


Posted in Javascript onOctober 12, 2013

本文介绍了如何延迟javascript代码的加载,加快网页的访问速度。

当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点:
1、延迟加载js代码

<script type=”text/javascript” src=”" id=”my”></script> 
<script type=”text/javascript”> 
setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延时3秒 
</script>

这样通过延迟加载js代码,给网页加载留出更多的时间!

2、js最后加载方案一
在需要插入JS的地方插入以下代码:
程序代码

<span id=”L4EVER”>LOADING…</span>

当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.
然后在页面最底端插入:
程序代码
<span id=”AD_L4EVER”>你的JS代码在这里!</span > 
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”";</script>

3、让JS最后加载方案二
这个牵涉到网页的加载顺序问题,例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度。
Javascript 相关文章推荐
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 #Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 #Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 #Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 #Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 #Javascript
JavaScript对象学习经验整理
Oct 12 #Javascript
js修改input的type属性问题探讨
Oct 12 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
php5.2时间相差8小时
2007/01/15 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
js实现抽奖的两种方法
2020/03/19 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python迭代用法实例教程
2014/09/08 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
pandas带有重复索引操作方法
2018/06/08 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
计算机操作自荐信
2013/12/07 职场文书
上学路上观后感
2015/06/16 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技