1.HTML5新特性

语义化标签

header(头部）,footer（尾部）,nav（导航），aside(侧边框）

增强型表单

多个新的表单input的输入类型：color(选颜色),date（选日期）,number（选数值）,month（选月份）

新增表单元素

datalist(输入域的选项列表),keygen(验证用户的可靠方法),output(不同类型的输出)

新增表单属性

required(boolean属性，要求填写的输入域不为空),pattern（用于验证input的值的正则表达式）,min/max（设置元素最大最小值）,height/width（input标签图像的高度宽度）

新事件

onresize(调整窗口大小时运行脚本),onscroll（滚动元素的滚动条时）,onplay（媒介数据开始播放时）,onerror（发生错误时）

2.CSS3新特性

伪类和伪元素

伪类向某些选择器添加特殊的效果（没有创建新元素），伪元素创建了html中不存在的元素，用于把特殊效果添加到某些选择器

背景和边框

背景：

background-size规定背景图片尺寸，background-origun规定定位区域，由content-box,paddingbox,border-box属性。

边框

border-radius:圆角，box-shadow:阴影，border-image:边框图片

文本效果

text-justify:text-align设置为justify用的对齐方法，@font-face自定义字体，渐变效果

2D转换（transform)

translate移动，rotate顺时针旋转，matrix把所有2d转换方法组合。3D转换：rotateX:绕X轴以给定度数旋转

动画（animation)过渡(transition)

过渡使页面变化更平滑，transition-property执行动画对应属性如color,可以用all指定所有属性。

多列布局

创建多个列对文本布局

用户界面

重设元素尺寸（resize)，盒尺寸(box-sizing)，轮廓(outline-offset)

CSS兼容内核

2.页面请求过程（输入网址后发生了什么）

1）页面加载

浏览器页面准备，比如初始化资源，unload前一个页面。然后看服务器返回header是否重定向，cache里检查域名是否有缓存，有就不需要DNS解析域名，没有就DNS解析域名成IP，直接用IP访问就不需要这步。DNS是用UDP，浏览器选择一个本机端口向目标IP地址的端口发TCP连接请求，经过3次握手建立TCP连接，在TCP连接中按照HTTP协议标准发送索要网页的请求，每产生一个http请求都有TCP connect。如果配备了负载均衡，IP地址应该是Nginx负载均衡服务器IP地址，Nginx根据设定的分配算法规则选择Web服务器建立TCP连接并转发啊王爷请求，Web服务器收到请求把网页发给Nginx,Nginx把网页给filters链处理发回给浏览器。浏览器根据页面内容生成DOM tree和CSS Rule Tree,调用JS引擎执行JS，然后生成RENDER Tree,根据这个渲染网页。但是解析页面内容会发现引用了未加载的image,css,js等静态内容，因此开始第二部分

2）网页静态资源加载

cdn是内容分发网络，是依靠部署在各地的边缘服务器，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度。然后浏览器根据url加载url下的图片内容，本质是重复页面加载部分，区别是均衡服务器后端的服务器不是应用服务器，是提供静态资源的服务器。重定向是http协议中的规范，重定向需要和服务端通过http协议通信，因此也有着DNS解析和TCP链接等过程，接受请求的响应状态码302，响应头中包含重定向地址Location。

3）服务端渲染

服务端收到客户端发的html字符串，使用模板引擎把数据传到模板，然后返回一个数据+html的字符串给浏览器，浏览器自动解析成一个完成的html页面，渲染过程只发生了一次网络请求，相应的就是最终结果，客户端不需要渲染

4）客户端渲染

客户端向服务端发请求，服务端不处理，直接原文件返回给客户端，客户端渲染html页面，当遇到ajax请求，又发起一次网络请求，服务器端根据接口返回相应数据，客户端结合模板引擎和数据拼装以dom形式插入html页面，用框架会好点。浏览器渲染过程发生了2次网络请求。

5）DNS使用的协议

DNS同时使用TCP,UDP，区域传输使用TCP，辅域名服务器会定时向主域名服务器进行查询以了解数据是否有变动，有变动会执行区域传送，进行数据同步，区域传送使用TCP而不是UDP，因为数据同步传送的数据量比一个请求应答的数据量要多得多。TCP是一种可靠连接，保证了数据的准确性。域名解析用UDP，客户端向DNS服务器查询域名，返回内容不超过512字节，用UDP传输就行，不用三次握手，DNS服务器负载更低，响应更快，其实也可以指定用TCP，但事实上DNS服务器进行配置时只支持UDP查询包。

6）TCP和UDP区别

二者在如何实现信息的可靠传递方面不同，TCP协议中包含了专门的传递保证机制，当数据接收方收得到发送方传来的信息，会自动向发送方发出确认消息，发送方接收到该确认消息之后继续传送其他信息，否则一直等待直到收到确认信息,超出时限没有收到确认消息就重传数据包，重传导致数据包重复，可以根据数据包的序号确定是都重复。。UDP不提供数据传送的保证机制，传递过程中出现数据包的丢失，协议本身不能做出任何检测或提示，所以是不可靠的传输协议。UDP不能保证数据的发送和接受顺序，但是强调传输性能的时候就可以用UDP。

7）TCP三次握手

一：A向B发出连接请求数据包二：B向A发送同意连接和要求同步的数据包三：A发出数据包确认B的要求同步目的是使数据包的发送和接收同步

8）TCP四次挥手

一：

客户端打算断开连接，发送FIN报文，FIN=1，客户端进入FIN_WAIT_1状态，指定序列号seq=u,主动关闭TCP连接，等待服务器确认

二：

服务器收到FIN保温，发送ACK应答报文，ack=seq+1,服务器进入CLOSE_WAIT，TCP版关闭，客户端收到ACK，进入FIN_WAIT_2状态

三：

服务器打算断开连接，发送FIN报文段，之后服务器进入LASK_ACK状态，等待客户端确认，FIN=1,ACK=1,seq=m,ack=u+1

四：

客户端收到FIN保温，会向服务器发送ACK应答报文，以ack做ACK的seq,以FIN的seq+1作为确认序号ack。然后客户端进入TIME_WAIT状态，服务器收到ACK进入CLOSE状态，客户端还要等2MSL，才能进入CLOSE状态。

需要四次的原因：

TCP的半关闭，提供连接的一方结束发送之后还能接受来自另一端数据的能力，close方法会触发内核发FIN报文，什么时候调用由用户态决定要等很久，ACK是系统内核完成的，时间很快。

2MSL的原因

MSL是保温最大生成时间，超过这个时间的报文将被丢弃。TCP基于IP，IP中有限制生存的TTL字段，是IP数据报可以经过的最大路由器个数，每经过处理它的路由TTL-1，MSL单位时间，TTL单位跳转数，MSL应大于等于TTL变成0的时间，确保报文已经丢弃。2MSL理解为数据包一来一回所需最大时间。 2MSL时间是从客户端接收到FIN后发送ACK开始计时的。如果在这个时间段内，服务器没有收到ACK应答报文段，会重发FIN报文段，如果客户端收到了FIN报文段，那么2MSL的时间将会被重置。如果在2MSL时间段内，没有收到任何数据报，客户端则会进入CLOSE状态。

3.进程和线程的区别

进程是CPU资源分配的最小单位，是CPU执行单个任务的过程，有自己的地址空间，包含5个状态，分别是运行态，就绪态，阻塞态，创建态，终止态。线程是进程执行运算的最小单位，是进程的实体，是系统独立调度和分配的基本单位，执行过程中需要协作同步，但不需要资源。进程有资源，可以并发执行，所需系统开销大。进程之间靠管道，信号，消息队列，共享内存，信号量，套接字通信。

进程与线程.png

4.原生js怎么实现路由

