noah的前端面试题（一）｜掘金技术征文

这段时间面试了一些公司而后我也整理一些面试题目供给你们参考一下，一些基本的题目就不分享出来了，还有一些手写的题目，另加一些我附加连接防止我表达的不够清晰详细。 

下一篇 前端面试题（二）

1. 谈一下css盒模型 如何触发 他是解决什么样子的问题

这个是老生常谈的题目了

1）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此 2） 内部的Box会在垂直方向，一个接一个地放置 3）属于同一个BFC的两个相邻Box的 margin会发生重叠  4）BFC的区域不会与float box重叠 主要是这四个也没比较每一个都说的很清晰 最主要的是第一个 

那些元素生成BFC

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

主要的解决是一些图形文字环绕效果和避免子元素的浮动脱离文档流而形成的高度坍塌的问题

2. 说一下你了解的弹性FLEX布局

各类概念和属性能想到你们均可以说一下，也扯到了Grid布局，基本这个也没啥问题。

分享一篇flex布局很详细的 Flex 布局教程

3. css预处理器有哪些 你用了那个 能够详细说一下其中特性吗

平时我在开发中主要使用的是 Less，因此可能对 Sass 和 Stylus 的熟悉程度稍差一些

能够 基本语法 嵌套语法 变量 @import 混入 继承 函数 逻辑控制 这些来讲说 同时我给你们分享一篇文章 再谈 CSS 预处理器

4. 谈一谈移动端适配的问题

以前的公司是用rem布局 同时我也谈到淘宝的flexible.js用来适配的，vh布局一些东西。被问到用rem布局有什么缺点时候 我想了想说 我以为很完美

5. 谈谈大家用的ui库和一些css类库

6. js中call apply bind的用法和其中之间的区别

他们三个都是为了动态改变某个函数运行时的上下文（context）或者是为了改变函数体内部this的指向  

apply()与call()做用没有区别，用法与call()方法稍有区别，就是call()的第二个参数(调用函数使用的参数)，是一个一个传入的

bind()的做用其实与call()以及apply()都是同样的，都是为了改变函数运行时的上下文，bind()与后面二者的区别是，call()和apply()在调用函数以后会当即执行，而bind()方法调用并改变函数运行时的上下文的以后，返回一个新的函数，在咱们须要调用的地方去调用他。

若是你们可以理解这个题目那么这三个用法也会了解很清晰了 cat.call(dog, a, b) = cat.apply(dog, [a, b]) = (cat.bind(dog, a, b))() = dog.cat(a, b)

7. 谈一谈你对this的理解 箭头函数内部的this是指向哪里的

this的指向在函数定义的时候是肯定不了的，只有函数执行的时候才能肯定this到底指向谁，实际上this的最终指向的是那个调用它的对象，也就是说 this是和上下文有关系，谁调用了他，他就指向谁。

箭头函数内部的this是词法做用域应该继承的是父执行上下文里面的this，切忌是父执行上下文 这样就不少箭头函数中的指向不明确就迎刃而解了。注意：简单对象（非函数）是没有执行上下文的 还有箭头函数call apply等方法会失效 也不能使用 let that = this 的hack写法

8. es6一些新的语法 

你们能够看一看阮一峰老师的 ECMAScript 6 入门 随便抽几点来讲

9. 如何用es6进行数组的复制

扩展运算符提供了复制数组的简便写法 

const a1 = [1, 2]; const a2 = [...a1]; const [...a2] = a1;

10. 如何用es6进行数组去重，而后用es5实现的几种方法 谈谈你的思路

es6 数组 set能够用来实现数组去重

es5 里面能够用对象key值惟一的方式来实现 和 数组indexof方式 

11.  es6 es7有哪些方法实现函数的异步操做 es6以前呢是如何实现的

promise， async await ， generator。

es6以前经过回调函数来实现的

12. 手写原声ajax get请求代码 ，在里面设置同步异步是在那个方法里面 ，get 和 post 区别

function get(){  
    var req = createXMLHTTPRequest();  
    if(req){  
        req.open("GET", url , true);  
        req.onreadystatechange = function(){  
            if(req.readyState == 4){  
                if(req.status == 200){  
                    alert("success");  
                }else{  
                    alert("error");  
                }  
            }  
        }  
        req.send(null);  
    }  
}  复制代码

XMLHttpRequest.open(method, url, async);一个可选的布尔参数，默认为true，表示要不要异步执行操做。若是值为false，send()方法直到收到答复前不会返回。若是true，已完成事务的通知可供事件监听器使用。若是multipart属性为true则这个必须为true，不然将引起异常。

