前端面试偏门题总结

转载：  https://www.bougieblog.cn/article/Qk9VMTlHSUU.html

 

原生js

1. 基本数据类型
   String, Boolean, Number, Symbol, undefined, null
2. 4类 JavaScript 内存泄漏及如何避免
3. JavaScript中做用域和做用域链的简单理解（变量提高）
4. 词法做用域和动态做用域
5. JS this用法详解
6. JavaScript中的call、apply、bind深刻理解
7. js中call方法的实现
8. Event Loop及定时器和异步的原理
   JavaScript：完全理解同步、异步和事件循环(Event Loop)
   JavaScript 运行机制详解：再谈Event Loop
   JavaScript定时器原理分析
   Javascript异步编程的4种方法
9. 全面理解Javascript闭包和闭包的几种写法及用途
10. 原型和继承链
    最详尽的 JS 原型与原型链终极详解，没有「多是」。（一）
    最详尽的 JS 原型与原型链终极详解，没有「多是」。（二）
    最详尽的 JS 原型与原型链终极详解，没有「多是」。（三）
    Javascript面向对象编程（二）：构造函数的继承
11. 深刻剖析 JavaScript 的深复制

12. preventDefault()、stopPropagation()、return false 之间的区别

13. 原生ajax写法
    摘自youmightnotneedjquery

// post var request = new XMLHttpRequest(); request.open('POST', '/my/url', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.send(data); // get var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var resp = request.responseText; } else { // We reached our target server, but it returned an error } }; request.onerror = function() { // There was a connection error of some sort }; request.send(); // 稍微封装一下 function ajax({ url, method, headers, data, success, error }) { headers = headers || 'application/x-www-form-urlencoded; charset=UTF-8' let request = new XMLHttpRequest() request.open(method, url, true) request.setRequestHeader('Content-type', headers) request.onload = function(progressEvent) { let response = progressEvent.currentTarget let {status, statusText, responseText, responseUrl} = response if(status > 199 && status < 400) { if(success) success(responseText) } else { if(error) error(statusText) } } request.onerror = function(error) { console.error(error) } request.send(data) } 

13. 严格模式-MDN

14. 实现一个Event Bus
    如下是简单模仿vue js的

class EventBus{ constructor() { this.eventList = new Map() } $emit(evName, ...args) { let fn = this.eventList.get(evName) if(!fn) { console.error(`'${evName}' is undefined`) return } this.eventList.get(evName).apply(this, args) } $on(evName, fn) { if(this.eventList.get(evName)) { console.error(`duplicated event name : '${evName}'`) return } this.eventList.set(evName, fn) return { remove: () => { this.eventList.delete(evName) } } } } 

15. JS中的柯里化(currying)

ES6/7

这个所有看阮老师的就好了
ECMAScript 6 入门

1. Class
2. Set和Map
3. generator和async
4. callback和Promise
5. Object.defineProperty, Object.defineProperties
6. Object.setPrototypeOf, Object.getPrototypeOf
7. Object.getOwnPropertyDescriptors
8. Proxy和Reflect
9. Symbol

性能

1. 前端工程师须要明白的「浏览器渲染」
2. 浏览器渲染原理及流程
3. 2017前端性能优化清单

安全

1. 前端安全之CSRF攻击
2. 对于跨站脚本攻击（XSS攻击）的理解和总结
3. sql注入

网络和浏览器

1. 前端常见跨域解决方案（全）
2. 浏览器中输入URL到返回页面的全过程
3. get、put、post、delete含义与区别
4. Restful与webService区别
5. HTTP协议的响应头,请求头详解
6. COOKIE和SESSION有什么区别？
7. Token原理以及应用
8. TCP 协议简介
9. 互联网协议入门（一）
10. 互联网协议入门（二）
11. HTTP与HTTPS的区别
12. HTTPS的七个误解（译文）
13. WebSocket 教程
14. 使用Nginx实现反向代理
15. 【Nginx】实现负载均衡的几种方式
16. http2.0
    关键词：多路复用 HTTP/2.0 相比1.0有哪些重大改进？
