几种延迟加载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 相关文章推荐
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
js实现京东轮播图效果
Jun 30 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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
PHP入门经历和学习过程分享
2014/04/11 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
怎么写好自荐信
2013/10/30 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
技能比赛获奖感言
2014/02/14 职场文书
授权委托书格式模板
2014/04/03 职场文书
诚信贷款承诺书
2014/05/30 职场文书
群教个人对照检查材料
2014/08/20 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
Django实现聊天机器人
2021/05/31 Python
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
Linux中sftp常用命令整理
2022/06/28 Servers