几种延迟加载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 相关文章推荐
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
Jquery cookie操作代码
Mar 14 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
简单的js表格操作
Sep 24 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
Javascript操作select控件代码实例
Feb 14 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP检测用户语言的方法
2015/06/15 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
php curl发送请求实例方法
2019/08/01 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
用console.table()调试javascript
2014/09/04 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python自动发送邮件脚本
2018/06/20 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Django框架models使用group by详解
2020/03/11 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
python利用opencv实现颜色检测
2021/02/23 Python
《第一朵杏花》教学反思
2014/04/16 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书