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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
js jquery数组介绍
Jul 15 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
jQuery的文档处理程序详解
May 10 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
小程序实现上传视频功能
Aug 18 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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调用Oracle存储过程的方法
2008/09/12 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
jquery编写日期选择器
2017/03/16 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python语言描述最大连续子序列和
2017/12/05 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python实现中值滤波去噪方式
2019/12/18 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
女大学生自我鉴定
2013/12/09 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
董事长秘书工作职责
2014/06/10 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
电影圆明园观后感
2015/06/03 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers