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方法。
不错,学习~
还要继续努力~