前端面试

1. javascript面向对象是什么？

面向对象是一种思维模式，是相对于面向过程来说的。
面向过程也叫函数式编程，在你解决一个问题的时候，定义好你的函数，然后在函数体里面写你的逻辑即可，只要里面的逻辑没有出现错误，最后传入参数调用即可得到想要的结果。
而面向对象就是在你遇到一个问题时，你能想到这类问题所具有的共性，然后把这些共性单独拿出来形成一个对象，对象中的属性对应于这类问题的公共属性，所以这个对象也可以看做是与现实中相对应的一个具体事物。比如一辆车，这辆车就可以用JS来模拟成一个对象，他有品牌、型号、门数等，这些都可以看做是对象中的公共属性。而车的价格、行驶速度等每辆都是不相同的，这些可以看做是事物的私有属性。所以面向对象更倾向于区分事物的共有属性和私有属性。
这样便可以通过公共属性进行扩展，提高代码的可读性、可维护性、复用性。
面向对象有三个特点：
（1）封装：将客观事物封装成一个抽象的对象（类），在这个类中有这个事物的属性和方法。封装的目的是将信息隐藏，隐藏内部的实现细节，只保留一个接口对外通信。封装的优势在于，无论一个对象内部的代码经过了多少次修改，只要不改变接口，就不会影响到使用这个对象时编写的代码
（2）继承：面向对象将事物的共有属性和私有属性分开。对于一个具体的实例，要想具有这些公有属性，就必须要继承这个对象（类）。利用继承，一方面可以在保持接口兼容的前提下对功能进行扩展，另一方面增强了代码的复用性，为程序的修改和补充提供便利。
（3）多态：同一操作用在不同对象上，可以产生不同的解释和不同的执行结果。这样解释比较难以理解，我们直接上代码：

2.浏览器解析HTML的过程

当你再浏览器中输入一个网址，按下回车后发生：
（1）https://blog.youkuaiyun.com/didudidudu/article/details/80181505
（2）浏览器解析html：
采用从上到下的方式来解析。
首先解析HTML的header部分，此时控制权属于浏览器的渲染引擎。header中可能会有script标签，遇到这个标签，浏览器暂停解析，将控制权交给JS引擎。如果script是引用外部资源，则是先下载再解析JS代码，如果引用了多个，会同时下载，但是解析的时候按顺序解析；如果在script中写了一段JS代码，那么浏览器开始解析这段代码，所以可能会报错（JS中操作DOM节点，此时DPM并未加载，所以报错）。执行完毕后又交给渲染引擎。
如果遇到Link标签，开始下载CSS文件，同时向下解析。
（JS的下载或解析会使浏览器停止形成DOM tree，但是CSS的下载不会影响DOM tree的形成，只会影响CSS tree的形成，从而影响render tree的形成）
解析完header部分，开始解析body部分，形成DOM tree。由于CSS文件的解析和DOM的解析在不同的线程中，是并行的，所以当DOM解析完形成DOM tree并且CSS也解析完形成CSS tree，两者合并成render tree。
然后根据render tree计算节点信息，这个过程也叫重排，计算完后绘制在浏览器页面上，这个过程也叫重绘。

3. http缓存： 缓存控制 和 缓存校验

缓存控制：控制缓存的开关，在http请求头和响应中设置，表明是否开启缓存，以及使用了哪种缓存方式。
缓存校验：需要一个机制来验证缓存是否有效。如何校验缓存，比如怎么定义缓存的有效期，怎么确保缓存是最新的。

缓存控制

：Pragma 和 Cache-Control。
（ Cache-Control 不仅在请求中有，在响应中也有）

Cache-Control 可设置的值：

（1）在请求中使用Cache-Control 时

（2）在响应中使用Cache-Control 时

缓存校验

我们需要一个机制来验证缓存是否有效。比如服务器的资源更新了，客户端需要及时刷新缓存；又或者客户端的资源过了有效期，但服务器上的资源还是旧的，此时并不需要重新发送。缓存校验就是用来解决这些问题的，在http 1.1 中，我们主要关注下Last-Modified 和 etag 这两个字段。

Last-Modified：

服务端在返回资源时，会将该资源的最后更改时间通过Last-Modified字段返回给客户端。客户端下次请求时通过If-Modified-Since或者If-Unmodified-Since带上Last-Modified，服务端检查该时间是否与服务器的最后修改时间一致：如果一致，则返回304状态码，不返回资源；如果不一致则返回200和修改后的资源，并带上新的时间。

etag：

单纯的以修改时间来判断还是有缺陷，比如文件的最后修改时间变了，但内容没变。对于这样的情况，我们可以使用etag来处理。
etag的方式是这样：服务器通过某个算法对资源进行计算，取得一串值(类似于文件的md5值)，之后将该值通过etag返回给客户端，客户端下次请求时通过If-None-Match或If-Match带上该值，服务器对该值进行对比校验：如果一致则不要返回资源。
If-None-Match和If-Match的区别是：
If-None-Match：告诉服务器如果一致，返回状态码304，不一致则返回资源
If-Match：告诉服务器如果不一致，返回状态码412

原文链接：https://blog.youkuaiyun.com/u012375924/article/details/82806617

4. 关于canvas的大小问题：内联样式与css样式

