面试前端所问的一些问题

Computed 和 watch的区别

Computed是计算属性，实时返回一个所需要的值，有缓存设置

Watch是监听，比computed少了一个缓存的机制

 

v-if 和v-else v-show v-else-if

如果if的结果是false的话，v-if是组件不会被渲染出来，而v-show是整个组件都会被渲染出来，用css把它藏起来。

首次渲染性能比较重要的话，选择v-if。频繁切换的使用，就用v-show，v-show的dom节点不会被消耗

v-if 和v-else ，v-if是一个三元表达式  isShow？（v-if）：（v-else）

v-else-if 是嵌套的三元表达式，原理与v-if和v-else是一致的

 

vue如何监听数组的变化

通过拦截数组的方法，中间拦截一层去通知，例如调用watch来实现

 

Vue的生命周期

BeforCreate          组件实例被创建之初，组件的属性生效之前

Created                组件实例已经完成创建，属性绑定，但真实dom还没生成，$el还不可用

beforeMount        在挂载开始之前被调用，相关的render函数首次被调用

mounted              el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子

beforeUpdate        组件数据更新之前调用，发生在虚拟dom打补丁之前

update                  组件数据更新之后

activated               keep-alive专属，组件被激活时调用

deadctivated         keep-alive专属，组件被销毁时调用

beforeDestory       组件销毁前调用

destroyed             组件销毁后调用

 

v-model原理

v-bind vlaue和v-on input的一个合并

 

vue中的虚拟dom

就是使用JS对象来描述一个真实的dom结构。在任何操作dom之前，先做数据的对比，然后根据数据之间的对比和结果最小化的去操作dom。由于浏览器里面的dom属性过于多，所以任何操作dom的行为都是性能的杀手。

通常在组件内部使用虚拟dom，在组价外部则是使用响应式

 

如何解决跨域问题

1. 通过jsonp跨域，网页通过script标签，向服务器请求json数据。但jsonp只支持get请求，及需要后端配合返回指定格式的数据
2. Websocket协议跨域，是html5的一种新协议，实现了浏览器和服务器的全双工通信，同时允许跨域通信
3. 跨域资源共享cors，在被请求的服务端响应的时候添加一个Access-Control-Allow-Origin的响应头。

 

对于MVVM的理解

MVVM就是Model-view-viewmodel，将其中的View的状态和行为抽象化，让视图UI和业务逻辑分开。可以做到，低耦合，可重用性，独立开发，可测试。

 

ES5和ES6的区别，写出3个常用的ES6的属性

ES6新增了let声明变量和const声明常量。函数定义不再使用function()，而是利用了()=>来定义。添加了内置模块功能，具有精简的语法，支持异步加载和可配置的模块加载。可以使用proxies来监听对象的操作。

 

减低页面加载时间的方法

优化图片，改变图像格式的选择，优化CSS，减少http请求，标明高度和宽度，添加本地存储，图片懒加载

 

打包工具

打包工具前端代码进行转换，压缩以及合并等操作的程序工具。目前主流的有Webpack，能够把多个js文件合并压缩成一个js文件，来减少代码体积以及网络请求，方便在服务器上运行。

 

Vue打包优化的方法

路由懒加载，把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

不打包第三方库

 

App.vue是什么

App.vue是Vue的主组件，所有页面能够在App.vue下进行切换。可以认为，所有的路由都是App.vue的组件。

 

Html5新增了那些特性

增加了header,footer,nav,aside,section等语义化标签

新的input类型，color,date,time,email,url,search

画布功能canvas,拖放，多线程web worker和websocket协议

地址位置，可以返回网页访问者的地理位置

增强表单功能，min和max属性，form属性，required属性，height和width属性

提供了sessionStorage，localStorage和离线存储

多加了多媒体播放功能，新增了video和audio属性。

提供了强大的语音搜索功能属性

 

Css3新特性

圆角特性，border-radious

边框特性,border-shawdow

2D翻转，translate,retate

3D翻转，rotateX,rotate

 

Typeof返回类型

Undefined,string,number,Boolean,object,function

 

数组和字符串的原生函数

数组：push()插入数组末尾，返回数组长度。Unshift()插入数组开头，返回数组长度。Pop()删除数组末尾，返回删除项。Shift()删除数组开头，返回删除项。Reverse()翻转数组。Indexof()位置方法。Concat()合并数组。Slice()截取数组片段。Splice()删除截取片段。join()将所有元素合并连接在一起。sort()排序数组。forEach()从头遍历数组

字符串：charAt()返回指定位置字符。indexof()返回某个字符值在字符串首次出现的位置。Concat()合并字符串，slice()提取字符串片段，replace()查找到匹配的字符串并替换掉。Split()将字符串转换成数组。

 

promise的理解

Promise，异步编程。避免回调地狱的问题。Promise对象提供简介的API，使得控制异步操作更加容易。

promise是一个对象，保存着未来将要结束的事件。对象状态不受外部影响，存在三种状态，pending进行中，resolved已完成，rejected已失败

 

