前端基础面试题

1、<img> 的title 和alt 有什么区别

alt属性和title属性相同点：

它们都会出现浮层，显示自己设置的图片相关的内容。

alt属性和title属性不同点：

alt属性:1.当图片加载不出来的时候，就会在图片未显示的地方出现一段alt设置的属性内容。这个属性的作用是为了给未加载的图片显示提示信息，即使在网络比较差的时候，用户也可以知道图片的内容，方便用户浏览网页。同时在程序员对网站维护的时候也能更快的查找到问题。2.浏览器的搜索引擎可以通过alt属性的文字描述来获取图片。

title属性：title属性可以用在任何的元素上，当用户把鼠标移动到元素上时，就会显示预先设置的title的内容，起到对图片说明的作用，实质上就是对图片的解释和备注。

如果图片设置了title属性和alt属性，鼠标悬停或者经过图片区域的时候，只会显示title属性设置的内容。

2、从浏览器地址栏输⼊url到显示⻚⾯的步骤

浏览器根据请求的URL 交给DNS 域名解析，找到真实IP ，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；

浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构

（如HTML 的DOM ）；

载⼊解析到的资源⽂件，渲染⻚⾯，完成。

3、HTTP状态码及其含义

1XX ：信息状态码

100 Continue 继续，⼀般在发送post 请求时，已发送了http header 之后服务端

将返回此信息，表示确认，之后发送具体参数信息

2XX ：成功状态码

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

204 ：无内容。服务器成功处理，但未返回内容

3XX ：重定向

301 Moved Permanently 请求的资源已被永久的移动到新URI。

302 Found 临时性重定向。请求的资源已被临时的移动到新URI

303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI 。

304 Not Modified ⾃从上次请求后，请求的⽹⻚未修改过。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源

4XX ：客户端错误

400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内

容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁⽌访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误

500 Internal Server Error 最常⻅的服务器端错误。

503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。

4、html5有哪些新特性、移除了那些元素？

HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加

绘画 canvas

⽤于媒介回放的 video 和 audio 元素

本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后⾃动删除

语意化更好的内容元素，⽐如article 、footer 、header 、nav 、section

表单控件， calendar 、date 、time 、email 、url 、search

新的技术webworker 、 websocket 、 Geolocation

移除的元素：

纯表现的元素： basefont 、big 、center 、font 、 s 、strike 、tt 、u

对可⽤性产⽣负⾯影响的元素： frame 、frameset 、noframes

⽀持HTML5 新标签：

IE8/IE7/IE6 ⽀持通过document.createElement ⽅法产⽣的标签

可以利⽤这⼀特性让这些浏览器⽀持HTML5 新标签

浏览器⽀持新标签后，还需要添加标签默认的样式

当然也可以直接使⽤成熟的框架、⽐如html5shim

5、请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？

cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常经过加密）

cook设置 domian 实现跨域（以及单点登录）----HTTPonly属性不暴露cookie

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回

传递

sessionStorage 和localStorage 不会⾃动把数据发给服务器，仅在本地保存

存储⼤⼩：

cookie 数据⼤⼩不能超过4k

sessionStorage 和localStorage 虽然也有存储⼤⼩的限制，但⽐cookie ⼤得多，可以达到5M或更⼤

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据

sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除

cookie 设置的cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

6、⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？⾏内元素和块级元素有什么区别？

⾏内元素有： a b span img input select strong

块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p

空元素： <br> <hr> <img> <input> <link> <meta>

⾏内元素不可以设置宽⾼，不独占⼀⾏

块级元素可以设置宽⾼，独占⼀⾏

7、Canvas和SVG有什么区别？

svg 绘制出来的每⼀个图形的元素都是独⽴的DOM 节点，能够⽅便的绑定事件或⽤来修改。canvas 输出的是⼀整幅画布

svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮

8、如何在⻚⾯上实现⼀个圆形的可点击区域？

svg

border-radius

纯js 实现需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等

9、浏览器的内核分别是什么

IE : trident 内核

Firefox ： gecko 内核

Safari : webkit 内核

Opera :以前是presto 内核， Opera 现已改⽤Google - Chrome 的Blink 内核

Chrome:Blink (基于webkit ，Google与Opera Software共同开发)

10、viewport

// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’

// device-width 设备宽度

// height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置

// initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数

// minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数

// maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数

// user-scalable 是否允许⼿动缩放

怎样处理移动端 1px 被渲染成 2px 问题

局部处理

mate 标签中的 viewport 属性， initial-scale 设置为 1

rem 按照设计稿标准⾛，外加利⽤transfrome 的scale(0.5) 缩⼩⼀倍即可；

全局处理

mate 标签中的 viewport 属性， initial-scale 设置为 0.5

rem 按照设计稿标准⾛即可

11、简述⼀下src与href的区别

src ⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。

src 是source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所

在位置；在请求src 资源时会将其指向的资源下载并应⽤到⽂档内，例如js 脚本，

img 图⽚和frame 等元素

资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素

也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底

部⽽不是头部

href 是Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚

点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加

件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤link ⽅

式来加载css ，⽽不是使⽤@import ⽅式

12、display: none; 与visibility: hidden; 的区别

display:none ;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；

visibility: hidden ;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可⻅

display: none ;是⾮继承属性，⼦孙节点消失由于元素从渲染树消失造成，通过修改⼦孙节点属性⽆法显示；visibility: hidden; 是继承属性，⼦孙节点消失由于继承了hidden ，通过设置visibility: visible; 可以让⼦孙节点显式

修改常规流中元素的display 通常会造成⽂档重排。修改visibility 属性只会造成本元素的重绘。

读屏器不会读取display: none ;元素内容；会读取visibility: hidden; 元素内容

13、link 与@import 的区别

1. link 是HTML ⽅式， @import 是CSS⽅式

2. link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现FOUC (⽂档样式

短暂失效)

3. link 可以通过rel="alternate stylesheet" 指定候选样式

4. 浏览器对link ⽀持早于@import ，可以使⽤@import 对⽼浏览器隐藏样式

5. @import 必须在样式规则之前，可以在css⽂件中引⽤其他⽂件

6. 总体来说： link 优于@import

14、清除浮动的⼏种⽅式，各⾃的优缺点

⽗级div 定义height

结尾处加空div 标签clear:both

⽗级div 定义伪类:after 和zoom（推荐）

⽗级div 定义overflow:hidden

⽗级div 也浮动，需要定义宽度

结尾处加br 标签clear:both

15、css3有哪些新特性

新增各种css 选择器

圆⻆ border-radius

多列布局

阴影和反射

⽂字特效text-shadow

线性渐变

旋转transform

16、CSS3新增伪类有那些？

p:first-of-type 选择属于其⽗元素的⾸个<p> 元素的每个<p> 元素。

p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个<p> 元素。

p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个 <p> 元素。

p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个 <p> 元素。

:after 在元素之前添加内容,也可以⽤来做清除浮动。

:before 在元素之后添加内容。

:enabled 已启⽤的表单元素。

:disabled 已禁⽤的表单元素。

:checked 单选框或复选框被选中。

17、CSS优先级算法如何计算？

!important 大于一切 > 内联 1000 > id 100 > class 10 > tag 1 ;

18、介绍⼀下标准的CSS的盒⼦模型？低版本IE的盒⼦模型有什么不同的？

有两种， IE 盒⼦模型、W3C 盒⼦模型；

盒模型：内容(content)、填充( padding )、边界( margin )、边框( border )；

区别： IE 的c ontent 部分把 border 和 padding 计算了进去;

19、如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？（阿⾥）

多数显示器默认频率是60Hz ，即1 秒刷新60 次，所以理论上最⼩间隔为 -- 1/60*1000ms ＝ 16.7ms

20、如何美化CheckBox

<label> 属性 for 和 id

隐藏原⽣的 <input>

:checked + <label>

21、rgba()和opacity的透明效果有什么不同？

rgba() 和opacity 都能实现透明效果，但最⼤的不同是opacity 作⽤于元素，以及元素内的所有内容的透明度，

⽽rgba() 只作⽤于元素的颜⾊或其背景⾊。（设置rgba 透明的元素的⼦元素不会继承透明效果！）

22、["1", "2", "3"].map(parseInt) 答案是多少

[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) ，其中radix 表示解析时⽤的基数。

map 传了 3 个(element, index, array) ，对应的 radix 不合法导致解析失败。

23、闭包

闭包就是能够读取其他函数内部变量的函数

闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量

