互联网大厂前端面试

1、meta标签

提供给页面的一些元信息（名称/值对）， 比如针对搜索引擎和更新频度的描述和关键词。

• name：名称/值对中的名称。常用的有author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。

• http-equiv：没有name时，会采用这个属性的值。常用的有content-type、expires、refresh、set-cookie。把content属性关联到http头部。

• content： 名称/值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用。

• scheme： 用于指定要用来翻译属性值的方案。

 

2. css哪些属性可以继承

• 字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font

• 文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing

• 列表相关：list-style-image, list-style-position, list-style-type, list-style

• 颜色：color

 

3. css3有哪些新属性

（1）边框：

• border-radius：圆角边框，border-radius:25px;

• box-shadow：边框阴影，box-shadow: 10px 10px 5px #888888;

• border-image：边框图片，border-image:url(border.png) 30 30 round;

 

（2）背景：

• background-size：规定背景图片的尺寸，background-size:63px 100px;

• background-origin：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。background-origin:content-box;

• CSS3 允许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);

 

（3）文本效果：

• text-shadow：向文本应用阴影，可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。text-shadow: 5px 5px 5px #FF0000;

• word-wrap：允许文本进行换行。word-wrap:break-word;

 

（4）字体：CSS3 @font-face 规则可以自定义字体。

（5）2D 转换（ transform）

• translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px,100px);

• rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform: rotate(30deg);

• scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。transform: scale(2,4);

• skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg,20deg);

• matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

 

（6）3D 转换

• rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);

• rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);

 

（7）transition：过渡效果，使页面变化更平滑

• transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。

• transition-duration：过渡动画的一个持续时间。

• transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。

• transition-delay：延迟多久后开始动画。

 

简写为： transition: [ ||  ||  || ];

（8）animation：动画

使用CSS3 @keyframes 规则。

• animation-name: 定义动画名称

• animation-duration: 指定元素播放动画所持续的时间长

• animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。

• animation-delay: 指定元素动画开始时间

• animation-iteration-count:infinite | ：指定元素播放动画的循环次

• animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

• animation-play-state:running | paused ：控制元素动画的播放状态。

 

简写为： animation:[ || ||  ||  || || ]

 

4. 闭包是什么，什么时候闭包会消除?

因为作用域链，外部不能访问内部的变量和方法，这时我们就需要通过闭包，返回内部的方法和变量给外部，从而就形成了一个闭包。

JavaScript是一门具有自动垃圾回收机制的编程语言，主要有两种方式：

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记（可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。

引用计数（reference counting）的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0 时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，它就会释放那些引用次数为零的值所占用的内存。

导致问题：会导致循环引用的变量和函数无法回收。

解决：将用完的函数或者变量置为null。

 

5. 怎么理解js是单线程的

主要说一下异步以及事件循环机制，还有事件队列中的宏任务、微任务。

• macrotask：主代码块，setTimeout，setInterval、setImmediate等。

• microtask：process.nextTick（相当于node.js版的setTimeout），Promise 。process.nextTick的优先级高于Promise。

 

6. 有哪些排序算法，时间复杂度是多少？什么时候快排的效率最低？

排序算法	最坏事件复杂度	平均时间复杂度	稳定度	空间复杂度
冒泡排序	O(n^2)	O(n^2)	稳定	O(1)
插入排序	O(n^2)	O(n^2)	稳定	O(1)
选择排序	O(n^2)	O(n^2)	稳定	O(1)
快速排序	O(n^2)	O(n*log2n)	不稳定	O(log2n)~O(n)
二叉树排序	O(n^2)	O(n*log2n)	不一定	O(n)
堆排序	O(n*log2n)	O(n*log2n)	不稳定	O(1)

7. 原生ajax的请求过程

创建全平台兼容的XMLHttpRequest对象：

1. function getXHR(){

2.  var xhr = null;

3.  if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari

4.    xhr = new XMLHttpRequest();

5.  } else if (window.ActiveXObject) {

6.    try {

7.      xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3

8.    } catch (e) {

9.      try {

10.        xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 兼容 IE6, IE5，很老的api,虽然浏览器支持,功能可能不完善,故不建议使用

11.      } catch (e) {

12.        alert("您的浏览器暂不支持Ajax!");

13.      }

14.    }

15.  }

16.  return xhr;

17. }

Ajax请求数据的过程：

1. var xhr = getXHR();

2. xhr.open('GET', url/file,true);  //设置请求方式，url，以及是否异步