var,let,const的区别

var声明变量属于全局作用域和函数作用域，let和const声明变量属于全局作用域和块级作用域

var存在变量提升现象，而let和const没有此现象

var变量可以重复声明，而在同一个块级作用域，let变量不能重新声明，const变量赋值后不能修改

 

vue数据修改但页面没有刷新

1、watch监听到数据的变化，但页面没有刷新，需要对页面进行强制渲染

2、没有监听到数据的变化，需要使用splice(),push()等js方法来触发监听事件
 

http和https的区别

http是超文本传输协议，互联网上应用最为广泛的一种网络协议。https是以安全为目标的HTTP通道，建立一个信息安全通道，确保数组的传输，确保网站的真实性。https的安全性更加高，确保数据的完整性，但其加载时间及耗电都较高。

 

TCP和UDP的区别

TCP是面向连接的，其连接传送的数据无差错、不丢失、不重复且按序到达，适合大数据量的交换，面向字节流，1对1的传输数据，首部最大为20字节。

UDP在发送数据前不需要先建立连接，传输时只尽最大努力交付，不保证可靠交付，面向报文，网络出现拥塞时不会使得发送速率低，传输时支持1对1与1对多，首部大小为8字节，

 

websocket的实现与应用

websocket是html5的协议，支持持久连续。借用了http协议来完成一部分握手。

 

http请求方式，head方式

head:类似于get请求，服务器响应是不会反回消息体，一个head请求的响应中，http头中包含的元信息应该和一个get请求的响应消息相同，可以用来获取请求中隐含的元信息，而不用传输实体本实施，也可以用来测试超链接的有效性和可用性

head请求的特性：只请求资源的首部；检查超连接点有效性；检查网页是否被修改；用于自动搜索机器人获取网页的标志信息；获取rss种子信息；传递安全认证信息

一个图片url访问后直接下载怎么实现？

请求的返回头里面，用于浏览器解析的重要参数就是OSS的API文档里面的返回http头，决定用户下载行为的参数

 

说明一下web quality（无障碍）

能够被残障人士使用的易用（易访问的）网站，使用alt属性，适用于不支持图形显示的迷你浏览器，语音浏览器。

 

几个使用的bom属性对象方法

location.href        //返回或设置当前文档的URL
location.search      //返回URL中的查询字符串部分
location.hash        //返回URL#后面的内容，如果没有#，发返回空
location.host        //返回URL中的域名部分
location.hostname    //返回URL中的主域名部分
location.pathname    //返回URL的域名后的部分
location.replace()   //设置当前文档的URL，并且在history对象的地址列表中移除这个URL
location.reload()    //重载当前页面
location.port        //返回URL中的端口部分
history.go()         //前进或后退指定的页面数
history.back()       //后退一页
history.forward()    //前进一页
navigator.userAgent  //返回用户代理头的字符串表示
navigator.cookieEnabled//返回浏览器是否支持cookie

 

说一下HTML5 drag api

dragstart:事件主体是被拖放元素，在开始拖放被拖放元素时触发
drag:事件主体是被拖放元素，在正在拖放被拖放元素时触发
dragenter:事件主体是目标元素，在被拖放元素进入某元素时触发
dragover:事件主体是目标元素，在被拖放在某元素内移动时触发
dragleave:事件主体是目标元素，在被拖放元素移除目标元素时触发            
drop:事件主体是目标元素，在目标元素完全接受被拖放元素时触发
dragend:事件主体是被拖放元素，在整个拖放操作结束时触发

 

介绍状态码

200：请求成功，一般用于GET与POST请求
201：已创建，成功请求并创建了新的资源
202：已接受，已经接受请求，但未处理完成
203：非授权信息，请求成功，返回的信息不在原始服务器
204：无内容，服务器成功处理，但未返回内容
205：重置内容
206：部分内容，服务器成功处理了部分GET请求
300：多种选择
301：永久移动
302：临时移动
303：查看其它地址
304：未修改
305：使用代理
306：已被废弃
400：请求无效，前端提交数据的字段名称和字段类型与后台的实体没有保持一致
401：当前请求需要用户验证
403：服务器已经得到请求，但拒绝执行
404：服务器无法找到资源
405：客户端请求中的方法被禁止
500：服务器内部错误，无法完成请求
501：服务器不支持请求的功能
502：接收到了一个无效的响应
503：由于超载或系统维护，服务器暂时无法处理客户端的请求
504：未及时从远端服务器获取请求
505：服务器不支持请求该HTTP协议版本

 

 

fetch发送2次请求的原因

fetch第一次发送了一个options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

 

cookie、sessionStorage、localStorage的区别

都是保存在浏览器端，并且同源

cookie：可以在浏览器和服务器端来回传递，存储容量小，只有大约4k左右

sessionStorage：仅在当前浏览器窗口关闭前有效，关闭浏览器后消失，session为一个回话。

localStorage：同源窗口会共享，并且不会失效，关闭后再次打开浏览器依旧有效

 

web worker

运行在后台的js，独立于其他脚本，不会影响到页面的性能，并且通过postMessage将结果回传到主线程。

 

对HTML语义化标签的理解

正确的标签包含了正确的内容，结构良好，便于阅读。

 

iframe是什么

iframe元素会创建包含另一个文档的内联框架，即在自己的网页中加载别人网页的内容。但会阻塞主页面的onload事件，搜索引擎无法解读这种页面，不利于SEO，iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

 

Doctype作用，严格模式与混杂模式如何区分，它们有什么意义

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，有严格模式与混杂模式。

严格模式的排版与JS运作模式是以该浏览器支持的最高标准运行；混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

 

cookie和session的区别

cookie数据存放在客户的浏览器上，安全性不高，单个cookie保存数据不超过4k，一个站点最多保存20个cookie

session数据存放在服务器上，安全性相对较高，当访问增多时，会占用服务器性能。

 

概述RESTFUL，就是用URL定位资源，用HTTP描述操作

 

click在IOS上有300ms延迟，原因及如何解决

1、禁用缩放;2、利用FastClick，检测到touchend事件后，立刻发出模拟click事件，并且把浏览器300ms之后真正发出的事件阻断

 

addEventListent参数

addEventListent(event, function, useCapture)，事件监听函数

event：事件名，function：指定事件触发时执行的函数，useCapture：指定事件是否在捕获或冒泡阶段执行

 

get和post的区别

get参数通过url传递，传递过程中有长度限制，安全性不高，参数直接暴露在url中，不适于传递敏感信息，只能进行url编码，请求参数会被完整保留在浏览历史记录里，产生一个tcp数据包

post放在request body中，支持多种编码方式，产生两个tcp数据包

post(url, parameter, callback)    //url资源地址，parameter传递的参数对象，callback调用的函数

 

http支持的方法

get,post,head,options,put,delete,trace,connect

 

浏览器缓存

缓存分为强缓存和协商缓存，

强缓存相关字段有expirese,cache-control。如果两个字段同时存在，cache-control的优先级高于expires

协商缓存相关字段有Last-Modified/If-Modified-Since,Etag/If-None-Match

 

在地址栏里输入URL，到整个页面呈现出来，中间会发生什么

1、DNS解析。2、TCP连接。3、发送HTTP请求。4、服务器处理请求并返回HTTP报文。5、浏览器解析渲染画面。6、连接结束

 

前端如何封装一个组件

js封装：1、定义一个类；2、类中增加一个方法；3、body中定义一个dom节点；4、把dom节点和类定义结合起来，实现特定的功能

vue封装：1、建立组件模板；2、用import引入组件；3、通过component定义组件名称；4、把组件以标签的形式写出来

react封装：1、创建一个react文件，搭建模板；2、用export把组件导出来；3、用import把组件导入

 

eval是做什么的

eval()函数，可以接受一个字符串的参数，并把这个参数解析成js并作为脚本代码执行

 

常见的HTTP头部

通用头部表示一些通用信息，比如data表示报文创建时间

请求首部就是请求报文中独有的，如cookie和缓存相关的if-Modified-Since

响应首部就是响应报文中独有的，如set-cookie和重定向相关的location

实体首部用来描述实体部分，如allow用来描述可执行的请求方法，content-type描述主体类型，content-Encoding描述主体的编码方式

 

HTTP2.0特性

内容安全，http2.0基于https，天然具有安全特性，且避免单纯使用https的性能下降

二进制格式，http2.0将所有的传输信息分割为高效的消息和帧，并对他们采用二进制格式编码，让协议有更多的扩展性

多路复用，接收方可以根据request的id将request再归属到各自不同的服务端请求里面，另外多路复用中也支持流的优先级，允许客户端告诉服务器那些内容是更优先级的资源，可以优先传输

 

cacha-control的值有哪些

cache-control是一个通用消息头字段被用于HTTP请求和响应中，通过指定指令来实现缓存机制，这个缓存指令是单向的，常见的取值有private、no-cacha、max-age、must-revalidate等，默认值为private

 

浏览器在生成页面的时候，会生成哪两棵树

DOM树和CSSOM规则树，当浏览器接收到服务器相应来的HTML文档后，会遍历文档节点，生成DOM树。CSSOM规则树由浏览器解析CSS文件生成

 

csrf和xss的网络攻击及防范

csrf:跨站请求伪造，攻击者盗用了用户的身份，以用户的名义发送了恶意请求。防范方法:使用验证码，检查https头部的refer，使用token

xss:跨站脚本攻击，攻击者通过注入恶意脚本，在用户浏览网页的时候进行攻击，比如获取cookie或者其他用户身份信息。防范方法:cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤。

 

怎么看网站的性能如何

检测页面加载的事件，可以通过两种方式进行监测，一种是被动监测:在被监测的页面置入脚本或者探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析，另一种主动监测方式，即主动搭建分布式受控环境，模拟用户发起页面访问请求，主动采集性能数据并分析，在监测的精准度上，专业的第三方工具效果更佳。

 

介绍HTTP协议(特征)

http是一个基于TCP/IP通信协议来传递数据，属于应用层的面向对象协议。由于其简洁、快速的方式，适用于分布式超媒体信息系统。http协议工作于客户端-服务端架构为上，浏览器作为http客户端通过url向web服务端发送所有请求。web服务端根据接收到的请求后，向客户端发送响应信息。

 

cookie有哪些字段可以设置

name字段--一个cookie的名称
value字段--一个cookie的值
domain字段--可以访问此cookie的域名
path字段--访问此cookie的页面路径
size字段--设置cookie大小
http字段--设置cookie的httponly属性

 

web性能优化

降低请求量：合并资源，减少HTTP请求

加快请求速度：预解析DNS，减少域名数，并行加载，CDN分发

缓存：HTTP协议缓存请求，离线缓存mainfest，离线数据缓存localStorage

渲染：JS/CSS优化，加载顺序，服务端渲染

 

css盒模型

css盒子包括IE盒子和标准的W3C盒子模型，两者的区别在于标准盒子模型的宽度是border+padding+content，而IE盒子的宽度则是content部分的宽度

 

link标签和import标签的区别

link属于html标签，而@import是css提供的

页面被加载时，link会同时被加载出来，而@import引用的css会等到页面加载结束后才加载

link是html标签，没有兼容性，而@import只有IE5以上才能识别，link方式样式的权重高于@import 

 

transition和animation的区别

animation和transition都是随时间改变元素的属性值，主要区别在于transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值。

 

BFC

块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。BFC区域不会与float重叠，BFC是页面上的一个独立容器，子元素不会影响到外面。

 

垂直居中的方法

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

(2).box{
    display:flex;
    text-align:center;
}
.box span{
    margin:auto
}
(3).span{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    text-align:center;
}

 

关于js动画和css3动画的差异性

js动画的功能涵盖面更大。css动画的重构难度更低，性能跳优方向固定，对帧数表现不好的低版本浏览器，css可以做到自然降级，兼容性更大。

 

说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度

行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效

 

visibility=hidden,opacity=0,display:none的区别二

opacity=0，该元素隐藏起来，但不会改变页面布局，并且如果元素已经绑定一些事件，那么点击该区域，也会触发点击事件

visibility=hidden，该元素隐藏起来，但不会改变页面布局，但不会触发该元素已经绑定的事件

display:none，把元素隐藏起来，并且会改变页面布局，可以理解为页面中把元素删除掉一样

 

position属性比较

固定定位fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。fixed定位使元素位置与文档流无关，因此不会占用空间

相对定位relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此移动元素会导致它覆盖其他框

绝对定位absolute：绝对定位的元素位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute定位使元素的位置与文档流无关，因此不占据空间

默认定位static：默认值，没有定位，元素出现在正常的流中

粘性定位sticky：元素先按照普通文档流定位，然后相对于该元素在流中的flow root和containing block定位，然后，元素定位表现为在跨越特定阙值前为相对定位，之后为固定定位

 

浮动清除

(1)使用带clear属性的空元素<div class="clear"></div>，并在css中赋予.clear{clear:both}

(2)使用css的overflow属性，给容器添加overflow:hidden或overflow:auto清除浮动

(3)使用css的:after伪元素

 

css选择器有哪些，优先级如何

id选择器，class选择器，标签选择器，伪元素选择器，伪类选择器

同一元素引用了多个样式时，排在后面呢的样式属性优先级高

样式选择器的类型不同，优先级顺序为：内联选择器>id选择器>class选择器>标签选择器

                                           权值比例为：    1000           100           10                   1

 

css动画如何实现

创建动画序列，使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes规则实现。transition也可以实现动画，transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种发生改变时才能获取样式。

 

css3中对溢出的处理

text-overflow属性，值为clip是修剪文本；ellpsis为显示省略符号来表示被修建的文本；string为使用给定的字符串来代表被修剪的文本

 

calc属性

calc用户动态计算长度值，任何长度值都可以使用calc()函数计算，需要注意的时，运算符前后都需要保留一个空格

 

display:table和本身的table有什么区别

display:table和本身的table时相对应的，区别在于,display:table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，使我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。

 

z-index的定位方法

z-index属性设置元素的堆叠顺序，拥有更好堆叠额顺序的元素会处于较低顺序元素之前，z-index可以为负，且z-index只能在定位元素上奏效，该属性设置一个定位元素沿z轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承z-index属性的值

 

line-height和height的区别

line-height一般指的是布局里面一段啊文字上下行之间的高度，而height一般指的是容器的整体高度

 

inline-block、inline和block的区别

block是块级元素，其前后都会有换行符，能设置宽度和高度，margin、padding水平垂直方向都有效

inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后没有换行符

inline-block：能设置宽高，margin、padding水平垂直方向都有效，前后没有换行符

 

重绘和重排

dom的变化影响到了预算内宿的几何属性，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到其他影响，浏览器需要重新构造画面，这个过程称之为重排

