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

这段时间面试了一些公司然后我也整理一些面试题目供给大家参考一下&＃xff0c;一些基本的题目就不分享出来了&＃xff0c;还有一些手写的题目&＃xff0c;另加一些我附加链接防止我表达的不够清晰详细。 

下一篇 前端面试题&＃xff08;二&＃xff09;

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

这个是老生常谈的题目了

1&＃xff09;BFC就是页面上的一个隔离的独立容器&＃xff0c;容器里面的子元素不会影响到外面的元素。反之也如此 2&＃xff09; 内部的Box会在垂直方向&＃xff0c;一个接一个地放置 3&＃xff09;属于同一个BFC的两个相邻Box的 margin会发生重叠  4&＃xff09;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布局

各种概念和属性能想到大家都可以说一下&＃xff0c;也扯到了Grid布局&＃xff0c;基本这个也没啥问题。

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

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

平时我在开发中主要使用的是 Less&＃xff0c;所以可能对 Sass 和 Stylus 的熟悉程度稍差一些

可以 基本语法 嵌套语法 变量 &＃64;import 混入 继承 函数 逻辑控制 这些来说说 同时我给大家分享一篇文章 再谈 CSS 预处理器

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

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

5. 谈谈你们用的ui库和一些css类库

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

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

apply()与call()作用没有区别&＃xff0c;用法与call()方法稍有区别&＃xff0c;就是call()的第二个参数(调用函数使用的参数)&＃xff0c;是一个一个传入的

bind()的作用其实与call()以及apply()都是一样的&＃xff0c;都是为了改变函数运行时的上下文&＃xff0c;bind()与后面两者的区别是&＃xff0c;call()和apply()在调用函数之后会立即执行&＃xff0c;而bind()方法调用并改变函数运行时的上下文的之后&＃xff0c;返回一个新的函数&＃xff0c;在我们需要调用的地方去调用他。

如果大家能够理解这个题目那么这三个用法也会了解很清晰了 cat.call(dog, a, b) &＃61; cat.apply(dog, [a, b]) &＃61; (cat.bind(dog, a, b))() &＃61; dog.cat(a, b)

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

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

箭头函数内部的this是词法作用域应该继承的是父执行上下文里面的this&＃xff0c;切忌是父执行上下文 这样就很多箭头函数中的指向不明确就迎刃而解了。注意&＃xff1a;简单对象&＃xff08;非函数&＃xff09;是没有执行上下文的 还有箭头函数call apply等方法会失效 也不能使用 let that &＃61; this 的hack写法

8. es6一些新的语法 

大家可以看一看阮一峰老师的 ECMAScript 6 入门 随便抽几点来说

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

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

const a1 &＃61; [1, 2]; const a2 &＃61; [...a1]; const [...a2] &＃61; a1;

10. 如何用es6进行数组去重&＃xff0c;然后用es5实现的几种方法 谈谈你的思路

es6 数组 set可以用来实现数组去重

es5 里面可以用对象key值唯一的方式来实现 和 数组indexof方式 

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

promise&＃xff0c; async await &＃xff0c; generator。

es6之前通过回调函数来实现的

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

function get(){ var req &＃61; createXMLHTTPRequest(); if(req){ req.open("GET", url , true); req.onreadystatechange &＃61; function(){ if(req.readyState &＃61;&＃61; 4){ if(req.status &＃61;&＃61; 200){ alert("success"); }else{ alert("error"); } } } req.send(null); }
}

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

HTTP POST GET 本质区别详解

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

HTTP响应也由三个部分组成&＃xff0c;分别是&＃xff1a;状态行、消息报头、响应正文 在响应中唯一真正的区别在于第一行中用状态信息代替了请求信息。状态行通过提供一个状态码来说明所请求的资源情况。

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

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

14. websocket理解 websocket产生原因 了解http2嘛

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

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

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

Access-Control-Allow-Credentials设置为true

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

从输入URL到页面加载的过程&＃xff1f;如何由一道题完善自己的前端知识体系&＃xff01;内容有很多大家可以按到自己的理解说一下其实没必要那么详细

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

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

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

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

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

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

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

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

function fibonacci(n, n1, n2) {if(n <&＃61; 1) {return n2}return fibonacci(n - 1, n2, n1 &＃43; n2)
}

21. 用proxy实现string repeat方法

22. vue数据双向绑定 

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

1.实现一个监听器Observer&＃xff0c;用来劫持并监听所有属性&＃xff0c;如果有变动的&＃xff0c;就通知订阅者。

2.实现一个订阅者Watcher&＃xff0c;可以收到属性的变化通知并执行相应的函数&＃xff0c;从而更新视图。

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

23. vue的生命周期 

beforecreated create  mounted updated destory等

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

mounted 挂载元素&＃xff0c;获取到DOM节点

destory可以做一些内存泄漏的东西

24. vue router模式和懒加载

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

懒加载&＃xff1a;当打包构建应用时&＃xff0c;Javascript 包会变得非常大&＃xff0c;影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块&＃xff0c;然后当路由被访问的时候才加载对应组件&＃xff0c;这样就更加高效了。

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

25. 怎么管理vuex的state

用module

26. 服务端渲染的优点

28.前端性能优化

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