几种延迟加载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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
深入了解NumPy 高级索引
2020/07/24 Python
超级实用的8个Python列表技巧
2020/08/24 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
为什么要有struct关键字
2012/05/08 面试题
物流经理自我评价
2013/09/23 职场文书
给校长的建议书600字
2014/05/15 职场文书
男性健康日的活动方案
2014/08/18 职场文书
2016年校长新年寄语
2015/08/17 职场文书