javascript的加载

angowang

浏览: 5175 次
性别:
来自: 深圳

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

1.在</body>前放置<script type="text/javascript"></script>标签；

2.非阻塞脚本；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
    </head>
    <body>
        <script type="text/javascript">
            alert('common');
        </script>
        <script type="text/javascript" defer>
            alert('defer');
        </script>
        <script type="text/javascript">
            window.onload = function(){
                alert('onload');
            }
        </script>
    </body>
</html>

执行顺序:common--->defer--->onload

3.动态脚本一；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
    </head>
    <body>
        <script type="text/javascript">
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.onload = function(){
                alert('script loaded!');
            };
            script.src = 'loaded.js';
            document.getElementsByTagName('head')[0].appendChild(script);
        </script>
    </body>
</html>

loaded.js文件如下：

alert('loaded.js')

执行顺序:loaded.js--->script loaded!

4.动态脚本二；

html如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
    </head>
    <body>
        <script type="text/javascript" src="loadScript.js"></script>
        <script type="text/javascript">
            loadScript('script.js', function(){
                alert('script.js loaded');
            });
        </script>
    </body>
</html>

loadScript.js如下：

script.js如下：

alert('script.js');

执行书序：script.js--->script is loaded

5.xhr脚本注入；

html如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
    </head>
    <body>
        <script type="text/javascript">
            var xhr = new XMLHttpRequest();
            xhr.open('get', './script.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);
        </script>
    </body>
</html>

script.js如下：

alert('script.js is loaded');

6.推荐非阻塞模式一；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
    </head>
    <body>
        <script type="text/javascript" src="loader.js"></script>
        <script type="text/javascript">
            loadScript('the-rest.js', function(){
                Application.init();
            });
        </script>
    </body>
</html>

7.推荐非阻塞模式二；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>xxx</title>
    </head>
    <body>
        <script type="text/javascript">
            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('the-rest.js', function(){
                Application.init();
            });
        </script>
    </body>
</html>

8.使用第三方插件；

一：使用YUI3进行压缩合并；

二：使用LazyLoad.js加载；

三：使用LABjs加载。

分享到：

两个按钮将屏幕对半，且适应屏幕的缩放 | css的浮动

2014-09-18 23:48
浏览 374
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论