try/catch
1.能捕获包裹体内的同步执行错误；
2.不能捕获语法错误/异步任务错误/Promise任务错误/资源加载错误
window.onerrer
1.能捕获包裹体内的同步执行错误/普通异步任务错误；
2.不能捕获语法错误/Promise任务错误/async任务错误/资源加载错误
window.addEventListener(‘error’)
与onerror差不多
区别：捕获资源加载的错误
Promise异常捕获
通过throw抛出错误，catch捕获
通过reject抛出错误，catch捕获
虚拟dom定义：其实就是一个普通js对象；是用来描述真实dom结构的js对象，不是真实dom；
虚拟dom结构
{
children: Array<VNode | string> | underfined //节点下的其他标签
data: any | underfined //节点的属性
elm: Element | Text | underfined //当前虚拟节点对应的真实节点
key: data.key | underfined
sel: string | underfined //当前节点标签名
text: string | underfined//当前节点下的文本
}
diff算法就是用于比较新旧两个虚拟dom之间差异的一种算法；
旧dom 新dom
1 1
2 5 9 2 5 9
3 4 6 3 4 6
7 8 7 8
diff算法思路：
a.比较两个虚拟dom树，对根节点root进行执行patch(oldVnode，newVnode)函数，比较两个根节点是否是相同节点。如果不同，直接替换（新增新的，删除旧的）;
b.如果相同，对两个节点执行patchVnode（oldVnode, newVnode），比较属性，文本，已经子节点。此时，要么新增，要么删除。要么直接修改文本内容。只有当都存在子节点时，并且oldVnode === newVnode 为false时。会执行updateChildren函数，去进一步比较他们的子节点;
diff的过程，就是一个 patch —> patchVnode —> updateChildren —> patchVnode —> updateChildren —> patchVnode… 这样的一个循环递归的过程
400: 请求报文存在语法错误
401: 发送的请求需要有通过 HTTP 认证的认证信息
403: 对请求资源的访问被服务器拒绝
内存中缓存：优化常见preloader
强缓存：通过设置两种 HTTP Header 实现：Expires 和 Cache-Control
协商缓存：(Last-Modified / If-Modified-Since和Etag / If-None-Match)
迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为 Symbol.iterator 的方法来实现；
迭代器是用于遍历数据结构元素的指针（如数据库中的游标）；
String，Array，Map，Set，Dom 元素是所有内置的可迭代对象，他们的原型对象都有一个 [Symbol.iterator] 方法.
js是单线程、非阻塞、异步、解释型的脚本语言。
js任务分为同步任务、异步任务（宏/微任务）
同步任务既立即执行任务，直接进入到主线程执行；而异步任务，既异步执行任务，通过任务队列（先进先出）的机制来进行协调
异步任务中，微任务先执行，执行完微任务队列在进行宏任务
相对于根元素(即 html 元素)font-size 计算值的倍数，即 1rem=html的font-size；
相对于父级元素
vw/vh是相对于当前window
static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)
fetch是一个底层的api浏览器原生支持的
优点：
浏览器级别原生支持的api
原生支持promise api
语法简洁 符合es标准规范
缺点：
不支持文件上传进度检测
使用不完美，需要封装
不支持请求中止
默认不带cookie
axios是一个封装好的框架
a.支持浏览器和nodejs发请求
b.支持promise语法
c.支持自动解析json
d.支持中断请求
e.支持拦截请求
f.支持请求进度检测
g.支持客户端防止csrf
1.利用webpack和babel-loader对js进行处理使其适应低版本node
2.更改js文件后缀为.mjs 执行命令: node --experimental-modules *.mjs
loader: 是让webpack能够处理除js之外文件,是个转换器
plugin: 是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务
require.ensure
import
template便签三大特性：
隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态；
任意性：该标签可以写在页面的任何地方，甚至是head、body、sciprt标签内；
无效性：该标签里的任何HTML内容都是无效的，不会起任何作用；
一个vue实例只能有一个入口
如果在template下有多个div，无法找到vue示例的入口
单例模式：通过一个实例化对象满足所有需要执行的程序
const single = (function(){
class CreateObj(){
constructor(){}
f1(a, b){
console.log(a, b)
}
}
let result = '原始数据'
return function(){
if(result === '原始数据'){
result = new CreateObj()
return result
}else{
return result
}
}
})()
meta标签一般放在整个html页面的head部分；
meta是文档级元数据元素，用来表示那些不能由其它 HTML 元相关元素（<base>、<link>, <script>、<style>或 <title>）之一表示的任何元数据；
1、元数据类型：
a.设置了name属性，meta元素提供的是文档级别的元数据，应用于整个页面；
name和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值
author: 表示网页的作者的名字，例如某个组织或者机构
description: 是一段简短而精确的、对页面内容的描述
keywords: 与页面内容相关的关键词，使用逗号分隔.某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
viewpoint: 为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width用来设置 viewport 的宽度为设备宽度;
initial-scale为设备宽度与 viewport 大小之间的缩放比例。
robots: 表示爬虫对此页面的处理行为，或者说，应当遵守的规则，是用来做搜索引擎抓取的。
renderer: 用来指定双核浏览器的渲染方式，比如360浏览器，我们可以通过这个设置来指定360浏览器的渲染方式
b.设置了http-equiv属性，meta元素这是编译指令，提供的信息与类似命名的HTTP头部相同；
http-equiv也是和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值
X-UA-Compatible: 它是用来是做IE浏览器适配的,支持的范围是IE8-IE11
IE=edge告诉浏览器，以当前浏览器支持的最新版本来渲染，IE9就以IE9版本来渲染
chrome=1告诉浏览器，如果当前IE浏览器安装了Google Chrome Frame插件，就以chrome内核来渲染页面
如果在我们的http头部中也设置了这个属性，并且和meta中设置的有冲突,开发者偏好（meta元素）优先于Web服务器设置（HTTP头）
content-type: 用来声明文档类型和字符集
x-dns-prefetch-control: 一般来说，HTML页面中的a标签会自动启用DNS提前解析来提升网站性能，但是在使用https协议的网站中失效了
<meta http-equiv="x-dns-prefetch-control" content="on">来打开dns对a标签的提前解析
c.设置了charset属性，meta元素是一个字符集声明，告诉文档使用哪种字符编码；
<meta charset="UTF-8">，可以替换 http-equiv="content-type"