延时加载js代码提高速度

延时加载js代码提高速度:
如果网页中存在大量的javascript代码会极大的影响网页的访问速度，下面就简单介绍一下如何处理此问题。
一.延时加载js文件:
可以使用定时器函数setTimeout()让外部的js文件延迟加载，例如:

<script type="text/javascript" src="" id="my"></script>
<script type="text/javascript">
var js=document.getElementById("my");
function addjs(){
  js.src="js/js.js";
}
setTimeout(addjs,3000);
</script>

以上代码可以实现js代码咋3秒之后再加载，这样可以在一定程度上提高速度。
二.将js代码放到网页内容的后面:
这个比较简单了，就不用说了，就是将js代码放在网页内容的后面，一把是放在body的最底部，这样也可以先加载内容再去执行js代码，也能够提高一定的速度。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8348

更多内容可以参阅:http://www.softwhy.com/javascript/

时间： 2024-12-21 17:53:32

延时加载js代码提高速度的相关文章

动态加载JS代码

到处查资料研究js动态脚本的加载,找到以下7种方法,总有一种适合你! 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){ alert("成功加载"); } 后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <

（转）高性能JavaScript：加载和运行（动态加载JS代码）

浏览器是如何加载JS的 当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面.如果需要加载的js文件很多很大,则会让人感觉页面加载很慢,影响页面的交互.浏览器在遇到<body>之前,不会渲染页面的任何部分,如果此时<head>中需要加载的js文件很大的话,可能用户开始看到的页面就是一个“白板”,这种情况会立马让用户崩溃. Internet Explorer 8, Fir

JavaScript 之 动态加载JS代码或JS文件

2.动态加载JS文件 <script type="text/javascript"> function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if(typeof(callback) != "undefined"){     if (scri

加载JS代码

玩转JS系列之代码加载篇 一开始我们这样写js <script type="text/javascript"> function a(){ console.log('a init');}function b(){ console.log('b init'); a(); } </script> 随着功能越来越多,我们开始把js分离,使用单独的js文件来写,然后使用下面的方式引入js <script src="a.js" type=&quo

ASP.NET动态加载Js代码到Head标签中（三种方法）

方法一代码如下: HtmlGenericControl Include2 = new HtmlGenericControl("script"); Include2.Attributes.Add("type", "text/javascript"); Include2.InnerHtml = "alert('JavaScript in Page Header');"; this.Page.Header.Controls.Add(

jquery插件之lazyload图片延时加载功能

公司投票程序,页面图片较多,导致页面显示很慢,做的图片延时加载: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>demo</title> </

jquery动态加载js/css文件方法

先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 HTML代码 代码如下 复制代码 <script type="

一段实现页面上的图片延时加载的js

大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的. 实现原理 把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,

js 的延时加载

最近,由于项目中引用到的脚本比较多,页面首次加载速度有些慢,于是进行了一些优化 用到的是延时加载技术,大概思路就是减少页面的<script>标签,并依靠lazyload.js延时加载相应的脚本文件. 首先,要先引用lazyload.js ,这是一个老外写的脚本,我放到了公司的图片服务器上,大家可以直接访问  http://img.fang.com/rent/image/rent/js/lazyload.js 实践之前,先来看一下它的使用文档 // Load a single JavaScrip