前端面试题集合二

用过Nginx吗？都用过哪些？

常使用场景：

1、反向代理

2、网站负载均衡

你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT。 非IE内核浏览器：firefox opera safari chrome 。 IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

项目上线流程是怎样的？

流程建议 一模拟线上的开发环境 本地反向代理线上真实环境开发即可。（apache, nginx, nodejs均可实现）

一模拟线上的测试环境 模拟线上的测试环境，其实是需要一台有真实数据的测试机，建议没条件搭daily的，就直接 用线上数据测好了，只不过程序部分走你们的测试环境而已，有条件搭daily最好。

一可连调的测试环境 可连调的测试环境，分为2种。一种是开发测试都在一个局域网段，直接绑hosts即可，不在 一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往 上布即可。

一自动化的上线系统 自动化的上线系统，可以采用Jenkins。如果没有，可以自行搭建一个简易的上线系统，原 理是每次上线时都抽取最新的trunk或master，做一个tag，再打一个时间戳的标记，然后分 发到cdn就行了。界面里就2个功能，打tag,回滚到某tag,部署。

一适合前后端的开发流程 开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调 时有hosts可绑即可。

简单的可操作流程 一代码通过git管理，新需求创建新分支，分支开发，主干发布 一上线走简易上线系统，参见上一节 一通过gulp+webpack连到发布系统，一键集成，本地只关心原码开发 一本地环境通过webpack反向代理的server 一搭建基于linux的本地测试机，自动完成build+push功能

浏览器输入网址到页面渲染全过程

DNS解析

TCP连接

发送HTTP请求

服务器处理请求并返回HTTP报文

浏览器解析渲染页面

连接结束

如何理解前端模块化？

前端模块化就是复杂的文件编程一个一个独立的模块，比如js文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了commonJS规范，AMD，CMD规范等等，以及用于js打包（编译等处理）的工具webpack

说一下你对闭包的理解？

一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

闭包的特性： 1.函数内再嵌套函数 2.内部函数可以引用外层的参数和变量 3.参数和变量不会被垃圾回收机制回收

get请求传参长度的误区？

误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

HTTP 协议 未规定 GET 和POST的长度限制

GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度

不同的浏览器和WEB服务器，限制的最大长度不一样

要支持IE，则最大长度为2083byte，若只支持Chrome，则最大长度 8182byte

display的取值有哪些？

主要取值有none,block,inline-block,inline,flex等。

如何解决异步回调地狱?

promise、generator、async/await

redux里常用方法？

提供?getState()?方法获取 state；

提供?dispatch(action)?方法更新 state；

通过?subscribe(listener)?注册监听器等等

setTimeout(fn,100);100毫秒是如何权衡的?

setTimeout()函数只是将事件插入了任务列表，必须等到当前代码执行完，主线程才会去执行它指定的回调函数，有可能要等很久，所以没有办法保证回调函数一定会在setTimeout指定的时间内执行，100毫秒是插入队列的时间+等待的时间

csrf和xss的网络攻击及防范?

CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个ｔａｂ页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验证码，检查https头部的refer，使用token

XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie，或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在url地址的请求参数中，防御的话为cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤

如何使用JavaScript清除浏览历史记录？

您可以尝试使用document.location.replace()它来清除历史记录中的最后一个条目，并将其替换为新url的地址吗？replace()从文档历史记录中删除当前文档的URL，这意味着无法使用“后退”按钮导航回原始文档。

<script type="text/javascript">
    function Navigate(){   
         window.location.replace('your link');
        return false;
    }
   </script>

HTML：

   <button onclick="Navigate()">Replace document</button>

说一下类的创建和继承?

（1）类的创建（es5）：new一个function，在这个function的prototype里面增加属性和方法。

下面来创建一个Animal类：

// 定义一个动物类
function Animal (name) {
// 属性
this.name = name || 'Animal';
// 实例方法
this.sleep = function(){
console.log(this.name + '正在睡觉！');
}
}

// 原型方法
Animal.prototype.eat = function(food) {
console.log(this.name + '正在吃：' + food);
};

这样就生成了一个Animal类，实力化生成对象后，有方法和属性。

（2）类的继承——原型链继承

--原型链继承

function Cat(){ }
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true

介绍：在这里我们可以看到new了一个空对象,这个空对象指向Animal并且Cat.prototype指向了这个空对象，这种就是基于原型链的继承。

特点：基于原型链，既是父类的实例，也是子类的实例

缺点：无法实现多继承

（3）构造继承：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：可以实现多继承

缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。

（4）实例继承和拷贝继承

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

拷贝继承：拷贝父类元素上的属性和方法

上述两个实用性不强，不一一举例。

（5）组合继承：相当于构造继承和原型链继承的组合体。通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

特点：可以继承实例属性/方法，也可以继承原型属性/方法

缺点：调用了两次父类构造函数，生成了两份实例

（6）寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性

