前端开发实习面经总结

js

js基本数据类型

undefined、null、number、boolean、string、symbol

js中数组去重的方法

ES6 Set去重；Array.from(new Set(array))
indexOf循环去重
include
Object 键值对去重；把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。

js遍历数组的方式

1、for循环
2、forEach（）
3、map（）映射方法
4、for…in

for(let item in arr){console.log(arr[item])}

5、for…of 方法（es6支持）

for(let item of arr){console.log(item)}

注意：forEach（）和map（）区别：

1、forEach：用来遍历数组中的每一项，这个方法执行没有返回值，不影响原数组

2、map：支持return，相当与原数组克隆了一份，把克隆的每项改变了，也不影响原数组

es6的新特性

promise，await/async，let、const、块级作用域、箭头函数

手写闭包实例：每间隔1s输入一个数组元素。
promise
promise.all()
setTimeout 定时器函数

“==” 与三等号的区别

“==” ：自动转换类型
“===”：直接比较

js的继承方式

原型链继承
构造继承，使用父类的构造函数来增强子类实例，即复制父类的实例属性给子类
实例继承
拷贝继承
组合继承
寄生组合继承

js的原型链

原型链继承的缺点是什么？

原型属性上的引用类型值会被所有实例共享，所以多个实例对引用类型的操作会被篡改；
在创建 Child 的子类的时候,无法向继承元素传递参数

闭包

概念： 闭包（closure）是指有权访问另一个函数作用域中变量的函数。也就是说，一个作用域可以访问另外一个函数内部的局部变量。

作用： 延伸了变量的作用范围

一个是可以读取函数内部的变量

另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。

闭包的缺点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题。在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。不合理

this指向问题

call、apply、bind

改变函数内this指向，js提供了三种方法 call() apply() bind()

1、call()
作用：1.可以调用函数； 2. 可以改变函数内的this指向
call()的主要作用是可以实现继承。
2、apply()
作用：1.可以调用函数； 2. 可以改变函数内的this指向
区别：参数不一样，参数必须是数组（伪数组）
3、bind()
作用：不会调用函数，但是也可以改变函数内的this指向
区别：返回的是原函数改变this之后的新函数

call、apply、bind区别

浅拷贝和深拷贝

let const var的区别

箭头函数和普通函数区别

this指向问题：箭头函数的this指向的是父级作用域的this，是通过查找作用域链来确定 this 的值也就是说，看的是上下文的this，指向的是定义它的对象，而不是使用时所在的对象；普通函数指向的是它的直接调用者。
不可以被当作构造函数，通过new命令来作为构造函数会报错，这里没有构建原型的说法
不可以使用argumnets对象，该对象在函数体内不存在，如果要用就用rest参数替代
不可以使用yield命令，因此箭头函数不能用作Generator函数

js的垃圾回收机制

一般来说没有被引用的对象就是垃圾，就是要被清除。有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。
基本的垃圾回收算法称为 “标记-清除”，定期执行以下“垃圾回收”步骤:

垃圾回收器获取根并 “标记”(记住)它们；
然后它访问并“标记”所有来自它们的引用；
然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住，以便以后不再访问同一个对象两次；
以此类推，直到有未访问的引用(可以从根访问)为止。
除标记的对象外，所有对象都被删除。

转载：js垃圾处理机制

一个正常函数本身逻辑已经执行完，按照js垃圾处理机制来说应该会被清除，因为没有引用了。

JS防抖和节流

如果有一个输入框，每次做模块搜索时都会触发一个请求，那如果一直输入就会一直做请求，如何优化？

用户输入的时候不去做请求，在最后停下的一刻再去做请求。

js防抖的基本思路：
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

JS节流的基本思路：
规定一个期限时间，在该时间内，触发事件的回调函数只能执行一次，如果期限时间内回调函数被多次触发，则只有一次能生效。

跨域是什么？如何解决？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓“同源”是指域名、协议、端口均相同。

解决办法：
1、JSONP 只支持GET请求，不支持POST请求。适合加载不同域名的js、css，img等静态资源；
2、CORS（支持所有类型的HTTP请求，但浏览器IE10以下不支持）适合做ajax各种跨域请求。跨域的cors 同源策略，全称为“跨域资源共享”，即它允许浏览器向跨源服务器发送XML HttpRequest请求，从而克服AJAX只能同源使用的限制。
3、Nginx代理跨域和nodejs中间件跨域原理都相似，都是搭建一个服务器，直接在服务器端请求HTTP接口，这适合前后端分离的前端项目调后端接口。
4、document.domain+iframe适合主域名相同，子域名不同的跨域请求。
5、postMessage、websocket都是HTML5新特性，兼容性不是很好，只适用于主流浏览器和IE10+。
6、PHP端修改header（XHR2方式）

Axios

html

标签的语义化

HTML5标签语义化即表示标签用来做什么。
HTML5新增的语义化标签主要有：<header> <aside> <nav> <footer> <article> <section> <time>

这些标签和div的区别：

比<div>标签有更加丰富的含义，方便开发与维护
在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构

html5的新增特性

新增语义标签（header，footer，aside，dialog…）
新增了表单元素、表单类型（date，datetime，month，url…）
新增视频、音频标签（audio，video）
svg绘图（项目用到）
canvas绘图，配合js实现画图
地理定位
拖放API
WebWorker：Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。
WebStorage：WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准。
WebSocket协议：为web应用程序客户端和服务端之间提供了一种全双工通信机制。

输入网址之后页面会发生什么？

输入网址，发送至DNS服务器，进行DNS域名解析，将url解析为ip地址，并获取相应的域名；
浏览器与web服务器建立TCP链接;
浏览器向web服务器发送HTTP请求;
服务器响应请求,并返回对应的数据;
浏览器下载数据,并解析源文件,渲染页面,呈现页面

如果向后端请求时，想批量增加一些请求变量，即在所有的请求里面添加一些公共的参数，应该如何做？

思路：为GET和POST请求添加请求参数和请求头（暂定）

如果存在多个接口同时向后端请求，但是由于数据的逻辑，必须得等到所有接口的数据都返回到前端才能做数据渲染，应该怎么办？

同步加载数据，在最后一个请求成功之后再一一赋值即可。由于ajax没法做同步，需要引入promise。推荐使用官方推荐的axios请求数据。https://segmentfault.com/q/1010000015288581

axios.get()

前端文件打包时太大了，应该怎么办？

对于webpack打包优化的一些经验，主要分为以下几个方面：

去掉开发环境下的配置
压缩js，css，图片
提取通用模块文件：CommonsChunkPlugin
提取样式到css文件：ExtractTextPlugin
提取manifest：让提取的公共js的hash值不要改变
webpack-bundle-analyzer：webpack打包文件体积和依赖关系的可视化

webpack简单描述

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

前端性能优化

减少HTTP请求
添加本地缓存
压缩资源文件
将CSS样式表放在顶部，把javascript放在底部（浏览器的运行机制决定）
避免使用CSS表达式
减少DNS查询
使用外部javascript和CSS
避免重定向
图片lazyLoad
使用内容发布网络（CDN）

前端里面如何进行搜索引擎优化（SEO）？

避免head便签 js堵塞：所有放在head标签里面的js和css都会堵塞渲染；如果这些css和js需要加载很久的话，那么页面就空白了；
解决办法：把script放到body后面，这也是很多网站采取的方法。
尽可能的减小head里面的css资源；
压缩和缓存；
延迟加载图片；
DNS解析优化；
解决办法：在head中写上几个link标签，对标签中的地址提前解析DNS，这个解析是并行发生的，不会堵塞页面渲染；
减少http请求；
html别嵌套太多层，加重页面layout的压力；
合理运用css选择器，减少匹配的计算量；
js中别滥用闭包，会加深作用域链，增加变量查找时间；

浏览器如何对HTML5的离线存储资源进行管理和加载的呢？

在浏览器的html头部加上manifest属性，如果是第一次访问浏览器会根据manifest的内容进行下载并存储离线内容；如果已经访问过则从离线存储中进行加载。然后再比对服务器，如果有新内容，再更新离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

Cookie，LocalStorge，SessionStorge

常用的几种本地缓存机制：Cookie，LocalStorge，SessionStorge

数据的有效期不同：
cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。永久存储，除非手动删除。
sessionStorage：仅在当前的浏览器窗口关闭有效；当前页面关闭的时候，自动销毁
作用域不同：
cookie：也是在所有同源窗口中共享的
localStorage：在所有同源窗口都是共享的；
sessionStorage：不共享，即使是同一个页面；

Cookie，Session

1、 cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

http和https

http：超文本传输协议，用于从服务器传输超文本到本地浏览器的传输协
https：由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。主要是建立一个信息安全通道，来确保数组的传输，确保网站的真实性。 https的SSL加密是在传输层实现的。

1、 http传输的数据都是未加密的，即明文。https则是具有安全性的ssl加密传输协议。
2、使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443。
3、 http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
4、 Https协议需要ca证书，费用较高。

https协议的工作原理：
客户端（使用https url）<------>服务器（要求web 服务器建立ssl链接）(返回网站证书)
开始协商SSL链接的安全等级，一致，客户端浏览器建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。 web服务器通过自己的私钥解密出会话密钥，并通过会话密钥加密与客户端之间的通信。

css

CSS选择器（优先级）

flex属性

flex-grow属性：
定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大；
flex-shrink属性：
定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性：
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

实现一个div上下左右的居中

绝对定位+margin负值（div有固定宽度）

.box{
width:200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}

绝对定位 + transform

.box{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}

flex 布局方式

.box{
display:flex;
align-items:center;
justify-content:center;
}

table-cell 方式

.box{
display: table-cell;
vertical-align: middle;  /* 垂直居中 */
text-align: center;
}

CSS盒子模型

矩形区域，用来封装页面上的元素。盒子模型包括元素的内容，边框(border)、内边距(padding)、外边距(margin)。标准的W3C盒子模型和IE盒子模型。

标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

IE盒模型：一个块的总宽度=width+margin（左右）（即width已经包含了padding和border值）

如何设置这两种模型：

 box-sizing: border-box;  // 设置为IE模型box-sizing: contetn-box; // 设置为标准模型

什么是BFC？

答：Block format context , 块级格式化上下文
一块独立渲染区域 ,内部元素的渲染不会影响边界以外的元素。

形成BFC的常见条件：

float 不是 none
overflow 不是 visible
position 是 absolute 或 fixed
display 是 flex、inline-block

BFC的常见应用:

清除浮动

如何实现两个div，左边固定div宽度200px，右边div自适应？

转载：html div自适应

<style>
/*方法一： BFC(块级格式化上下文)*/.container{width:1000px;height:400px;border: 1px solid red;}.left{width:200px;height:100%;background: gray;float: left;}.right{overflow:hidden;  /* 触发bfc */background: green;}/*方法二： flex布局 */.container{width:1000px;height:400px;border:1px solid red;display:flex;         /*flex布局*/}.left{width:200px; height:100%;background:gray;flex:none;    /*flex布局*/}.right{height:100%;background:green;flex:1;        /*flex布局*/}/* 方法三： table布局 */.container{width:1000px;height:400px;border:1px solid red;display:table;         /*table布局*/}.left{width:200px; height:100%;background:gray;display:table-cell;}.right{height:100%;background:green;display: table-cell;}/*方法四： margin-left方式*/.container{width:1000px;height:400px;border:1px solid red;}.left{float:left;width:200px;border:1px solid red;height:100%;background:gray;}.right{height:100%;border:1px solid blue;width:auto;margin-left:200px;       /* margin-left方式 */}/*方法五： css计算宽度calc*/.container{width:1000px;height:400px;border:1px solid red;}.left{width:200px;height:100%;background:gray;float:left;}.right{height:100%;background:green;float:right;width:calc(100% - 200px);}
</style>

只用CSS方法使div从页面左边滑动到右边

通过CSS3实现平移动画效果。transition属性
借鉴博客

拖拽实现列表排序

描述：有一个列表，列表里面有十条记录，每一行是一条记录。在每一个记录的后面进行一个拖页的动作，以此进行列表的排序。

转载至https://blog.csdn.net/azuretodd/article/details/109973228

<li class="li_row" v-for="(item,index) in linkData " :key=index draggable="true"@dragstart="drag($event,index)" @drop="drop($event,index)" @dragover='allowDrop($event)'>

思路：列表元素存放于data数组中，用v-for进行遍历，在需要循环渲染的li标签上添加draggable=”true” 使每条标签可以被拖放，同时绑定三个事件：dragstart drop dragover ，从而实现列表拖拽排序。

原理：拖拽 li 标签,实际上是操作Data 数组,利用数组的 splice方法删除、添加元素,从而实现对数组的拖拽排序。因为vue angular 等框架是数据驱动视图,数组变化了,界面也会变化。

