前端面试偏门题总结

转载：  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)
}

  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语法，但是不会转义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

posted @ 2018-08-15 11:07  FEDeveloper  阅读(639)  评论(0)  编辑  收藏  举报