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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
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&amp;mysql(一)
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
详谈python read readline readlines的区别
2017/09/22 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python多进程并发demo实例解析
2019/12/13 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
幼儿园教师节演讲稿
2014/09/03 职场文书
行政上诉状范文
2015/05/23 职场文书
电影红河谷观后感
2015/06/11 职场文书