页面引入JavaScript脚本

1、直接添加代码块
通过script标签,可直接将JavaScript代码嵌入网页
Example:

<script type="text/javascript">
  document.write("Hello World!")
</script>

2、加载外部脚本

<script charset="utf-8" src="example.js"></script>

直接将script标签写在页面上,浏览器加载时会阻塞页面渲染,知道js加载完成。

异步加载的脚本可以这样引入

<script src="js/require.js" defer async="async"></script>

其中,defer规定是否对脚本执行进行延迟,直到页面加载为止。但只有Internet Explorer支持defer属性。
async属性可以保证脚本下载的同时,浏览器继续渲染。一旦渲染完成,再执行脚本文件,这就是“非同步执行”的意思。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。IE 10支持async属性,低于这个版本的IE都不支持。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。

如果 async=”async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer=”defer”:脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

3、动态嵌入脚本
创建script元素,插入页面,可动态嵌入脚本,如下:

var jsfile = ['/js/logic/ee.js', '/js/logic/ff.js'];
for(var i = 0; i < jsfile.length; i++){
    var script = document.createElement('script');
    script.src = jsfile[i];
    script.async = false;
    var src = jsfile[i];
    script.onload = function(){
        console.log('onload ' + this.src);
    }
    document.head.appendChild(script);
}

不管async是不是设置为false,都不会阻塞页面渲染。但设置async为false,可保证按照添加到页面的顺序加载js,设置为true或不设置都不会按顺序加载。
还有就是,js加载下来后会立即执行,然后才会执行onload方法。

参考:
http://javascript.ruanyifeng.com/bom/engine.html

页面引入JavaScript脚本》上有2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>