前端面试偏门题总结

作者: Bougie 创建于: 2018-05-26 | 面试

前端面试偏门题总结

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

原生 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)
}
  1. 严格模式-MDN

  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)

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

上次更新: 2019-5-4 13:19:36