personal blog

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

Browser

• 【浏览器原理-01】宏观下的浏览器
• 【浏览器原理-02】浏览器中的JS执行机制
• 【浏览器原理-03】V8 工作原理
• 【浏览器原理-04】页面循环系统

Javascript

• 【JS进阶】JS执行机制与核心概念(执行上下文、变量提升、作用域链、this)
• 【JS进阶】垃圾回收、内存优化
• 【异步-01】：Promise深入理解与实例分析
• 【异步-02】：Generator（生成器）深入理解
• 【异步-03】：Async/await
• 【设计模式】随手实现一个订阅-发布模式
• 【设计模式】代理模式+ES6 Proxy
• 【设计模式】装饰者模式+ES7 Decorator
• 【设计模式】单例模式
• 【JS基础】深入原型和原型链：彻底捋清prototype和__proto__
• 【JS基础】深入继承：一步步捋清五种继承方式
• 【JS基础】You don’t know JavaScript => 闭包
• 【JS基础】深入理解JS的类型、值、类型转换
• 【JS基础】从一道题说起（原型、this、作用域、构造函数、运算符优先级）
• 【JS基础】事件：捕获与冒泡、事件处理程序、事件对象、跨浏览器、事件委托
• 【JS基础】文件：读取/拖拽/预览、转换/上传/分割
• 【JS基础】模块化：CommonJS、AMD、CMD、UMD、ES6 Module
• 【JS API】ES6中export及export default、Node中exports和module.exports的区别
• 【JS API】map、forEach、filter 、reduce
• 【JS API】Object.defineProperty() 和简易双向绑定原理
• 【JS API】ECMAScript 2016 2017 2018 新特性
• 【handwriting】彻底捋清楚 instanceof
• 【handwriting】彻底捋清楚 new 的实现
• 【handwriting】模拟实现call、apply、bind
• 【handwriting】根据Promise/A+规范实现 Promise

Network、Web performance、Business Scenario

• 浏览器工作原理：从输入URL到页面加载完成
• 事件循环机制 Event-Loop及其延伸
• 【性能优化】Web Performance Optimizations
• 【性能优化】DNS预解析、域名发散、域名收敛
• 【性能优化】优化关键渲染路径，加速浏览器首次渲染
• 【性能优化】手把手实现图片懒加载
• 【性能优化】图片优化——总览
• 【缓存-01】——缓存总览：从性能优化的角度看缓存
• 【缓存-02】——浏览器缓存机制：强缓存、协商缓存
• 【缓存-03】——数据存储：cookie、Storage、indexedDB
• 【缓存-04】——离线应用缓存：App Cache => Manifest
• 【网络】计算机网络总结：应用层、传输层、网络安全（多图预警）
• 【网络】深入了解HTTP/2及Web性能优化总结
• 【网络】GET和POST：辩证看100 continue
• 【网络】cookie实践（从搭建服务器到cookie操作全流程)
• 【网络】CORS 简单请求+预检请求（理解HTTP跨域原理）
• 【网络】前端跨域常用方法
• canvas+vue实现60帧每秒的抢金币动画（类天猫红包雨）
• canvas合成图片海报、分享，小坑记录
• 前端曝光数据埋点——IntersectionObserver+vue指令
• Intersection Observer + Vue指令 优雅实现图片懒加载

Framework

• 【Vue】再读一次Vue2源码，彻底理解响应式系统
• 【Vue】响应式原理
• 【Vue】VueJS 最佳实践【译】
• 【React】Next.js 生命周期理解
• 【React】Build a react+react-router ssr App from the ground up
• 【React】SPA路由原理+build your own react router v4
• 【React】React Native 性能优化总结（持续更新。。。）
• 【React】React+RN开发过程中的一些问题总结（持续更新。。。）
• 【React】React-Native 从零搭建App(长文)
• 【React】源码分析：组件实现（基于版本16）
• 【React】源码分析：setState
• 【React】Redux源码分析
• 后端渲染、CSR、SSR的核心原理及区别

Webpack、FE Engineering

• 【webpack应用(一)】从零搭建vue开发环境
• 【webpack应用(二)】从零搭建vue生产环境
• 【webpack应用(三)】webpack性能优化
• 【webpack进阶(一)】手撸一个mini-webpack(1) : 分析收集依赖
• 【webpack进阶(二)】手撸一个mini-webpack(2) : 打包依赖代码
• 【webpack进阶(三)】webpack插件骨架-Tapable
• 【webpack进阶(四)】webpack核心构建原理(vscode断点调试源码)
• 【webpack进阶(五)】构建module流程
• 【webpack进阶(六)】seal封装生成文件核心流程
• 【webpack进阶(七)】写个 plugin
• 【webpack进阶(八)】写个 loader
• 【规范】Eslint+Prettier+git hook -> make your life easier

Node、Server

• 【NodeJS】部署高性能的Node服务
• 【NodeJS】模块机制之require源码
• 【NodeJS】多进程与多线程、cluster

DevOps、Linux

• 【CI/CD】Travis、PM2、Vue SSR 自动化部署Node应用
• 【CI/CD】虚拟机搭建Jenkins+Docker+Github环境，实现自动部署
• 【CI/CD】Github Actions 浅尝 CI/CD
• 【Docker】快速入门
• 【Docker】运行Node.js应用
• 【Docker】Docker+Docker-compose+Nginx镜像部署前端应用及优化
• 【Kubernetes】集群搭建
• 【Kubernetes】ingress-nginx安装部署以及疑难杂症处理
• 【Linux基础】☁️服务器初始化安装与配置
• 【Linux基础】文件权限
• 【Linux基础】Vim 基础操作
• 【Linux基础】cat + EOF 快速编辑文本
• 【Linux基础】Virtualbox+Vagrant虚拟机管理 >>> 榨干MacPro的32G内存

Algorithm

• 《学习JavaScript数据结构与算法》读书笔记
• JS实现基础数据结构(栈、队列、单双链表、二叉搜索树)
• JS实现基础排序和搜索算法

HTML、CSS

• BFC（块级格式上下文）
• 三栏布局-七种实现