HTTP POST GET 本质区别详解

13. HTTP请求报文和HTTP响应报文  

1.请求行

请求行由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，它们用空格分隔。例如，GET /index.html HTTP/1.1。

HTTP协议的请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。

HEAD就像GET，只不过服务端接受到HEAD请求后只返回响应头，而不会发送响应内容。当咱们只须要查看某个页面的状态的时候，使用HEAD是很是高效的，由于在传输的过程当中省去了页面内容。

列子：

Request URL:https://www.baidu.com/

Request Method:GET

Status Code:200 OK

Remote Address:172.31.1.246:8080

2.请求头部

请求头部由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。请求头部通知服务器有关于客户端请求的信息，典型的请求头有：

User-Agent：产生请求的浏览器类型。

Accept：客户端可识别的内容类型列表。

Host：请求的主机名，容许多个域名同处一个IP地址，即虚拟主机。

列子：

Cache-Control:private, max-age=10

Connection:Keep-Alive

Content-Encoding:gzip

Content-Type:text/html; charset=utf-8

Date:Tue, 21 Feb 2017 03:05:37 GMT

Expires:Tue, 21 Feb 2017 03:05:47 GMT

Last-Modified:Tue, 21 Feb 2017 03:05:37 GMT

Proxy-Connection:Keep-Alive

Transfer-Encoding:chunked

Vary:Accept-Encoding

X-UA-Compatible:IE=10

3.空行

最后一个请求头以后是一个空行，发送回车符和换行符，通知服务器如下再也不有请求头。

4.请求数据

请求数据不在GET方法中使用，而是在POST方法中使用。POST方法适用于须要客户填写表单的场合。与请求数据相关的最常使用的请求头是Content-Type和Content-Length。

HTTP响应也由三个部分组成，分别是：状态行、消息报头、响应正文 在响应中惟一真正的区别在于第一行中用状态信息代替了请求信息。状态行经过提供一个状态码来讲明所请求的资源状况。

13. http状态码 说一下200和304的理解和区别

协商缓存和强制缓存的区别，流程，还有一些细节，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特征 还有同时有Etag,last-Modified同时出现的时候 etag（包括文件修改时间 文件大小 文件内容等信息）优先级高  浏览器缓存详解:expires,cache-control,last-modified,etag详细说明

14. websocket理解 websocket产生缘由 了解http2嘛

在之前 HTTP 协议中所谓的 keep-alive connection 是指在一次 TCP 链接中完成多个 HTTP 请求，可是对每一个请求仍然要单独发 header；所谓的 polling 是指从客户端（通常就是浏览器）不断主动的向服务器发 HTTP 请求查询是否有新数据。这两种模式有一个共同的缺点，就是除了真正的数据部分外，服务器和客户端还要大量交换 HTTP header，信息交换效率很低。它们创建的“长链接”都是伪.长链接，只不过好处是不须要对现有的 HTTP server 和浏览器架构作修改就能实现。

WebSocket 解决的第一个问题是，经过第一个 HTTP request 创建了 TCP 链接以后，以后的交换数据都不须要再发 HTTP request了，使得这个长链接变成了一个真.长链接。可是不须要发送 HTTP header就能交换数据显然和原有的 HTTP 协议是有区别的，因此它须要对服务器和客户端都进行升级才能实现。在此基础上 WebSocket 仍是一个双通道的链接，在同一个 TCP 链接上既能够发也能够收信息。此外还有 multiplexing 功能，几个不一样的 URI 能够复用同一个 WebSocket 链接。这些都是原来的 HTTP 不能作到的。

http2它常被提起的特性有: 

多路复用 ： 多个HTTP请求能够放在同一个链接中进行。且自有数据流能并行传输 之后没必要在使用雪碧图来

HEAD 压缩：HTTP1中每次HTTP请求，都是必需要带上HTTP头的.而HTTP/2则在创建链接后，把头字段做为键值对，在两边维护一份字典，相同的就不用再传了，若有新增或变动，则再在传输时带上。减小HTTP头的传输，交互密集时，其实能省很多流量 服务器推送

优先级请求：好比说你滚动条滑倒底部 底部图片的图片就会优先加载出来

服务器推送：就是服务端能主动推东西过去，之前只能是被动的。在个人印象中，不少年前“Comet"这门技术曾经在淘宝大放光彩过。

即当客户端发一个请求过来时，服务端能依据这个请求，推断出你后续还要什么，主动给推过去。大大减小了请求数，加快了反应时间.

