前端面试偏门题总结

V3W9hR.jpg

总结的一些比较偏门和深入的前端面试题,长期更新。偏门题就是不常见的题哈哈。

# 原生 js

  1. 基本数据类型
    String, Boolean, Number, Symbol, undefined, null

  2. 4 类 JavaScript 内存泄漏及如何避免(opens new window)

  3. JavaScript 中作用域和作用域链的简单理解(变量提升)(opens new window)

  4. 词法作用域和动态作用域(opens new window)

  5. JS this 用法详解(opens new window)

  6. JavaScript 中的 call、apply、bind 深入理解(opens new window)

  7. js 中 call 方法的实现(opens new window)

  8. Event Loop 及定时器和异步的原理
    JavaScript:彻底理解同步、异步和事件循环(Event Loop)(opens new window)
    JavaScript 运行机制详解:再谈 Event Loop(opens new window)
    JavaScript 定时器原理分析(opens new window)
    Javascript 异步编程的 4 种方法(opens new window)

  9. 全面理解 Javascript 闭包和闭包的几种写法及用途(opens new window)

  10. 原型和继承链
    最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)(opens new window)
    最详尽的 JS 原型与原型链终极详解,没有「可能是」。(二)(opens new window)
    最详尽的 JS 原型与原型链终极详解,没有「可能是」。(三)(opens new window)
    Javascript 面向对象编程(二):构造函数的继承(opens new window)

  11. 深入剖析 JavaScript 的深复制(opens new window)

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

  13. 原生 ajax 写法
    摘自youmightnotneedjquery(opens new window)

// 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)
}
  1. 严格模式-MDN(opens new window)

  2. 实现一个 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)
      }
    }
  }
}
  1. JS 中的柯里化(currying)(opens new window)

# ES6/7

这个全部看阮老师的就行了
ECMAScript 6 入门(opens new window)

  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. 前端工程师需要明白的「浏览器渲染」(opens new window)
  2. 浏览器渲染原理及流程(opens new window)
  3. 2017 前端性能优化清单(opens new window)

# 安全

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

# 网络和浏览器

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

# 算法与模式

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

# html 和 css

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

# 框架

  1. 双向绑定,深入响应式原理,发布订阅模式,观察者模式
    Vue.js 双向绑定的实现原理(opens new window)
    深入响应式原理(opens new window)
    发布-订阅者模式和事件监听器模式(opens new window)

  2. 单向数据流,状态管理
    单向数据流 和 Vuex 简介(opens new window)
    Web 前端的状态管理(State Management)(opens new window)

  3. 路由的 history 和 hash 模式
    前端路由的两种实现原理(opens new window)

  4. Vue 和 React 的区别
    Vue 与 React 两个框架的区别和优势对比(opens new window)

  5. Vuex, Redux 和 Flux
    Vuex,从入门到入门(opens new window)
    React 技术栈系列教程(opens new window)
    Flux 架构入门教程(opens new window)

  6. Vue 的 render 和 React.createElement

  7. React.createClass,React.Component 和函数式申明组件的区别
    React.createClass 和 extends Component 的区别(opens new window)
    React 中函数式声明组件(opens new window)

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

  9. 高阶组件
    深入浅出 React 高阶组件(opens new window)
    探索 Vue 高阶组件(opens new window)

  10. 循环元素时为什么要加 key
    React 中 key 的必要性与使用(opens new window)

# 工具

  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 语法,但是不会转义PromiseObjectArray等上的静态方法,这时候就需要babel-polyfill

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

  5. Git 常用命令清单(opens new window)

  6. 前端模块化的原理和意义
    Javascript 模块化编程(一):模块的写法(opens new window)
    前端模块化开发的价值(opens new window)

  7. 关于 CommonJS AMD CMD UMD 规范的差异总结(opens new window)

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

# 手机端开发

  1. html5 移动端 Meta 设置(opens new window)

  2. 移动端的 touch click 事件的理解+点透(opens new window)

  3. rem 布局

  4. 弹性滚动,惯性滚动

  5. 常用的库

# 前沿技术

  1. webworker 使用介绍,js 中开启多线程(opens new window)

  2. 讲讲 PWA(opens new window)