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 相关文章推荐
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
javascript拖拽应用实例
Mar 25 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
Javascript自定义事件详解
Jan 13 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
vue router仿天猫底部导航栏功能
Oct 18 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
js实现菜单跳转效果
2020/12/11 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
python 中字典嵌套列表的方法
2018/07/03 Python
int在python中的含义以及用法
2019/06/27 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
校园新闻广播稿
2014/01/10 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
在校学生证明格式
2015/06/24 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android