前端学习知识
html标签的语义化是什么意思
- 让标签有自己的含义
- 优势
- 代码结构清晰，方便阅读，又利用团队开发
- 有利于搜索引擎优化
- 方便其它设备解析
b标签和strong标签的区别
- strong是加重语气标签，b是粗体标签
css3动画如何实现
- transfrom:
- transition： 用来设置样式的属性值从一种状态平滑过渡另外一种状态，有四个属性
- transition-duration 变化延续的时间
- transition-property 变换的属性
- transition-timing-function 变换的速率
- transition-delay 变换的延时
- animation： 是逐帧动画
- @keyframes
JS继承
- 对象都有__proto__属性，只有函数对象独有prototype属性
- 对象的__proto__指向其构造函数的原型prototype，
JS原型链
- 对象访问其属性的时候，如果本身属性不存在，则通过__proto__一层一层向其原型查找而形成的原型链
JS原型
- 指的是构造函数的prototype，其上的属性和方法能让基于此构造函数创建的对象去使用
this指向场景
- 函数调用
- this在函数中指向的是一个全局对象
- 方法调用
- 在方法调用中，this是拥有整个方法的对象
- 构造函数
- 构造函数中的this指向新创建的对象
- 隐式调用: this是第一个参数
TCP和UDP的区别
-
UDP是一种无连接，提供不可靠的数据报服务
-
UDP支持一对多，多对多，一对一服务
-
TCP是面向连接的，可靠的，基于字节流的传输层通信协议，面向连接，保证顺序，可靠传输，提供拥塞控制
-
TCP连接
- 第一次握手：客户端向服务端发送连接请求报文，请求发送后，客户端便进入SYB-SENT状态
- 第二次握手：服务端收到连接请求的报文后，如果同意连接，则会发送一个应答，发送完之后便进入SYB-RECEIVED状态
- 第三次握手：当客户端收到连接同意的应答后，还要向服务端发送一个确认报文，客户端发送这个报文后便进入established状态，此时连接
-
TCP要保证数据可靠传输，也要提供传输效率，保证数据有去有回
-
TCP断开连接
- 第一次挥手：客户端向服务端发送连接释放请求
- 第二次挥手：服务端收到客户端连接释放请求后，发送ACK包，并进入CLOSE-WAIT状态，此时服务端不再接受客户端发送的数据，但是此时服务端继续发送剩余的数据
- 第三次挥手： 服务端向客户端发送连接释放请求，此后服务端便进入了LAST-ACK状态
- 第四次挥手：客户端收到释放请求后，向服务端发送确认应答，，此时客户端进入TIME-WAIT状态，客户端会持续TIME-WAIT状态2MSL，如果此时没有B的重发请求，就进入CLOSED状态
解释Promise
- promise就是将异步任务队列化，将多个异步任务按照顺序输出，同时用链式调用解决回调地狱的问题，有三种状态成功，失败，等待。 只能从等待变为成功 / 失败，单向的
let和var的区别
- let：变量不可提升，是块级作用域，不可重复声明，暂时性死区（为了减少运行时的错误，防止变量声明前就使用这个变量）
- var：变量可提升，是函数作用域
const：声明之后必须马上赋值，否则会报错，简单类型一旦声明就不能再修改，指针指向的地址不能更改 但是内部数据可以更改
AJAX原理
- AJAX是一种异步请求数据的web开发技术，通过异步请求加载后台数据，
- 使用XMHttpRequest构造函数创建Ajax核心对象XMLHttpRequest
- 向服务器发送请求
- open发送服务器连接，可以带参数
- send，端口
var xhr = new XMLHttpRequest()
xhr.onreadyStateChange = function(){
if(xhr.readyState == 4 && xhr.status == 200) {
}
}
xhr.open(method,url,async)
xhr.send(string))
GET和POST请求数据的区别
- GET在浏览器回退时是无害的，而POST会再次提交请求
- GET产生的URL可以被存储在历史记录，POST不会
- GET请求只会进行url编码，而POST支持多种编码方式
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
- GET请求在URL中传送的参数是有长度限制的，而POST没有
- GET请求只接受ASCII字符，而POST没有限制
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
- GET参数通过URL传递，POST放在Request body中
POST使用场景
- 请求的结果有持续性的副作用，例如：数据库内添加新的数据行
- 若使用GET方式，则表单收集的数据可能让URL过长
- 要传送的数据不是采用7位的ASCII编码
GET使用场景
- 请求是为了查找资源，HTML表单数据仅用来帮助搜索
- 请求结果没有持续性副作用
- 收集的数据及HTML表单内的输入字段名总长度不超过1024个字符
箭头函数
- this指向是箭头函数定义所在的对象
- 箭头函数定义比普通函数定义简洁，清晰的多
- 箭头函数没有prototype，没有this。this是通过作用域链向上找。
- 不能座作为构造函数使用
解决跨域
https://juejin.cn/post/6898572465527029767
- 使用JSONP的方式
- 使用反向代理
- 使用跨域资源共享
什么是跨域
- 协议，域名，端口不一致导致的跨域
JSONP
- 没有兼容性问题，基本都可以使用，只能解决GET请求
- JSONP本质上解决是通过script标签上的src属性
function dealData(data) {
}
let scp = document.createElement('script')
scp.src=""
document.body.appendChild(scp)
反向代理
- 在目标服务器和浏览器中间架一层服务器，称为代理服务器，反向代理的方式就是把静态的资源文件部署到代理服务器上，
跨域资源共享CORS - 主要通过设置特许的响应头，来达到接触跨域限制的目的，跨域资源共享简称CORS，需要浏览器和服务器的同时支持
- CORS通信过程是由浏览器自己完成的，不需要用户参与
- 对于开发者来说CORS通信和同源的AJAX通信是一样的，代码也一样
- 实现CORS的关键在于服务器，只要服务器是实现了，就可以进行CORS通信了
如何获取0-9的随机数
function getRandom(start,end) {
return Math.floor(Math.random() * (end - start + 1) + start)
}
单页面应用会出现什么问题？（f5之后会出现404，前端如何解决？）
- 报404是因为单页面模式开发模式造成的，单页面是由js框架会根据当前访问的url去路由到相应的子页面组件中，进行逻辑判断和页面渲染
- 解决：
- 刷新时保证页面不变，就是不能用重定向去访问单页面的主页面，因为url会变，变了js框架就没法路由，不知道上次是哪个url了
- 服务器响应的内容一定要是index.html，因为index这里加载了js框架和初始化一些东西
- 解决：
- 总结：不改变url的情况下响应index.html资源
单页面优点：
- 用户体验好，快，内容改变不需要重新加载整个页面
- 没有页面之间的切换，就不会出现白屏现象
单页面缺点： - 首次加载耗时比较多
- 不利于SEO
- 不可以用导航实现前进后退效果
- 页面复杂度高
前端如何进行安全防范
XSS攻击
- 跨域攻击
- 将前端输出数据进行转义，
CORF攻击
- CSRF是跨站请求伪造，访问网站的时候，黑客窃取数据
- 要合理使用post 和 get
px/em/rem的区别和应用
-
设备像素：设备屏幕实际拥有的像素点一般来说：宽度方向有1920个像素点，长度方向有1080个像素点
-
逻辑像素：css的像素单位，其尺寸大小是相对的，也称为独立像素
-
分辨率：屏长的设备像素 × 屏宽的设备像素
-
ppi：像素密度，表示沿对角线每英寸长度的像素数目
-
设备尺寸 × 像素密度 = 分辨率
-
px： 我们可以调整页面在移动端的缩放比例，这个值就是viewport，移动端浏览器会将viewport宽度设为980px，也就是说1px = 1/980
-
em：,需要改变body的font-size，其它的子元素宽度就能动态变化了，一般相对于父级元素的字体大小。一般默认下16px = 1em
- rem：rem只相对于根目录，即HTML元素，有了rem这个单位，我们只需要调整根元素html的font-size就能达到所有元素的动态适配了
HTTP1.x为什么不能实现多路复用
- HTTP1.X为什么不能多路复用，，这是因为HTTP1.x是基于文本分割解析的协议，也没有序号，如果多路复用会导致顺序错乱，http2是采用帧的方式，等于切成一块一块的，每一块都有对应的序号，所以可以实现多路复用
OSI七层协议：物理层，数据链路层，网络层，传输层，会话层，表示层，应用层
- 应用层
功能：针对特定应用的协议，接触的协议主要以HTTP为主，把浏览器看成一个应用，当用户发起请求时，通过HTTP协议获得数据以供浏览器使用，这就是应用层的用途，而请求时发生错误，对错误进行处理，这也就是应用层需要负责的
常见的协议有：HTTP,FTP,TELNET,SMTP - 表示层
设备固有数据格式和网络标准数据格式的转换，主要负责数据格式的转换，就是设置固有的数据格式转换成网络标准格式 - 会话层
功能：建立，管理和维护通信，管理传输层以下的分层
负责：建立和断开通信连接，以及数据的分割等数据传输相关的管理 - 传输层
功能：管理两个节点之间的数据传输，确保数据被可靠的传送到目标地址
协议： TCP UDP
作用：指定通信端口，指定传输的端口，才知道你想用的HTTP协议 - 网络层
功能：地址管理与路由选择
负责： 将数据传输到目标地址
协议：IP ICMP - 数据链路层
功能：互连设备之间传送和识别数据帧
负责：物理层面上的互联的节点之间的通信传输 - 物理层
功能：将数据的0，1转换为电压和脉冲，光传输给物理的传输介质
EventLoop是什么
事件循环，JS是单线程的，意味着任务需要排队执行，EVentLoop就是避免JS在执行过程中出现阻塞的机制
Vuex是干啥的
vuex是一个专门为vue应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态
H5新增的API
-
全屏显示：docuement.requestFullscreen()
-
关闭全屏显示：document.cancelFullScreen
-
判断是否是全屏显示：document.isFullscreen()
-
网络检测：online 当从断网到连网，会触发回调函数
-
offline 当从联网到断网，会触发回调函数
-
拖拽源对象
- ondragstart 当鼠标在拖拽元素上按下时触发
- ondrag 持续触发，当鼠标在拖拽元素上触发，不论鼠标有没有运动
- ondragend 当鼠标在拖拽元素上抬起时触发
-
拖拽目标元素
- ondragenter 当鼠标进入目标元素内部触发
- ondragover 当鼠标在目标元素上部移动时持续触发
- ondragleave 当鼠标离开目标元素时触发
- ondrop 当鼠标在目标元素抬起时触发
HTML语义化是什么
- 根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的怕丑和机器很好的解析
为什么要语义化
- 为什么在没有css情况下，页面也能呈现出很好的内容结构，代码结构
- 有利于SEO：
- 方便其它设备解析
- 便于团队开发和维护，语义化具有可读性，是下一步网页的重要动向
进程和线程的区别，进程间如何通讯，线程间如何通信
- 线程：是进程中的指令执行流的最小单位，是CPU调度的基本单位
- 进程：是指一个具有一定独立功能的程序,在一个数据集合上的一次动态执行过程
进程间如何通信：
- 管道/匿名管道
- 有名管道
- 信号
- 消息队列
- 信号量
- 共享内存
- 线程间如何通信
- 互斥量
- 信号量
- 事件
JS事件循环机制
- 同步任务：同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
- 异步任务：不进入主线程，而进入任务队列中，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行
- 异步任务的运行机制如下：
- 所有同步任务都在主线程上执行，形成了一个执行栈
- 主线程外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件
- 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件，哪些1对应的异步任务，于是结束等待状态，进入进行栈，开始执行
- 主线程不断重复上面的第三步
箭头函数和普通函数的区别
- 语法更加简洁，清晰
- 箭头函数没有prototype原型，所以箭头函数本身没有this
- 箭头函数不会创建自己的this
- call/apply/bind无法改变箭头函数中的this的指向
- 箭头函数不能作为构造函数使用
- 箭头函数不绑定arguments，取而代之的是rest参数
Vue数据双向绑定是什么意思：
- 数据到模板的绑定，模板到数据的绑定
- 详情看一看其他的文章
map和foreach的区别：
- foreach改变原数组的值，调用数组的每个元素
- map返回新数组，映射一个新数组，不会改变原数组的值
- 还有filter reduce
ajax的readyState五种状态值
- 0 未初始化，对象已经创建，但还没有调用open方法
- 1 载入，已经调用open方法，没有发送请求
- 2 载入完成 ，send 请求已经发送完成
- 3 交互， 可以接收到部分数据
- 4 完成， 已经接收全局数据，链接已经关闭
base64：文本文件，依赖编码，小图标解决方案
base64编码后图片会膨胀为原文件的4/3
是一种基于64个字符可打印字符来表示二进制数据的表示方法
window.btoa(str) 转码
window.atob(str) 解码
有汉字的时候 window.beta(window.encodeURIComponent(str))转码
解码 window.decodeURIComponent(window.atob(str))
图片
-
JPG： 有损压缩，不支持透明，体积小，加载快
-
JPG使用场景：适用于呈现的菜丰富的图片，JPG图片经常作为大的背景图，轮播图出现，
-
PNG:无损压缩，体积大，质量高，支持透明
-
PNG优点：无损压缩的高保真的图片格式，PNG图片比JPG更强的色彩表现力，对线条的处理更加细腻，对透明支持更高，唯一的缺点就是体积太大
-
PNG使用场景：呈现线条细腻，颜色对比度高的LOGO或者背景图
-
SVG:文本文件，体积小，不失真，兼容性好，压缩性更强
-
SVG是一种基于XML语法的图像格式，图片无限放大不失真，可编写
CSS边距重叠问题，原因
- 概念：css边距重叠是指两个或者多个盒子重合在一起形成的一个单一边界
- 原因：空元素的边界重叠：假设有一个空元素，它有外边距，但是没有边框或者填充，在这种情况下，上外边距和下外边距就碰到了一起，就发生了合并
- 外边距重叠计算方式：
全部都为正值，取最大值
不全是正值，都取绝对值，然后用正值的最大值减去绝对值的最小值
没有正值，则都取绝对值，然后用0减去最大值 - 解决方法：
- 底部元素设置为浮动 float：left
- 底部元素的position的值为absolute/fixed 脱离文档流
- 在设置margin-top/bottom值时统一设置上或下
- 元素和父元素margin值问题：父元素无border，padding，inline content时，子元素的margin-top/bottom会与父元素的margin产生重叠问题
浏览器原理：
浏览器主要组成部分：
- 浏览器进程：主要负责界面显示，用户交互，子进程管理，同时提供存储等功能
- 渲染进程：核心是将HTML,CSS和JS转换为用户可以与之交互的网页
- GPU进程：UI界面绘制
- 网络进程：主要负责页面的网络资源加载
- 插件进程：主要是负责插件的运行，插件容易崩溃，通过插件进程隔离不会对浏览器和页面造成影响
- 第一步：构建DOM树
- 服务器响应浏览器的HTML请求后，浏览器进程便开始准备渲染进程，渲染进程准备好之后，从网络进程加载到具体的HTML文件，通过浏览器进程移除旧的文档，便进入解析阶段。渲染进程解析HTML文件，构建成DOM树
- 第二步：样式计算
- 样式计算的目的就是为了计算出DOM节点的每个元素的具体样式
- 把CSS转换为浏览器能够理解的结构
- 标准化属性值
- 计算出每个DOM节点的具体样式
- 第一步：构建DOM树
- 第三步：布局阶段
- 布局阶段需要完成两个任务：创建布局树和布局计算
- 第四步：分层
- 第五步：图层绘制
- 第六步：栅格化
- 第七步：合成和显示
setTimeout 和 setInterval
- setTimeout和setInterval是window对象上的两个主要的定时方法，他们的语法基本相同，但是完成的功能是不一样的
- setTimeout方式是定时程序，也就是在到达某个指定时间后，执行什么事，执行一次
- setInterval方法则是表示间隔一定时间反复执行某些事
- setTimeout并不能保证执行的时间，是否即使执行却决于JavaScript线程是拥挤还是空闲
- 浏览器的JS引擎遇到setTimeout，拿走之后不会立即放入异步队列，同步任务执行之后，timer模块会到设置时间之后放到异步队列中，JS引擎发现同步队列中没有要执行的东西了，即运行栈空了，就从异步队列中读取，然后放到运行栈中执行，所以setTimeout可能会多了等待线程的时间
- 这时setTimeout函数体就变成了运行栈中的执行任务，运行栈空了，再监听异步队列中的有没有要执行的任务，如果有就继续执行，如此循环，就是eventloop
数组中forEach和map的区别
- 相同点：
- 都是循环数组的每一项
- forEach和map都支持每次执行匿名函数3个参数，参数分别是item当前项，index索引，arr原数组
- 匿名函数的this都执行window
- 只能遍历数组，都不会改变原数组
- 区别：
- map
- map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
- map方法不会对空数组进行检测，不会改变原数组的
- map有return
- forEach
- forEach方法用来调用数组中的每个元素，将元素传给对调函数
- forEach对于空数组是不会调用回调函数的
- map
for in 和 for of的区别
- for in 遍历的是数组的索引， for of 是数组的元素值
- 遍历对象用for in，遍历数组用for of
- 使用for in也可以遍历数组，但是会存在以下问题
- index索引为字符串数字，不能进行几何运算
- 遍历顺寻有可能不是按照数组内部顺寻
- for in会遍历数组所有可枚举属性，包括原型，
- for of遍历的数组内的元素，不包括数组的原型属性name 啥的
- for in 遍历原型方法和原型属性，可以通过hasOwnProperty判断
tyoeof 和 instanceof
-
typeof可以用于检测基本数据类型和引用数组类型
- 返回的有6中string类型的结果
- undefined
- boolean
- string
- number
- function
- object
-
instanceof用于判断一个变量是否是某个对象的实例，看实例的__proto__指向的原型链上，有没有跟右侧类型的prototype指向同一个对象的
- 在检测基本数据类型是typeof是非常得力的助手，但是检测引用类型的值时，这个操作符用处不大，
-
原型链：从一个实例对象往上找构造这个实例的相关的对象，然后这个关联的对象再往上找，他又有创建它的上一级的原型对象，依次类推，一直到Object.prototype == nul，这个查找过程就是原型链
清除浮动
父级div定义伪类，after和zoom
原理IE8以上和非IE浏览器才支持：after，zoom是IE专有属性可解决ie6/7浮动问题
优点：
浏览器支持好，不容易出问题
缺点：
代码多
在结尾处添加空div标签 clear：both
原理：添加一个空div，利用css提高clear：both清除浮动，让父级div能自动获取到高度
优点：
简单，代码少，浏览器支持好
缺点：
增加多的空div
父级div定义高度
原理：父级div手动定义高度，就解决了父级div无法自动获取高度的问题
优点：
简单，代码少，容易掌握
缺点：
高度和父级div不一致，会产生布局问题
父级div定义overflow：hidden
原理：浏览器会自动检查福哦的那个区域的高度
优点：
简单，代码少
缺点：
不能和position配合使用，因为超出的尺寸会被隐藏
继承的几种方法
- 工厂模式：
function creatPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName=function(){
alert(this.name);
}
return o;
}
var person1 = creatPerson('FE',20,'teacher');
优缺点：虽然解决了创建相似对象的问题，但是没有解决对象识别的问题，即如何知道一饿对象的类型
构造函数模式：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName=function(){
alert(this.name);
}
}
var person1 = Person('FE',20,'teacher');
优缺点：创建自定义函数意味着将来可以将它的实例标识为一种特定的数据类型，但是每个方法都要在实例上创建一遍
- 原型模式：
function Person(){
};
Person.prototype.name = "FE";
Person.prototype.age = 20;
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //'FE'
优缺点：可以让所有的实例共享它所包含的属性和方法，原型中的属性和方法是共享的，但是实例一般要有单独的属性和方法，一般很少单独使用原型模式
混合模式：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends=['aa','ss','dd'];
}
Person.prototype.sayName = function(){
alert(this.name);
}
var person1 = new Person('FE',20,'teacher');
优缺点：构造函数模式定义实例的属性，原型模式定义公共的属性和方法
原型链继承：
定义：利用原型让一个引用类型继承另外一个引用类型的属性和方法
function SuperType(){
this.property = 'true';
}
SuperType.prototype.getSuperValue = function(){
return this.property;
}
function SubType(){
this.subProperty = 'false';
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
return this.subProperty;
}
var instance = new SubType();
alert(instance.getSuperValue());//true
优点：简单明了，在弗雷新增运行属性和方法，子类都能访问到
缺点：包含引用类型值的函数，所有的实例都指向一同一个引用地址，修改一个，其它的都会变，不能像超类的构造函数传递参数
构造函数继承
定义：在子类型构造函数的内部调用超类型的构造函数
function SuperType(){
this.colors = ['red','yellow'];
}
function SubType(){
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push('black');
var instance2 = new SubType();
instance2.colors.push('white');
alert(instance1.colors);//'red','yellow','black'
alert(instance2.colors);//'red','yellow','white'
优点：简单明了，直接继承饿了超类型函数的属性和方法
缺点：方法都在构造函数定义，因此函数复用就无从谈起了，而且超类型中的原型的属性和方法，对子类型也是不可见的，结果所有的类型只能使用构造函数模式
组合继承：
定义：使用原型联实现多原型属性和方法的继承，使用构造函数实现实例的继承
function SuperType(name){
this.name = name;
this.colors = ['red','black'];
}
SuperType.prototype.sayName = function()
{
alert(this.name);
}
function SubType(name,age){
SuperType.call(this,name);
this.age = age;
}
SubType.protptype = new SuperType();
SubType.protptype.sayAge = function(){
alert(this.age);
}
优点：解决了构造函数和原型继承中的两个问题
缺点：无论什么时候，都会调用两次超类型的构造函数
几种常见的http状态码
2xx ---- 成功
200 ok成功
204 请求处理成功，但是没有数据返回
206 对资源的某一部分的请求
3xx ---- 重定向
301 url永久重定向
302 临时重定向
304 资源已找到，但是没有找到符合条件的请求
4xx ---- 客户端请求
400 请求报文中存在语法错误
401 需要http认证
403 对请求资源的访问被服务器拒绝了
404 服务器中没有这个资源
500 ---- 服务器错误
500 内部资源出错了
503 服务器正在超负载工作或者停机维护
rem和em的区别：
- css中单位em和rem的区别：在css中单位长度用的最多的是px，rem，em这三个区别是：
- px是固定的像素，一旦设置了就无法因为适应页面大小而改变
- em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用响应式布局
- 对于em和rem的区别一句话概括：em是相对于父元素，rem相对于根元素
- rem中的r意思是root
- em：
- 子元素字体大小em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话是相对于该元素的font-size
- rem：
- rem是全部长度都相对于根元素，通常是html
JSONP安全性问题 ------- CSRF攻击
-
前端构造一个恶意页面，请求JSONP接口，接收服务器端的敏感信息，如果JSONP接口还涉及一些敏感操作信息，那就更不安全了
-
解决方法：验证JSONP的调用来源，服务端判断Referer是否是白名单，或者部署随机Token来防御
-
CORS跨域资源共享，允许浏览气象跨域服务其发出XMR请求，从而客服跨域问题，他需要浏览器和服务器的同时支持
浏览器会自动向请求头部发出origin字段，表明当前请求来源 -
服务器端需要设置响应头的Access-Control-Allow-Methods，Access-Control-Allow-Headers，Access-Control-Allow-Origin等字段，指定允许的方法，头部，源等信息，
-
请求方法分为简单和非简单请求，非简单请求会先进行依次OPTIONS方法进行预检，看是否允许当前跨域请求
- 简单请求：请求方法是以下三种
- HEAD
- GET
- POST
- 简单请求：请求方法是以下三种
HTTP1.1
- 缓存处理，多了Entity tag
- 宽度优化及网络连接的使用
- 错误通知的管理
- Host头处理
- 长连接：HTTP1.1默认开启Connection：keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接缺点
- keep-alive：开启keep-alive模式，keep-alive功能使客户端到服务端的连接持续有效，当出现对服务器的后续请求时，Keep-alive功能避免了- 建立或重新建立连接
HTTP2:
- 支持多路复用，
- 支持二进制传送，HTTP1.x是字符串传送
- 首部压缩，减少了传送的体积
- 支持服务端传送
cache-control:
- private 客户端可以缓存
- public 客户端和代理服务器可以缓存
- max-age=t,缓存内容将在t秒后失效
- no-cache：需要使用协商缓存来验证缓存数据
- no-store：所有内容都不会缓存
浏览器：
浏览器是多线程，浏览器多线程包含了Browser线程它是浏览器的主进程，第三方插件进程和GPU进程（它是浏览器的渲染进程），其中GPU进程（多线程）和Web前端密切相关，包含以下进程：
- GUI渲染线程
- JS引擎线程
- 事件触发线程
- 定时触发器线程
- 异步HTTP请求线程
GUI渲染进程和JS引擎进程是互斥的，为了防止DOM渲染的不一致性，其中一个线程执行时另一个线程会被挂起
这些线程中，和Vue的nextTick息息相关的JS引擎线程和事件触发线程
JS引擎线程和事件触发线程：
浏览器页面初次渲染完毕后，JS引起线程结合事件触发线程的工作流程如下：
- 同步任务在JS引起线程（主线程）上执行，形成执行栈。
- 主线程之外，事件触发线程管理者一个任务队列。只要异步任务有了运行结果，就在任务队列之外放置一个事件
- 执行栈中的同步任务执行完毕，系统就会读取任务队列，如果有异步任务需要执行，将其加到主线程的执行栈并执行响应的异步任务
- 主线程的执行流程如下图所示
事件循环机制：
-
事件触发机制管理的任务队列是如何产生的呢，事实上这些任务就是从JS引擎线程本身产生的。主线程在运行的时候会产生执行栈，栈中的代码调用某些异步API时会在任务队列中添加事件，栈中的代码执行完毕后，就会读取任务队列中的事件，去执行事件对应的回调函数，如此循环往复，形成事件循环机制
-
任务队列：
- JS中有两种任务类型：微任务(microtask)和宏任务(macrotask)，在ES6中，microtask称为jobs，macrotask称为task
- 宏任务：script(主代码块)：setTimeout，setInterval，setImmediate，I/O,UIrendering
- 微任务：process.nextTick(nodeJs)，promise，Object.observe，MutationObserver
- 宏任务并非全是异步任务，主代码块就是属于宏任务的一种Promise/A+规范
-
它们之间区别如下：
- 宏任务是每次执行栈执行的代码(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)
- 浏览器为了能够使得JS引擎线程与GUI渲染线程有序切换，会在当前宏任务结束之后，下一个宏任务执行开始之前，对页面进行重新渲染，宏任务》渲染》宏任务
- 微任务是在当前宏任务执行结束之后立即执行的任务(在当前宏任务执行之后，UI渲染之前执行的任务)。微任务的响应速度相比 - - setTimeout（下一个宏任务）会更快，因为无需等待UI渲染
-
当前宏任务执行后，会将在它执行期间产生的所有微任务都执行一遍
理解：
- 宏任务中的事件是由事件触发线程来维护的
- 微任务中的所有任务是由JS引擎维护的（这只是自我猜测，因为宏任务执行完毕后会立即执行微任务，为了提升性能，这种无缝连接的操作放在事件触发线程来维护明显是不合理）
- 根据事件循环机制，重新梳理一下流程：
- 执行一个宏任务(首次执行的主代码块或者任务队列中的回调函数)
- 执行过程中如果遇到微任务，就将他添加到微任务的任务队列中
- 宏任务执行完毕后，立即执行当前微任务中的所有代码
- JS引擎线程挂起，GUI线程执行渲染
- GUI线程渲染完毕后挂起，JS引擎线程执行任务队列中的下一个宏任务
Vue异步执行DOM更新，只有观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后再下一个事件循环tick中，Vue刷新队列中并执行实际工作，Vue内部尝试对异步队列使用原生Promise.then和MessageChannel，如果执行环境不支持，会采用setTimeout(fn,0)替代
例如：当你设置vm.someData = ‘new value’，该组件不会立即重新熏染。当刷新队列时，组件会在事件循环队列情清空下一个tick更新。多数情况下我们不需要关心这个个过程。但是如果你想在DOM状态更新后做点什么。为了再数据变化之后等待Vue完成更新DOM，可以再数据变化之后立即使用Vue.tick(callback)。这样回调函数在DOM更新完成之后就会调用
CSS选择器优先级：
不同级别：!Important > 行内样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/关系选择器/伪元素选择器 > 通配符选择器
BFC是什么：
重点是BFC是什么，
触发的条件是什么，
BFC可以干什么：
什么是BFC：
-
BFC全称为块级格式化上下文，BFC是W3C规范中一个概念，它决定了元素如何对其内容进行定位以及与其它元素的关系相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响其它环境中的布局。比如福哦的那个元素会形成BFC，浮动元素内部子元素的主要受浮动元素影响，两个浮动元素之间是不互不影响的。这里有一个类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把他理解为是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干
-
触发BFC的条件
·- 根元素或其他包含它的元素
·- 浮动元素，元素的float不是none
·- 绝对定位元素，元素具有position为absolute或fixed
·- 内联块，元素具有display：inline-block- ·表格单元格，元素具有display：table-cell，HTML表格单元格默认属性
- ·表格标题，元素具有display：table-caption，HTML表格标题默认属性
· - 具有overflow且值不是visible块元素
· - 弹性盒，flex或inline-flex - ·display：flow-root columb-span：all
-
BFC的约束规则：
- ·内部的盒会在垂直方向一个接一个排列，可以看作BFC的常规流
- ·处于同一个BFC的元素的相互影响，可能会发生外边距重叠
- ·每个元素的margin box的左边，与容器的border box的左边想接触
- ·BFC就是页面上的一个管理的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- ·计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
- ·浮动何区域不叠加到BFC上
-
BFC可以解决的问题
-
·垂直外边距重叠问题：就是网页中垂直方向的相邻外边距会发生重叠
-
·去除浮动
-
·自适应两列布局
了解盒模型：
- 包括内容区域，内边距区域，边框区域和外边距区域
- W3C盒模型padding和content在一起
- Box-sizing：content-box(W3C盒子模型)：元素的宽高大小表现为内容的大小，box-sizing：border-box(IE盒子模型)：元素的宽高表现为：内容+内边框+边框的大小。背景会延伸到边框的外沿
如何实现左侧宽度固定，右侧宽度自适应的布局
- DOM结构：
<div class="box"> <div class="box-left"></div> <div class="box-right"></div> </div>
- 利用float+margin实现
.box {
height: 200px; }
.box > div {
height: 100%; }
.box-left {
width: 200px; float: left; background-color: blue; }
.box-right {
margin-left: 200px; background-color: red; }
- 利用calc计算宽度
.box {
height: 200px; }
.box > div {
height: 100%; }
.box-left {
width: 200px; float: left; background-color: blue; }
.box-right {
width: calc(100% - 200px); float: right; background-color: red; }
- 利用float+overflow实现
.box {
height: 200px; }
.box > div {
height: 100%; }
.box-left {
width: 200px; float: left; background-color: blue; }
.box-right {
overflow: hidden; background-color: red; }
了解跨域吗，一般什么情况下会导致跨域
什么是CORS
CORS跨域资源共i想允许浏览器向服务器发出XMLHtppRequest，从而克服跨域问题，它需要浏览器和服务器的同时支持
·浏览器会自动向请求头添加origin字段，表明当前请求来源
·服务端需要设置响应头为Access-Control-Allow-Methods，Access-Control-Allow-Headers，Access-Control-Allow-Origin等字段，指定允许的方法，头部源等信息
·请求分为简单请求和非简单请求，非简单请求会先进行一次OPTION方法进行预检，看是否允许当前跨域请求
简单请求
请求方法是以下三种方法之一：
·HEAD
·GET
·POST
HTTP的请求头信息不超出以下几种字段
· Accept
· Accept-Language
· Content-Language
· Last-Event-ID
· Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
。
HTTP2和HTTP1有什么区别
相对于HTTP1.0，HTTP1.1的优化：
·缓存处理：多了Entity tag，If-Unmodified-Since，If-Match，If-None-Match等缓存信息
·带宽优化及网络连接的使用
·错误通知的管理
·Host头处理
·长连接：HTTP1.1中默认开启Connection：keep-alive，一定程度上弥补了HTTP.0每次请求都要创建连接的缺点
相对于HTTP1.1,HTTP2的优化：
- HHTP2支持二进制传送，方便且健壮，http1.x是字符串传送
- HTTP2支持多路复用
- HTTP2采用HPACK压缩算法压缩头部，减小了传输的体积
- HTTP2支持服务端推送
你能说说缓存吗：
缓存分为强缓存和协商缓存。强缓存不过服务器，协商缓存需要过服务器，协商缓存返回的状态码是304.两类缓存机制可以同时存在，强缓存的优先级高于协商缓存。当执行强缓存时如若缓存命中，则直接使用缓存数据库中的数据，不再进行协商缓存
-
强缓存：
Expires:Expires的值为服务器端返回的的数据到期事件，当再次请求的请求时间小于返回的时间，则直接使用缓存数据。但是由于服务器端时间和客户端时间可能有误差，这也将导致缓存命中的误差。另一方面，Expires是HTTP1.0的产物，所以现在大多数使用cacle-control替代
缺点：使用的是绝对时间，如果服务端和客户端的时间产生偏差，那么会导致命中缓存产生偏差 -
协商缓存：
协商缓存选用进行对比判断是否可以使用缓存。浏览器第一次i请求数据的时候，服务器会将缓存标识与数据一起响应给客户端，客户端将它们备份至缓存中。再次请求的时候，客户端会将缓存中的标识发送给服务器，服务器根据此标识判断。若未失效，发回304状态码，浏览器拿到此状态码就可以直接使用缓存数据了
Last-Modified：服务器在响应请求的时候，会告诉浏览器资源的最后修改时间
If-Modified-Since：浏览器再次请求服务器的时候，请求头会包含字段，后面跟着在缓存中进行获取最后修改时间，如果一致返回304和响应报文头，浏览器只需要从缓存中获取信息即可
· 如果真的被修改：那么开始传输响应一个整体，服务器返回：200 OK
· 如果没有被修改：那么只需传输响应header，服务器返回：304 Not Modified
缓存场景：
对于大部分的场景都可以使用强缓存配合协商缓存解决，但是在一些特殊的地方可能需要选择特殊的缓存策略
- 对于某些不需要花缓存的资源，可以使用Cache-control：no-store，表示该资源不需要缓存
- 对于频繁变动的资源，可以使用Cache-Control：no-cache并配合ETag使用，表示该资源已被缓存，但是每次都会发送请求询问资源是否更新
- 对于代码文件来说，通常使用Cache-Control：max-age=3156000并配合策略缓存使用，然后对文件进行指纹处理，一旦文件变动就会立刻下载新的文件
能说说首屏加载优化有哪些方案吗？
- Vue-Router路由懒加载，利用Webpack的代码切割
- 使用CDN加速，将通用的库从wendor进行抽离
- Nginx的gzip的压缩
- Vue异步组件
- 服务器端渲染SSR
- 如果使用了一些UI库，采用按需加载
- Webpack开启gzip压缩
- 如果首屏是登录页，可以做成多入口
- Service Worker缓存文件处理
- 使用link标签的rel的属性设置prefetch，preload
你知道null和undefined有什么区别吗？
- 类型不一样
- 转化之不一样，undefined转化为Number是NaN，null转化Number是0
- Undefined === null为false undefined == null为true
闭包有什么作用：
闭包就是能够读取其它函数内部变量的函数。由于在js语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单的理解成 定义在一个函数内部的函数，所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁
Vue响应式原理：
在生成vue实例的时候，为对传入的data进行遍历，使用Object.defineProperty把这些属性转为getter/setter
Object.defineProperty是ES5中一个无法shim的特性，这也就是Vue不支持IE8以及更低版本浏览器的原因
每个Vue实例都有一个watcher实例，它会在实例渲染的时候记录这些属性，并在setter触发的时候重新渲染
Vue不允许动态添加跟级别的响应式属性，但是可以使用vue.set(object,propertyName,value)方法向嵌套对象添加响应式属性
2.声明响应式属性
由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值。
如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。
3. 异步更新队列
Vue更新dom是异步执行的
数据变化，更新是在主线程中同步执行的，在侦听到数据变化的时候，watcher将数据变更存储到异步队列中，当本地数据变化，即主线程任务执行完毕，异步执行的任务才会被执行
如果你在js中更新数据后立即去操作DOM，这时候DOM还未更新，vue提供了nextTick接口来处理这样的情况，它的参数是一个回调函数，会在本次DOM更新完成后被调用
了解Event Loop吗？ 也就是事件循环机制
如何避免你回流和重绘？
- 浏览器使用流式布局模型
- 浏览器会把HTML解析成DOM，把CSS解析成CCSOM，DOM和CSSOM合并就产生了RenderTree
- 有了RenderTree就能知道所有节点的样式，计算节点在页面上的大小和位置，把节点绘制页面上
- 由于浏览器使用的流失布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，通常需要多次计算且要花费3倍同等元素的时间，这也是为什么要避免使用table1的原因之一
浏览器渲染过程如下：
解析HTML，生成DOM树，
解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树
Layout回流：根据生成的渲染树，进行回流，得到节点的几何信息
Patinting重绘：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display：将像素发送给GPU，展示在页面上，这一步其实还有很多内容，比如会在GPU将多个合成层合并同一个层，并展示在页面中，css3硬件加速的原理则是新建合成层
何时触发回流和重绘
合适发生回流：
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化，包括外边距，内边框，边框大小，高度和宽度
- 内容发生变化，比如文本或图片被另一个不同尺寸的图片所替代
- 页面一开始渲染的时候 这肯定避免不了
- 浏览器的窗口尺寸变化，因为回流是跟根据视口的大小来计算元素的位置和大小的
何时发生重绘： 回流一定触发重绘
当页面中元素样式的改变并不影响他在文档流中的位置，例如color background-color，visibility，浏览器会将新样式赋予给元素并重新绘制它，这个过程称之为重绘
有时即使仅仅会留一个但一个的元素，它的父元素以及任何跟随他的元素也会产生回流，现代浏览器会对频繁的回流或重置操作进行优化，浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样就可以把多次回流和重置变成一次你访问以下属性或方法时，浏览器会立刻清空队列：
· clientWidth、clientHeight、clientTop、clientLeft
· offsetWidth、offsetHeight、offsetTop、offsetLeft
· scrollWidth、scrollHeight、scrollTop、scrollLeft
· width、height
· getComputedStyle()
· getBoundingClientRect()
如何避免触发回流和重绘
CSS
- 避免使用table布局
- 尽可能在DOM树的最末端改变class
- 避免设置多层内敛样式
- 将动画效果应用到position属性为absolute或fixed的元素上面
- 避免使用CSS表达式 例如calc
- CSS3硬件加速，GPU加速
JS: - 避免频繁使用操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性
- 避免频繁操作DOM，创建一个documentFragment，在它上面应用的DOM操作，最后再把它添加到文档中
- 也可以先为元素设置display：none，操作结束后再把它显示出来，因为display属性为none元素进行的DOM操作不会引发回流和重绘
- 避免频繁的读取会引发回流和重绘的属性，如果确实需要多次使用，就用一个变量缓存起来
- 对具有复杂动画元素的使用绝对定位，使它脱离文档流，否则会引起父元素及候后续元素频繁回流
XSS攻击：
XSS攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行修改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式
攻击者对客户端网页注入的而已脚本一般包括js，有事也会包括HTML和Falsh。有很多中方式进行XSS攻击，但他们的共同点为：将一些隐私数据像cookie，session发送给攻击者，将受害者重定向到一个攻击者控制的网站，在受害者的机器上进行一些恶意操作
XSS攻击可以分为三类：发射型–非持久型，存储型—持久型，基于DOM
反射型 XSS ：
只是简单地把用户输入的数据 “反射” 给浏览器，这种攻击方式往往需要攻击者诱使用户点击一个恶意链接（攻击者可以将恶意链接直接发送给受信任用户，发送的方式有很多种，比如 email, 网站的私信、评论等，攻击者可以购买存在漏洞网站的广告，将恶意链接插入在广告的链接中），或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。最简单的示例是访问一个链接，服务端返回一个可执行脚本
存储型 XSS：
存储型XSS会把用户输入的数据存储在服务器端，当浏览器请求数据的时候，脚本从服务器上传回并执行，这种XSS攻击具有很强的稳定性，比较常见的一个场景是攻击者在社区或论坛上写下一篇包含恶意js代码的文章或评论，文章或评论发表后，所有访问该文章的用户，都会在他们的浏览器中执行这段恶意的js代码
基于DOM XSS：
基于DOM的XSS攻击是指通过恶意修改脚本页面DOM结构，是纯粹发生在客户端的攻击
XSS攻击防范：
HttpOnly 防止截取Cookie:HttpOnly最早由微软提出，至今已经成为一个标准。浏览器将禁止页面的js访问带有HttpOnly属性的Cookie。上文有说到，攻击者可以通过注入恶意脚本获取用户的cookie信息。通常Cookie中都包含了用户的登录凭证信息，攻击者在获取到Cookie之后，则可以发起Cookie劫持攻击，
Cookie
Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向统一服务器再发起请求时被携带并发送到服务器上。Cookie主要用于以下三个方面
·会话状态管理，如用户登录状态，购物车，游戏分数或其它需要记录的信息
·个性化设置 ，如用户自定义设置，主题
·浏览器行为跟踪。跟踪分析用户行为
而浏览器所持有的Cookie分为两种：
- Session Cookie会话期Cookie：会话期Cookie是最简单的Cookie，它不需要指定过期时间或者有效期，他近在会话期内有效，浏览器关闭之后他会被自动删除
- Permanent Cookie持久性Cookie：会会话期Cookie不同的是，持久性Cookie可以指定一个特性的过期时间或者有效期
NextTick：
Vue官方对nextTick的解释：
在下次DOM更新循环结束之后执行延迟回调，再修改数据之后立即使用这个方法，获取更新后的DOM
Flex弹性布局：
Flex是Fkexble Box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性
注意；设为Flex布局以后，子元素float，clear和vertical-align属性将失效
基本概念：采用Flex布局以后，称为Flex容器，简称为容器，他的所有子元素自动成为容器成员，称为Flex项目
以下六个属性设置在容器上：
- Flex-direction
- Flex-wrap
- Flex-flow
- Justify-content
- Align-items
- Align-centent
- Flex-direction属性：决定主轴的方向，即项目的排列方向 row/row-reVerse/column/column-reverse
Row默认值：主轴为水平方向，起点在左端
row-reverse：主轴为水平放i想，起点在右端
Column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
2. Flex-wrap属性
默认情况下，项目都排在一条线上，flex-wrap属性定义，如果一条轴线排不下，如何换行
Flex-wrap：nowrap/wrap/wrap-reverse
Nowrap：不换行
Wrap：换行，第一行在上方
Wrap-reverse：换行，第一行在下方
3. Flex-flow
属性是flex-direction属性和flex-wrap水性的缩写形式，默认值为row nowrap
4. justify-content属性
·justify-content属性定义了项目在主轴上的对齐方式
Flex-start在前面 左对齐
Flex-end 在后面右对齐
Center 在中间 居中
Space-between 在整个页面进行居中排列两端对齐，项目之间的间隔都相等。
Space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- Align-items属性
·属性定义项目在交叉轴上如何对齐 - Flex-start：交叉轴的起点对齐
- Flex-end：交叉轴的终点对齐
- Center：交叉轴的终点对齐
- Baseline：项目的第一行文字的基线对齐
- Stretch：默认值，如果项目未设置高度或设位ayto，将占满整个容器的高度
- Align-content属性
·属性定义了多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
Grid ：采用网格布局的节点区域叫做容器：
·网格线：用来分割容器的线，分为水平网格和垂直网格线，可以将容器分割成行和列
·行和列：水平分割线将容器成行(n行需要n+1条分割线)，垂直网格线将容器分割成列(n列需要n+1条分割线)
·单元格：行和列交叉形成了单元格
·项目：容器内部采用网格定位的子元素，只能是顶层元素，称为项目
下面主要通过7个属性来设置设置构建容器。
· grid-template-columns/grid-template-rows 设置列/行内容的属性
· grid-gap 设置列/行间距的属性
· grid-template-areas 设置单元格区域的属性
· grid-auto-flow 设置单元格方向属性
· place-items 设置单元格内内容排列位置的属性
· place-content 设置整个内容区域在容器里面的位置的属性
· grid-auto-columns/grid-auto-rows 设置超出原有网格的单元格属性
伪类和伪元素的区别：
-
伪类和伪元素是用来修饰不在文档树中的部分，比如一句话中的第一个字母，或者是列表中第一个元素，下面分别对伪类和伪元素进行解释：
-
伪类用来当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态，虽然他和普通的css类似，可以为已有的元素添加样式，但是他只有dom’树无法描述的状态下才能为元素添加样式，所以将其称为伪类
-
伪元素用来创建一些不再文档树中的元素，并为其添加样式，比如说：我们可以通过：before来一个元素前添加一些文本，并未这些文本添加样式，虽然用户可以看到这些文本，但是这些文本实际上不在文档树中
-
区别:
- 伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素，因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素 。
- CSS3规范中的要求使用双冒号：：表示伪元素，以此来区分伪元素和伪类，比如：：before和：：after等，伪元素使用双冒号::. :hover和:active等伪类使用单冒号，除了一些低于IE8版本的浏览器除外，大部分的浏览器都支持伪元素的双冒号::表示方法
-
DOM的事件流：
-
事件流之事件冒泡与事件捕获
-
在浏览器发展过程中，开发团队遇到了一个问题，那就是页面的哪一部分用于特定的事件？
浅拷贝和深拷贝的区别：
- 浅拷贝只复制指向某个对象的指针，不复制对象本身。而深拷贝会另外创建一个一摸一样的对象，新对象与原对象不共用一个指针和内存，修改新对象不会修改原对象
- 浅拷贝第一层为基本数据类型修改新对象不会改变原对象，原对象中包含子对象，修该原对象会一同改变原对象.
- 深拷贝，永远不会改变原对象的数据
- 浅拷贝的方式：Object.assign() 所以当object只有一层的时候object.assign()也是深拷贝
- 深拷贝的方式：JSON.parse(JSON.stringify()) JSON.stringify()把对象转化为JSON字符串，JSON.parse()再把字符串转换成对象