几种延迟加载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.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Flask框架信号用法实例分析
2018/07/24 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python获取引用对象的个数方式
2019/12/20 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
小车司机岗位职责
2013/11/25 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
公司贷款承诺书
2014/05/30 职场文书
小学生学习保证书
2015/02/26 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis