Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
https://github.com/amandakelake/blog

think more！learn more!
https://github.com/amandakelake/blog
blog browser devops docker javascript nodejs react vue webpack
Last synced: about 1 month ago
JSON representation
think more！learn more!
Host: GitHub
URL: https://github.com/amandakelake/blog
Owner: amandakelake
Created: 2018-02-02T02:31:05.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-03-01T11:30:15.000Z (4 months ago)
Last Synced: 2024-03-01T12:36:16.359Z (4 months ago)
Topics: blog, browser, devops, docker, javascript, nodejs, react, vue, webpack
Language: JavaScript
Homepage:
Size: 3.72 MB
Stars: 2,219
Watchers: 96
Forks: 177
Open Issues: 87
Metadata Files:
- Readme: README.md
Lists

awesome-stars-coconut - amandakelake/blog - think more！learn more! (JavaScript)
awesome-stars - amandakelake/blog - think more！learn more! (webpack)
README

        
# personal blog

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

---

[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=amandakelake)](https://github.com/anuraghazra/github-readme-stats)

## Browser

* [【浏览器原理-01】宏观下的浏览器](https://github.com/amandakelake/blog/blob/master/browser/browser-01.md)

* [【浏览器原理-02】浏览器中的JS执行机制](https://github.com/amandakelake/blog/blob/master/browser/browser-02.md)

* [【浏览器原理-03】V8 工作原理](https://github.com/amandakelake/blog/blob/master/browser/browser-03.md)

* [【浏览器原理-04】页面循环系统](https://github.com/amandakelake/blog/blob/master/browser/browser-04.md)

## Javascript

* [【JS进阶】JS执行机制与核心概念(执行上下文、变量提升、作用域链、this)](https://github.com/amandakelake/blog/blob/master/javascript/core/JS%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6.md)

* [【JS进阶】垃圾回收、内存优化](https://github.com/amandakelake/blog/blob/master/javascript/core/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6.md)

* [【异步-01】：Promise深入理解与实例分析](https://github.com/amandakelake/blog/issues/30)

* [【异步-02】：Generator（生成器）深入理解](https://github.com/amandakelake/blog/issues/31)

* [【异步-03】：Async/await](https://github.com/amandakelake/blog/issues/32)

* [【设计模式】随手实现一个订阅-发布模式](https://github.com/amandakelake/blog/issues/65)

* [【设计模式】代理模式+ES6 Proxy](https://github.com/amandakelake/blog/issues/67)

* [【设计模式】装饰者模式+ES7 Decorator](https://github.com/amandakelake/blog/issues/66)

* [【设计模式】单例模式](https://github.com/amandakelake/blog/issues/68)

* [【JS基础】深入原型和原型链：彻底捋清prototype和__proto__](https://github.com/amandakelake/blog/issues/39)

* [【JS基础】深入继承：一步步捋清五种继承方式](https://github.com/amandakelake/blog/issues/3)

* [【JS基础】You don’t know JavaScript => 闭包](https://github.com/amandakelake/blog/issues/24)

* [【JS基础】深入理解JS的类型、值、类型转换](https://github.com/amandakelake/blog/issues/34)

* [【JS基础】从一道题说起（原型、this、作用域、构造函数、运算符优先级）](https://github.com/amandakelake/blog/issues/10)

* [【JS基础】事件：捕获与冒泡、事件处理程序、事件对象、跨浏览器、事件委托](https://github.com/amandakelake/blog/issues/38)

* [【JS基础】文件：读取/拖拽/预览、转换/上传/分割](https://github.com/amandakelake/blog/issues/40)

* [【JS基础】模块化：CommonJS、AMD、CMD、UMD、ES6 Module](https://github.com/amandakelake/blog/blob/master/javascript/js-module.md)

* [【JS API】ES6中export及export default、Node中exports和module.exports的区别](https://github.com/amandakelake/blog/issues/22)

* [【JS API】map、forEach、filter 、reduce](https://github.com/amandakelake/blog/issues/19)

* [【JS API】Object.defineProperty() 和简易双向绑定原理](https://github.com/amandakelake/blog/issues/8)

* [【JS API】ECMAScript 2016 2017 2018 新特性](https://github.com/amandakelake/blog/issues/45)

* [【handwriting】彻底捋清楚 instanceof ](https://github.com/amandakelake/blog/issues/36)

* [【handwriting】彻底捋清楚 new 的实现](https://github.com/amandakelake/blog/issues/37)

* [【handwriting】模拟实现call、apply、bind](https://github.com/amandakelake/blog/issues/16)

* [【handwriting】根据Promise/A+规范实现 Promise](https://github.com/amandakelake/blog/issues/42)

## Network、Web performance、Business Scenario

* [浏览器工作原理：从输入URL到页面加载完成](https://github.com/amandakelake/blog/issues/55)

* [事件循环机制 Event-Loop及其延伸](https://github.com/amandakelake/blog/issues/26)

* [【性能优化】Web Performance Optimizations](https://github.com/amandakelake/blog/issues/64)

* [【性能优化】DNS预解析、域名发散、域名收敛](https://github.com/amandakelake/blog/issues/50)

* [【性能优化】优化关键渲染路径，加速浏览器首次渲染](https://github.com/amandakelake/blog/issues/54)

* [【性能优化】手把手实现图片懒加载](https://github.com/amandakelake/blog/issues/46)

* [【性能优化】图片优化——总览](https://github.com/amandakelake/blog/issues/48)

* [【缓存-01】——缓存总览：从性能优化的角度看缓存](https://github.com/amandakelake/blog/issues/43)

* [【缓存-02】——浏览器缓存机制：强缓存、协商缓存](https://github.com/amandakelake/blog/issues/41)

* [【缓存-03】——数据存储：cookie、Storage、indexedDB](https://github.com/amandakelake/blog/issues/13)

* [【缓存-04】——离线应用缓存：App Cache => Manifest](https://github.com/amandakelake/blog/issues/15)

* [【网络】计算机网络总结：应用层、传输层、网络安全（多图预警）](https://github.com/amandakelake/blog/blob/master/network/network.md)

* [【网络】深入了解HTTP/2及Web性能优化总结](https://github.com/amandakelake/blog/issues/35)

* [【网络】GET和POST：辩证看100 continue](https://github.com/amandakelake/blog/issues/20)

* [【网络】cookie实践（从搭建服务器到cookie操作全流程)](https://github.com/amandakelake/blog/issues/18)

* [【网络】CORS 简单请求+预检请求（理解HTTP跨域原理）](https://github.com/amandakelake/blog/issues/62)

* [【网络】前端跨域常用方法](https://github.com/amandakelake/blog/issues/17)

* [canvas+vue实现60帧每秒的抢金币动画（类天猫红包雨）](https://github.com/amandakelake/blog/issues/70)

* [canvas合成图片海报、分享，小坑记录](https://github.com/amandakelake/blog/issues/72)

* [前端曝光数据埋点——IntersectionObserver+vue指令](https://github.com/amandakelake/blog/issues/71)

* [Intersection Observer + Vue指令 优雅实现图片懒加载](https://github.com/amandakelake/blog/issues/73)

## Framework

* [【Vue】再读一次Vue2源码，彻底理解响应式系统](https://github.com/amandakelake/blog/blob/master/Framework/vue/vue2%E6%BA%90%E7%A0%81.md)

* [【Vue】响应式原理](https://github.com/amandakelake/blog/issues/63)

* [【Vue】VueJS 最佳实践【译】](https://github.com/amandakelake/blog/issues/69)

* [【React】Next.js 生命周期理解](https://github.com/amandakelake/blog/issues/61)

* [【React】Build a react+react-router ssr App from the ground up](https://github.com/amandakelake/react-router-ssr/blob/master/README.md)

* [【React】SPA路由原理+build your own react router v4](https://github.com/amandakelake/blog/issues/53)

* [【React】React Native 性能优化总结（持续更新。。。）](https://github.com/amandakelake/blog/issues/49)

* [【React】React+RN开发过程中的一些问题总结（持续更新。。。）](https://github.com/amandakelake/blog/issues/52)

* [【React】React-Native 从零搭建App(长文)](https://juejin.im/post/5a9f93d96fb9a028d2077c19)

* [【React】源码分析：组件实现（基于版本16）](https://github.com/amandakelake/blog/issues/27)

* [【React】源码分析：setState](https://github.com/amandakelake/blog/issues/29)

* [【React】Redux源码分析](https://github.com/amandakelake/blog/issues/33)

* [后端渲染、CSR、SSR的核心原理及区别](https://github.com/amandakelake/blog/issues/60)

## Webpack、FE Engineering

* [【webpack应用(一)】从零搭建vue开发环境](https://github.com/amandakelake/webpack-vue/blob/master/docs/dev.md)

* [【webpack应用(二)】从零搭建vue生产环境](https://github.com/amandakelake/webpack-vue/blob/master/docs/prod.md)

* [【webpack应用(三)】webpack性能优化](https://github.com/amandakelake/webpack-vue/blob/master/docs/optimize.md)

* [【webpack进阶(一)】手撸一个mini-webpack(1) : 分析收集依赖](https://github.com/amandakelake/blog/issues/93)

* [【webpack进阶(二)】手撸一个mini-webpack(2) : 打包依赖代码](https://github.com/amandakelake/blog/issues/98)

* [【webpack进阶(三)】webpack插件骨架-Tapable](https://github.com/amandakelake/blog/issues/100)

* [【webpack进阶(四)】webpack核心构建原理(vscode断点调试源码)](https://github.com/amandakelake/blog/issues/92)

* [【webpack进阶(五)】构建module流程](https://github.com/amandakelake/blog/issues/99)

* [【webpack进阶(六)】seal封装生成文件核心流程](https://github.com/amandakelake/blog/issues/101)

* [【webpack进阶(七)】写个 plugin](https://github.com/amandakelake/blog/issues/91)

* [【webpack进阶(八)】写个 loader](https://github.com/amandakelake/blog/issues/90)

* [【规范】Eslint+Prettier+git hook -> make your life easier](https://github.com/amandakelake/blog/issues/59)

## Node、Server

* [【NodeJS】部署高性能的Node服务](https://github.com/amandakelake/blog/blob/master/Node/%E9%83%A8%E7%BD%B2%E9%AB%98%E6%80%A7%E8%83%BD%E5%BA%94%E7%94%A8.md)

* [【NodeJS】模块机制之require源码](https://github.com/amandakelake/blog/blob/master/Node/require.md)

* [【NodeJS】多进程与多线程、cluster](https://github.com/amandakelake/blog/blob/master/Node/%E5%A4%9A%E8%BF%9B%E7%A8%8B%E4%B8%8E%E5%A4%9A%E7%BA%BF%E7%A8%8B.md)

## DevOps、Linux

* [【CI/CD】Travis、PM2、Vue SSR 自动化部署Node应用](https://github.com/amandakelake/blog/issues/104)

* [【CI/CD】虚拟机搭建Jenkins+Docker+Github环境，实现自动部署](https://github.com/amandakelake/blog/blob/master/Engineering/cicd-jenkins.md)

* [【CI/CD】Github Actions 浅尝 CI/CD](https://github.com/amandakelake/blog/blob/master/Engineering/github-actions.md)

* [【Docker】快速入门](https://github.com/amandakelake/blog/blob/master/engineering/docker/docker%E5%9F%BA%E7%A1%80.md)

* [【Docker】运行Node.js应用](https://github.com/amandakelake/blog/blob/master/engineering/docker/docker%E8%BF%90%E8%A1%8Cnode%E5%BA%94%E7%94%A8.md)

* [【Docker】Docker+Docker-compose+Nginx镜像部署前端应用及优化](https://github.com/amandakelake/blog/blob/master/Engineering/deploy-01.md)

* [【Kubernetes】集群搭建](https://github.com/amandakelake/blog/blob/master/Engineering/docker/k8s.md)

* [【Kubernetes】ingress-nginx安装部署以及疑难杂症处理](https://github.com/amandakelake/blog/blob/master/Engineering/docker/ingress-nginx.md)

* [【Linux基础】☁️服务器初始化安装与配置](https://github.com/amandakelake/blog/issues/102)

* [【Linux基础】文件权限](https://github.com/amandakelake/blog/issues/103)

* [【Linux基础】Vim 基础操作](https://github.com/amandakelake/blog/blob/master/Engineering/vim/vim%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C.md)

* [【Linux基础】cat + EOF 快速编辑文本](https://github.com/amandakelake/blog/blob/master/Engineering/linux/cat-EOF.md)

* [【Linux基础】Virtualbox+Vagrant虚拟机管理 >>> 榨干MacPro的32G内存](https://github.com/amandakelake/blog/blob/master/Engineering/vagrant.md)

  

## Algorithm

* [《学习JavaScript数据结构与算法》读书笔记](https://github.com/amandakelake/blog/blob/master/Algorithm/Learn%20Javascript%20Data%20Structures%20and%20Algorithms/JS%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95.pdf)

* [JS实现基础数据结构(栈、队列、单双链表、二叉搜索树)](https://github.com/amandakelake/blog/blob/master/Algorithm/Learn%20Javascript%20Data%20Structures%20and%20Algorithms/js-data-structure.md)

* [JS实现基础排序和搜索算法](https://github.com/amandakelake/blog/blob/master/Algorithm/Learn%20Javascript%20Data%20Structures%20and%20Algorithms/sort-search.md)

## HTML、CSS

* [BFC（块级格式上下文）](https://github.com/amandakelake/blog/issues/25)

* [三栏布局-七种实现](https://github.com/amandakelake/blog/issues/28)