Javascript异步加载

最新推荐文章于 2023-04-19 10:04:13 发布

原创最新推荐文章于 2023-04-19 10:04:13 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js异步加载

就我对异步加载的认识就是使用<script type="text/javascript" src="Demo.js"></script>加载外部文件是，由于js是单线程的，在加载

js的时候，自身的HTML以及css会等待js外部文件加载结束了之后才会被浏览器进行加载渲染，因此比较低效，所以用到异步的概念来解决这个方法

有三种方式
   defer async 创建script
   第一种方式优点可以写入内部代码缺点是必须等dom树加载完成之后才能加载，只有IE浏览器才能使用这种方式
   <script type="text/javascript" src="Demo.js" defer="defer">
       var a=100; //可以写入内部代码
   </script>
   第二种方式是页面加载完就执行，但是只能引用外部js文件,不能引入内部代码
   优点是不需要等dom树执行完成在加载
   <script type="text/javascript" src="Demo.js" async="async">
   </script>

第二种方式是比较常用的方法

<html>

...........省略

<body>

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

script.type="text/javascript" ;

script.src="Demo.js";

document.head.appendChild("script");

</script>

</body>

</html>

这种方法还可以判定是否文件加载完成，如果需要用到js里面文件的函数，但是如果没加载完成则会发生报错，所以要先判断加载成功没有

此方式是支持谷歌，火狐，等但是不支持IE的

script.onload=function()

{
}

这是支持IE的

if(script.readyState)
       {
           script.onreadyStatechange=function()
           {
               if (script.readyState=="complete"||script.readyState=="onloaded") {

               }
           }
       }