好处：能够实现封装和缓存等，让变量有自己的作用域不污染全局

坏处：就是消耗内存、不正当使⽤会造成内存溢出的问题

使⽤闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹⻚的性能问题，在IE中可能导致内存泄露

解决⽅法是，在退出函数之前，将不使⽤的局部变量全部删除（变量为空）

24、介绍js的基本数据类型

Undefined 、Null 、Boolean 、Number 、String

25、如何使⽤CSS实现动画加速？

⼀般使⽤tranform:translate3D(x,y,z) 伪GPU加速

will-change 绝对GPU加速

26、前端性能优化

## react || vue

* 路由懒加载

* vue 组件异步加载

## 页面内容

1.减少HTTP

* 通过 webpack 合并JS CSS文件

* 使用 CSS Sprite 合并图片

* 使用 Base64 行内图片

* 用 icon 替换图标

2. 避免重定向

* URL末尾添加 / 例如 http://www.baidu.com/

3. 缓存Ajax请求

* 设置 Cache-Control (相对过期时间)

4. 减少页面元素数量

## Javascript

1. JS代码尽量放在页面底部, 避免阻塞页面加载

2. 使用外部的CSS 可以缓存CSS

3. webpack 压缩 js代码

## 图片

1. CSS Sprite 合并图片

2. Webp 图片

3. 不在HTML中缩放图片

4. 非 webp 图片都要压缩后再使用

5. 使用 Base64 内嵌图片

## CSS

1. react vue 可以实现css样式按需加载, 减少每次加载CSS的大小

2. 压缩CSS

3. 使用CSS3属性例如动画使用 transform transiton animtion

## 服务器

1. 使用 CDN(内容分发网络CDN是一组分散在不同地理位置的web服务器)

2. 添加 Cache-Control 缓存头

3. 启用 Gzip 压缩 (图片不要gzip压缩)

4. Ajax 尽可能使用 get方法, post方法会多一次请求

5. 避免 <img src="" /> 空图片标签

## 移动端

1. 保证所有组件都小于25K

27、防抖、节流

防抖（debounce）

所谓防抖就是指触发事件后在 n 秒内函数只能执行一次如果在 n 秒内又触发了事件则会重新计算函数执行时间。

节流

所谓节流，就是指连续触发事件，但是每隔 n 秒执行一次函数

lodash.debounce插件实现

需要设置最大过期时间

28、bind apply call 区别

相同：

1、都是用来改变函数的this对象的指向的。

2、第一个参数都是this要指向的对象。

3、都可以利用后续参数传参。

区别：

bind不会立即调用，其他两个会立即调用，apply与call的区别是apply第二个参数是数组，但是在确定的参数下，还是最好用call，call的效果会更高，但是在函数的延展性上使用apply更好

29、如何解决跨域

浏览器的同源策略指" 协议 + 域名 + 端⼝ "三者相同

1、通过jsonp跨域

2、node.js中间件代理跨域 webpack-dev-server

本地启用node服务器 -》node访问后台接口地址 -》请求这个node服务器，拿到数据

http-proxy-middleware包配置 proxy

3、后端设置请求头（CORS）

4、上线以后怎么解决跨域？

nginx 配置方向代理

