personal blog about Front-End

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下 ————《老子》

---

推广：近百高频知识点，十万余字，最强面试图谱开源(PS：个人承担了该项目的部分翻译工作😁)

---

Framework

• Next.js 生命周期理解 -> 流程图

• 理解后端渲染、CSR(客户端渲染)、SSR（服务端渲染）的核心原理及区别

• Build a react+react-router ssr App from the ground up

• SPA路由原理+build your own react router v4

• React Native 性能优化总结（持续更新。。。）

• React+RN开发过程中的一些问题总结（持续更新。。。）

• React-Native 从零搭建App(长文)

• React源码分析：组件实现（基于版本16）

• React源码分析：setState

• Redux源码分析

• Vue 源码阅读【1】—— Vue本质

• Vue 源码阅读【2】—— 数据驱动

• Vue 响应式原理

• 【译】VueJS 最佳实践

Javascript

• ECMAScript 2016 2017 2018 新特性

• 根据Promise/A+规范实现 Promise

• 异步（一）：Promise深入理解与实例分析

• 异步（二）：Generator（生成器）深入理解

• 异步（三）：Async/await

• JS文件：读取与拖拽、转换bsae64、预览、FormData上传、七牛上传、分割文件

• JS事件：捕获与冒泡、事件处理程序、事件对象、跨浏览器、事件委托

• 深入原型和原型链：彻底捋清prototype和__proto__

• 深入继承：一步步捋清五种继承方式

• 彻底捋清楚 instanceof

• 彻底捋清楚 new 的实现

• 模拟实现call、apply、bind

• Object.defineProperty() 和简易双向绑定原理

• 变量对象（真正理解何为提升）

• this

• You don’t konw JavaScript => 闭包

• 深入理解JS的类型、值、类型转换

• 同一个函数形成的多个闭包的值都是相互独立的

• 函数的内部属性和方法（arguments、callee）

• 执行上下文

• JavaScript的参数传递(引用类型)

• map、forEach、filter 、reduce

• 一道综合面试题（原型、this、作用域、构造函数、运算符优先级）

• ES6中export及export default、Node中exports和module.exports的区别

Javascript Design Pattern

• 随手实现一个订阅-发布模式

• 代理模式+ ES6 Proxy

• 装饰者模式[设计模式]+ES7 Decorator

• 单例模式

Algorithm

• 《学习JavaScript数据结构与算法》读书笔记

• Javascript基础算法——排序与搜索

Network、Browser、Web performance、Business Scenario

• 浏览器工作原理：从输入URL到页面加载完成

• Web Performance Optimizations

• 【性能优化】DNS预解析、域名发散、域名收敛

• 【性能优化】优化关键渲染路径，加速浏览器首次渲染

• 【性能优化】手把手实现图片懒加载+Vue封装

• 【性能优化】图片优化——总览

• 事件循环机制 Event-Loop及其延伸

• 深入了解HTTP/2的前世今生以及Web性能优化总结

• GET和POST：辩证看100 continue，以及最根本区别

• 缓存（一）——缓存总览：从性能优化的角度看缓存

• 缓存（二）——浏览器缓存机制：强缓存、协商缓存

• 缓存（三）——数据存储：cookie、Storage、indexedDB

• 缓存（四）——离线应用缓存：App Cache => Manifest

• cookie实践（从搭建服务器到cookie操作全流程)

• TCP概览

• TCP与UDP对比

• CORS 简单请求+预检请求（理解HTTP跨域原理）

• 前端跨域常用方法

• canvas+vue实现60帧每秒的抢金币动画（类天猫红包雨）

• 前端曝光数据埋点——IntersectionObserver+vue指令

HTML、CSS

• BFC（块级格式上下文）

• 三栏布局-七种实现

Engineering

• React+Eslint+Prettier+git hook -> make your life easier

• Vim 基础操作

• Docker基础认识

• Docker 运行Node.js应用

• mongoDB基础

• 快速上手node+express+MongoDB

• Express + create-react-app 快速构建前后端开发环境