17. 浏览器缓存机制详解
18. 浏览器渲染原理及流程
19. 脚本引用中的DEFER和ASYNC的用法和区别
20. 兼容性请看can I use
21. IE6, 7, 8, 9, 10的兼容性问题
22. 兼容IE8浏览器的技术选型

算法与模式

1. JavaScript 算法与数据结构
2. 深度剖析：如何实现一个 Virtual DOM 算法
3. 常见的6种JavaScript设计模式
4. MVC，MVP 和 MVVM 的图示
5. 编程思想的理解（POP,OOP,SOA,AOP）

html和css

1. DOCTYPE的做用，取值与区别
2. H5新特性汇总
3. data-*属性的做用
   自定义属性，能够经过el.getAttribute('data-custom')取值，el.dataSet.custom取值和赋值。
4. Flex 布局教程：语法篇
5. Flex 布局教程：实例篇
6. grid栅格布局
7. 自适应和响应式布局
   自适应是随着浏览器的大小变化而变化，响应式是响应屏幕尺寸，须要经过CSS来实现。 自适应网页设计
8. CSS 单位
9. CSS display 属性
10. css画三角形
    利用border实现
11. 实用的 CSS — 贝塞尔曲线(cubic-bezier)
12. CSS3 transform 属性
13. requestAnimationFrame，Web中写动画的另外一种选择
14. 深刻理解定时器系列第二篇——被誉为神器的requestAnimationFrame
15. css动画和js动画
    掌握keyframs, transition。
    原生JavaScript中动画与特效的实现原理
16. 如何理解HTML结构的语义化？

框架

1. 双向绑定，深刻响应式原理，发布订阅模式，观察者模式
   Vue.js双向绑定的实现原理
   深刻响应式原理
   发布-订阅者模式和事件监听器模式

2. 单向数据流，状态管理
   单向数据流 和 Vuex 简介
   Web前端的状态管理（State Management）

3. 路由的history和hash模式
   前端路由的两种实现原理

4. Vue和React的区别
   Vue与React两个框架的区别和优点对比

5. Vuex, Redux和Flux
   Vuex，从入门到入门
   React 技术栈系列教程
   Flux 架构入门教程

6. Vue的render和React.createElement

7. React.createClass，React.Component和函数式申明组件的区别
   React.createClass和extends Component的区别
   React中函数式声明组件

8. Mixin
   React需使用createClass建立组件

9. 高阶组件
   深刻浅出React高阶组件
   探索Vue高阶组件

10. 循环元素时为何要加key
    React中key的必要性与使用

工具

1. sass和less
   多看官方文档

2. webpack, gulp, grunt, rollup, browersify的区别
   Gulp / Grunt 是前端自动化的工具，旨在提供一个自动化的流程（省去了手动编译less，stylus，sass已经babel的转码，图片的压缩，代码的压缩复制等系列操做），传统的多页面应用很是适合用这个
   browserify / webpack 提供的是一个前端模块化的方案，让咱们能够将commonJS的模块方式应用与浏览器端
   webpack 是 browserify 的增强版，不但实现了browserify模块化思想，还将图片，样式等也归入了模块化中
   rollup 打包代码量小，经常使用来进行类库的打包

3. babel和babel-polyfill的做用
   babel会将ES6语法转化为ES5语法，可是不会转义Promise和Object、Array等上的静态方法，这时候就须要babel-polyfill

4. ESLint代码风格
   Airbnb JavaScript Style Guide() {

5. Git经常使用命令清单

6. 前端模块化的原理和意义
   Javascript模块化编程（一）：模块的写法
   前端模块化开发的价值

7. 关于 CommonJS AMD CMD UMD 规范的差别总结

8. karma, jasmine和mocha
   js测试框架了解一下
   开发人员看测试之TDD和BDD

手机端开发

1. html5移动端Meta设置

2. 移动端的touch click事件的理解+点透

3. rem布局

4. 弹性滚动，惯性滚动

5. 经常使用的库

前沿技术

1. webworker使用介绍，js中开启多线程

2. 讲讲PWA