路由模式有2种，history和hash，hash是地址栏url中的#，虽然在URL，但不包括在HTTP,因为每次页面切换都切的是#之后的内容，#内容之后的改变不会触发地址改变，就不存在向后台发出请求，所以改变hash不会重新加载页面，可以随意刷新。history可以通过前进后退控制页面跳转，提供了对历史纪录修改的功能，执行修改虽然改变URL，但不会立刻向后端发请求。不能刷新，需要后端配置，可以自由修改请求url,刷新时如果不对对应地址匹配就会返回404

5.HTTP协议内容

概念

是客户端和服务器端之间数据传输的格式规范，简称超文本传输协议

无状态协议

无状态协议对事务处理没有记忆能力，缺少状态意味着后续处理需要前面的信息，每个请求不会直接地相互影响，解决方法是通过cookie或session会话保存。

Cookie

Cookie是存储在客户端的一小段数据，可以在硬盘中（永久），也可以在内存中（临时）。可以把标识设在里面，设置后就会存在，下次请求Cookie会自动发送给服务器这样就不用每个请求都手动设置标识，比如用户名

Session

是服务器为某个会话开启的一段独特的存储空间，一个Session用唯一的SessionID对应一段存储空间。可以确保每个登陆状态都有对应的一小段存储空间写入中间过程的数据

Cookie和Session配合

由于一个是客户端存储，一个是服务端存储，Session存储还是唯一的，SessionID需要通过cookie保存在客户端中，客户都啊弄过SessionID来标识自己

状态码

302重定向，200响应成功正常结束，404资源未找到，500服务器内部错误

请求报文

请求行（请求方法，URI,HTTP版本协议），请求首部字段：消息报头+空白行，请求内容实体

响应报文

状态行（HTTP版本，状态码，状态码原因短语），响应首部字段：响应报头+空白行，响应内容实体

GET请求

在请求行上提交数据，最终提交数据会显示在浏览器地址栏，不够安全，数据长度有限制，只能提交字符串数据，请求结果会被浏览器缓存，所以一般用于从服务器端读取资源不走缓存可以在请求路径后加时间戳。

POST请求

使用表单form,form的method设为post是POST请求，在请求体上提交数据，相对安全，没有长度限制，可以提交任何类型数据，但不会被缓存。想修改服务器端资源要用POST。

6.页面性能优化

1）网络加载类

减少HTTP资源请求次数

合并静态资源图片，JS,CSS代码，减少请求数和资源请求小号，避免重复资源。

减少HTTP请求大小

减少没必要的图片，JS/CSS/HTML代码，对文件压缩优化，用gzip压缩传输内容，移除代码中的注释并压缩，构建工具压缩静态图片资源

CS/JS放入外部文件，避免style/script标签直接引入

避免空href和src

渲染时会加载空内容，阻塞其他资源进程

HTML指定Cache-Control/Expires

将HTML内容缓存，避免频繁向服务器发请求

合理设置Etag/Last-Modified

对未修改文件，静态资源服务器返回304，让浏览器从缓存中读数据，降低服务器负载和WEB资源下载带宽消耗。

减少页面重定向

重定向需要时间开销

用静态资源分域存放增加下载并行数

用多域名主机存放不同静态资源，增大并行下载数

用静态资源CDN存储我呢见

CDN加快同一地理区域重复静态资源文件的相应下载速度

用可缓存的AJAX

返回内容相同的请求，利用AJAX缓存加快响应速度

用GET完成AJAX请求

POST发起2次TCP传输，GET只发送头部，拉取数据效率更高

减少Cookie大小并进行Cookie隔离

HTTP请求会带上Cookie，减少可以减少HTTP请求大小，静态资源用不同域名存放，因为Cookie默认不能跨域，做到了隔离

缩小favicon.ico并缓存

使用异步JS资源

异步JS资源不会阻塞文档解析，允许在浏览器优先渲染页面，延后加载脚本，用async,加载渲染后续文档元素和main.js的加载执行是并行的，用defer,后续文档元素的过程和main.js的加载是并行的，但是main.js的执行在页面所有元素解析完成后再开始

