前端学习文章总结

收录在此的一定都是我看过的，并且认为还不错的。赠人玫瑰而已。 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实现数据监听？ Object.defineProperty 并非不能监控数组下标的变化，Vue2.x 中无法通过数组索引来实现响应式数据的自动更新是 Vue 本身的设计导致的，不是 defineProperty 的锅。 Object.defineProperty 和 Proxy 本质差别是，defineProperty 只能对属性进行劫持，所以出现了需要递归遍历，新增属性需要手动 Observe 的问题。 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 编译模块的基本流程： 调用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 轻松理解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的原理

本文章由javascript技术分享原创和收集