3. xhr.onreadystatechange = function() {   //设置回调监听函数

4.   if(xhr.readyState==4){

5.        if(xhr.status==200){

6.            var data=xhr.responseText;

7.             console.log(data);

8.   }

9. };

10. xhr.onerror = function() {

11.  console.log("Oh, error");

12. };

13. xhr.send();  //发送请求

8. http状态码，cookie字段，cookie一般存的是什么，session怎么存在的？

cookie和session都是为了弥补http协议的无状态特性，对server端来说无法知道两次http请求是否来自同一个用户，利用cookie和session就可以让用户只登录一次，server就知道某个请求是否需用重新登录。

1. cookie：客户端第一次正常访问服务器，服务器在response headers中返回与用户信息相关的cookie，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个cookie，服务器收到这个cookie就知道用户状态了。cookie可以设置过期时间，默认值是-1，表示关闭浏览器时cookie就会失效，值为0时表示立马失效，相当于删除cookie（cookie没有删除的方法），服务器和客户端都可以设置cookie，但不可以操作另一个域名下的cookie。

2. session: 客户端第一次正常访问服务器，服务器生成一个sessionid来标识用户并保存用户信息（服务器有一个专门的地方来保存所有用户的sessionId），在response headers中作为cookie的一个值返回，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个sessionId，服务器通过查找这个sessionId就知道用户状态了，并更新sessionId的最后访问时间。sessionId也会可以设置失效时间，比如如果60分钟内某个session都没有被更新，服务器就会删除这个它。

总言之cookie是保存在客户端，session是存在服务器，session依赖于cookie。

9. http请求方式有哪些？

• HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。

• HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

 

1. css选择器，怎么选择相同的类

id、class、标签、伪类、通配符等。可以用getElementsByClassName（）选择相同的类。

2. css3有哪些伪类，伪类选择器有哪些

这里要区分一下伪类和伪元素的概念。根本区别在于它们是否创造了新的元素(抽象)。

• 伪类：用于向某些选择器添加特殊的效果。例如，a标签的 :link, :visited,:hover, :active; 以及 :first-child, :last-child。

• 伪元素：是html中不存在的元素，用于将特殊的效果添加到某些选择器。例如:before, :after, :first-letter, :first-line。css3只新增了一个伪元素::selection（改变用户所选取部分的样式）。

 

参考： CSS3 选择器——伪类选择器

3. OSI七层网络模型

OSI七层模型	作用	对应协议	对应设备
应用层	它是计算机用户，以及各种应用程序和网络之间的接口	HTTP, FTP, SMTP, POP3	计算机设备
表示层	信息的语法语义以及它们的关系，如加密解密、转换翻译、压缩解压缩	IPX, LPP, XDP
会话层	建立、维护、管理应用程序之间的会话	SSL, TLS, DAP, LDAP
传输层	服务点编址，分段与重组、连接控制、流量控制、差错控制	TCP, UDP	防火墙
网络层	为网络设备提供逻辑地址，进行路由选择、分组转发	IP ARP RARP ICMP IGMP	路由器
数据链路层	物理寻址，同时将原始比特流转变为逻辑传输路线	PPTP, ARP, RARP	交换机
物理层	机械、电子、定时接口通道信道上的原始比特流传输	IEEE 802.2, Ethernet v.2, Internetwork	网卡

参考： 一张非常强大的OSI七层模型图解

4. MVC和MVVM的区别

• Model用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法；

• View作为视图层，主要负责数据的展示；

• Controller定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变。

 

MVC将响应机制封装在controller对象中，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

MVVM把View和Model的同步逻辑自动化了。以前Controller负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可。也就是双向数据绑定，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

参考： 浅析前端开发中的 MVC/MVP/MVVM 模式

5. 用过哪些设计模式

（1）单例模式

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

实现方法：先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。

（2）发布/订阅模式
定义：又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

场景：订阅感兴趣的专栏和公众号。

（3）策略模式
定义：将一个个算法（解决方案）封装在一个个策略类中。

优点：

• 策略模式可以避免代码中的多重判断条件。

• 策略模式很好的体现了开放-封闭原则，将一个个算法（解决方案）封装在一个个策略类中。便于切换，理解，扩展。

• 策略中的各种算法可以重复利用在系统的各个地方，避免复制粘贴。

• 策略模式在程序中或多或少的增加了策略类。但比堆砌在业务逻辑中要清晰明了。

• 违反最少知识原则，必须要了解各种策略类，才能更好的在业务中应用。

 

应用场景：根据不同的员工绩效计算不同的奖金；表单验证中的多种校验规则。

（4）代理模式

定义：为一个对象提供一个代用品或占位符，以便控制对它的访问。

应用场景：图片懒加载（先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。）

（5）中介者模式

定义：通过一个中介者对象，其他所有相关对象都通过该中介者对象来通信，而不是互相引用，当其中的一个对象发生改变时，只要通知中介者对象就可以。可以解除对象与对象之间的紧耦合关系。

应用场景： 例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。

（6）装饰者模式

定义：在不改变对象自身的基础上，在程序运行期间给对象动态的添加方法。

应用场景： 有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性。

参考： JavaScript设计模式

8. es6相比es5有哪些优点

大概说一下：let、const，模板字符串，箭头函数，做异步处理的promise、generator、async await，es6模块等。

参考： 阮一峰 —— ECMAScript 6 入门

11. 懒加载怎么实现

场景：一个页面中很多图片，但是首屏只出现几张，这时如果一次性把图片都加载出来会影响性能。这时可以使用懒加载，页面滚动到可视区在加载。优化首屏加载。

实现：img标签src属性为空，给一个data-xx属性，里面存放图片真实地址，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

优点：页面加载速度快，减轻服务器压力、节约流量，用户体验好。

 

1. 为什么要用flex布局，align-items和justify-content的区别

传统布局基于盒模型，非常依赖 display属性 、position属性 、float属性。而flex布局更灵活，可以简便、完整、响应式地实现各种页面布局，比如水平垂直居中。

align-items：定义在垂直方向上的对齐方式；

justify-content：定义在水平方向上的对齐方式。

2. webpack是怎么打包的，babel又是什么？

把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

3. saas和less不同于普通css的地方

• 定义变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值；

• 嵌套写法，父子关系一目了然；

• 使用运算符，可以进行样式的计算；

• 内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；

• 继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；

• Mixins （混入）：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

 

4. es 6模块和其他模块不同的地方

对比了一下es6模块和CommonJS模块：

区别	CommonJS	es6
加载原理	第一次加载模块就会执行整个模块，再次用到时，不会执行该模块，而是到缓存中取值。	不会缓存运行结果，动态的去被加载的模块中取值，并且变量总是绑定其所在模块。
输出	值的拷贝（模块中值的改变不会影响已经加载的值）	值的引用（静态分析，动态引用，原来模块值改变会改变加载的值）
加载方式	运行时加载（加载整个模块，即模块中的所有接口）	编译时加载（只加载需要的接口）
this指向	指向当前模块	指向undefined
循环加载	只输出已经执行的部分，还未执行的部分不会输出	遇到模块加载命令import时不会去执行模块，而是生成一个动态的只读引用，等到真正用到时再去模块中取值。只要引用存在，代码就能执行。

5. 有没有用过es6的一些异步处理函数

Promise，generator，async await

6. redux怎么处理异步操作

可以引入Redux-thunk或者redux-promise这种中间件，可以延迟事件的派发。

其中的原理：是因为他们用了applymiddleware()包装了store的dispatch方法，拥有可以处理异步的能力。

7. 为什么reducer要是个纯函数，纯函数是什么？

纯函数：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。

原因：Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同（浅比较）。如果你在reducer内部直接修改旧的state对象的属性值，那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变，返回的state将为旧的state。两个state相同的话，页面就不会重新渲染了。

因为比较两个Javascript对象所有的属性是否相同的的唯一方法是对它们进行深比较。但是深比较在真实的应用当中代价昂贵，因为通常js的对象都很大，同时需要比较的次数很多。因此一个有效的解决方法是作出一个规定：无论何时发生变化时，开发者都要创建一个新的对象，然后将新对象传递出去。同时，当没有任何变化发生时，开发者发送回旧的对象。也就是说，新的对象代表新的state。

8. 高阶函数是什么，怎么去写一个高阶函数

高阶函数：参数值为函数或者返回值为函数。例如map，reduce，filter，sort方法就是高阶函数。

编写高阶函数，就是让函数的参数能够接收别的函数。

9. vue跟react的区别是什么

没有用过vue，所以就只说了vue具有双向绑定，react是单向数据流。

参考： Vue.js与React的全面对比

10. nodejs处理了什么问题

可以处理高并发的I/O，也能与websocket配合，开发长连接的实时交互应用程序。

11. 响应式布局，怎么做移动端适配

使用媒体查询可以实现响应式布局。

移动端适配方案：

（1）meta viewport：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

width=device-width: 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0

（2）媒体查询（响应式)

