前端学习文章总结

收录在此的一定都是我看过的，并且认为还不错的。赠人玫瑰而已。

2022-03
再更此文，学无止境

TS相关

• 不一样的 TypeScript 入门手册

---

JS基础

• 冴羽大大的博客 - JavaScript深入系列、JavaScript专题系列、ES6系列
  属于比较成系统的js进阶博客，建议细读。
  
  原型和原型链图片记录

• 面试官：说说执行上下文吧
  这个系列算是对冴羽大大文章的一次重构，更偏面试向，可以看看。
• 这一次，彻底弄懂 JavaScript 执行机制
  有很多Event Loop相关文章，但是这篇是相关译文之中比较优秀的。
• 做完这48道题彻底弄懂JS继承(1.7w字含辛整理-返璞归真)
• js 深浅拷贝
• 函数柯里化
• 迭代器和生成器

# js基础题

• 函数声明和函数表达式有什么区别与联系，应该怎样选择和使用？

# 变量提升、闭包等题

• let深入理解---let存在变量提升吗？

---

ES6相关

• 关于 ES6 中 Promise 的面试题
  文章题型比较全，但是有一些题目的答案不一定准确。

• BAT前端经典面试问题：史上最最最详细的手写Promise教程
  手写promise的常规教程，值得多读几遍。

• Promise 必知必会（十道题）
  一些promise 的细节把握，建议配合event loop的微任务和宏任务一起食用。

• 因为 Promise.prototype.then和Promise.prototype.catch 方法返回promise 对象， 所以它们可以被链式调用。

• 箭头函数和普通函数的区别

• ESM CommonJs

# 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实现数据监听？
  1. Object.defineProperty 并非不能监控数组下标的变化，Vue2.x 中无法通过数组索引来实现响应式数据的自动更新是 Vue 本身的设计导致的，不是 defineProperty 的锅。
  2. Object.defineProperty 和 Proxy 本质差别是，defineProperty 只能对属性进行劫持，所以出现了需要递归遍历，新增属性需要手动 Observe 的问题。
  3. Proxy 作为新标准，浏览器厂商势必会对其进行持续优化，但它的兼容性也是块硬伤，并且目前还没有完整的 polyfill 方案。
• 深入剖析Vue源码 - 揭秘Vue的事件机制

# 生命周期

• Vue 生命周期源码剖析
• 你真的理解$nextTick么

# 数据状态 - 这一部分每台看懂，需要找时间看明白

• Vuex、Flux、Redux、Redux-saga、Dva、MobX
  文章整体写的很好，从多个角度对比里现在流行的数据管理机制，但是对只比较熟悉vue的朋友不太友好，做了解项。着重看实现原理与比较。
• [译] 使用原生 JavaScript 构建状态管理系统
• Vuex 源码解析
  被问到了一个vuex源码如何注入的问题，有点束手无策；

# 组件通信

• vue中8种组件通信方式, 值得收藏!

# 虚拟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 编译模块的基本流程：

  1. 调用webpack函数接收config配置信息，并初始化compiler，在此期间会apply所有 webpack 内置的插件;
  2. 调用compiler.run进入模块编译阶段；
  3. 每一次新的编译都会实例化一个compilation对象，记录本次编译的基本信息；
  4. 进入make阶段，即触发compilation.hooks.make钩子，从entry为入口： a. 调用合适的loader对模块源码预处理，转换为标准的JS模块； b. 调用第三方插件acorn对标准JS模块进行分析，收集模块依赖项。同时也会继续递归每个依赖项，收集依赖项的依赖项信息，不断递归下去；最终会得到一颗依赖树；
  5. 最后调用compilation.seal render 模块，整合各个依赖项，最后输出一个或多个chunk；
  以上为简单的时序图

  该作者的编译主流程以及后续文章读完让我对webpack有了新的认识，并且去学习了webpack源码，受益匪浅。

# HMR

• 轻松理解webpack热更新原理
• Webpack HMR 原理解析
• 第 70 题： 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面

# 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的过程值得学习；

• JSBridge的原理