浏览器对象-1

代码嵌入网页的方法

1 .script标签内直接嵌入代码

1 .type属性可以设置为 text/javascript 
2 .type=application/javascript
3 .type=module
4 .注意，如果type的值浏览器不认识，那么是不会解析的，这就意味着可以在标签内嵌入任何的文本内容。只需要加上一个浏览器不认识的type属性。可以使用text属性来读出他的内容

2 .加载外部脚本

1 .intergrity属性可以写入该外部脚本的hash签名，用来验证脚本的一致性
2 .

3 .url协议 点击
4 .

脚本的执行顺序

1 .脚本的执行顺序由他们在页面中的出现顺序决定，这是为了保证脚本之间的依赖关系不会受到破坏。
2 .defer属性

1 .为了解决脚本文件阻塞网页渲染的问题。可以对script脚本加入defer属性
2 .他的作用是延迟脚本执行，先让dom加载，在加载的时候并行下载这个脚本，等到dom生成之后，执行此脚本
3 .浏览器开始解析HTMl网页
4 .解析过程发现带有defer属性的script元素
5 .浏览器继续往下解析HTML网页，同时并行下载script元素加载的外部脚本
6 .浏览器完成解析HTML网页，此时在回过头执行已经下载完成的脚本
7 .这个脚本会在DOMContentLoaded事件触发之前执行，就是刚刚读完标签，而且可以保证脚本的执行顺序就是在页面上出现的顺序
8 .对于内置而不是加载外部脚本的script标签，以及动态生成的script标签，defer属性不起作用
9 .使用defer加载的外部脚本不应该使用document.write方法

3 .async属性

1 .使用另一个进程下载脚本，下载时不会阻塞渲染
2 .浏览器开始解析html网页
3 .发现带有async属性的script标签
4 .继续解析渲染html网页，但是新开一个进程进行下载script脚本
5 .脚本下载完成之后，浏览器暂停解析html网页，开始执行下载的脚本
6 .脚本执行完毕，浏览器恢复解析html网页
7 .使用这个属性，无法保证脚本的执行顺序

4 .区别

1 .defer是会在解析完html才会执行下载好的脚本
2 .async 会在下载完脚本就执行脚本，先暂停解析网页。和不加的区别是，之前下载脚本会阻塞html渲染，现在不会了

5 .脚本的动态加载

['a.js', 'b.js'].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
script.async=false;
//这样脚本就会按照给定的顺序来使用
  document.head.appendChild(script);
});
1 .动态生成的script标签不会阻塞页面渲染，也不会造成浏览器假死

function loadScript(src, done) {
  var js = document.createElement('script');
  js.src = src;
  js.onload = function() {
    done();
  };
  js.onerror = function() {
    done(new Error('Failed to load script ' + src));
  };
  document.head.appendChild(js);
}
1 .给脚本增加回调函数

6 .加载使用的协议

1 .默认使用http协议
2 .如果要使用https，必须写出来
3 .根据页面本身的协议来加载协议