网站地图    收藏    合作   

主页 > 前端 > javascript >

js动态加载js封装

来源:未知    时间:2021-11-09 17:53 作者:小飞侠 阅读:

[导读] js动态加载js封装 下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 【基本优化】 将所有需要的script标签都放在/body之前,确保脚本执行之前完成...

js动态加载js封装

下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度

 

  1. 【基本优化】

    将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂的。

  2.  

    【合并JS代码,尽可能少的使用script标签】

    最常见的方式就是带代码写入一个js文件中,让页面只使用一次<script></script>标签来引入

  3.  

    【无堵塞加载JS】

    通过给script标签增加 defer属性或者是 async 属性来实现

    <script src="file.js" defer></script>

    注解:

     

    async和defer不同之处是async加载完成后会自动执行脚本,defer加载完成后需要等待页面也加载完成才会执行代码

  4.  

    【动态创建script来加载-推荐】

  5. function loadJS( url, callback ){
        var script = document.createElement('script'),
            fn = callback || function(){};
        script.type = 'text/javascript';
        
        //IE
        if(script.readyState){
            script.onreadystatechange = function(){
                if( script.readyState == 'loaded' || script.readyState == 'complete' ){
                    script.onreadystatechange = null;
                    fn();
                }
            };
        }else{
            //其他浏览器
            script.onload = function(){
                fn();
            };
        }
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }
     
    //用法
    loadJS('file.js',function(){
        alert(1);
    });
  6.  

    谷歌浏览器运行效果,script被动态创建在head中

  7.  

    建议大家可以封装成类库,单独引入。

    该原理实现的也有很多不错的js类库可以使用,如LazyLoad.js,支持数组的形式引入,打开浏览器在network中可看到js是同步加载的

  8.  

    【XHR加载】

    使用ajax方式加载

    代码:

  9. var xhr = new XMLHttpRequest;
    xhr.open('get','file.js',true);
    xhr.onreadystatechange = function(){
     
        if( xhr.readyState == 4 ){
            if( xhr.status >=200 && xhr.status < 300 || xhr.status == 304 ){
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.text = xhr.responseText;
                document.body.appendChild(script);
            }
        }
     
    };
    xhr.send(null);
  10. 8

    【总结】

    最好的方式还是使用动态创建script的方式加载,当动态创建script,浏览器会分配一个线程去下载src指向的资源,多个script也是同步下载的


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论