https://github.com/jin5354/blog
个人 Blog，写文做总结。
https://github.com/jin5354/blog
Last synced: 2 months ago
JSON representation
个人 Blog，写文做总结。
- Host: GitHub
- URL: https://github.com/jin5354/blog
- Owner: jin5354
- Created: 2015-04-04T05:44:25.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2025-02-05T00:04:55.000Z (4 months ago)
- Last Synced: 2025-03-28T16:07:00.878Z (2 months ago)
- Language: JavaScript
- Homepage: https://jin5354.github.io/
- Size: 38.4 MB
- Stars: 181
- Watchers: 19
- Forks: 14
- Open Issues: 88
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# blog
https://jin5354.github.io/
好记性不如烂笔头。所有文章会存一份备份在 issue 中。
## 索引
### 现代前端科技解析
- [React flow：React 渲染流程图解](https://www.404forest.com/2019/06/02/react-flow/)
- [Vue flow： Vue 生态工作机制图解](https://www.404forest.com/2019/03/20/vue-flow-vue-ecosystem-mechanism-diagram/)
- [现代前端科技解析 —— Virtual DOM](https://www.404forest.com/2019/03/07/modern-web-development-tech-analysis-virtual-dom/)
- [现代前端科技解析 —— HTML Parser](https://www.404forest.com/2019/03/05/modern-web-development-tech-analysis-html-parser/)
- [现代前端科技解析 —— Javascript Bundler](https://www.404forest.com/2017/10/16/modern-web-development-tech-analysis-javascript-bundler/)
- [现代前端科技解析 —— Redux 及其中间件](https://www.404forest.com/2017/09/13/modern-web-development-tech-analysis-redux-with-its-middleware/)
- [正确看待 Redux 带来的复杂度问题](https://www.404forest.com/2017/09/09/put-the-complexity-of-redux-in-perspective/)
- [现代前端科技解析 —— 数据响应式系统 (Data Reactivity System)](https://404forest.com/2017/06/28/modern-web-development-tech-analysis-data-reactivity-system/)
### WebGL & 渲染
- [万级节点可视化全量渲染优化探究](https://www.404forest.com/2018/10/12/massive-data-visualization-full-rendering-optimization/)
### 工程化 & 调优
- [代码分割结合 Prefetch 完美优化单页应用加载性能](https://www.404forest.com/2017/09/27/use-code-splitting-with-prefetch-to-improve-spa-web-page-load-performance/)
- [Webpack 构建性能优化实践](https://www.404forest.com/2017/06/12/optimie-webpack-bundle-performance/)
- [实践严格的代码风格检查来保证代码质量](https://www.404forest.com/2017/05/24/practice-strict-code-style-check/)
- [将项目开源到 Github 时，别忘了做些整理工作](https://www.404forest.com/2017/04/28/Preparatory-work-before-upload-project-to-github/)
- [使用 expect/git hooks 实现项目在服务器端的自动部署](https://www.404forest.com/2016/10/28/use-expect-and-git-hooks-to-automate-deployment-tasks/)
- [（译）如何使用 Chrome Devtools 中的 Timeline 工具](https://www.404forest.com/2016/08/18/%EF%BC%88%E8%AF%91%EF%BC%89%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%20chrome%20devtools%20%E4%B8%AD%E7%9A%84%20Timeline%20%E5%B7%A5%E5%85%B7/)
- [使用 requestAnimationFrame 实现性能优化与懒执行](https://www.404forest.com/2016/08/15/%E4%BD%BF%E7%94%A8%20requestAnimationFrame%20%E5%AE%9E%E7%8E%B0%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%8E%E6%87%92%E6%89%A7%E8%A1%8C/)
- [打造一套专用的iconfont](https://www.404forest.com/2016/01/20/%E6%89%93%E9%80%A0%E4%B8%80%E5%A5%97%E4%B8%93%E7%94%A8%E7%9A%84iconfont/)
- [使用 karma/mocha 全家桶为 Vue 组件编写单元测试](https://www.404forest.com/2017/02/22/use-karma-mocha-kits-to-write-unit-tests-for-vue-component/)
### 安全
- [HTTP 安全最佳实践](https://www.404forest.com/2017/05/09/http-security-best-practice/)
- [Nginx + Let's Encrypt 协力快速配置出 ssllabs A+ 评分的站点](https://www.404forest.com/2017/05/07/webgl-programming-guide-note-part-three/)
### JavaScript
- [对浏览器首次渲染时间点的探究](https://www.404forest.com/2019/04/23/when-does-the-browser-first-paint/)
- [深入探究 eventloop 与浏览器渲染的时序问题](https://www.404forest.com/2017/07/18/how-javascript-actually-works-eventloop-and-uirendering/)
### HTML & CSS
- [诡异的字号异变现象——你知道font boosting吗？](https://www.404forest.com/2016/01/22/%E8%AF%A1%E5%BC%82%E7%9A%84%E5%AD%97%E5%8F%B7%E5%BC%82%E5%8F%98%E7%8E%B0%E8%B1%A1%E2%80%94%E2%80%94%E4%BD%A0%E7%9F%A5%E9%81%93font%20boosting%E5%90%97%EF%BC%9F/)
- [理解flex属性——flex-grow、flex-shrink、flex-basis都是干啥的](https://www.404forest.com/2015/12/17/%E7%AE%80%E8%B0%88flex%E5%B1%9E%E6%80%A7%E2%80%94%E2%80%94flex-grow%E3%80%81flex-shrink%E3%80%81flex-basis%E9%83%BD%E6%98%AF%E5%B9%B2%E5%95%A5%E7%9A%84/)
- [flexbox在移动端的兼容性实战](https://www.404forest.com/2015/12/17/flexbox%E5%9C%A8%E7%A7%BB%E5%8A%A8%E7%AB%AF%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E5%AE%9E%E6%88%98/)
- [谈谈居中与flexbox(7.18修订~)](https://www.404forest.com/2015/07/18/%E8%B0%88%E8%B0%88%E5%B1%85%E4%B8%AD%E4%B8%8Eflexbox/)
### 读书脑图
- [《Three.js 开发指南》脑图](https://www.404forest.com/2017/08/08/learning-threejs-mindmap)
- [《WebGL 编程指南》脑图 —— Part Three](https://www.404forest.com/2017/05/07/webgl-programming-guide-note-part-three/)
- [《WebGL 编程指南》脑图 —— Part Two](https://www.404forest.com/2017/05/04/webgl-programming-guide-note-part-two/)
- [《WebGL 编程指南》脑图 —— Part One](https://www.404forest.com/2017/04/30/webgl-programming-guide-note-part-one/)
- [《你不知道的 JavaScript（下卷）》脑图](https://www.404forest.com/2017/06/09/You-Dont-Know-JS-Volume-3-Mindmaps/)
- [《你不知道的 JavaScript（中卷）》脑图](https://www.404forest.com/2017/06/05/You-Dont-Know-JS-Volume-2-Mindmaps/)
- [《你不知道的 JavaScript（上卷）》脑图](https://www.404forest.com/2017/05/25/You-Dont-Know-JS-Volume-1-Mindmaps/)
- [《Css揭秘》简单笔记](https://www.404forest.com/2016/08/29/%E3%80%8ACss%E6%8F%AD%E7%A7%98%E3%80%8B%E7%AE%80%E5%8D%95%E7%AC%94%E8%AE%B0/)
- [AngularJS即学即用 —— 读书笔记](https://www.404forest.com/2016/07/12/AngularJS%E5%8D%B3%E5%AD%A6%E5%8D%B3%E7%94%A8%20%E2%80%94%E2%80%94%20%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/)
- [《WebKit技术内幕》——脑图笔记](https://www.404forest.com/2015/10/25/%E3%80%8AWebKit%E6%8A%80%E6%9C%AF%E5%86%85%E5%B9%95%E3%80%8B%E2%80%94%E2%80%94%E8%84%91%E5%9B%BE%E7%AC%94%E8%AE%B0/)
- [《HTTP权威指南》笔记——各章脑图](https://www.404forest.com/2015/09/06/%E3%80%8AHTTP%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97%E3%80%8B%E7%AC%94%E8%AE%B0%E2%80%94%E2%80%94%E5%90%84%E7%AB%A0%E8%84%91%E5%9B%BE/)
- [学习笔记脑图，备份用](https://www.404forest.com/2015/04/06/%3CJS%E9%AB%98%E7%A8%8B%3E%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E8%84%91%E5%9B%BE%EF%BC%8C%E5%A4%87%E4%BB%BD%E7%94%A8/)
- [《3D 数学基础》——脑图笔记](https://404forest.com/2018/04/09/3D-Math-Primer-for-Graphics-And-Game-Development/)
### 一些老文章的备份
- [为Alfred3编写一个汇率转换workflow——CurrencyConvert](https://www.404forest.com/2016/06/16/%E4%B8%BAAlfred3%E7%BC%96%E5%86%99%E4%B8%80%E4%B8%AA%E6%B1%87%E7%8E%87%E8%BD%AC%E6%8D%A2workflow%E2%80%94%E2%80%94CurrencyConvert/)
- [Ruby元编程——小记](https://www.404forest.com/2016/04/27/Ruby%E5%85%83%E7%BC%96%E7%A8%8B%E2%80%94%E2%80%94%E5%B0%8F%E8%AE%B0/)
- [分享 - Web 开发从入门到放弃 Part One](https://www.404forest.com/2017/03/29/web-dev-roadmap-part-one/)
- [玉泉通过ipv6来使用shadowsocks](https://www.404forest.com/2015/10/13/%E7%8E%89%E6%B3%89%E9%80%9A%E8%BF%87ipv6%E6%9D%A5%E4%BD%BF%E7%94%A8shadowsocks/)
- [在mac下配置wine环境——自己wine一个小游戏](https://www.404forest.com/2015/10/12/%E5%9C%A8mac%E4%B8%8B%E9%85%8D%E7%BD%AEwine%E7%8E%AF%E5%A2%83%E2%80%94%E2%80%94%E8%87%AA%E5%B7%B1wine%E4%B8%80%E4%B8%AA%E5%B0%8F%E6%B8%B8%E6%88%8F/)
- [使用pi-gpio控制树莓派GPIO](https://www.404forest.com/2015/09/08/%E4%BD%BF%E7%94%A8pi-gpio%E6%8E%A7%E5%88%B6%E6%A0%91%E8%8E%93%E6%B4%BEGPIO/)
- [在玉泉环境下尝试将树莓派改造为路由器（分享过程，未成功）](https://www.404forest.com/2015/03/21/%E5%9C%A8%E7%8E%89%E6%B3%89%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%B0%9D%E8%AF%95%E5%B0%86%E6%A0%91%E8%8E%93%E6%B4%BE%E6%94%B9%E9%80%A0%E4%B8%BA%E8%B7%AF%E7%94%B1%E5%99%A8%EF%BC%88%E5%88%86%E4%BA%AB%E8%BF%87%E7%A8%8B%EF%BC%8C%E6%9C%AA%E6%88%90%E5%8A%9F%EF%BC%89/)
- [初玩树莓派--安装与第一次配置](https://www.404forest.com/2015/03/07/%E5%88%9D%E7%8E%A9%E6%A0%91%E8%8E%93%E6%B4%BE--%E5%AE%89%E8%A3%85%E4%B8%8E%E7%AC%AC%E4%B8%80%E6%AC%A1%E9%85%8D%E7%BD%AE/)
- [年前写的一个小爬虫](https://www.404forest.com/2015/02/28/%E5%B9%B4%E5%89%8D%E5%86%99%E7%9A%84%E4%B8%80%E4%B8%AA%E5%B0%8F%E7%88%AC%E8%99%AB/)
- [迟来的关于ifetask0003的总结](https://www.404forest.com/2015/07/14/%E8%BF%9F%E6%9D%A5%E7%9A%84%E5%85%B3%E4%BA%8Eifetask0003%E7%9A%84%E6%80%BB%E7%BB%93/)
- [ifetask0001的一些总结点](https://www.404forest.com/2015/05/25/ifetask0001%E7%9A%84%E4%B8%80%E4%BA%9B%E6%80%BB%E7%BB%93%E7%82%B9/)
- [理解web语义化](https://www.404forest.com/2015/04/11/%E7%90%86%E8%A7%A3web%E8%AF%AD%E4%B9%89%E5%8C%96/)
- [老生常谈——BFC与haslayout](https://www.404forest.com/2015/03/18/%E8%80%81%E7%94%9F%E5%B8%B8%E8%B0%88%E2%80%94%E2%80%94BFC%E4%B8%8Ehaslayout/)
- [说说遇到的那些跨域，access control、jsonp、cookie、iframe](https://www.404forest.com/2016/01/22/%E8%AF%B4%E8%AF%B4%E9%81%87%E5%88%B0%E7%9A%84%E9%82%A3%E4%BA%9B%E8%B7%A8%E5%9F%9F%EF%BC%8Caccess%20control%E3%80%81jsonp%E3%80%81cookie%E3%80%81iframe/)
- [谈谈网页中的Animation](https://www.404forest.com/2015/08/24/%E8%B0%88%E8%B0%88%E7%BD%91%E9%A1%B5%E4%B8%AD%E7%9A%84Animation/)
- [Javascript中如何遍历属性](https://www.404forest.com/2015/04/16/Javascript%E4%B8%AD%E5%A6%82%E4%BD%95%E9%81%8D%E5%8E%86%E5%B1%9E%E6%80%A7/)
- [《JS精粹》学习手记](https://www.404forest.com/2015/04/16/%E3%80%8AJS%E7%B2%BE%E7%B2%B9%E3%80%8B%E5%AD%A6%E4%B9%A0%E6%89%8B%E8%AE%B0/)
- [JS自我梳理：创建对象与继承](https://www.404forest.com/2015/04/06/JS%E8%87%AA%E6%88%91%E6%A2%B3%E7%90%86%EF%BC%9A%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E4%B8%8E%E7%BB%A7%E6%89%BF/)
- [收集整理《JS高程》中用以解决跨浏览器兼容性问题的JS代码](https://www.404forest.com/2015/04/03/%E6%94%B6%E9%9B%86%E6%95%B4%E7%90%86%E3%80%8AJS%E9%AB%98%E7%A8%8B%E3%80%8B%E4%B8%AD%E7%94%A8%E4%BB%A5%E8%A7%A3%E5%86%B3%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98%E7%9A%84JS%E4%BB%A3%E7%A0%81/)
- [继续梳理-js中坑坑哒词法作用域、变量及函数声明提升](https://www.404forest.com/2015/03/22/%E7%BB%A7%E7%BB%AD%E6%A2%B3%E7%90%86-js%E4%B8%AD%E5%9D%91%E5%9D%91%E5%93%92%E8%AF%8D%E6%B3%95%E4%BD%9C%E7%94%A8%E5%9F%9F%E3%80%81%E5%8F%98%E9%87%8F%E5%8F%8A%E5%87%BD%E6%95%B0%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87/)
- [JS自我梳理：闭包、私有变量](https://www.404forest.com/2015/03/21/JS%E8%87%AA%E6%88%91%E6%A2%B3%E7%90%86%EF%BC%9A%E9%97%AD%E5%8C%85%E3%80%81%E7%A7%81%E6%9C%89%E5%8F%98%E9%87%8F/)
- [如何区分js中的各种数据类型](https://www.404forest.com/2015/01/28/%E5%A6%82%E4%BD%95%E5%8C%BA%E5%88%86js%E4%B8%AD%E7%9A%84%E5%90%84%E7%A7%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/)
- [常见知识点汇总（五）：正则](https://www.404forest.com/2014/12/20/%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB%EF%BC%88%E4%BA%94%EF%BC%89%EF%BC%9A%E6%AD%A3%E5%88%99/)
- [常见知识点汇总（四）：JSON](https://www.404forest.com/2014/12/19/%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB%EF%BC%88%E5%9B%9B%EF%BC%89%EF%BC%9AJSON/)
- [常见知识点汇总（三）：XMLHttpRequest](https://www.404forest.com/2014/12/18/%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB%EF%BC%88%E4%B8%89%EF%BC%89%EF%BC%9AXMLHttpRequest/)
- [常见知识点汇总（二）：事件](https://www.404forest.com/2014/12/17/%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9A%E4%BA%8B%E4%BB%B6/)
- [常见知识点汇总（一）：DOM结构与DOM操作](https://www.404forest.com/2014/12/08/%E5%B8%B8%E8%A7%81%E7%9F%A5%E8%AF%86%E7%82%B9%E6%B1%87%E6%80%BB%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9ADOM%E7%BB%93%E6%9E%84%E4%B8%8EDOM%E6%93%8D%E4%BD%9C/)
- [微信浏览器实现后退记忆浏览位置](https://www.404forest.com/2016/08/09/%E5%BE%AE%E4%BF%A1%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AE%9E%E7%8E%B0%E5%90%8E%E9%80%80%E8%AE%B0%E5%BF%86%E6%B5%8F%E8%A7%88%E4%BD%8D%E7%BD%AE/)
- [该用async写异步代码了](https://www.404forest.com/2016/03/14/%E8%AF%A5%E7%94%A8async%E5%86%99%E5%BC%82%E6%AD%A5%E4%BB%A3%E7%A0%81%E4%BA%86/)
- [ES6重点概览](https://www.404forest.com/2016/03/13/ES6%E9%87%8D%E7%82%B9%E6%A6%82%E8%A7%88/)
- [使用 Rx 流式处理数据](https://www.404forest.com/2017/02/17/intro-to-rx/)
- [跑起第一个React-Native Android App](https://www.404forest.com/2016/03/19/%E8%B7%91%E8%B5%B7%E7%AC%AC%E4%B8%80%E4%B8%AAReact-Native%20Android%20App/)