vue和React

前端框架MVVM和MVC

MVVM：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。

区别：
c（控制层）被换成了vm（viewmodel）层
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。
mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）

前端框架MVVM意义

开发效率：促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。
前后端业务逻辑分离。
接口：MVVM用接口实现了前后端数据的通信，这样可以使前后端之间的业务逻辑没有什么关系。
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
参考博客

为什么使用Vue或React，比js好在哪里？

1、避免重复引用外部js，造成代码冗余问题；
2、组件化，封装可以重用的代码块，很大程度的节省了代码量，提高了代码的复用性；
3、在团队合作开发中，相对独立开发不同的组件，效率上也有很大的提升，会缩短开发周期；
4、性能提升：很多DOM操作会引起回流和重绘，对于jQuery来说，大量的操作DOM虽然方便，但是很浪费页面性能。框架和jQuery虽然都会操作DOM，但是框架把大量的DOM进行了处理和优化（例如Vue的虚拟DOM），通过数据驱动，就能渲染出DOM，大大提升了性能。
参考

Vue和React的区别

1、react整体的思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于可变数据的，支持双向绑定；
2、react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的，vue追求的是开发的简单，而react更在乎方式是否正确；
3、通过js来操作一切，还是用各自的处理方式：react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等。vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
参考

组件传参（通信）

父往子组件上传递，子组件上使用 props接收。
子往父亲上传递 emit ， this.$emit(“child”,参数)
通过 chidren和refs实现父子组件传参

常见使用场景可以分为三类：
1、父子通信：父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners
2、兄弟通信：Bus；Vuex
3、跨级通信：Bus；Vuex；provide / inject API、$attrs/$listeners

React组件分类

函数组件和类组件
无状态组件和有状态组件
展示型组件和容器型组件

补充概念：

1、有状态组件：在无状态组件的基础之上，如果内部包含state并且外部数据发生变化时会随之发生变化，此时就是有状态组件。有状态组件是有生命周期的，用来在不同的时刻触发状态（state）的更新。

2、无状态组件：是最基础的组件形式，纯静态展示的作用，如固定的按钮，标签等，它的基本组成结构就是属性（props），在有一个渲染函数（render），不涉及到状态的更新，所以无状态组件的复用性最强。

3、展示型组件：展示型组件在意的是组件是怎么渲染的。它包含了VirtualDOM的修改或者组合，也可能包含组件的样式。同时，它不依赖任何形式的store。

4、容器型组件：容器型组件主要是组件是如何工作的，更具体的就是数据是怎么更新的，它不包含任何的Virtual DOM的修改和组合，也不会包含组件的样式。

类组件和函数组件区别

Vue状态更新

在vue中状态更新是异步的，这一点和react中的setstate类似。

Vue异步更新原理：
1、修改 Vue 中的 Data 时，就会触发所有和这个 Data 相关的 Watcher 进行更新。
2、首先，会将所有的 Watcher 加入队列 Queue。
3、然后，调用 nextTick 方法，执行异步任务。
4、在异步任务的回调中，对 Queue 中的 Watcher 进行排序，然后执行对应的 DOM 更新。

Vue的生命周期

生命周期是指在Vue中，实例或者组件从创建到消灭中间经过的一系列过程。每个阶段触发一个钩子函数，分别是创建前后，挂载前后，更新前后，销毁前后。

页面第一次加载时会执行：

beforeCreate
created
beforeMount
mounted

更新

beforeUpdate
updated

销毁

beforeDestroy
destroyed

什么时候进行异步请求？

mounted 或者 dispatch一个action

created和mouted的区别：什么东西应该放在mouted之后，什么东西created之后做？

created：在模板渲染成html之前调用，即通常初始化某些属性，然后再渲染成视图。
mounted：在模板渲染成html之后调用，通常是初始化页面完成之后，再对html的dom节点进行一些需要的操作。

vue在页面第一次渲染时会触发哪几个生命周期钩子函数？

创建前后挂载前后

beforecreate：把vue实例初始化，数据方法还没有加载
created：已经加载数据方法
beforemount：模板数据已经编译
mounted：渲染视图

以上四个是组件初始化加载经过的生命周期函数

dom渲染是在哪个周期函数之间完成的？

dom渲染完成是在挂载在之前，因为那个时候虚拟dom已经完成，等待挂载，挂载完成之后就展示在真实的dom 树上了。