拆分或延后加载阻塞渲染的CSS/JS

避免用CSS import引用加载css

2）页面渲染类

把css资源引用放到HTML文件顶部

浏览器可以优先下载CSS并尽早完成页面渲染

JS资源引用梵高HTML底部

防止JS加载解析对页面渲染阻塞，除非标记为异步加载，不然会阻塞

预先设定图像大小

不要直接在HTML缩放图片

减少DOM元素数量和深度

避免在选择器末尾加通配符

CSS解析匹配到渲染树是逆向匹配，加通配符会增加计算量

减少关系型样式表写法

用唯一类名能提升效率

减少用JS动画

JS直接操作DOM容易页面重排

CSS动画使用translate,scale代替top,height

避免大量重排计算

避免用

长表格渲染耗费性能，可以用

避免用CSS表达式

这样渲染速度慢

避免运行耗时的JS

与初次渲染无关的逻辑都应该延迟加载执行

7.事件委托

原本绑定在子元素上的时间委托给父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到该元素

8.事件冒泡

一个元素接收到事件时，会把接收到的事件逐级向上传播给它的祖先元素，一直传到顶层的window对象。

9.添加事件的方式

/ 方法一 函数表达式
dom.onclik = function(){
	/* 代码 */
}
// 方法二 添加事件
div.addEventListener('click', function(){
	/* 代码 */
})
// 方法三 在html标签中添加相应的函数
function funName(){
	/* 代码 */
}
<tag onclik="funName()">text</tag>

10.添加事件方式的区别

如果只存在方法三在html标签中添加相应的函数则运行方法三函数

如果存在方法三在html标签中添加相应的函数还有其他方法，则运行其他方法的函数

如果方法二添加事件添加了多个，则依次按添加顺序运行这多个函数

如果方法一函数表达式添加了多个，则运行最后添加的函数

如果方法一函数表达式和方法二添加事件同时存在先运行方法一函数表达式后运行方法二添加事件

11.JS怎么实现异步

主线程发起异步请求，相应工作线程接收请求并处理，等工作线程的处理有结果，浏览器内不放呢配一个线程出来，通知主线程（通知就是把回调函数推入任务队列）。JS通过一个执行栈和一个任务队列完成异步操作，所有同步任务都在主线程执行，形成执行栈，任务队列中存放各种事件回调，当执行栈中的任务处理完成后，主线程开始读取任务队列中的任务并执行，不断循环

12.压缩算法有哪些

LZ77压缩算法，LZW压缩方法，霍夫曼编码压缩

13.HTTP请求报文的组成

请求行（请求方法GET/POST+URL字段+HTTP协议版本字段），请求头部（HOST:访问主机名，Cookie：可以向服务器带数据，Connection:处理完请求是否保持连接，空行，请求数据（GET:无数据，POST：要提交的数据）

14.如何封装组件

先封装axios,定义四种方法：get,post,put,delete,然后export出去，在别的文件引用，不用再写method了。也可以封装url

15.token

登陆完成后，把用户的token通过localStorage或者cookie存在本地，用户每次进入都在本地存储读取token,token存在说明登录过，更新vuex中的token状态，每次请求接口都在请求的header中携带token

16.响应拦截器

服务器返回的数据，拿到之前进行错误的同一处理和是否登录调整登录页的操作。

17.数据驱动视图

数据是输入，视图是输出，可以反复基于数据渲染视图，只要数据变化就重新渲染视图。MVVM就是把数据和视图绑定，操作数据等于操作视图

18.DOM是HTML和XML文档的编程接口

DOM是文档对象模型，将文档解析成由节点和对象组成的结构及和，将web页面和脚本连接起来，是Web页面的完全的面向对象表述。用DOM访问文档和其中的元素，不同浏览器对DOM有不同的实现。

前端杂七杂八知识积累