gnosis23 commented 5 years ago

一些 JavaScript 面试题

基础

介绍JS数据类型，基本数据类型和引用数据类型的区别
Array是Object类型吗
== 和 ===的区别，什么情况下用相等==
介绍纯函数
JS的继承方法

Object

介绍 Object.defineProperty 方法，什么时候需要用到
for..in 和 Object.keys 的区别
两个对象如何比较
深拷贝和浅拷贝
loadsh深拷贝实现原理
new 是怎么实现的

原型

什么是的原型
prototype 和 __proto__ 区别
介绍原型链
写一个原型链继承的例子
使用原型最大的好处
constructor 是什么
instanceof 原理

注：prototype 是函数的属性。

execution process

变量作用域链
JS怎么实现异步
异步整个执行周期
JS为什么要区分微任务和宏任务
JS执行过程中分为哪些阶段
setInterval需要注意的点
setTimeout(1)和setTimeout(2)之间的区别
介绍宏任务和微任务
介绍各种异步方案

Promise

Promise有几个状态 (pending, resolved, rejected)
介绍下Promise的用途和性质，优缺点
Promise有没有解决异步的问题（promise链是真正强大的地方）
Promise 和 async/await 和 callback的区别
Promise 和 Async 处理失败的时候有什么区别
Promise 构造函数是同步还是异步执行，then 呢（同步，异步）
Promise 和 setTimeout 的区别（微任务和宏任务）
promise如何实现 then 处理
介绍下 Promise 内部实现
Promise.all 实现原理
如何设计 Promise.all()

注：

Promise/A+ 规范

async

对 async 、await 的理解，内部原理
使用 async 会注意哪些东西
async 里面有多个 await 请求，可以怎么优化

注：

async 函数

this

介绍this各种情况 (member expression, call, apply, bind, 箭头函数)
介绍箭头函数的this（函数词法环境里没this，要到外层作用域里找）
bind、call、apply的区别（call和apply是参数有区别，bind后返回一个特殊的函数对象）
怎么实现this对象的深拷贝

闭包

介绍闭包（函数+环境）
闭包的使用场景（实际上是个函数都是闭包，问题应该特指封装局部变量的函数）
闭包的核心是什么（函数的实例）
使用闭包特权函数的使用场景

mdn closure

ES6

ES6中的map和原生的对象有什么区别
取数组的最大值（ES5、ES6）
ES5和ES6有什么区别
介绍ES6的功能
ES6使用的语法
let、const以及var的区别
介绍class和ES5的类以及区别
介绍箭头函数和普通函数的区别（箭头函数的词法环境是不完整的，没有this、super、new.target，而且没有arguments，都是用外层环境里的）

GC

栈和堆的区别
垃圾回收时栈和堆的区别
栈和堆具体怎么存储
堆和栈的区别
JS里垃圾回收机制是什么，常用的是哪种，怎么处理的
还有哪些地方会内存泄露

数组

[1, 2, 3, 4, 5]变成[1, 2, 3, a, b, 5]
some、every、find、filter、map、forEach有什么区别
数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少
如何判断一个变量是不是数组
类数组和数组的区别
手写数组去重函数
手写数组扁平化函数

算法

介绍快速排序
算法：前K个最大的元素
介绍排序算法和快排原理

其他

柯里化函数两端的参数具体是什么东西
介绍暂时性死区
防抖和节流的区别
Emit事件怎么发，需要引入什么
如何找0-5的随机数，95-99呢
var a = {name: "前端开发"}; var b = a; a = null那么b输出什么
var a = {b: 1}存放在哪里
var a = {b: {c: 1}}存放在哪里
发布-订阅和观察者模式的区别
事件委托

gnosis23 commented 5 years ago

浏览器工作原理

构建 DOM 树》构建 CSS 树》计算结点 style，布局树》 Layout 》分层》渲染

渲染

回流和重绘

使用 Chrome 开发者工具优化回流

gnosis23 commented 5 years ago

React.js Related

React.js

React life cycle 及自己的理解
React组件中怎么做事件代理
React组件事件代理的原理
React怎么做数据的检查和变化
介绍react优化
React中Dom结构发生变化后内部经历了哪些变化
React挂载的时候有3个组件，textComponent、composeComponent、domComponent，区别和关
react异步渲染的概念,介绍Time Slicing 和 Suspense
react中的key的作用
React子父组件之间如何传值
介绍下React高阶组件，和普通组件有什么区别
一个对象数组，每个子对象包含一个id和name，React如何渲染出全部的name
对React看法，有没有遇到一些坑
介绍下React的Filber架构
React使用过的一些组件
React中setState后发生了什么
react设计思路
react常见的通信方式
React数据流
props和state的区别
介绍react context
哪些方法会触发react重新渲染

Redux

介绍 Redux 主要解决什么问题（前端应用状态管理混乱，即不知道哪里改的；Redux attempts to make state mutations predictable）
介绍 Redux 的设计思想（1. Single source of truth；2. State is read-only; 3. Changes are made with pure functions）
介绍 Redux 工作流程（1. store.dispatch(action); 2. The Redux store calls the reducer function you gave it; 3. The root reducer may combine the output of multiple reducers into a single state tree; 4. The Redux store saves the complete state tree returned by the root reducer）
Redux 在状态管理方面解决了React本身不能解决的问题（???）
Redux 状态管理器和变量挂载到window中有什么区别（限制：不能直接修改 state，要通过 dispatch 方法）
Redux 数据回溯设计思路
Redux 如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理
Redux 怎么实现属性传递，介绍下原理
Redux 中间件是什么东西，接受几个参数（两端的柯里化函数）
使用过的 Redux 中间件
Redux 请求中间件如何处理并发
Redux 中异步的请求怎么处理
其他状态管理方案 (mobx)

React Router

如何配置React-Router
react-router怎么实现路由切换
react-router里的标签和标签有什么区别

gnosis23 commented 5 years ago

Webpack

webpack介绍
使用过webpack里面哪些plugin和loader
webpack如何配sass，需要配哪些loader
webpack里面的插件是怎么实现的
使用import时，webpack对node_modules里的依赖会做什么
webpack整个生命周期，loader和plugin有什么区别
webpack打包的整个过程

gnosis23 commented 5 years ago

CSS

高频：

[ ] 移动端适配1px的问题
[x] 介绍flex布局及常用属性
[ ] 其他css方式设置垂直居中
[ ] 居中为什么要使用transform（为什么不使用marginLeft/Top）
[ ] 介绍css3中position:sticky
[x] 清除浮动
[x] 定位问题（绝对定位、相对定位等）
[x] CSS选择器有哪些
[ ] 如何实现高度自适应

gnosis23 commented 5 years ago

安全相关

gnosis23 commented 5 years ago

网路协议

HTTP

介绍下 HTTP 协议
action 及其区别
content/type
HTTP2

TLS

WebSocket

gnosis23 commented 5 years ago

缓存相关

Service Worker

HTTP 缓存策略

408483-20160525182943272-204994049

强缓存 / 本地缓存

表示在缓存期间不需要再次请求。主要可分为两种 HTTP Header：Expires 和 Cache-Control。

① Expires: HTTP/1，设置一个如过期时间的字符串 ② Cache-Control: HTTP/1.1，可以设置如下值：

public 表示响应可以被客户端和代理服务器缓存
private 表示响应只可以被客户端缓存
max-age=30 表示缓存30秒后就过期，需要重新请求
s-maxage=30 覆盖max-age，作用一样，只在代理服务器中生效
no-store 不缓存
no-cache 资源被缓存，但是立即失效，下次会发起请求验证资源是否过期
max-stale=30 30秒内，即使缓存过期，也使用该缓存
min-fresh=30 希望30秒内获取最新的响应

协商缓存

如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。ETag 类似于文件指纹

实战

永久缓存：唯一名称和一个暴大的 cache-control: max-age=31536000

gnosis23 commented 5 years ago

性能调优

图片优化

如是否需要图片、图片格式、缓存策略、内联图片等等

参考

gnosis23 commented 5 years ago

疑难杂症

内存泄漏

使用 Chrome 开发者工具定位前端内存泄漏

gnosis23 commented 5 years ago

HTML

html语义化的理解
<b> 和 <strong> 的区别
react-router 里的 <Link> 标签和 <a> 标签有什么区别
<a> 标签默认事件禁掉之后做了什么才实现了跳转

gnosis23 / hello-world-blog

前端考点归纳 #33

一些 JavaScript 面试题

基础

Object

原型

execution process

Promise

async

this

闭包

ES6

GC

数组

算法

其他

浏览器工作原理

渲染

React.js Related

React.js

Redux

React Router

Webpack

CSS

安全相关

网路协议

HTTP

TLS

WebSocket

缓存相关

HTTP 缓存策略

强缓存 / 本地缓存

协商缓存

实战

性能调优

图片优化

参考

疑难杂症

内存泄漏

HTML