js 延迟加载 改变JS的位置加快网页加载速度


Posted in Javascript onDecember 11, 2012

当一个网站有很多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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
javascript的理解及经典案例分析
May 20 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
js控制CSS样式属性语法对照表
Dec 11 #Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 #Javascript
ajax的hide隐藏问题解决方法
Dec 11 #Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 #Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 #Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 #Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 #Javascript
You might like
图书管理程序(三)
2006/10/09 PHP
SSI指令
2006/11/25 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
php实现无限级分类
2014/12/24 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
js实现密码强度检验
2017/01/15 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
查看Django和flask版本的方法
2018/05/14 Python
python微信公众号之关键词自动回复
2018/06/15 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
总结表彰大会主持词
2014/03/26 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
工程进度款催款函
2015/06/24 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB