收录在此的一定都是我看过的,并且认为还不错的。赠人玫瑰而已。
JS基础
-
冴羽大大的博客 - JavaScript深入系列、JavaScript专题系列、ES6系列
属于比较成系统的js进阶博客,建议细读。
原型和原型链图片记录
-
面试官:说说执行上下文吧
这个系列算是对冴羽大大文章的一次重构,更偏面试向,可以看看。 -
这一次,彻底弄懂 JavaScript 执行机制
有很多Event Loop相关文章,但是这篇是相关译文之中比较优秀的。 - 做完这48道题彻底弄懂JS继承(1.7w字含辛整理-返璞归真)
- js 深浅拷贝
- 函数柯里化
- 迭代器和生成器
# js基础题
# 变量提升、闭包等题
ES6相关
-
关于 ES6 中 Promise 的面试题
文章题型比较全,但是有一些题目的答案不一定准确。 -
BAT前端经典面试问题:史上最最最详细的手写Promise教程
手写promise的常规教程,值得多读几遍。 -
Promise 必知必会(十道题)
一些promise 的细节把握,建议配合event loop的微任务和宏任务一起食用。 -
因为
Promise.prototype.then
和
Promise.prototype.catch
方法返回promise 对象, 所以它们可以被链式调用。
# Symbol 及其 Polyfill
- ES6 Symbol之浅入解读
-
Symbol Polyfill 填坑之旅
指的一说的是 babel默认不自带symbol的polyfill,需要引入例如core.js之类的第三方库;
Vue
# 响应式、双向绑定
-
50行代码的MVVM,感受闭包的艺术
简单的demo之中感受Object.defineProperty劫持get/set的过程,以及为变量注册观察者来实现响应式的过程;可以使用Proxy来替换Object.defineProperty 来做延伸学习。 -
不好意思!耽误你的十分钟,让MVVM原理还给你
原理解释上更接近vue源码,启发computed和mounted如何实现。 - 面试官: 实现双向绑定Proxy比defineproperty优劣如何?
-
为什么Vue3.0不再使用defineProperty实现数据监听?
- Object.defineProperty 并非不能监控数组下标的变化,Vue2.x 中无法通过数组索引来实现响应式数据的自动更新是 Vue 本身的设计导致的,不是 defineProperty 的锅。
- Object.defineProperty 和 Proxy 本质差别是,defineProperty 只能对属性进行劫持,所以出现了需要递归遍历,新增属性需要手动 Observe 的问题。
- Proxy 作为新标准,浏览器厂商势必会对其进行持续优化,但它的兼容性也是块硬伤,并且目前还没有完整的 polyfill 方案。
- 深入剖析Vue源码 - 揭秘Vue的事件机制
# 生命周期
# 数据状态 - 这一部分每台看懂,需要找时间看明白
-
Vuex、Flux、Redux、Redux-saga、Dva、MobX
文章整体写的很好,从多个角度对比里现在流行的数据管理机制,但是对只比较熟悉vue的朋友不太友好,做了解项。着重看实现原理与比较。 - [译] 使用原生 JavaScript 构建状态管理系统
-
Vuex 源码解析
被问到了一个vuex源码如何注入的问题,有点束手无策;
# 组件通信
# 虚拟dom和diff算法
- 面试官: 你对虚拟DOM原理的理解?
- 让虚拟DOM和DOM-diff不再成为你的绊脚石
-
虚拟 DOM 到底是什么?(长文建议收藏)
前两篇主要侧重于对某个diff算法的理解; 相比来说第三篇更加学院派也更加全面。每次看diff算法都看不太明白,TODO。一般diff算法会单独拿出来说,比较react 和 vue 的演进过程,相比来说virutal-dom更容易懂一些。
# computed 和 watch
-
Vue.js的computed和watch是如何工作的?
借鉴:计算属性本质上是一个computed watch,侦听属性本质上是一个user watch。且它们其实都是vue对监听器的实现,只不过computed主要用于对同步数据的处理,watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。。能用computed的时候优先用computed,避免了多个数据影响其中某个数据时多次调用watch的尴尬情况。
css基础
本着css是硬桥硬马的功夫,还是多实践方能大成。
- position-sticky 奇淫巧技,目前这种的话还是考虑如何实现一个sticky-footer吧。
-
Retina屏的移动设备如何实现真正1px的线?
文章有点古老,又看了下m.taobao已经不是用修改viewport来实现的了。算是一个小tips - 回流与重绘:CSS性能让JavaScript变慢?
前端工程化
# Webpack
-
Webpack源码解读:理清编译主流程
简单总结一下 webpack 编译模块的基本流程:- 调用
webpack
函数接收config
配置信息,并初始化compiler
,在此期间会apply
所有 webpack 内置的插件; - 调用
compiler.run
进入模块编译阶段; - 每一次新的编译都会实例化一个
compilation
对象,记录本次编译的基本信息; - 进入
make
阶段,即触发compilation.hooks.make
钩子,从entry
为入口: a. 调用合适的loader
对模块源码预处理,转换为标准的JS模块; b. 调用第三方插件acorn
对标准JS模块进行分析,收集模块依赖项。同时也会继续递归每个依赖项,收集依赖项的依赖项信息,不断递归下去;最终会得到一颗依赖树; - 最后调用
compilation.seal
render 模块,整合各个依赖项,最后输出一个或多个chunk;
该作者的编译主流程以及后续文章读完让我对webpack有了新的认识,并且去学习了webpack源码,受益匪浅。
- 调用
# HMR
# babel
- babel 怎么把字符串解析成 AST,是怎么进行词法/语法分析的
-
babel 7 简单升级指南
了解babel7相比babel6都有哪些提升;
Node
-
Nodejs 进阶:解答 Cluster 模块的几个疑问
node中Cluster是如何开启多进程的?一个端口是否可以被多个进程监听? 可以
操作系统及网络
-
前端入门操作系统知识,这一篇就够啦!
这一篇我是没看完的,找时间回来补,希望不会打脸; -
什么是进程?什么是线程?两者的关系?
简单好记的理解 - JavaScript 单线程机制面试题
- 通杀 Event Loop 面试题
-
从 8 道面试题看浏览器渲染过程与性能优化
进程、线程 => 到浏览器的多进程,多线程 => 再到js执行的单线程,其中涉及到event loop,render tree, 渲染的过程中会涉及到的重绘与回流。能聊明白就算是ok; -
Cookie 相关问题
发生跨域xhr请求时,即使请求URL的域名和路径都满足 cookie 的 Domain和Path,默认情况下cookie也不会自动被添加到请求头部中。 - 把图片变为base64的利与弊
- Service Worker相关
- 浏览器缓存
- 浏览器缓存 - 2 了解下 Memory cache 和 Disk Cache 的区别
- 四种缓存机制 - Service Worker / Memory Cache / Disk Cache / Push Cache
- 一个 TCP 连接上面能发多少个 HTTP 请求
复习导图
-
2020年前端面试复习必读文章【超百篇文章/赠复习导图】
这篇文章很细致的归纳了前端复习思路,以导图的形式展现出来。 - 写给初中级前端的高级进阶指南
- 2万字 | 前端基础拾遗90问
面经
-
字节跳动面试官:请你实现一个大文件上传和断点续传
这道题对于没有了解过视频上传原理的同学还是比较有难度的,是其中可以演化为一下几种问法:- 实现一个大文件的上传切片;
- 手写一个基于XMLHttpRequest的request请求;
-
promise.all并发限制;
23行代码实现一个带并发数限制的fetch请求函数;
有一说一,第二个链接评论中的方式更为简单; - 用node接收多个文件进行拼接;
- 如何实现断点续传、暂停、进度条、秒传等等,是一个很综合的面试题;
-
实现cacheRequest(),相同资源ajax只发一次请求
考虑pending过程中如何处理cache的过程值得学习;
网友评论