canvas的默认大小：300px * 150px
canvas的大小分为两部分：（1）canvas画布实际的大小 （2）浏览器渲染出的画布大小

（1） 当在html中设置了canvas，并且css中没有设置canvas，或者：内联样式与css样式一样：

此时画布的实际大小和浏览器渲染出来的大小一致，都是300 × 300

（2）当html中没有设置canvas属性，仅在css中设置：此时canvas的实际大小其实是默认值：300×150，而css中设置的是200*200，此时实际大小与渲染的大小不一致，所以会进行缩放。

宽：100 ×（渲染宽200/实际宽300）
高：100 ×（渲染高200/实际高150）

5. css布局：flex

（设为flex布局以后，子元素的float、clear和vertical-align属性将失效）


在父元素（也称为容器）上设置display：flex ，子元素（也成为item）会自动排成一行。

1. 当元素设置为flex后，在父元素上可设置的属性：

（1）flex-direction: row（默认）、column、row-reverse、column-reverse
子元素按照顺序还是逆序，本质是按照主轴排列（顺序的时候主轴左→右，贴着左上角，逆序的时候右←左，贴着右上角）
（2）flex-wrap：wrap（默认）、no-wrap、wrap-reverse. 换行
（3）flex-flow : flex-direction + flex-wrap
（4）justify-content （调整水平方向的位置）: center（水平方向居中）、flex-start（左对齐） 、 flex-end（右对齐） 、space-between（两端对齐） 、space-around（每个子元素的两边距离相等，所以中间的距离是两边距离的2倍）;
设置了这个属性后，子元素会按照这个属性进行对齐。
（5）align-items（调整垂直方向的位置）：center（垂直方向居中）、flex-start（贴着最顶点对齐）、flex-end（贴着最底点对齐）、baseline（按照里面的文字对齐）、stretch（默认。如果项目未设置高度或设为auto，将占满整个容器的高度）
（6）align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

2. 当父元素设置为flex后，在子元素上可设置的属性：

（1）order：定义项目的排列顺序。数值越小，排列越靠前，默认为0.
（2）flex-grow：定义项目的放大比例，默认值为0，即如果存在剩余空间时不放大。为1时放大
（3）flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足这个项目将缩小。为0时不缩小
（4）flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可设置为：width或height属性一样的值(100px)。这个值不影响纵向的高度，只依赖于根据主轴的方向。如果主轴方向是column，那么设置了之后就是相当于height了
（flex-basis 与 width、height的优先级：flex-basis高。而且flex-basis设置为0时，会根据内容可撑开；而width、height为0时，页面不会显示）
（5）flex：= flex-grow + flex-shrink + flex-basis
（6）align-self：auto | flex-start | flex-end | center | baseline | stretch;
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。

6. TCP UDP的区别

（1） TCP协议：

传输控制协议。定义了两台计算机（用户与服务器）之间进行可靠的信息传输而交换的数据和确认信息的格式，以及计算机为了确保数据的正确到达而采取的措施。是一种面向连接的、可靠的、基于字节流的传输层通信协议（流就是指不间断的数据结构）。
特点：
（1）面向连接：客户端与服务器发送数据之前要先建立连接。
（2）单播传输方式：每条TCP连接传输只能有两个端点，只能进行点对点的传输，不支持多播和广播传输
（3）面向字节流：TCP不像UDP那样一个个报文独立地传输，而是在不保留报文边界的情况下以字节流方式进行传输。
（4）传输可靠：为了保证数据传输的准确无误，TCP传输协议将用于传输的数据包分为若干个部分（每个部分的大小根据当时的网络情况而定），然后在它们的首部添加一个检验字节。当数据的一个部分被接收完毕之后，服务端会对这一部分的完整性和准确性进行校验，校验之后如果数据的完整度和准确度都为100%，在服务端会要求客户端开始数据下一个部分的传输，如果数据的完整性和准确性与原来不相符，那么服务端会要求客户端再次传输这个部分。
（5）提供拥塞控制：当网络出现拥塞的时候，TCP能够减小向网络注入数据的速率和数量，缓解拥塞。
（6）全双工通信：允许通信双方在任何时候都能发送数据。因为TCP连接的两端都设有缓存，用来临时存放双向通信的数据。

三次握手：

（1）第一次握手：客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。Client将标志位SYN置为1，随机产生一个值seq=J，发送给服务器。请求发送后，客户端便进入 SYN-SENT 状态。

（2）第二次握手：服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，标志位SYN=1知道Client请求建立连接，Server将标志位SYN和ACK都置为1，ack (number )=J+1，随机产生一个值seq=K，并将该数据包发送给Client以确认连接请求，发送完成后便进入 SYN-RECEIVED 状态。

（3）第三次握手：当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。
Client收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给Server，Server检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client与Server之间可以开始传输数据了

四次挥手： 终止TCP连接，就是指断开一个TCP连接时，需要客户端和服务端总共发送4个包以确认连接的断开。

TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。
（1）第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

（2）第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

（3）第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

（4）第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。

（参考链接：https://blog.youkuaiyun.com/tonglin12138/article/details/86470433）

（2）UDP协议：

UDP（用户数据报协议）是一个简单的面向数据报的传输层协议。提供的是非面向连接的、不可靠的数据流传输。