浏览器将受到影响的部分重新绘制在屏幕上的过程称之为重绘

 

如何减少重绘和重排

引起重排重绘的原因是：添加或删除可见的DOM元素，元素尺寸位置发生改变，浏览器页面初始化，浏览器窗口大小发生改变。重排一定导致重绘，重绘不一定导致重排

减少重绘重排的方法有：不在布局信息改变时做DOM查询，使用csstext,className一次性改变属性，使用fragment

 

box-sizing的语法和基本用处

box-sizing:规定两个并排的带边框的框，语法为context-box、border-box、inherit

content-box:宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边距

border-box:为元素设定的宽度和高度决定了元素的边框盒

inherit:继承父元素的box-sizing

 

多人开发时如何防止全局污染

使用css-moudles，用哈希运算，每次引用都自动生成一个新的哈希，预防类名的冲突。

 

说说前端的事件流

事件流描述的是从页面中接受事件的顺序，DOM2级事件流包括下面的阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段。addEventListener是DOM2级事件新增的指定事件处理程序操作，这个方法接受3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。布尔值参数为true，表示在捕获阶段调用事件处理程序，如果为false，表示在冒泡阶段调用事件处理程序

 

说一下事件委托

事件委托指的是不在事件的发生地上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制

 

图片的懒加载和预加载

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染

懒加载：作为服务器前端的优化，减少请求数或延迟请求数

两种加载的本质是相反的，一个是提前加载，会增加服务器前端压力，另一个是迟缓甚至不加载，对服务器前端有一定的缓解压力作用

 

异步加载js的方法

defer：只支持IE如果脚本不改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度。

async：html5属性仅适用于外部脚本额，并且如果在IE中，同时存在defer和async，那么defer的优先级会比较高

 

async与await

async函数返回的是一个Promise对象

await关键字必须位于async函数内部，await关键字返回结果就是其后面Promise执行的结果，可能是resolved或者rejected的值

不能再普通箭头函数中使用await，必须在函数前面加上async

await用来串行的执行异步操作，现实现并行可以考虑用promise.all

 

如何理解前端模块化

前端模块化是复杂的文档文件编程一个一个独立的模块，分成独立的模块有利于重用和维护。

 

说一下commonjs、AMD

commonjs：开始于服务器端的模块化，同步定义的模块化，每个模块都是一个单独的作用域，模块输出modules.exports，模块加载require()引入模块

AMD：异步模块定义，requireJS实现了AMD规范，解决了多个文件有依赖关系，被依赖文件余姚遭遇依赖它的文件加载到浏览器和加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长的问题

 

js监听对象属性的改变

1、通过Object.defineProperty来实现已有属性的监听，若id不在监听对象中，则不能监听id的变化

2、通过Proxy来实现，即使有属性在监听对象中不存在，通过监听对象.id来定义也同样可以这样监听这个属性的变化

 

setTimeout、setInterval和requestAnimationFrame之间的区别

1、requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中完成，并且重绘或回流的时间间隔紧跟随浏览器的刷新频率。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，意味着更少地占用资源

3、requestAnimationFrame是由浏览器专门为动画提供API，在运行时浏览器会自动优化方法的调用，并且如果页面不是记过状态下的话，动画会自动暂停，有效节省了CPU的开销

 

js判断类型

typeof()、instanceof()、Object.prototype.toString.call()

 

数组去重

indexof()循环去重，ES6 set去重:Array.from(new Set(array))，双循环

 

this的指向有哪几种

默认绑定：全局环境中，this默认绑定到window

隐式绑定：被直接对象所包含的函数调用时，this隐式绑定到该直接对象

隐式丢失：被隐式绑定的函数丢失绑定对象，从而默认绑定到window。显示绑定：通过call(),apply(),bind()方法把对象绑定到this上

 

暂停死区

在代码块内，使用let、const命令声明变量之前，该变量都是不可用的

 

什么是按需加载

当用户触发了动作时才加载对应的功能。触发的动作，是看具体的业务场景而言，包括但不限于鼠标点击，输入文字，拉动滚动条，鼠标移动，窗口大小更改。加载的文件可以是JS，图片，CSS，HTML

 

什么是virtual dom

用JavaScript对象构造表示DOM树的结构，然后用这个树构建一个真正的DOM树，插到文档当中当状态变更的时候，重新构造一颗新的对象树，然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到所构建的郑振的DOM树上，视图就更新了。virtual dom本质上就是JS和DOM之间做了一个缓存

 

webpack用来干什么

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

 

ant-design的优缺点

优点：组件非常全面，样式效果也比较不错。缺点：框架自定义程度低，默认UI风格修改困难

 

简单介绍一下symbol

symbol是ES6的新属性，用给定名称作为唯一标识。使用内置方法Object.getOwnPropertySymbols(obj)可以获得所有的symbol

 

什么是js闭包

闭包是那些能够访问自由变量的函数，闭包的作用：模仿块级作用域，保存外部函数的变量，封装私有变量

 

事件委托和冒泡原理

事件委托是利用冒泡阶段的运行机制来实现的，就是把一个元素响应时间的函数委托到另一个元素，一般是把一组元素的事件委托到他的父元素上，委托的优点是减少内存消耗，节约效率，动态绑定事件。

事件冒泡是元素自身的事件被触发后，如果父元素有相同的事件，那么元素本身的触发状态就会传递到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，知道document/window，冒泡过程结束

 

深浅拷贝的区别和实现

浅拷贝，利用数组的一些方法，如slice，concat方法返回一个新数组的特性来实现拷贝，但假如数组嵌套了对象或者数组的话，使用concat方法克隆并不完整，如果数组元素时基本类型，就会拷贝一份，互不影响，而如果是对象或数组，就会只拷贝对象和数组的引用，这样无论在新旧数组上进行了修改，两者都会发生变化，这种复制引用的拷贝方法称为浅拷贝

深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也互相分离，修改一个对象的属性，不会影响另一个

 

JS中string的startwith和indexof两种方法的区别

startwith函数，其参数有3个，stringObj要搜索字符串对象，str搜索的字符串，position（可选）从哪个位置开始搜索

indexof函数，可返回某个指定字符串在字符串中首次出现的位置

 

js字符串转数字的方法

pareInt()，解析一个字符串并返回一个整数。parseInt(string, radix)。string：被解析的字符串，radix：解析的数字基数，默认十进制

 

ES6箭头函数的特性

 1、箭头函数没有this，所以需要通过查看作用域链来确定this的值，意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this，可以设置参数默认值

2、箭头函数没有自己的arguments对象，但是可以访问外围函数的argument对象

3、不能通过new关键字调用，同样没有new.target值和原型

 

setTimeout和Promise的执行顺序

setTimeout属于异步操作的回调，只有主线程中没有执行任何同步代码的前提下，才会执行异步回调

promise构造函数属于同步执行

then方法指向的回调将在当前脚本所有同步任务执行完成后执行

执行顺序为：promise>promise.then>setTimeout

 

JS的垃圾回收机制

GC，GC执行时，中断代码，停止其他操作，遍历所有对象，对于不可访问的对象进行回收。

优化的方法有分代回收、增量GC：目的是通过对象的使用频率，存在时长来区分新生代和老生代对象，多回收新生代区，少回收老生代区，减少每次遍历的时间

 

了解事件代理

事件代理：也称事件委托，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的事件

事件代理就是我们将事件添加到本来要添加的时间父节点，将事件委托给父节点来触发处理函数，这通常会使用在大量的同级元素需要添加同一类事件的时候。

 

面向对象的继承方式

原型链继承，将父类的实例作为子类的原型

构造继承，使用父类的构造函数来增强子类实例，相当于是复制父类的实例属性给子类

实例继承，为父类实例添加新特性，作为子类实例返回

拷贝继承，支持多继承，但效率低，内存占用高

组合继承，通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

寄生组合继承，通过调用父类构造，继承父类的属性冰女保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

 

引用类型常见的对象

Object、Array、RegExp、Date、Function、特殊的包装类型（String、Number、Boolean）以及单体内置对象（Globa、Math）

 

bind,call,apply的区别

apply：调用一个对象的一个方法，用另一个对象替换当前对象。B.apply(A,arguments);即A对象应用B对象的方法

call：调用一个对象的一个方法，用另一个对象替换当前对象。B.call(A,args1,args2);即A对象调用B对象的方法

bind除了返回是函数以外，它的参数和call一样

 

bootstarp清除浮动的方法

:after伪类在元素末尾插入了一个包含空格的字符，并设置display为table。并且还要设置:before伪类，因为:before的设置也触发了一个BFC，可以阻止margin-top的合并

 

DOM是什么

DOM:文档对象模型，是W3C组织推荐的处理可拓展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个属性结构中

其中的API有：节点创建型API，页面修改型API，节点查询型API，节点关系型API，元素属性型API，元素样式型API等

 

Ajax返回的状态

0-（未初始化）还没有调用send()方法

1-（载入）已条用send()方法，正在发送请求

2-（载入完成）send()方法执行完成，已经接收到全部响应内容

3-（交互）正在解析响应内容

4-（完成）响应内容解析完成，可以在客户端调用

 

原生JS的Ajax

Ajax创建异步对象XMLHttpRequest，操作XMLHttpRequest对象：1、设置请求参数（请求方式，请求页面的相对路径，是否异步）;2、设置回调函数，一个处理服务器响应的函数，使用onreadystatechange，类似函数指针;3、获取异步对象的readyState属性，该属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数就会被执行;4、判断响应报文的状态，若为200说明服务器正常运行并返回响应数据;5、读取响应数据，可以通过responseText属性来取回服务器返回的数据

使用ajax发送数据步骤：1、创建异步对象。2、设置请求行open。3、设置请求头。4、设置请求体。5、让异步对象接受服务器的响应数据

 

webpack和gulp区别（模块化与流的区别）