什么是DOM？

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

Vuex和Node.js

vuex : 虚拟dom --> 正式dom。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

node.js

前端技术支持多端（多端统一开发框架）

React-Native
Weex
Flutter
Web App
Taro（京东）
uni-app

计算机网络

TCP/UDP的区别

TCP面向连接，UDP面向非连接即发送数据前不需要建立连接。
TCP提供可靠的服务，UDP无法保证。
TCP面向字节流，UDP面向报文。
TCP数据传输慢，UDP数据传输快。
TCP传输不限制大小，UDP单次传输报文有限制（64K）。

UDP好处

无需建立连接，数据传输快。

了解的端口以及对应的服务

TCP三次握手

客户端和服务端都需要直到各自可收发，因此需要三次握手。
目的：为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。

第一次握手：建立连接，客户端向服务器发送请求报文段，等待服务器确认。
第二次握手：服务端收到来自客户端的请求报文之后，进行确认，对收到的ACK字段+1也就是X+1，再加上SYN字段一起返回给客户端。
第三次握手：客户端收到SYN_ACK报文段，然后将ACK设置为y+1，然后将ACK报文段发给服务器端，由此客户端和服务端都进入了ESTABLISHED状态，完成了三次握手。

TCP四次挥手

第一次挥手：客户端发送一个FIN（释放连接报文段），主动关闭客户端到服务器的数据传送，客户端进入FIN_WAIT_1状态。
第二次挥手：服务器收到FIN后，发送一个ACK给客户端，服务器进入CLOSE_WAIT状态。
第三次挥手：当服务器传给客户端的数据传输完毕之后，服务器发送一个FIN，用来关闭服务器到客户端的数据传送，服务器进入LAST_ACK状态。
第四次挥手：客户端收到FIN后，发送ACK给服务器，服务器进入关闭状态，客户端进入TIME_WAIT状态。经过一定的等待时间后客户端进入关闭状态，完成四次握手。

为什么不是两次握手或四次握手

两次握手不可行：有可能网络堵塞，已失效的请求报文段突然又传送到了服务端而产生连接的误判。
四次握手多余：通过三次握手确认双方收发功能都正常，四次也可以但是显得比较多余。

第三次握手失败了，会发生什么？

失败了服务端收到不确认包，会超时重发，若还是没有收到确认包，或者收到了数据包，则服务端直接发送reset重置包结束本次连接。

为什么建立连接是三次握手，而关闭连接却是四次挥手呢？

建立连接：因为服务端在LISTEN状态下，收到建立连接请求的SYN报文后，把ACK和SYN放在一个报文里发送给客户端。
关闭连接：客户端单方面无数据发送认为可以结束了，但是服务端不一定没有数据发送，所以服务端要将确信信息和自身发起断开分作两步。当收到对方的FIN报文时，仅表示对方不再发送数据但还能接收收据，我们也未必把全部数据都发给了对方，所以我们可以立即close，也可以发送一些数据给对方后，再发送FIN报文给对方表示同意关闭连接。因此我们的ACK和FIN一般会分开发送。

在浏览器中输入网址之后会发生什么？

输入网址，发送至DNS服务器，进行DNS域名解析，将url解析为ip地址，并获取相应的域名；
浏览器与web服务器建立TCP链接;
浏览器向web服务器发送HTTP请求;
服务器响应请求,并返回对应的数据;
浏览器下载数据,并解析源文件,渲染页面,呈现页面

OSI七层模型和TCP/IP四层模型

参考

HTTP协议里面包含了哪些请求？

GET：对服务器资源的简单请求
POST：用于发送包含用户提交数据的请求
HEAD：类似于GET请求，不过返回的响应中没有具体内容，用于获取报头
PUT：传说中请求文档的一个版本
DELETE：发出一个删除指定文档的请求
TRACE：发送一个请求副本，以跟踪其处理进程
OPTIONS：返回所有可用的方法，检查服务器支持哪些方法
CONNECT：用于ssl隧道的基于代理的请求

Get和Post的区别

get参数通过url传递，post放在request body中。
get请求在url中传递的参数是有长度限制的，而post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留
GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。GET产生一个TCP数据包；POST产生两个TCP数据包。

HTTP状态码

数据库

常见数据库

MYSQL、Oracle 、SQLServer

事务及特性

