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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
微信小程序登录换取token的教程
May 31 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 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
重新认识php array_merge函数
2014/08/31 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
Smarty模板配置实例简析
2019/07/20 PHP
xtree.js 代码
2007/03/13 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
介绍Python的Django框架中的QuerySets
2015/04/20 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
材料采购员岗位职责
2013/12/17 职场文书
校庆接待方案
2014/03/18 职场文书
捐赠仪式主持词
2014/03/19 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
Golang 遍历二叉树
2022/04/19 Golang