function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
    // 创建一个没有实例方法的类
    var Super = function(){};
    Super.prototype = Animal.prototype;
	//将实例作为子类的原型

    Cat.prototype = new Super();
})();
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); //true

说说前端中的事件流？

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

事件捕获阶段

处于目标阶段

事件冒泡阶段

addEventListener：addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

IE只支持事件冒泡。

js加载过程阻塞，解决方法？

指定script标签的async属性。

如果async="async"，脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

如果不使用async 且 defer="defer"：脚本将在页面完成解析时执行

CSS3中的transition是否可以过渡opacity和display？

transition可以过渡opacity, 但不可过渡display.

一般情况下线性属性如opacity都是可以被transition所过渡的, 非线性或者离散的值如display不可被过渡.

如何优化页面，加快页面的加载速度(至少5条)

(1) 优化图片资源的格式和大小

(2) 开启网络压缩

(3) 使用浏览器缓存

(4) 减少重定向请求

(5) 使用CDN存储静态资源

(6) 减少DNS查询次数

(7) 压缩css和js内容

http状态码有那些，分别代表什么意思

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

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

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

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

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

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。 401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

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

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

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

如何对网站的文件和资源进行优化

1．文件合并（目的是减少http请求）

2．文件压缩 （目的是直接减少文件下载的体积）

3．使用cdn托管资源

4．使用缓存

5．gizp压缩需要的js和css文件

6．meta标签优化（title,description,keywords）,heading标签的优化,alt优化

7．反向链接，网站外链接优化

什么是HTTPS，做什么用的呢？如何开启HTTPS?

1) 什么是HTTPS https是http的加密版本，是在http请求的基础上，采用ssl进行加密传输。

2) 做什么用 加密数据，反劫持，SEO

3) 如何开启 生成私钥与证书，配置nginx,重启nginx看效果

如何实现浏览器内多个标签页之间的通信？

通过WebSocket或SharedWorker把客户端和服务器端建立socket连接，从而实现通信；也可以调用localstorge、cookies等本地存储方法

了解响应式布局吗？请大体说一说

响应式布局概念：Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

设计步骤： 1．设置meta标签 2．根据媒体查询设置样式 3．设置多种视图宽度 4．处理图片缩放问题 5．宽度使用百分比?

说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

js的new操作符做了哪些事情？

new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。

js如何监听对象属性的改变？

我们假设这里有一个user对象,

(1)在ES5中可以通过Object.defineProperty来实现已有属性的监听

Object.defineProperty(user,'name',{
set：function(key,value){
}
})

缺点：如果id不在user对象中，则不能监听id的变化

(2)在ES6中可以通过Proxy来实现

var  user = new Proxy({}，{
set：function(target,key,value,receiver){
}
})

这样即使有属性在user中不存在，通过user.id来定义也同样可以这样监听这个属性的变化

怎么让html元素隐藏消失，有哪些方法？

1. opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2. visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。

为什么利用多个域名来提供网站资源会更有效？

突破浏览器的并发限制（浏览器同一域名最大的并发请求数量为6个，ie6为2个） 节约cookie带宽 CDN缓存更方便 防止不必要的安全问题（尤其是cookie的隔离尤为重要） 节约主机域名连接数，优化页面响应速度

mouseover和mouseenter的区别？

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout

mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

::before和:after中单冒号和双冒号的区别是什么，这两个伪元素有什么作用？

• 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素（伪元素由双冒号和伪元素名称组成），为了兼容已有的伪元素写法，在一些浏览器中也可以使用单冒号，来表示伪元素，比如:first-line、:first-letter、:before、:after等。
• 在新的CSS3中引入的伪元素不允许再支持旧的单冒号是写法
• 想让插入的内容出现在其它内容前，使用::before，反之使用::after，在代码顺序上，::after生成的内容也比::before生成的内容靠后

??伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的是特殊位置，比如after、before等。

清除浮动的方法有哪些？

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如

，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
或

---

来进行清理。

方法二：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

方法五：使用CSS的:after伪元素

结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

暂停死区是什么？

在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”

使用flex实现三栏布局，两边固定，中间自适应

.container {
      display: flex;
      height: 100px;
      .left, .right {
        width: 100px;
        background: #8c939d;
      }
      .content {
        flex: 1;
        background: #306eff;
      }
    }

数组的方法中有哪些可以中断？

1.for?of

2.some

3.every

以上方法，都可以使用return

如何在calc（）表达式中获得CSS变量的负值？

只需乘以-1：

.box-1 {

  height: 100px;

  width: 200px;

  margin-left: calc(-1 * var(--margin));

}

transition和animation的区别?

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

如何将原生的ajax封装成promise？

let myNewAjax = function(url){
	return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.open('get',url);
        xhr.send(data);
        xhr.onreadystatechange=function(){
            if(xhr.status==200&&readyState==4){
            var json=JSON.parse(xhr.responseText);
            resolve(json)
        }else if(xhr.readyState==4&&xhr.status!=200){
            reject('error');
        }
    })
}