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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
ES6 解构赋值的原理及运用
May 25 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
详解webpack babel的配置
2018/01/09 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
对python生成业务报表的实例详解
2019/02/03 Python
浅谈Python中的继承
2020/06/19 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
旅游网创业计划书
2014/01/31 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
长江七号观后感
2015/06/11 职场文书
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL