原文地址
用readyStae状态实现页面中的js实现同步加载
前一段时间看一本《高性能网站建设进阶指南》这本书，提到页面中的js并不是同步加载的，这就会导致如果几个js文件是互为牵制的话，可能会造成有未读取到的js没有及时生成元素而报错的问题，而今天也是在网上看到了一篇叫做js同步加载最佳实践的文章，提出了一个能把多个js文件实现同步加载的最佳的办法。
1.方法思路：
a.在页面底部添加一个叫做first的js文件，这个文件里有一个loadScript的方法，这个方法有两个参数一个是url，另一个是返回函数，而这个loadjs的方法则是通过XMLHttpRequest对象readyState的五个状态来为页面添加含有src属性的script代码。
b.在页面中调用这个first.js文件，并在页面底部调用这个方法，需要添加几个js就调用几次。
2.方法代码：
a.编写first.js的loadScript的方法
查看源代码
打印帮助
01 function loadScript(url, callback){
02 var script = document.createElement("script")
03 script.type = "text/javascript";
04 if (script.readyState){ //IE
05 script.onreadystatechange = function(){
06 if (script.readyState == "loaded" || script.readyState == "complete"){
07 script.onreadystatechange = null;
08 callback();
09 }
10 };
11 } else { //Others
12 script.onload = function(){
13 callback();
14 };
15 }
16 script.src = url;
17 document.getElementsByTagName("head")[0].appendChild(script);
18 }
b.在页面内调用这个脚本文件，并执行loadScript的方法
查看源代码
打印帮助
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <title>loading效果</title>
05 </head>
06 <body>
07 <mce:script type="text/javascript" src="js/first.js" mce_src="js/first.js"></mce:script>
08 <mce:script type="text/javascript"><!--
09 loadScript("js/jquery-1.4.2.min.js", function(){
10 //初始化你的代码
11 })
12 loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js", function(){
13 //初始化你的代码
14 });
15 loadScript("http://partner.googleadservices.com/gampad/google_ads2.js", function(){
16 //初始化你的代码
17 });
18 // --></mce:script>
19 </body>
20 </html>
3.直接把js写在head之间和同步加载的效果对比
同步加载js效果：
直接把js写在head之间效果：
用readyStae状态实现页面中的js实现同步加载
前一段时间看一本《高性能网站建设进阶指南》这本书，提到页面中的js并不是同步加载的，这就会导致如果几个js文件是互为牵制的话，可能会造成有未读取到的js没有及时生成元素而报错的问题，而今天也是在网上看到了一篇叫做js同步加载最佳实践的文章，提出了一个能把多个js文件实现同步加载的最佳的办法。
1.方法思路：
a.在页面底部添加一个叫做first的js文件，这个文件里有一个loadScript的方法，这个方法有两个参数一个是url，另一个是返回函数，而这个loadjs的方法则是通过XMLHttpRequest对象readyState的五个状态来为页面添加含有src属性的script代码。
b.在页面中调用这个first.js文件，并在页面底部调用这个方法，需要添加几个js就调用几次。
2.方法代码：
a.编写first.js的loadScript的方法
查看源代码
打印帮助
01 function loadScript(url, callback){
02 var script = document.createElement("script")
03 script.type = "text/javascript";
04 if (script.readyState){ //IE
05 script.onreadystatechange = function(){
06 if (script.readyState == "loaded" || script.readyState == "complete"){
07 script.onreadystatechange = null;
08 callback();
09 }
10 };
11 } else { //Others
12 script.onload = function(){
13 callback();
14 };
15 }
16 script.src = url;
17 document.getElementsByTagName("head")[0].appendChild(script);
18 }
b.在页面内调用这个脚本文件，并执行loadScript的方法
查看源代码
打印帮助
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <title>loading效果</title>
05 </head>
06 <body>
07 <mce:script type="text/javascript" src="js/first.js" mce_src="js/first.js"></mce:script>
08 <mce:script type="text/javascript"><!--
09 loadScript("js/jquery-1.4.2.min.js", function(){
10 //初始化你的代码
11 })
12 loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js", function(){
13 //初始化你的代码
14 });
15 loadScript("http://partner.googleadservices.com/gampad/google_ads2.js", function(){
16 //初始化你的代码
17 });
18 // --></mce:script>
19 </body>
20 </html>
3.直接把js写在head之间和同步加载的效果对比
同步加载js效果：
直接把js写在head之间效果：
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步