gulp强调的时前端开发的工作流程，可以通过配置一系列的task，定义task处理的事物，然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成模块啊，通过loader(加载器)和plugin(插件)对资源进行处理，打包成符合生产环境部署的前端资源

 

redux用处

在组件化的应用中，会有着大量的组件层级关系，深嵌套的组件与浅层父组件进行数据交互，变得十分繁琐。而redux，站在一个服务级别的角度，可以毫无阻碍地应用的状态传递到每一个层级的组件中。

常用方法：提供getState()方法获取state，提供dispatch(action)方法更新state，提供subscribe(listener)注册监听器

 

angularJs和react区别

React对比Angular是思想上的转变，它也并不是一个库，是一种开发理念，组件化，分治的管理，数据与view的一体化。它只有一个中心发出状态，渲染view，对于虚拟dom它并没有提高渲染页面的性能，它提供更多的时利用jsx便捷生成dom元素，利用组件概念进行分治管理页面每个部分

 

vue双向绑定原理

vue数据双向绑定原理，是通过数据劫持结合发布者-订阅者模式的方式来实现，利用Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设定属性值(set)

 

说说vue react angularJs jquery的区别

jQuery是事件驱动，而另外的都是数据驱动

Angular，Vue是双向绑定，而React不是，jQuery的业务逻辑和UI更改混在一起

 

node的特性

Node.js借助事件驱动，非阻塞I/O模型变得轻量和高效，非常适合运行在分布式设备的数据密集型实时应用。常用的方法有：emitter.addListener(eventName, listen),emitter.emit(eventName[, ...args]),emitter.on(eventName, listener), emitter.removeListener(eventName, listener)

 

讲讲Express

Express是一个简洁而灵活的node.js中Web应用框架，提供了一系列强大特性帮助你创建各种Web应用和丰富的http工具

 

介绍一些React

React是一个用于构造用户界面的JavaScript库。React主要用于构建UI。

特点：1、声明式设计，采用声明范式，可以轻松描述 应用。2、高效，React通过对DOM的模拟，最大限度地减少与DOM的交互。3、灵活，React可以与已知的库或框架很好地配合。4、JSX，是JavaScript语法的扩展。5、组件，通过React构建组件，使得代码更佳容易得到复用。6、单向响应数据流，减少了重复代码

 

React组件的生命周期

React组件的生命周期：首先获取父组件传递的props，接着获取出事的state值，接着经历挂载阶段的ComponentWillMount，render，ComponentDidMount三个生命周期函数，分别代表组件将会挂载、组件渲染、组件挂载完毕三个阶段，在组件挂载完成后，组件的props和state的任意改变都会导致组件进入更新状态。若props改变，则进入ComponentWillReceiveProps函数，然后去到ComponentShouldUpdate函数判断是否需要更新；若state改变，则直接进入ComponentShouldUpdate阶段。当组件卸载时，会进入ComponentWillUnmount进行卸载

 

React的生命周期函数

初始化阶段
1、getDefaultProps(),设置默认的props
2、getInitialState(),直接在constructor中定义this.state,此时可以访问this.props
3、componentWillMount(),只在组件初始化时调用，此时可以修改state
4、render(),创建虚拟DOM，进行diff算法，更新DOM树
5、componentDidMount(),组件渲染之后调用
运行中阶段
6、componentWillReveiveProps(nextProps),组件接受新的props时调用
7、shouleComponentUpdate(nextProps,nextState),组件接受state或者props时调用
8、componentWillUpdate(nextProps,nextState),组件将要更新时才调用
9、componentDidUpdate(),组件更新完成后调用，可以获取DOM节点
销毁阶段
10、componentWillUnmount(),组件将要卸载时调用

 

ReactJs的组件交流

React组件之间的交流方式可以分为三种

1、父组件向子组件传值：主要利用props来进行交流

2、子组件向父组件传值：子组件通过控制自己的state然后告诉父组件的点击状态，然后在父组件中展示出来

3、没有任何嵌套关系的组件之间传值：订阅/监听一个事件通知，并发送/触发/发布/发送一个事件通知那些想要的组件

 

了解React中的虚拟DOM，虚拟DOM是怎么对比的

使用diff算法，有三种优化形式

tree diff：将新旧两颗DOM树按照层次遍历，只对同级DOM节点进行比较，即同一父节点下的所有子节点，当发现节点已经不存在，则该节点及其子节点会被完全删除，不会进一步比较

component diff：不同组件之间的对比，如果组件类型相同，暂不更新，否则删除旧组件再创建一个新组建，插入到删除组件的位置

element diff：在类型相同的组件内，再继续对比组件内部的元素

 

setState之后的流程

在调用setState函数之后，React会将传入的参数对象与组件当前的状态合并，然后出发所谓的调用过程(Reconciliation)。经过调和过程，React会以相对高效的方式根据新的状态构建React元素树并且着手重新渲染整个UI界面。在React得到元素树之后，React会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React能够相对精准地知道哪些位置发生了改变，这就保证了按需更新，而不是全部重新渲染

 

TCP建立连接的三次握手

