返回首页

js延迟加载的方式有哪些?

来源:www.xuniwu.cn   时间:2023-08-14 12:09   点击:77  编辑:admin   手机版

一、js延迟加载的方式有哪些?

一般有以下几种方式:

defer 属性

async 属性

动态创建DOM方式

使用jQuery的getScript方法

使用setTimeout延迟方法

让JS最后加载

二、js实现延迟加载的几种方法?

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

延迟加载js代码,给网页加载留出更多时间

<script type="text/javascript" >

function A(){

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

alert("Hello");

});

}

$(function (){

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

})

</script>

2.让js最后加载

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

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

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

<script type="text/javascript">

function downloadJSAtOnload() {

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

element.src = "defer.js";

document.body.appendChild(element);

}

if (window.addEventListener)

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

else if (window.attachEvent)

window.attachEvent("onload", downloadJSAtOnload);

else window.onload = downloadJSAtOnload;

</script>

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

使用此段代码的步骤:

1).复制上面代码

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

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

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

三、js默认加载方法?

在JavaScript中,当页面加载时,会依次执行以下方法:1.解析HTML和CSS文件,创建DOM(文档对象模型)和CSSOM(CSS对象模型)树。2.遇到script标签时暂停解析HTML,执行该标签内的JavaScript代码。3.当script代码执行完成后,继续解析HTML文件,构建DOM和CSSOM树的同时使用JavaScript操作DOM树。4.当DOM树、CSSOM树构建完成后,浏览器根据这两棵树合并生成渲染树,并在屏幕上显示页面。所以,JavaScript默认加载方法是按照以上步骤执行。

四、网页无法加载js?

+

+1)检查html文档中是否引入js文件,引入的话检查地址是否正确;

+

+2)可能有浏览器访问安全策略导致js不能被加载;

+

+3)检查js代码,看看是否有语法错误;

+

+4)检查服务器是否有正确的返回js文件类型,服务器应答头中是否指定正确的MIME类型;

+

+5)如果js文件依赖了另外的插件,要检查这些依赖插件是否正确加载了;

+

+6)检查是否是缓存导致的,尝试清除缓存重新载入;

五、js加载错误怎么解决?

js加载错误是指网页在读取js文件的时候,读取不到文件,就会提示失败。

如果是自己在开发调试时,一般只要在浏览器上按F12,打开调试模式,可以看到提示失败的详细原因,如果是文件找不到,会有明显说明哪个文件路径的文件为404找不到而报错,按照路径把缺失js文件补上就好。

六、js不能加载本地资源?

方案一:可以将项目部署在web服务器上,如tomcat,

将目录移动到例如apache-tomcat-7.0.47\webapps\下,启动tomcat,然后浏览器打开后输入http://localhost/...即可。

方案二:设置浏览器

现在浏览器为了安全起见,一般都默认不能加载本地文件,其实我们设置一下就可以加载了。

Chrome:

1、

(1)得到Chrome的安装路径,例如:C:\Program Files\Google\Chrome\Application

(2)在命令行窗口,输入安装路径,加上--allow-file-access-from-files参数,例如:

Chrome installation path\chrome.exe --allow-file-access-from-files

     重新启动浏览器即可。

2、在Chrome的快捷方式,右键->属性->目标的文本框中加上参数 --allow-file-access-from-files

例:"C:\Program Files \Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Firefox:

1、在浏览器的地址栏输入“about:config”,回车

2、在过滤器(filter)中搜索“security.fileuri.strict_origin_policy”

3、将security.fileuri.strict_origin_policy设置为false

4、关闭目前开启的所有Firefox窗口,然后重新启动Firefox。

七、nginx怎么不能加载JS文件?

不能加载JS文件原因有很多的,一般来说是目录权限的问题。

。执行下面的命令后搞定了 chmod 777 -R webDir

八、怎么判断js脚本加载完成?

由于HTML是解释型语言,一般的DOM构建顺序是这样子的:(html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕)

九、JS判断页面是否加载完成?

1,html与js是否是并行下载 如果你想问的是,在 页面 HTML 加载完成之前,浏览器是不是会加载外联 js ,那么是的,你可以拿 Node.js 写一个 request handler ,在多次 flush 之间弄一个时间间隔试试。

2,是js的下载阻塞了页面的渲染还是js的执行阻塞了页面的渲染,还是两者都会阻塞页面DOM 树解析到非异步的外联 js 时会阻塞住,在它加载并且执行完之前,不会往下解析 DOM 树。

3,script标签放在head中与放在body中,是影响了js的下载开始时间还是执行开始时间 如果不考虑 http 并发请求数的限制,并且忽略掉接收页面 response body 的耗时的话,在有预解析的浏览器上,外联的 script 放哪都不会(太)影响加载开始时间。需要注意的是,虽然加载是并行化的,但 js 会阻塞住 dom 树解析,因而你把 script[src]放在 head 中会阻塞住首屏渲染,最好还是放在 body 尾部。

4,css,图片以及一些其它的外部资源的下载是否与html,js的下载并行情况还挺复杂的,基本上指导原则是浏览器会尝试把所有的加载都并行化,尽可能快地完成加载,但也要考虑并发请求数的限制。并且如上一条所述,并行化加载,但 dom 树解析、js执行和首屏渲染却是串行的,浏览器会尽可能快地完成加载,不代表这些元素放置的顺序就不重要。

十、js加载失败什么意思?

js加载失败是指网页在读取js文件的时候,读取不到文件,就会提示失败。

如果是自己在开发调试时,一般只要在浏览器上按F12,打开调试模式,可以看到提示失败的详细原因,如果是文件找不到,会有明显说明哪个文件路径的文件为404找不到而报错,按照路径把缺失js文件补上就好。

顶一下
(0)
0%
踩一下
(0)
0%
上一篇:返回栏目