JavaScript运行机制

组成：

1.核心（ECMAScript）是一种在国际认可的标准的脚本语言规范（语法、关键字和保留字、控制语句、对象、变量和数据类型）

2.文档对象模型（DOM）HTML或XML页面中的每个组成都是某种类型的节点（document,createElement）

3.浏览器对象模型（BOM）可以对浏览器窗口进行访问和操作(window.innerHeight,navigator.appName)

JS单线程概念：

JS在同一个时间只能做一件事，同步，从上往下执行

任务队列 :

1.同步任务: console

2.异步任务 :setTimeout/setInterval DOM事件（例如addEventListener）ES6的Promise

例子：

console.log(1)
setTimeout(function(){
    console.log(2)
},0)
console.log(3)
//输出 1 3 2

Event Loop(事件循环):

JS 从上往下执行遇到异步，先将其保存起来，等同步执行完成，再去执行异步，异步执行完成后，再去取存起来里面是否还有异步

页面提升性能：

1.资源压缩，减少http请求

2.非核心代码使用异步

3.浏览器缓存

4.cdn加速（镜像）

5.预解析DNS

6.多服务器

<link rel="dns-prefetch" href="xxx"> //xxx主机地址
//如遇到https将会默认关闭，解决方式
<meta http-equiv="x-dns-prefetch-control" content="on">//on 为开启 off关闭

非核心代码使用异步分为：

1.异步加载方式：

1.1 动态脚本加载，例如创建标签

1.2 defer属性规定是否对脚本执行进行延迟，直到页面加载为止

1.3 async

//defer使用
<script type="text/javascript" defer>
//async使用
<script type="text/javascript" async>

2.异步加载区别

defer等html解析完成才会执行，如果有多个加载依次执行

async是加载完成后立即执行，如果多个执行顺序和加载顺序无关

浏览器缓存分为：

1 强缓存响应头Expires、Cache-Control,

2 协议缓存响应头Last-Modified If-Modified-Since Etag

错误处理：

1.运行错误 （try...catch window.onerror）

2.资源加载错误（object.onerror performance.getEntries Error事件捕获）

跨域捕获错误：

1.在script标签上加crossorigin属性

2.设置JS响应头Access-Control-Allow-Origin:*

try...catch相比onerror:

1.无法捕捉到语法错误，只能捕捉运行时错误

2.只能监听单个文件

window.onerror = function (message, url, line, column, error) {
  console.log('错误',message, url, line, column, error);
}