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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
原生js实现自定义滚动条
Jan 20 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
apache中为php 设置虚拟目录
2014/12/17 PHP
培养自己的php编码规范
2015/09/28 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
一套C++笔试题面试题
2012/06/06 面试题
中海讯通笔试题
2015/09/15 面试题
Linux如何为某个操作添加别名
2013/03/01 面试题
abstract class和interface有什么区别
2013/08/04 面试题
工程材料采购方案
2014/05/18 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Python 发送SMTP邮件的简单教程
2021/06/24 Python
python中mongodb包操作数据库
2022/04/19 Python
python数字图像处理:图像简单滤波
2022/06/28 Python