server {

# 监听9099端口

listen 9099;

# 域名是localhost

server_name localhost;

location ^~ /api {

proxy_pass http://localhost:9871;

}

30、怎么判断一个对象的类型

Object.prototype.toString.call(对象)

31、JS原型、原型链

每个对象都会在其内部初始化⼀个属性，就是prototype (原型)，当我们访问⼀个对象的属性时

如果这个对象内部不存在这个属性，那么他就会去prototype ⾥找这个属性，这个prototype ⼜会有⾃⼰的prototype ，于是就这样⼀直找下去，也就是我们平时所说的原型链的概念

32、箭头函数

（1）箭头函数的this是在定义的时候就固定不变了

（2）箭头函数没有自己的this

（3）箭头函数不能当类(构造器)使用不可以 new

（4）箭头函数没有 arguments

（5）箭头函数没有原型属性

33、深浅拷⻉

（1）浅拷⻉

Object.assign

Object.create

或者展开运算符 ... obj

（2）深拷⻉

一、可以通过 JSON.parse(JSON.stringify(object)) 来解决

JSON.parse(JSON.stringify(object)) 是有局限性的

1、会忽略 undefined

2、不能序列化函数

3、不能解决循环引⽤的对象

二、普通递归函数

将要拷贝的数据 obj 以参数的形式传参

声明一个变量来储存我们拷贝出来的内容

判断 obj 是否是引用类型数据，如果不是，则直接赋值即可（可以利用 obj instanceof Type 来进行判断），

由于用 instanceof 判断array 是否是object的时候，返回值为true, 所以我们在判断的时候，直接判断obj 是否是Array 就可避免这个问题

根据判断的不同类型，再给之前的变量赋予不同的类型： [ ] : { }

循环obj 中的每一项，如果里面还有复杂数据类型，则直接利用递归再次调用copy函数

最后将这个变量 return 出来即可

三、 _.cloneDeep() 深拷贝 （lodash）

34、数组去重⽅法总结

1、利⽤ES6 Set去重（ES6中最常⽤）

2、利⽤for嵌套for，然后splice去重（ES5中最常⽤）

3、利⽤indexOf去重

新建⼀个空的结果数组， for 循环原数组，判断结果数组是否存在当前元

素，如果有相同的值则跳过，不相同则push 进数组

4、利⽤sort()

利⽤sort() 排序⽅法，然后根据排序后的结果进⾏遍历及相邻元素⽐对

5、利⽤对象的属性不能相同的特点进⾏去重

6、利⽤includes

includes 检测数组是否有某个值

7、利⽤hasOwnProperty

利⽤hasOwnProperty 判断是否存在对象属性

8、利⽤filter

当前元素，在原始数组中的第⼀个索引==当前索引值，否则返回当前元素

9、利⽤递归去重

10、利⽤Map数据结构去重

创建⼀个空Map 数据结构，遍历需要去重的数组，把数组的每⼀个元素作为

key 存到Map 中。由于Map 中不会出现相同的key 值，所以最终得到的就

是去重后的结果

11、[...new Set(arr)]

相对于第⼀种⽅法来说只是简化了代码

35、JS中in 、isPrototypeOf 和hasOwnProperty 的区别

1、isPrototypeOf

isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中，是则返回true，否则返回false。

2、hasOwnProperty

hasOwnProperty则是判断对象实例的是否具有某个属性

3、in

in判断的是对象的所有属性，包括对象实例及其原型的属性

36、事件代理

1、事件代理（ Event Delegation ），⼜称之为事件委托。是 JavaScript 中常⽤绑定事

件的常⽤技巧

2、“事件代理”即是把原本需要绑定的事件委托给⽗元素，让⽗元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使⽤事件代理的好处是可以提⾼性能，⼤量节省内存占⽤，减少事件注册

37、浏览器缓存

浏览器缓存分为强缓存和协商缓存

1、先根据这个资源的⼀些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；

2、当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另⼀些request header验证这个资源是否命中协商缓存，称为http 再验证，如果命中，服务器将请求返回，但不返回资源，⽽是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；

3、强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源；区别是，强缓存不对发送请求到服务器，但协商缓存会。

4、当协商缓存也没命中时，服务器就会将资源发送回客户端。

5、当 ctrl+f5 强制刷新⽹⻚时，直接从服务器加载，跳过强缓存和协商缓存；

6、当 f5 刷新⽹⻚时，跳过强缓存，但是会检查协商缓存；

38、宏任务 setTimeout setInterval 微任务 Promise

js引擎在⼀次事件循环中，会先执⾏js线程的主任务，然后会去查找是否有微任务

microtask（promise），如果有那就优先执⾏微任务，如果没有，在去查找

宏任务macrotask（setTimeout、setInterval）进⾏执⾏

39、React 中的 Key 值

1.为什么要有key值

相同的key不会重新渲染

key是一个字符串，用来唯一标识同父同层级的兄弟元素。当React作diff时，只要子元素有key属性，便会去原v-dom树中相应位置（当前横向比较的层级）寻找是否有同key元素，比较它们是否完全相同，若是则复用该元素，免去不必要的操作。

但是强烈不推荐用数组index来作为key。如果数据更新仅仅是数组重新排序或在其中间位置插入新元素，那么视图元素都将重新渲染

40、Vue中 v-if 与 v-show 区别

v-if 控制元素显示隐藏当条件不成立时不加载dom结构

v-else 配合v-if使用

v-show 控制元素显示隐藏当条件不成立时加载dom结构通过css display：none 实现显示隐藏

41、vue中 $router 和 $route 的区别

1、router是VueRouter的一个对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性，如 router.push方法，路由跳转，传递参数等。

2、route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等可以拿里边的值来做各种判断。

42、Vue组件中的data为什么必须是一个函数

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。

不适用 vue 里的变量就是公用

43、前台路由和后台路由的区别

前台路由：跳转页面，不请求服务器

后台路由：接口访问地址，请求服务器

44、ES6 模块与 CommonJS 模块的差异

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

45、XSS

XSS的含义：跨站脚本攻击, 故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

CSRF 全称cross-site request forgery，名为跨站请求伪造

顾名思义就是黑客伪装成用户身份来执行一些非用户自愿的恶意以及非法操作

(1)CSRF相对于XSS漏洞的危害程度更高一些。

(2)XSS有局限性，而CSRF则不。

(3)CSRF相当于是XSS的基础版，CSRF能做到的XSS都可以做到。

(4)XSS主要指向客户端，而CSRF针对服务端。

(5)XSS是利用合法用户获取其信息，而CSRF是伪造成合法用户发起请求。

预防措施：

1、验证码

2、tokenId令牌

3、判断请求的Referer是否正确

46、做项目流程

* 项目流程

1. 需求评审: 前端后台测试 UI 产品评审需求是否合理砍掉不合理需求和

实现难度大的需求

2. UI出效果图

3. 前后端开始同时开发: 前端封装组件和页面

// mock 工具阿里RAP

// /abc/ddd { name: '小花', age: 22 }

// /mock/abc/ddd { name: 小白, age: 2 }

4. 前端调用mock数据接口(后台)做静态页面后台开发接口

5. 测试

1) 测试环境测试分支 dev

2) dev 完全没问题代码合并到master分组发布上线 master 分支

上线都是上 master

6. 上线以后回归测试有bug 改

47、diff 算法

高效的diff算法能够保证进行对实际的DOM进行最小的变动

但是标准的的 Diff 算法复杂度需要 O(n^3)

这显然无法满足性能要求要达到每次界面都可以整体刷新界面的目的

势必需要对算法进行优化

React里结合 Web 界面的特点做出了两个简单的假设

使得 Diff 算法复杂度直接降低到 O(n)

1. 两个相同组件产生类似的 DOM 结构不同的组件产生不同的 DOM 结构

2. 对于同一层次的一组子节点它们可以通过唯一的 id 进行区分

不同节点类型的比较

为了在树之间进行比较我们首先要能够比较两个节点在 React 中即比较两个虚拟 DOM 节点

当两个节点不同时应该如何处理这分为两种情况

1. 节点类型不同

2. 节点类型相同但是属性不同

节点类型不同直接删除原节点插入新节点。

48、虚拟 DOM

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示

UI 的表示形式保存在内存中并与实际的 DOM 同步

这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤整个过程被称为调和

49、 event loop 事件循环机制（宏任务、微任务）

1. 先执行同步任务

2. 微任务调用栈 promise [resolve(1), resolve(2), resolve(3)]

3. 宏任务(macrotask): setTimeout setInterval I/O(异步操作) DOM渲染

50、三次握手四次挥手

* 三次握手

第一次握手：客户端给服务器发送一个 SYN 报文。

第二次握手：服务器收到 SYN 报文之后，会应答一个 SYN+ACK 报文。

第三次握手：客户端收到 SYN+ACK 报文之后，会回应一个 ACK 报文。

服务器收到 ACK 报文之后，三次握手建立完成。

* 四次挥手

第一次挥手：客户端发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。

第二次握手：服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 +1 作为 ACK 报文的序列号值，表明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT 状态。

第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。

第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态

服务端收到 ACK 报文之后，就处于关闭连接了，处于 CLOSED 状态。

51、B C

B: Business 企业商家

C: Customer 个人客户

B2B和C2C都在第三方平台 B2C则在自身运营平台

B2B: 企业与企业阿里巴巴

B2C: 商家对个人卓越当当京东

C2C: 个人对个人的淘宝的小店铺

52、PV UV

PV:：统计页面节点的点击量

实现:

1. 创建一个 img

2. img.src = '1.gif?name=abc'

使用: 点击百度按钮加pv name="abc"

1. pv.js <script src="pv.js"> sendPv

2. sendPv({ name: "abc" })

1. pv格式: xxx.gif?xueshu=xueshu&xxxx=xxxxx (git图不需要我们管)

2. 调用: pv的js已经写好了 sendPv({ xueshu: 'xueshu', xxxx: 'xxxx' })

3. 事件回调里调用 sendPv({ xueshu: 'xueshu', xxxx: 'xxxx' })

4. pv的参数都是PM定好的

UV：统计访问某站点的用户数

53、 MVVM 是 Model-View-ViewModel 的缩写

Model 代表数据模型也可以在 Model 中定义数据修改和操作的业务逻辑

View 代表 UI 组件它负责将数据模型转化成 UI 展现出来

ViewModel 监听模型数据的改变和控制视图⾏为处理⽤户交互简单理解就是⼀个同步View 和 Model 的对象,连接 Model 和 View

在 MVVM 架构下 View 和 Model 之间并没有直接的联系⽽是通过ViewModel 进⾏交互,

Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会自动同步到Model中,

⽽Model 数据的变化也会⽴即反应到 View 上

54、浏览器对 html 渲染过程

1. 解析html和构建dom树

同步进行的，这个过程就是逐行解析代码，包括html标签和js动态生成的标签，最终生成dom树。

2. 构建呈现树，就是把css文件和style标签的中的内容结合dom树的模型，构建一个呈现树

写到内存，等待进一步生成界面。呈现树一定依赖dom树，呈现节点一定会有对应的dom节点，但是dom节点不一定会有对应的呈现节点，比如，被隐藏的一个div。

3. 布局，这一步就是结合呈现树，把dom节点的大小、位置计算出来。虽然呈现节点已经附着在都没节点上，会有对元素大小、位置的定义，但是浏览器还需要根据实际窗口大小进行计算，比如对auto的处理。

4. 绘制，把css中有关颜色的设置，背景、字体颜色等呈现出来。

55、fetch和ajax 的主要区别

1. fetch()返回的promise将不会拒绝http的错误状态即使响应是一个HTTP 404或者500

2. 在默认情况下 fetch不会接受或者发送cookies

56、react 渲染机制:

React整个的渲染机制就是在state/props发生改变的时候重新渲染所有的节点构造出新的虚拟Dom 通过Diff算法进行比较得到需要更新的地方在批量造作在真实的Dom上，由于这样做就减少了对Dom的频繁操作从而提升的性能

57、Vue实现数据双向绑定的原理:

vue 实现数据双向绑定主要是: 采⽤数据劫持结合发布订阅模式·的⽅式

通过 Object.defineProperty() 来劫持各个属性的 setter, getter 在数据变动时发布消息给订阅者,触发相应监听回调. 整合 Observer, Compile和

Watcher 三者, 通过 Observer 来监听⾃⼰的 model 的数据变化，通过 Compile 来解析编译模板指令(vue 中是⽤来解析 {{}})最终利⽤ watcher 搭起 observer 和

Compile 之间的通信桥梁, 达到数据变化 —> 视图更新; 视图交互变化 input —>

数据 model 变更双向绑定效果

58、vue 和 react 区别

vue 上手简单 react 复杂一些

vue 的逻辑大部分写在 <template>, react 写在 js

vue2 Object.defineProperty() + 观察者模式实现双向绑定

react diff算法

vue 插件库比较少 , react 丰富的插件库

59、调用setState 发生一些什么(异步)

在代码调用setState之后，React会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程。经过调和过程React会构建新的React元素树然后会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化的渲染。React能够精确地知道哪些位置发生了改变，这就保证了按需更新，而不是重新渲染。

setstate是异步的，但是在ajax里是同步的

* react 事件生命周期修改 setState 异步 batchedUpdates = true // 异步

* setTimeout setInterval 非react事件（原生事件） ajax 都是同步的

* setState 有这个 isBatchingUpdates = false // 默认同步

有一个 batchedUpdates 方法如果是react的事件生命周期修改 setState 会把 isBatchingUpdates = true 否则就是 false

60、链表:

* 单向链表: 单向链表包含两个域一个是信息域一个是指针域

* 双向链表: 每个节点有2个链接一个是指向前一个节点另一个则指向后一个节点

