Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sisteran/blog

瓶博：每日更新，前端前进
https://github.com/sisteran/blog

Last synced: 3 days ago
JSON representation

瓶博：每日更新，前端前进

Awesome Lists containing this project

README 

        
# 前端瓶子君



[线上版本阅读更流畅，点击阅读](https://www.pzijun.cn/)



### JS 系列



- [es6 及 es6+ 的能力集，你最常用的，这其中最有用的，都解决了什么问题](https://github.com/sisterAn/JavaScript-Algorithms/issues/147)

- [typeof 可以判断哪些类型？instanceof 做了什么？null为什么被typeof错误的判断为了'object'](https://github.com/sisterAn/blog/issues/80)

- [闭包的使用场景，使用闭包需要注意什么](https://github.com/sisterAn/blog/issues/81)

- [了解词法环境吗？它和闭包有什么联系？](https://github.com/sisterAn/blog/issues/82)

- [WeakMap 和 Map 的区别，WeakMap 原理，为什么能被 GC？](https://github.com/sisterAn/blog/issues/83)

- [从页面 A 打开一个新页面 B，B 页面关闭（包括意外崩溃），如何通知 A 页面？](https://github.com/sisterAn/blog/issues/84)

- [什么变量是存储在堆/栈？](https://github.com/sisterAn/blog/issues/85)

- [由一道bilibili面试题看Promise异步执行机制](https://github.com/sisterAn/blog/issues/86)

- [讲下 V8 sort 的大概思路，并手写一个 sort 的实现](https://github.com/sisterAn/blog/issues/87)

- [一道腾讯手写题，如何判断 url 中只包含 qq.com](https://github.com/sisterAn/blog/issues/88)

- [实现颜色转换 'rgb(255, 255, 255)' -> '#FFFFFF' 的多种思路](https://github.com/sisterAn/blog/issues/89)

- [var、let、const 的本质区别是什么](https://github.com/sisterAn/blog/issues/91)

- [监听一个变量的变化，需要怎么做](https://github.com/sisterAn/blog/issues/92)

- [Promise.allSettled 的作用，如何自己实现 Promise.allSettled](https://github.com/sisterAn/blog/issues/93)

- [Promise.any 的作用，如何自己实现一个 Promise.any](https://github.com/sisterAn/blog/issues/94)

- [Promise.prototype.finally 的作用，如何自己实现 Promise.prototype.finally](https://github.com/sisterAn/blog/issues/95)

- [从 JavaScript 发展历史中聊ECMAScript](https://github.com/sisterAn/blog/issues/74)

- [JS 基础之:  var、let、const、解构、展开、函数](https://github.com/sisterAn/blog/issues/48)

- [深入 constructor、prototype、`__proto__`、[[Prototype]] 及 原型链](https://github.com/sisterAn/blog/issues/5)

- [前端必知必会之 JS 继承的 六 种实现方式](https://github.com/sisterAn/blog/issues/41)

- [一文深入剖析 instanceof 运算符](https://github.com/sisterAn/blog/issues/6)

- [深入 call、apply、bind、箭头函数以及柯里化](https://github.com/sisterAn/blog/issues/8)

- [前端必知必会之 JS 单线程与异步](https://github.com/sisterAn/blog/issues/11)

- [JS 基础之异步（二）：callback](https://github.com/sisterAn/blog/issues/12)

- [JS 基础之异步（三）：Promise源码实现](https://github.com/sisterAn/blog/issues/13)

- [JS 基础之异步（四）：Generator（生成器、迭代器源码实现）](https://github.com/sisterAn/blog/issues/20)

- [JS 基础之异步（五）：Generator](https://github.com/sisterAn/blog/issues/23)

- [JS 基础之异步（六）：co 函数库](https://github.com/sisterAn/blog/issues/27)

- [JS异步解决方案的发展历程以及优缺点](https://github.com/sisterAn/blog/issues/29)

- [Tasks、microtasks、 queues 和 schedules](https://github.com/sisterAn/blog/issues/21)

- [[译]JavaScript：ES2019 的新特性](https://github.com/sisterAn/blog/issues/47)

- [你可能从未使用过的11+个JavaScript特性](https://github.com/sisterAn/blog/issues/71)



### CSS



- [一行 CSS 为网页添加暗黑模式支持](https://github.com/sisterAn/blog/issues/76)

- [position 属性有哪些值，各有什么特点？](https://github.com/sisterAn/blog/issues/114)

- [CSS 会阻塞 DOM 解析吗？](https://github.com/sisterAn/blog/issues/115)

- [px、rpx、em、rem 、vw/vh、百分比的区别？](https://github.com/sisterAn/blog/issues/116)

- [如何解决移动端 Retina 屏 1px 像素问题 ？](https://github.com/sisterAn/blog/issues/117)

- [介绍下 BFC 布局规则，除此之外，你还知道哪些 CSS 格式化上下文?](https://github.com/sisterAn/blog/issues/118)

- [实现元素水平垂直居中的 N 种方式](https://github.com/sisterAn/blog/issues/119)

- [CSS 实现多行文本展开收起效果](https://github.com/sisterAn/blog/issues/120)

- [CSS 如何画一个实心、带边缘色（气泡聊天框）、圆角的三角形](https://github.com/sisterAn/blog/issues/121)

- [N 炫酷的CSS3 loading加载动画，总有一款适合你](https://github.com/sisterAn/blog/issues/122)

- [伪类与伪元素是怎么回事儿？](https://github.com/sisterAn/blog/issues/123)



### 浏览器、网络



- [一文走进 HTTP 与 TCP 协议，它们的区别与联系](https://github.com/sisterAn/blog/issues/96)

- [http header怎么判断协议是不是websocket](https://github.com/sisterAn/blog/issues/97)

- [HTTP/2对比HTTP/1.1，特性是什么？是如何解决队头阻塞与压缩头部的？](https://github.com/sisterAn/blog/issues/98)

- [为什么说HTTPS比HTTP安全呢](https://github.com/sisterAn/blog/issues/99)

- [说一下 HTTP/3 新特性，为什么选择使用 UDP 协议？](https://github.com/sisterAn/blog/issues/100)

- [如果让你去实现一个 CSRF 攻击你会怎么做？](https://github.com/sisterAn/blog/issues/101)

- [除了CSRF，你还知道其它的攻击方式吗？](https://github.com/sisterAn/blog/issues/102)

- [有关 HTTP 缓存的首部字段说一下](https://github.com/sisterAn/blog/issues/103)

- [了解 HTTP/1.x 的 keep-alive 吗？它与 HTTP/2 多路复用的区别是什么？](https://github.com/sisterAn/blog/issues/104)

- [TCP 的三次握手和四次挥手，了解泛洪攻击么](https://github.com/sisterAn/blog/issues/105)

- [HTTP 状态码有哪些？该怎么用？](https://github.com/sisterAn/blog/issues/106)

- [你真的了解 GET 和 POST 吗，它们的区别是什么？](https://github.com/sisterAn/blog/issues/107)

- [DNS 协议是什么？完整查询过程？为什么选择使用 UDP 协议发起 DNS 查询？](https://github.com/sisterAn/blog/issues/108)



### webpack



- [窥探原理：手写一个 JavaScript 打包器](https://github.com/sisterAn/blog/issues/69)

- [窥探原理：手写一个 JavaScript 打包器源码](https://github.com/sisterAn/minipack)

- [webpack 系列一：最佳配置指北](https://github.com/sisterAn/blog/issues/68)

- [五种可视化方案分析 webpack 打包性能瓶颈](https://github.com/sisterAn/blog/issues/67)

- [玩转 webpack，使你的打包速度提升 90%](https://github.com/sisterAn/blog/issues/63)

- [webpack 系列三：优化开发体验](https://github.com/sisterAn/blog/issues/64)

- [webpack 系列四：优化包体积](https://github.com/sisterAn/blog/issues/65)

- [webpack 系列五：优化首屏加载时间及流畅度](https://github.com/sisterAn/blog/issues/66)

- 手写 webpack 插件

- webpack5 展望



### React 系列



- [Hooks 与 React 生命周期的关系](https://github.com/sisterAn/blog/issues/34)

- [深入diff 算法](https://github.com/sisterAn/blog/issues/22)

- [深入 setState 机制](https://github.com/sisterAn/blog/issues/26)

- [React Refs and the DOM 揭秘](https://github.com/sisterAn/blog/issues/2)

- [Create React App 的 Webpack 4 配置高级进阶](https://github.com/sisterAn/blog/issues/3)

- [2019年，实现 React 动画的 5 种方式](https://github.com/sisterAn/blog/issues/54)

- [[译]React v16.9 新特性](https://github.com/sisterAn/blog/issues/50)

- [深入解读 React 核心之元素篇](https://github.com/sisterAn/blog/issues/49)

- [深入解读 React 核心之组件篇](https://github.com/sisterAn/blog/issues/51)

- [深入解读 React 核心之 Hooks 篇](https://github.com/sisterAn/blog/issues/52)

- [React 进阶系列](https://github.com/sisterAn/blog/issues/55)

- [简易版 useState 实现](https://github.com/sisterAn/blog/issues/130)



### 性能监控



- [前端性能优化与监控开篇：如何认识网站性能](https://github.com/sisterAn/blog/issues/110)

- [Web 与 Web 性能世界万物诞生记](https://github.com/sisterAn/blog/issues/111)

- [当谈及 Web 性能优化时，我们该关注哪些性能指标](https://github.com/sisterAn/blog/issues/112)

- [新一代性能指标 Web Vitals](https://github.com/sisterAn/blog/issues/113)



### 小程序



- [小程序 自定义富文本编辑器](https://github.com/sisterAn/blog/issues/9)

- [Taro 小程序拖拽排序](https://github.com/sisterAn/blog/issues/10)

- [Taro event handler 传递参数有问题](https://github.com/sisterAn/blog/issues/15)

- [Taro 阻止事件冒泡](https://github.com/sisterAn/blog/issues/16)

- [Taro 对接腾讯云对象存储服务COS](https://github.com/sisterAn/blog/issues/17)

- [Taro 小程序总结](https://github.com/sisterAn/blog/issues/18)



### 浏览器



- [多图预警，种草 DevTools 新特性（ Chrome 80 ）](https://github.com/sisterAn/blog/issues/73)

- [浏览器的重绘与回流（Repaint、Reflow）](https://github.com/sisterAn/blog/issues/33)

- [HTTP 状态码备忘单](https://github.com/sisterAn/blog/issues/46)

- [调试 JavaScript 和 Node 时应使用的8个控制台命令](https://github.com/sisterAn/blog/issues/59)



### 工具



- [高效编码必备的7个VSCode插件](https://github.com/sisterAn/blog/issues/77)

- [12 个提高JavaScript编码效率的 NPM技巧](https://github.com/sisterAn/blog/issues/75)

- [珍藏多年的 Git 问题和操作清单 ](https://github.com/sisterAn/blog/issues/39)

- [关于 npm，必须要懂的知识](https://github.com/sisterAn/blog/issues/40)

- [是时候抛弃Postman了，试试直接在 VS Code上调试并共享你的REST API调用](https://github.com/sisterAn/blog/issues/72)



### TS 系列



- [为什么要使用 TypeScript ? TypeScript 相对于 JavaScript 的优势是什么？](https://github.com/sisterAn/blog/issues/124)

- [TypeScript 中 const 和 readonly 的区别？枚举和常量枚举的区别？](https://github.com/sisterAn/blog/issues/125)

- [TypeScript 中 Interface 与 Type 的区别？在写 TypeScript 的时候，该用哪个比较好？](https://github.com/sisterAn/blog/issues/126)

- [TypeScript 中，关于 any 类型，你需要知道的一切](https://github.com/sisterAn/blog/issues/127)

- [TypeScript 中 any、unknown、never 和 void 有什么区别？](https://github.com/sisterAn/blog/issues/128)

- [盘点 TypeScript 中我们常用的那些神奇符号](https://github.com/sisterAn/blog/issues/129)

- [void 在 JavaScript 与 TypeScript 中的对比使用](https://github.com/sisterAn/blog/issues/58)



### 随思随想



- [（译）Flutter 最佳实践](https://github.com/sisterAn/blog/issues/78)

- [数组扁平化、去重、排序](https://github.com/sisterAn/blog/issues/28)

- [Set、WeakSet、Map及WeakMap](https://github.com/sisterAn/blog/issues/24)

- [['1', '2', '3'\]\.map\(parseInt\) what & why ?](https://github.com/sisterAn/blog/issues/19)

- [深度优先遍历与广度优先遍历](https://github.com/sisterAn/blog/issues/25)

- [CommonJS 规范总结与扩展](https://github.com/sisterAn/blog/issues/4)

- [探讨 requestAnimationFrame](https://github.com/sisterAn/blog/issues/30)

- [浅谈节流与防抖](https://github.com/sisterAn/blog/issues/36)

- [ES6 之 Proxy](https://github.com/sisterAn/blog/issues/31)



### 数据结构与算法



这部分已独立，前往 https://github.com/sisterAn/JavaScript-Algorithms 



### Node.js 系列



- 



### 持续更新中。。。