前端学习知识

Posted 2021-06-09 三水草肃

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习知识相关的知识，希望对你有一定的参考价值。

html标签的语义化是什么意思

让标签有自己的含义
优势
1. 代码结构清晰，方便阅读，又利用团队开发
2. 有利于搜索引擎优化
3. 方便其它设备解析

b标签和strong标签的区别

strong是加重语气标签，b是粗体标签

css3动画如何实现

transfrom:
1. transition：用来设置样式的属性值从一种状态平滑过渡另外一种状态，有四个属性
2. transition-duration 变化延续的时间
3. transition-property 变换的属性
4. transition-timing-function 变换的速率
5. transition-delay 变换的延时
animation：是逐帧动画
@keyframes

JS继承

对象都有__proto__属性，只有函数对象独有prototype属性
对象的__proto__指向其构造函数的原型prototype，

JS原型链

对象访问其属性的时候，如果本身属性不存在，则通过__proto__一层一层向其原型查找而形成的原型链

JS原型

指的是构造函数的prototype，其上的属性和方法能让基于此构造函数创建的对象去使用

this指向场景

函数调用
this在函数中指向的是一个全局对象
方法调用
- 在方法调用中，this是拥有整个方法的对象
构造函数
- 构造函数中的this指向新创建的对象

隐式调用: this是第一个参数

TCP和UDP的区别

UDP是一种无连接，提供不可靠的数据报服务
UDP支持一对多，多对多，一对一服务
TCP是面向连接的，可靠的，基于字节流的传输层通信协议，面向连接，保证顺序，可靠传输，提供拥塞控制
TCP连接
1. 第一次握手：客户端向服务端发送连接请求报文，请求发送后，客户端便进入SYB-SENT状态
2. 第二次握手：服务端收到连接请求的报文后，如果同意连接，则会发送一个应答，发送完之后便进入SYB-RECEIVED状态
3. 第三次握手：当客户端收到连接同意的应答后，还要向服务端发送一个确认报文，客户端发送这个报文后便进入established状态，此时连接
TCP要保证数据可靠传输，也要提供传输效率，保证数据有去有回
TCP断开连接
1. 第一次挥手：客户端向服务端发送连接释放请求
2. 第二次挥手：服务端收到客户端连接释放请求后，发送ACK包，并进入CLOSE-WAIT状态，此时服务端不再接受客户端发送的数据，但是此时服务端继续发送剩余的数据
3. 第三次挥手：服务端向客户端发送连接释放请求，此后服务端便进入了LAST-ACK状态
4. 第四次挥手：客户端收到释放请求后，向服务端发送确认应答，，此时客户端进入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：<meta name=“viewport” content: “width=device-width;initial-scale=1”>,需要改变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节点的具体样式
第三步：布局阶段
- 布局阶段需要完成两个任务：创建布局树和布局计算
第四步：分层
第五步：图层绘制
第六步：栅格化
第七步：合成和显示

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对于空数组是不会调用回调函数的

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的值为服务器端返回的的数据到期事件，当再次请求的请求时间小于返回的时间，则直接使用缓存数据。但是由于服务器端时间和客户
以上是关于前端学习知识的主要内容，如果未能解决你的问题，请参考以下文章

线程学习知识点总结

前端开发常用代码片段（中篇）

前端开发常用js代码片段

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段