JavaScript入门基础知识总结_js基础总结-CSDN博客

本文探讨了如何利用<script>标签的不同属性实现JavaScript的异步加载，包括defer和async属性的应用，并对比了document.write与innerHTML在DOM操作上的区别。

文章目录

script元素
异步加载JS的方法
document.write和innerHTML的区别

将JavaScript引入网页，要解决它与网页主导语言HTML的关系问题。

script元素

将JavaScript插入HTML主要方法是使用<script>元素。这个元素由网景公司创造，后来被加入HTML规范，有以下常用属性：
在这里插入图片描述
使用<script>标签的方法：

直接嵌入式

<script>//从上到下依次解释
    function sayHi(){
        console.log('Hi!');
    }
</script>

注意 : 代码中不能出现字符串</script>,浏览器会将其当成结束的</script>标签，避免这个问题，只需加上转义字符\即可。

外部链接式

 <script src="example.js"></script>

注意：<script>标签最为强大同时备受争议的功能，可以包含来自外部域的JavaScript文件，src属性可以是一个完整的URL，该URL指向的资源可以跟包含它的HTML页面不在一个域中。解析该资源浏览器会向指定地址发送一个GET请求（不受同源策略限制），但返回的资源回受限制。
来自外部域的代码会被当成加载他的页面的一部分来加载和解释。因此，引用了放在别人服务器的js文件要确保是可信的来源。

异步加载JS的方法

将<script>标签放到<body>底部

严格来说，这并不算是异步加载，但是这也是常见的通过改变js加载方式来提升页面性能的一种方式。将<script>放到<body>底部，解决上上面说到的几个问题，一是不会造成页面解析的阻塞，就算加载时间过长用户也可以看到页面而不是一片空白，而且这时候可以在脚本中操作DOM。

defer属性
通过给<script>标签设置defer属性，将脚本文件设置为延迟加载，当浏览器遇到带有defer属性的<script>标签时，会再开启一个线程去下载js文件，同时继续解析HTML文档，等等HTML全部解析完毕DOM加载完成之后，再去执行加载好的js文件。这种方式只适用于引用外部js文件的<script>标签，可以保证多个js文件的执行顺序就是它们在页面中出现的顺序，但是要注意，添加defer属性的js文件不应该使用document.write方法。
async属性
async属性和defer属性类似，也是会开启一个线程去下载js文件，但和defer不同的时，它会在下载完成后立刻执行，而不是会等到DOM加载完成之后再执行，所以还是有可能会造成阻塞。它不能像defer那样保证按顺序执行，它是哪个js文件先下载完就先执行哪个。
动态创建<script>标签

(function(){
    var scriptEle = document.createElement("script");
    scriptEle.type = "text/javasctipt";
    scriptEle.async = true;
    scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
    var x = document.getElementsByTagName("head")[0];
    x.insertBefore(scriptEle, x.firstChild); 
})();

注意：一般来说，两者之间的选择则是看脚本之间是否有依赖关系，有依赖的话应当要保证执行顺序，应当使用defer没有依赖的话使用async，同时使用的话defer失效。要注意的是两者都不应该使用document.write，这个导致整个页面被清除。

document.write和innerHTML的区别

document.write 是直接写入到页面的内容流，如果在写之前没有调用 document.open, 浏览器会自动调用 open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML 则是 DOM 页面元素的一个属性，代表该元素的 html 内容。你可以精确到某一个具体的元素来进行更改。如果想修改 document 的内容，则需要修改document.documentElement.innerElement。innerHTML 将内容写入某个 DOM 节点，不会导致页面全部重绘。innerHTML 很多情况下都优于 document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。