概念：事务一般是指一种机制、一个操作序列，包含了一组数据库操作命令。事务把所有的命令作为一个整体一起向系统提交或撤销操作请求，即这一组数据库命令要么都执行，要么都不执行，因此事务是一个不可分割的工作逻辑单元。

事务的特性：

原子性
一致性
隔离性
持续性

常用命令

创建：create database
查看：show databases;
删除：drop database
创建表格：create table 表名( 字段名类型(长度) 约束, 字段名类型(长度) 约束 );
插入数据：insert into 表 (列名1,列名2,列名3..) values (值1,值2,值3..); -- 向表中插入某些列
更新数据：update 表名 set 字段名=值,字段名=值; update 表名 set 字段名=值,字段名=值 where 条件;
删除数据：

* A: 语法：delete from 表名 [where 条件];或者truncate table 表名;* B: 面试题：删除表中所有记录使用delete from 表名; 还是用truncate table 表名;删除方式：delete 一条一条删除，不清空auto_increment记录数。truncate 直接将表删除，重新建表，auto_increment将置为零，从新开始。

基本查询：select 字段1,字段2,...from 表名;
条件查询：select 字段 from 表名 where 条件;
distinct：用于去除重复记录，select distinct 字段 from 表名;
排序：

* SELECT * FROM 表名 ORDER BY 字段ASC;* ASC 升序 (默认)* DESC 降序

参考博客

可视化建表工具（不使用命令）

Navicat可视化工具
mysql

操作系统

ajax同步和异步区别：

Linux常用命令

cd … 返回上一级目录
cd …/… 返回上两级目录
cd /home 进入home目录
cd 进入个人主目录
cd - 返回上次所在目录
pwd 显示当前工作路径
ls 查看目录中的文件
ls -a 查看目录中包括隐藏文件
mkdir dir1 创建一个叫dir1的文件夹
rm -f file1 删除file1文件
rmdir dir1 删除dir1目录
rm -rf dir1 删除dir1目录并删除内容
mv 文件1 文件2 将文件1改名文件2
mv 文件目录将文件移动到目录
参考博客

Git命令

先把所有的修改文件添加到git仓库中

git add.
git commit -m

拉取远程同步更新，再ush

git pull
git push

克隆：git clone
创建并切换到新分支： git checkout -b dev 或者 git switch -c dev
查看分支：git branch git branch -r （远程分支）
合并指定分支：git merge
删除分支：git branch -d dev

共享内存的坏处

容易引入死锁
限制可扩展性
使得系统容易出错和调试困难
在关键区域崩溃的程序
程序在关键区域花费太多时间
锁得太多
分布式共享内存

死锁

概念: 指多个进程在运行过程中因争夺资源而造成的一种僵局，当进程处于这种僵持状态时，若无外力作用，它们都将无法再向前推进。

产生原因

资源不足
进程执行执行顺序不合理
资源分配不合理

四个必要条件

互斥条件：进程要求对所分配的资源进行排它性控制，即在一段时间内某资源仅为一进程所占用。
请求和保持条件：当进程因请求资源而阻塞时，对已获得的资源保持不放。
不剥夺条件：进程已获得的资源在未使用完之前，不能剥夺，只能在使用完时由自己释放。
环路等待条件：在发生死锁时，必然存在一个进程–资源的环形链。

进程和线程的概念和区别

进程，是并发执行的程序在执行过程中分配和管理资源的基本单位，是一个动态概念，竞争计算机系统资源的基本单位。

线程，是进程的一部分，一个没有线程的进程可以被看作是单线程的。线程有时又被称为轻权进程或轻量级进程，也是 CPU 调度的一个基本单位。

区别：

起源不同：先有进程先有线程，线程为了提高程序的速度
概念不同：进程是具有独立功能的一个程序运行的实例，也是系统分配和调度资源的单位，线程是CPU的基本调度单位
内存共享方式不同：
- 不同的进程都会被操作系统分配到一定的内存，但是不同进程之间的内存通常是不共享的（例如，浏览器无法访问音乐播放器的内容），进程间要访问内存要使用进程间通信（IPC）。
- 线程本身都服务于同一个进程，两个线程可以直接访问共享内存
拥有资源不同
数量不同
开销不同：
1）线程的创建，终止时间比进程短
2）同一进程内的线程切换时间比进程切换短
3）同一进程的各个线程间共享内存和文件资源，可以不通过内核进行通信