15. 说一下为何会有跨域问题 你平时怎么解决跨域的。以及后续JSONP的原理和实现以及cors怎么设置。

浏览器的同源策略 同源是指，域名，协议，端口相同，三者有一个不一样，则为跨域

 node代理，具体本身起个node服务，在node中转发来自浏览器的请求，node服务和浏览器请求要同源，而后转发携带具体参数，cookie...,转发到后端的跨域接口，转发库能够用axios，支持在node，和浏览器均可以使用。

nginx配置代理

在react,vue中能够用webpack-dev-server配置代理

跨域资源共享cors，后端设置Access-Control-Allow-Origin：*

jsonp利用script标签支持跨域 并在其中加入回调函数 jsonp只支持get请求

iframe+script 等现实开发中，并非很实用

16.如何设置cookie的跨域请求

Access-Control-Allow-Credentials设置为true

17. 从输入连接到前端渲染出页面通过什么步骤

从输入URL到页面加载的过程？如何由一道题完善本身的前端知识体系！内容有不少你们能够按到本身的理解说一下其实不必那么详细

浏览器解析->查询缓存->dns查询->创建连接->服务器处理请求->服务器发送响应->客户端收到页面->解析HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)->用户可交互(DOMContentLoaded)->加载完成(load)

18. js继承能够说一下哪几种和其中的优缺点

我说了原型和构造函数相结合的组合继承方法 又谈了寄生组合继承

19. 谈一谈浅拷贝和深拷贝区别

object是JavaScript引用类型对象只会被克隆最外部的一层,至于更深层的对象,则依然是经过引用指向同一块堆内存.

我说了用JSON对象parse方法能够将JSON字符串反序列化成JS对象，stringify方法能够将JS对象序列化成JSON字符串,这两个方法结合起来就能产生一个便捷的深克隆.

还有Object.assign() 只是一级属性复制，比浅拷贝多深拷贝了一层而已。

20. 尾递归来实现斐波那契

function fibonacci(n, n1, n2) {
    if(n <= 1) {
        return n2
    }
    return fibonacci(n - 1, n2, n1 + n2)
}复制代码

21. 用proxy实现string repeat方法

22. vue数据双向绑定 

数据双向绑定是经过oject.defineProerty进行数据劫持和订阅者观察者模式相结合

1.实现一个监听器Observer，用来劫持并监听全部属性，若是有变更的，就通知订阅者。

2.实现一个订阅者Watcher，能够收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，能够扫描和解析每一个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器

23. vue的生命周期 

beforecreated create  mounted updated destory等

有分别说了created和mounted区别 created 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted 挂载元素，获取到DOM节点

destory能够作一些内存泄漏的东西

24. vue router模式和懒加载

vue-router 默认 hash 模式 使用 URL 的 hash 来模拟一个完整的 URL，因而当 URL 改变时，页面不会从新加载。
若是不想要很丑的 hash，咱们能够用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须从新加载页面。
不过这种模式要玩好，还须要后台配置支持。由于咱们的应用是个单页客户端应用，若是后台没有正确的配置，当用户在浏览器直接访问 oursite.com/user/id 就会返回 404，这就很差看了。
因此呢，你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

懒加载：当打包构建应用时，Javascript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

25. 怎么管理vuex的state

用module

26. 服务端渲染的优势

1. 服务器端渲染当然耗CPU，但可使用服务器端缓存的方式解决，并非每一个用户访问都须要从新渲染一遍。并且服务器端渲染甚至能够潜在地增长服务器效率（这点在参考资料第二个里有提到，不过是纯英文的，我有空会翻译下）。

2. 服务器端和客户端能够共享某些代码，避免重复定义。这样可使结构更清晰，增长可维护性

3. 首次加载页面的速度加快。客户端渲染的一个缺点是，当用户第一次进入站点，此时浏览器中没有缓存，须要下载代码后在本地渲染，时间较长。而服务器渲染则是，用户在下载的已是渲染好的页面了，打开速度比本地渲染快。

4. SEO。服务器端渲染可让搜索引擎更容易读取页面的meta信息以及其余SEO相关信息，大大增长网站在搜索引擎中的可见度。

27. 若是有个图片特别大展现出来 如何优化；若是有大量图片想图库要展现如何处理

能够把图片转化base64的格式的非高清图片用来展现，等图片显示完了之后再经过js进行图片src替换；

先给每一个图片src附上通用loading图片 经过滚轮触发事件把想要的图片替换loading图片

28.前端性能优化

https://www.jianshu.com/p/ead7dab72cd6