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 相关文章推荐
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
JavaScript Array对象使用方法解析
Sep 24 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
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Django分页功能的实现代码详解
2019/07/29 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
如何理解Python中包的引入
2020/05/29 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
个人投资合作协议书
2014/10/12 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python