前端面试偏门题总结

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

V3W9hR.jpg

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

# 原生 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-11-1 3:39:35 PM