前端面试偏门题总结

作者：Bougie
创建于：2018-05-26
更新于：2023-03-09

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

# 原生 js

// 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)
}

严格模式-MDN (opens new window)
实现一个 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)
      }
    }
  }
}

JS 中的柯里化(currying) (opens new window)

# ES6/7

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

Class
Set 和 Map
generator 和 async
callback 和 Promise
Object.defineProperty, Object.defineProperties
Object.setPrototypeOf, Object.getPrototypeOf
Object.getOwnPropertyDescriptors
Proxy 和 Reflect
Symbol

# 性能

# 安全

# 网络和浏览器

# 算法与模式

# html 和 css

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

# 框架

双向绑定，深入响应式原理，发布订阅模式，观察者模式
Vue.js 双向绑定的实现原理 (opens new window)
深入响应式原理 (opens new window)
发布-订阅者模式和事件监听器模式 (opens new window)
单向数据流，状态管理
单向数据流和 Vuex 简介 (opens new window)
Web 前端的状态管理（State Management） (opens new window)
路由的 history 和 hash 模式
前端路由的两种实现原理 (opens new window)
Vue 和 React 的区别
Vue 与 React 两个框架的区别和优势对比 (opens new window)
Vuex, Redux 和 Flux
Vuex，从入门到入门 (opens new window)
React 技术栈系列教程 (opens new window)
Flux 架构入门教程 (opens new window)
Vue 的 render 和 React.createElement
React.createClass，React.Component 和函数式申明组件的区别
React.createClass 和 extends Component 的区别 (opens new window)
React 中函数式声明组件 (opens new window)
Mixin
React 需使用 createClass 创建组件
高阶组件
深入浅出 React 高阶组件 (opens new window)
探索 Vue 高阶组件 (opens new window)
循环元素时为什么要加 key
React 中 key 的必要性与使用 (opens new window)

# 工具

sass 和 less
多看官方文档
webpack, gulp, grunt, rollup, browersify 的区别
Gulp / Grunt 是前端自动化的工具，旨在提供一个自动化的流程（省去了手动编译 less，stylus，sass 已经 babel 的转码，图片的压缩，代码的压缩复制等系列操作），传统的多页面应用非常适合用这个
browserify / webpack 提供的是一个前端模块化的方案，让我们可以将 commonJS 的模块方式应用与浏览器端
webpack 是 browserify 的加强版，不但实现了 browserify 模块化思想，还将图片，样式等也纳入了模块化中
rollup 打包代码量小，常用来进行类库的打包
babel 和 babel-polyfill 的作用
babel会将 ES6 语法转化为 ES5 语法，但是不会转义Promise和Object、Array等上的静态方法，这时候就需要babel-polyfill
ESLint 代码风格
Airbnb JavaScript Style Guide() { (opens new window)
Git 常用命令清单 (opens new window)
前端模块化的原理和意义
Javascript 模块化编程（一）：模块的写法 (opens new window)
前端模块化开发的价值 (opens new window)
关于 CommonJS AMD CMD UMD 规范的差异总结 (opens new window)
karma, jasmine 和 mocha
js 测试框架了解一下
开发人员看测试之 TDD 和 BDD (opens new window)

# 手机端开发

html5 移动端 Meta 设置 (opens new window)
移动端的 touch click 事件的理解+点透 (opens new window)
rem 布局
弹性滚动，惯性滚动
常用的库

# 前沿技术

< Node JS爬虫：爬取瀑布流网页高清图 React Native在用户网络故障时自动调取缓存 >

小伙伴们

Chegi's Space
张宁乐
联系方式

邮箱：bougie.liu@qq.com

留言：点击留言