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插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
详解Vue 如何监听Array的变化
Jun 06 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
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
python仿抖音表白神器
2019/04/08 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python读文件的步骤
2019/10/08 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python实现udp传输图片功能
2020/03/20 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
.NET概念性的面试题
2012/02/29 面试题
二手书店创业计划书
2014/01/16 职场文书
安全环保标语
2014/06/09 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript