一同事分析页面遇到阻塞式加载js，影响了页面的渲染速度。.
之前，实现WYSIWYG插件机制的时候为了实现lazy load，写了个同步无阻塞加载js的方法，解决方法很暴力，仅供参考，，注意，只是个demo。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test</title>
<script type="text/javascript">
var require = {};
function importJS(file) {
if (typeof require[file] != "undefined") {
return;
}
require[file] = true;
var script = document.createElement("script");
script.type = "text/javascript";
script.src = file;
var callback = arguments.callee.caller;
script.onload = function() {
callback();
callback = function(){};
};
script.onreadystatechange = function() {
if(/loaded|complete/.test(this.readyState)) {
callback();
callback = function(){};
}
};
document.getElementsByTagName("head")[0].appendChild(script);
throw "";
}
</script>
<script type="text/javascript">
(function(){try {
importJS('a.js'); //先加载a.js
importJS('b.js'); //然后加载b.js
alert('c'); //最后打印c
}catch (ex) {}})();
</script>
</head>
<body>
</body>
</html>
要使用importJS的那段js代码必须写在(function(){try { /*代码*/ }catch (ex) {}})();之间，且importJS要在头部...不然会重复执行，，，写这个demo的时候，发现ff3下嵌套加载会出现alert无法阻塞的bug
这肯定不是很好的解决方法，限制比较大，只是勉强解决同步无阻塞加载^_^，并且参考了bingo的方法
对于，同步无阻塞加载js有兴趣的朋友，可以延伸阅读：
http://bbs.51js.com/viewthread.php?tid=72939&extra=page%3D1%26amp;filter%3Ddigest
http://www.iteye.com/topic/134964
http://jindw.iteye.com/blog/66702
http://jsvm.org/forums/2424/ShowPost.aspx#2424
希望，有朋友可以提供一个比较好的解决方法。
分享到：
相关推荐
"同步加载JS文件Demo"就是为了解决这一问题而设计的示例。 同步加载JavaScript意味着浏览器会暂停HTML解析，直到当前的脚本加载并执行完毕才会继续。这种方式保证了依赖关系的正确性，但可能会阻塞页面的渲染，如果...
本文讲述了JS同步、异步、延迟加载的方法。分享给大家供大家参考，具体如下： 一：同步加载 我们平时使用的最多的一种方式。 [removed][removed] 同步模式，又称阻塞...异步加载又叫非阻塞加载，浏览器在下载执行j
无阻塞加载 把js放在head里，浏览器是怎么去执行它的呢，是按顺序加载还是并行加载呢？在旧的浏览器下，都是按照先后顺序来加载的，这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载...
通过上述函数可以实现异步加载js文件，如果需要同步加载，可以通过将创建的script元素添加到页面的head部分之前来实现： ```javascript function loadJsFileSync(url,FileType,successCallback){ var script = ...
总结一下，解决js ajax同步请求造成浏览器假死的问题的关键在于理解浏览器单线程的特性及其在执行同步请求时会阻塞UI线程的行为。开发者可以通过使用异步请求或将耗时的请求操作放入setTimeout等JavaScript定时器中...
`JSLoader`就是这样一种工具，它允许开发者在JSP页面中异步地加载JS文件，提高页面性能。 ### 异步加载的优势 1. **提升性能**：异步加载可以确保页面主体内容先加载，用户可以更快地看到页面内容，提升用户体验。...
本文将详细讲解如何使用JavaScript实现广告的无阻塞加载。 首先，我们需要了解广告代码通常是如何加载的。常见的方法是使用document.write()函数来直接将广告代码插入到HTML文档中。这种方法虽然简单，但是它会在...
本文将详细介绍四种动态加载JS脚本的方法，并探讨它们的工作原理和应用场景。 1. **直接使用`document.write`**： 这是最基础的动态加载方式，通过在JavaScript中使用`document.write`来插入包含`<script>`标签的...
与同步加载相对的是异步加载，它允许浏览器并行加载JavaScript文件，不会阻塞页面的其他内容的渲染。通过动态创建script元素并设置`async`或`defer`属性，或者使用AJAX技术实现。 1. **动态创建script元素** 通过...
在JavaScript中，同步import或加载外部JS文件的行为并不是推荐的做法，因为它会阻塞后续代码的执行直到资源完全加载。这种做法可能会导致页面的性能下降和用户体验的恶化。但是，如之前提及，某些老旧系统或特殊的...
在现代网页开发中，由于 JavaScript 文件的体积越来越大，同步加载（即默认方式）会阻塞浏览器解析HTML，导致页面加载延迟，用户可能会看到长时间的空白页面。异步加载则能避免这一问题，使页面可以先呈现基本结构，...
Jquery ajax同步阻塞问题详解 在使用Jquery进行异步数据交互时，常常会遇到ajax请求引起的问题。尤其是在同步模式下，一个请求可能会阻塞浏览器的UI线程，从而造成用户体验的严重下降。本文将详细讨论Jquery ajax...
在这些加载动画中，JS通常用来监听页面加载事件，如DOMContentLoaded或load事件，当页面内容加载完成后，JS会停止加载动画，显示实际内容。此外，JS还可以根据用户行为触发动画，比如点击按钮启动加载动画。例如，...
8. **预加载和预读取**：对于关键的JavaScript文件，可以使用`<link rel="preload" href="script.js">`或`<link rel="prefetch" href="script.js">`来预先加载或预读取资源，这样在用户需要时，脚本已经准备就绪。...
1. **同步预加载**：使用`<img>`标签的`src`属性预加载图片，这种方式是同步的，会阻塞浏览器的渲染线程，不推荐在主线程中使用。 2. **异步预加载**：通过JavaScript创建`Image`对象并设置其`src`属性，这样可以在...
JavaScript 异步加载是网页优化的关键技术之一，它允许脚本在不阻塞浏览器解析页面的情况下进行下载和执行。在传统的同步加载模式下，JavaScript 文件的加载会暂停HTML的解析，直到该脚本完全下载并执行完毕。这可能...
然而，它的默认加载方式是同步的，这意味着浏览器会暂停HTML文档的解析，直到当前的JavaScript代码完全执行完毕。这种行为在JavaScript文件较大或者有复杂的计算时，可能会导致页面加载速度变慢，用户体验下降。为了...