几种延迟加载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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
javascript学习之闭包分析
Dec 02 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 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/11/22 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
将php数组输出html表格的方法
2014/02/24 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php生成短域名函数
2015/03/23 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
jQuery 联动日历实现代码
2012/05/31 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
详解Python用户登录接口的方法
2019/04/17 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
销售工作人员的自我评价分享
2013/11/10 职场文书
函授生自我鉴定
2014/03/25 职场文书
英语教育专业自荐信
2014/05/29 职场文书
消防志愿者活动方案
2014/08/23 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
Web应用开发TypeScript使用详解
2022/05/25 Javascript