几种延迟加载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获取当前ip的代码
May 10 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 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
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php封装一个异常的处理类
2017/06/08 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
vue实现通讯录功能
2018/07/14 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Django中Middleware中的函数详解
2019/07/18 Python
python 实现简易的记事本
2020/11/30 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
JSF的标签库有哪些
2012/04/27 面试题
前台文员个人求职信范文
2014/01/05 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
医院保洁员管理制度
2015/08/05 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL