js实现延迟加载的几种方法详解

一、js实现延迟加载的几种方法详解

这是一个面试经常问到的问题：js的延迟加载方法(js的延迟加载有助于提高页面的加载速度)

主要考察对程序的性能方面是否有研究，程序的性能是一个项目不断地追求的，通常也是项目完成后需要长期做的一件事情，像腾讯QQ依然对程序的性能不断地做优化，让用户的体验更好，性能优化的核心思想就是快，可以预先准备数据（如缓存的使用），可以按需获取，可以分段获取等都是常见的优化手段。

<script src="file.js" defer></script>

浏览器会并行下载 file.js和其它有 defer属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，超过10多年了！Firefox从 3.5开始支持defer属性。

注：所有的defer脚本保证是按顺序依次执行的。

<script src="file.js" async></script>

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload事件之前完成。

Firefox3.6、Opera 10.5、IE 9和最新的Chrome和 Safari都支持 async属性。可以同时使用 async和 defer，这样IE 4之后的所有IE都支持异步加载。

<script type="text/javascript">

function downloadJSAtOnload(){

var element= document.createElement("script");

document.body.appendChild(element);

if(window.addEventListener)//添加监听事件

window.addEventListener("load",downloadJSAtOnload, false);//事件在冒泡阶段执行

window.attachEvent("onload",downloadJSAtOnload);

window.onload= downloadJSAtOnload;

PS：这里插一句addEventListener()也是常考的知识点之一：

addEventListener()方法用于向指定元素添加事件句柄。

使用 removeEventListener()方法来移除 addEventListener()方法添加的事件句柄。

语法：element.addEventListener(event, function, useCapture)

event（必须）字符串，指定事件名。注意:不要使用“on”前缀。例如，使用“click”,而不是使用“onclick”。

function（必须）指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如，“click”事件属于 MouseEvent(鼠标事件)对象。

useCapture（可选）布尔值，指定事件是否在捕获或冒泡阶段执行。【true：事件句柄在捕获阶段执行； false：默认，事件句柄在冒泡阶段执行】

<p>该实例使用 addEventListener()方法来向按钮添加点击事件。</p>

<button id="myBtn">点我</button>

document.getElementById("myBtn").addEventListener("click", function(){

document.getElementById("demo").innerHTML="Hello World";

$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数

从源码可以看出，这个方法最后还是调用了jQuery.ajax()来请求了js文件的。

5.使用setTimeout延迟方法的加载时间

延迟加载js代码，给网页加载留出时间

<script type="text/javascript">

$.post("/lord/login",{name:username,pwd:password},function(){

setTimeout("A()",1000);//延迟1秒

例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。

上述方法5,6也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

//这些代码应被放置在</body>标签前(接近HTML文件底部)<script type="text/javascript">

function downloadJSAtOnload(){

var element= document.createElement("script");

document.body.appendChild(element);

window.addEventListener("load", downloadJSAtOnload, false);

window.attachEvent("onload", downloadJSAtOnload);

else window.onload= downloadJSAtOnload;

这段代码意思是等到整个文档加载完后，再加载外部文件“defer.js”。

粘贴代码到HTML的标签前(靠近HTML文件底部)

修改“defer.js”为你的外部JS文件名

确保你文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。

注意：这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来。

若有不足请多多指教！希望给您带来帮助！

二、php如何动态显示时间

1、动态显示时间？。。你没搞错。PHP是后台开发程序。

2、你的意思是要PHP页面动态显示时间吧。

3、PHP只能得到一个在程序运行时的到个时间在输出到页面，如果要页面上的时间不停的变化你用JS，些吧，那样就可以动态显示了。

4、要不你用JAXJ，不停的向服务器提交，让服务器不停的输出。

三、怎样把动态canvas时间效果显示桌面

web页面开发过程，基本流程：查询-->>显示；

查询时间或长或短，为了提升用户体验，目前用的比较多的手段之一就是查询等待时添加一个动态等待效果

在界面上贴一个gif动态等待效果图片

gif图片获取方式：网上找素材，会ps的可以自己制作

2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：

这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制

animation: bganim 0.6s linear 0s infinite;

-moz-animation: bganim 0.6s linear 0s infinite;

-webkit-animation: bganim 0.6s linear 0s infinite;

from{ transform:rotate(0deg);} to{ transform:rotate(360deg);}

from{-moz-transform:rotate(0deg);} to{-moz-transform:rotate(360deg);}

from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);}

<label>CSS3效果</label>

<div class="loading"></div>

-------------------------------------------------

运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现

3、使用js等待效果插件(如：spin.js)

-----------------------------------------------------

var target= document.getElementById('img_wait');

var spinner= new Spinner(opts).spin(target);

---------------------------------

<div id="img_wait"></div>