几种延迟加载JS代码的方法加快网页的访问速度


Posted in Javascript onOctober 12, 2013

本文介绍了如何延迟javascript代码的加载,加快网页的访问速度。

当一个网站有很多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 中的事件教程
Apr 05 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
WebPack基础知识详解
Jan 16 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
微信小程序商品到详情的实现
Jun 27 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 #Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 #Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 #Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 #Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 #Javascript
JavaScript对象学习经验整理
Oct 12 #Javascript
js修改input的type属性问题探讨
Oct 12 #Javascript
You might like
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
jquery foreach使用示例
2013/09/12 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python实现获取Ip归属地等信息
2016/08/27 Python
基于python socketserver框架全面解析
2017/09/21 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python使用matplotlib绘制热图
2018/11/07 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python中时间模块的基本使用教程
2019/05/14 Python
python创建学生成绩管理系统
2019/11/22 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
我的梦中国梦演讲稿
2014/04/23 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
高二英语教学反思
2016/03/03 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