第一次握手：客户端(Client)将标志位SYN置为1，随机产生一个置seq=x，并将该数据包发送给服务器端(Server)，Client进入SYN-SENT状态，等待Server确认

第二次握手：Server受到数据包后由标志位SYN=1得知Client请求建立连接，Server将标志位SYN和ACK都置为1，ack=x+1，随机产生一个值seq=y，并将该数据包发送给Client以确认连接请求，Server进入STN-RCVD状态，此时操作系统为该TCP连接分配TCP缓存和变量

第三次握手：Client收到确认后，检查ack是否为x+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=y+1，并且此时操作系统为该TCP连接分配TCP缓存和变量，并将该数据包发送给Server，Server检查ack是否为y+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入连接状态

 

CDN原理

CDN全称为Content Delevery Network，即内容分发网络。CDN基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应

 

OSI七层模型

应用层：文件传输，常用协议HTTP，snmp，FTP

表示层：数据格式化，代码转换，数据加密

会话层：建立，解除会话

传输层：提供端对端的接口，tcp、udp

网络层：为数据包选择路由，IP，icmp

数据链路层：传输有地址的帧

物理层：二进制的数据形式在物理媒体上传输数据

 

进程和线程是什么

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

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

 

线程的哪些资源共享，哪些资源不共享

共享的资源有：堆、全局变量、静态变量、文件

独享的资源有：栈、寄存器

 

进程间的通信方式有哪些

1、无名管道，半双开通信方式，数据只能单向流动且只能在具有亲缘关系的进程间使用

2、高级管道，将另一个程序当做一个新的进程在当前程序进程中启动，则这个进程算是当前程序的子进程

3、有名管道，半双工通信方式，允许没有亲缘进程之间的通信

4、消息队列，有消息的链表，存放在内核，并由消息队列标识符标识，消息队列克服了信号传递信息少，管道只能承载无格式字节流以及缓冲区大小受限的缺点

5、信号量，一个计数器，可以用来控制多个进程对共享资源的访问，它常作为一种锁机制，防止某进程正在访问共享资源时，其他进程也可以访问该资源

6、信号，用于通知接受进程某个事件已经发生

7、共享内存，共享内存就是映射一段能被其他进程所访问的内存。这段共享内存由一个进程创建，但是多个进程可以访问，共享内存是罪最快的IPC方式，往往与其他通信机制配合使用、

8、套接字，可用于不同机器之间的进程通信

 

Redis和mysql的区别

类型上，mysql是关系型数据库，redis是缓存数据库

作用上，mysql用于持久化的存储数据到硬盘， 功能强大，但是速度较慢。redis用于存储使用较为频繁的数据到缓存中，读取速度快

需求上，mysql和redis因为需求的不同，一般配合使用

 

B树的特性，B树和B+树的区别

特性：一个m阶的B数下，每个结点至多拥有m棵子树；根结点至少拥有两棵子树(存在子树的情况下)；除了根结点意外，其余每个分支结点至少拥有m/2棵子树；所有的叶结点都在同一层；有k棵子树的分支结点则存在k-1个关键码，关键码按照递增次序进行排列；关键字数量满足ceil(m/2)-1<=n<=m-1

区别

关键字的数量不同，B+树中分支结点有m个关键字，其叶子结点也有m个，其关键字只是起到了一个索引的作用，但是B树虽然也有m个子结点，但其只拥有m-1个关键字

存储的位置不同，B+树中的数据都存储在叶子结点上，就是其所有叶子结点的数据组合起来就是完整的数据。但是B树的数据存储在每一个结点中，并不仅仅存储在叶子结点上

分支结点的构造不同，B+树的分支结点仅仅存储着关键字信息和儿子的指针，也就是说内部结点仅仅包含着索引信息

查询不同，B树在找到具体的数值以后，则结束，而B+树则需要通过索引找到叶子结点中的数据才结束，也就是说B+树的搜索过程中走了一条从根结点到叶子结点的路径

 

尾递归

如果一个函数中所有递归形式的调用都出现在函数的末尾，称这个递归函数是尾递归。当递归调用是整个函数体中最后执行的语句且它的返回值不属于表达式的一部分时，这个递归调用就是尾递归

 

把多维数组变成一维数组

递归、toSrting、reduce、rest运算符

 

如果遇到资源无法加载，回事什么问题，如何解决

首先打开开发者工具查看报错情况，根据http状态码来确认识服务器报错还是客户端报错，然后根据具体问题来分析

 

常用Linux的命令

ls:展示目录列表命令
cd:切换目录命令
mkdir:目录创建
rm:移除文件或目录
mv:移动文件与目录或修改名称
tar:解压
cp:复制
su:切换用户

 

常用SQL语句

show databases//查看数据库
create database name//创建数据库
drop database name//删除数据库
create table 表命();//创建表
drop table 表名();//删除表
select//查询语句
select distinct//数据去重
where//条件查询
update//修改数据
delete//删除数据

以上多为个人总结，如有错误，请各位指出，必改之