几种延迟加载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 程序编码规范
Nov 23 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
微信小程序开发的基本流程步骤
Jan 31 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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
调频问题解答
2021/03/01 无线电
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
php中的依赖注入实例详解
2019/08/14 PHP
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
python操作列表的函数使用代码详解
2017/12/28 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
Java如何支持I18N?
2016/10/31 面试题
经典商业广告词
2014/03/13 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
继续教育个人总结
2015/03/03 职场文书
话题作文之自信作文
2019/11/15 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js