* 循环链表: 循环链表就是首节点和末节点被连接在一起

循环链表中第一个节点之前就是最后一个节点

* 数组和链表的区别:

* 链表是链式的存储结构数组是顺序的存储结构

* 链表通过指针来连接元素数组则是把所有元素按次序依次存储

* 链表的插入删除元素相对数组较为简单但是寻找某个元素较为困难

* 数组寻找某个元素较为简单但插入与删除比较复杂

61、computed 和 watch 的区别

computed 对于其中变量的依赖是多个的，它的函数中使用了多个 this.xxx ,只要其中一个发生了变化，都会触发这个函数。而 watch 的依赖则是单个的，它每次只可以对一个变量进行监控。

62、position有哪些值

1、static：默认值；

2、绝对定位：absolute

3、相对定位：relative

4、固定定位：fixed

5、粘性布局 sticky

63、DOM2 事件的三个阶段

（1）捕获阶段：从外往里 document -》 html -》body -》div

（2）目标阶段：找是哪个节点注册的事件

（3）冒泡阶段：从里往外 div（注册事件的节点）-》body -》html -》document

true ：捕获阶段

false : 冒泡阶段

64、Redux 三大基本原则:

1. store 单一数据源

2. state 在页面里是只读的触发action -> 修改state

3. state 只能在reduce里改并且reduce 必须是纯函数

65、react 中没有共同父组件的兄弟组件之间的传参

pubsub-js

使用发布订阅的方式

PubSub.subscribe(’MY TOPIC’, mySubscriber) 订阅

PubSub.publish(’MY TOPIC’, ‘hello world!’) 发布

66、标准盒模型和怪异盒模型

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

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

67、重绘、重排指的是什么？

重绘（repaint或redraw）：

重绘是指当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知render 重新描绘相应的元素, 此过程称为重绘。

重排（重构）：

重排是指某些元素变化涉及元素布局 (如width), 浏览器则抛弃原有属性, 重新计算，此过程称为重排。（重排一定会重绘，重绘不一定重排）

68、react 16.8 新特性

1）、PureComponent

2）、hook

3）、lazy (异步加载组件)

69、检测数据类型

1）、typeof方法用于检测bai简单的数du据类型如zhitypeof 12

2）、instanceof的实例方法检测如[] instanceof Array // true

3）、精确判断数据类型Object.prototype.toString.call(arr)

70、react 事件机制

React组件上声明的事件没有绑定在React组件对应的原生DOM节点上，而是绑定在document节点上，触发的事件是对原生事件的包装。

71、数组扁平化

1）、用 reduce 实现数组的 flat 方法

function flatten(ary) {

return ary.reduce((pre, cur) => {

return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);

})

}

let ary = [1, 2, [3, 4], [5, [6, 7]]]

console.log(ary.MyFlat(Infinity))

2）、flat数组扁平化

默认二维数组扁平化

console.log(arr.flat() ) // [1,2,[3,4] ]

Infinity 多维数组扁平化

console.log(arr.flat(Infinity) ) // [1,2,3,4]

72、RESTful api

1. RESTful api接口规范 (RESTful api)

2. 比如传统的增删改查 4个接口, RESTful的增删改查一个接口 /update/data

post get put delete

post(/update/data, 参数) 增加

get(/update/data, 参数) 查询

put(/update/data, 参数) 修改

delete(/update/data, 参数) 删除

73、async 原理

async === generator + 自动执行器

74、state 和 props 的区别

props 父组件传的值 props不可改

state 是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态

75、redux的常用中间件

redux-thunk 让action以函数的方式写

原理：

首先 redux-thunk 封装了一些公共方法这些方法里有一个 createThunkMiddleware 接收一个参数 extraArgument, 里面返回一个匿名函数这个匿名函数接收一个 _ref参数这个_ref 是一个对象里面有2个属性 { dispatch, getState }, createThunkMiddleware 这个函数返回了一个匿名函数这个匿名函数接收了 next 参数 next也是一个函数这个匿名函数里面又返回了一个匿名函数这个匿名函数接收一个 action 参数这个action就是我们传入的 action 在这个匿名函数里如果 action 是函数调用这个函数传入 dispatch, getState, extraArgument 如果 action 不是函数调用next 传入 action参数触发下一次 action

redux-promise 让action的payload是异步的方式