加载js时，很容易导致js的堵塞，该怎么处理？

JavaScript0129

加载js时，很容易导致js的堵塞，该怎么处理？,第1张

无阻塞加载js

浏览器加载静态资源和js的方式都是线性加载，所以一般情况可以将js放到</body>前，防止UI线程的阻塞。

而某些时候我们既希望js在整个网页的头部就加载，又担心js阻塞导致网站加载缓慢，就可以用到无阻塞加载js技术。

Dynamic Script Elements 动态脚本元素

DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容，一个新的<script>元素可以非常容易的通过标准DOM创建：

var script = document.createElement ("script")script.type = "text/javascript"script.src = "file1.js" document.body.appendChild(script)

新的<script>元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了Firefox和Opera，它们将等待此前的所有动态脚本节点执行完毕）。

大多数情况下，我们希望调用一个函数就可以实现Javascript文件的动态下载。下面的函数封装实现了标准实现和IE实现：

function loadScript(url, callback){ var script = document.createElement ("script") 　 script.type = "text/javascript" if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null callback() } } } else { //Others script.onload = function(){ callback() } } script.src = url document.getElementsByTagName("head")[0].appendChild(script) } loadScript("file1.js", function(){ //调用 alert("File is loaded!") })

此函数接受两个参数：Javascript文件的Url和一个当Javascript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性，并将javascript文件添加到head。

动态脚本加载是非阻塞Javascript下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

jsfor循环阻塞妙用是在不满足条件的情况下停止循环。Js阻塞机制，跟Js引擎的单线程处理方式有关，每一个window一个JS线程。所谓单线程，在某个特定的时刻只有特定的代码可以被执行，并阻塞其它的代码。

主要有两个可能出问题的地方：1.ajax请求是同步的（open方法的参数中，可以设置）

2.ajax请求的服务器端asp页面可能使用了session，导致页面被锁死。关闭ajax所请求的页面的session（是ajax请求的页面，不是ajax所在的页面）