（3）动态 rem 方案

 

5. 如何实现水平垂直居中，relative、absolute、fixed

（1）使用表格

1. .container{

2.  width: 600px;

3.  height: 600px;

4.  background: #eee;

5.  display: table-cell;

6.  text-align: center;

7.  vertical-align: middle;

8. }

9. .center{

10.  background: blue;

11. }

（2）css3的transform属性

1. .container{

2.  width: 100%;

3.  height: 400px;

4.  background: #eee;

5.  position: relative;

6. }

7. .center{

8.  background: blue;

9.  position:absolute;

10.  top: 50%;

11.  left: 50%;

12.  transform: translate(-50%, -50%);

13. }

（3）flex布局

1. .container{

2.  width: 100%;

3.  height: 400px;

4.  background: #eee;

5.  display: flex;

6.  justify-content: center;

7.  align-items: center;

8. }

9. .center{

10.  width: 100px;

11.  height: 100px;

12.  background: blue;

13.  text-align: center;

14. }

• relative：相对于自己的定位；

• absolute：相对于最近一级定位元素的定位；

• fixed：相对于窗口的定位。

 

实现call方法

1. Function.prototype.call2 = function (context) {

2.    var context = Object(context) || window

3.    context.fn = this

4.    var args = []

5.    for (var i = 1; i < arguments.length; i++) {

6.        args.push('arguments[' + i +']')

7.    }

8.  

9.    var res = eval('context.fn(' + args + ')')

10.  

11.    delete context.fn

12.    return res

13. }

 

数组有哪些方法，哪些会改变原数组

改变原数组的方法：pop、push、reverse、shift、sort、splice、unshift，以及两个ES6新增的方法copyWithin 和 fill；

不改变原数组（复制）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未标准的toSource以及ES7新增的方法includes；

循环遍历：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

 

Map有哪些方法

Map的方法：set, get, has, delete, clear

遍历方法：

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。