Blog

易函 123 博客
总结、归纳、笔记、跟着学、业务积累
初衷：学习和分享

吾生也有涯，而知也无涯

对一些常见的bug，做了相关归纳《Bug归纳》。
算法自我练习使用，仅供参考。记录了自己学习算法的点滴《LeetCode训练》。
跟着大佬学系列的《跟着大佬学 JavaScript》，ES6的学习笔记《ES6 学习笔记》，《浏览器相关》TypeScript的学习笔记《TypeScript学习笔记》。
对于前端框架而已，不仅要知其用，还要了解整个框架的结果以及整体的逻辑《Vue2源码分析》。
对于前端而言，虽然不是人人都要拿NodeJS写一个服务器程序，但简单可至使用命令交互模式调试JS代码片段，复杂可至编写工具提升工作效率《Node.js学习笔记》

个人笔记

• 《Bug归纳》
• 《LeetCode训练》
• 《ES6 学习笔记》
• 《Node.js学习笔记》
• 《Go学习笔记》
• 《TypeScript学习笔记》
• 《Vue2源码分析》

【跟着大佬学 JavaScript】

• 防抖节流

  • • 【跟着大佬学 JavaScript】之防抖
  • • 【跟着大佬学 JavaScript】之节流
  • • 【跟着大佬学 JavaScript】之 lodash 防抖节流合并

• 数据去重

  • • 【跟着大佬学 JavaScript】之数组去重(结果对比)
  • • 【跟着大佬学 JavaScript】之 underscore 数组去重
  • • 【跟着大佬学 JavaScript】之数组去重(速度对比)

• 数据类型

  • • 【跟着大佬学 JavaScript】之数据类型基础
  • • 【跟着大佬学 JavaScript】之 null 和 undefined 的区别
  • • 【跟着大佬学 JavaScript】之数据类型转换

【ES6 学习笔记】

• 变量

  • • 【ES6 学习笔记】之 var/let/const、块级作用域、TDZ、变量提升
  • • 【ES6 学习笔记】之变量的解构赋值

• 字符串

  • • 【ES6 学习笔记】之模板字符串、字符串新特性

• Set 和 Map 数据结构

  • • 【ES6 学习笔记】之 Set 和 Map 数据结构

• 异步

  • • 【ES6 学习笔记】之 async/await 函数

• Class

  • • 【ES6 学习笔记】之 Class

• 参考

Reference	Reference
ECMA 草案完整版	ES6 入门教程-阮一峰
ES6 你可能不知道的事 - 基础篇	ES6 你可能不知道的事 - 进阶篇
探索 ES6	es6features
Learn ES2015	JavaScript for impatient programmers (ES2021 edition)
Destructuring and parameter handling in ECMAScript 6	ECMAScript 6 Tools
ECMAScript 6 Learning	JavaScript for impatient programmers

【源码剖析】

• vue2.6
  • • 【源码剖析】new Vue 发生了什么?
  • • 【源码剖析】initState 初始化
  • • 【源码剖析】$mount 挂载
  • • 【源码剖析】render的实现
  • • 【源码剖析】 Virtual Dom

【echarts】

• echarts使用
  • • 【echarts 使用】之 xy 轴刻度、文字、轴线样式、分隔线
  • • 【echarts 使用】之折线图拐点圆的样式（内圆外圆）
  • • 【echarts 使用】之基准线 markLine
  • • 【echarts 使用】之无数据时连线与否
  • • 【echarts 使用】之设置柱子多个颜色（渐进色）
  • • 【echarts 使用】之无拐点，折线样式
  • • 【echarts 使用】之设置柱子的 borderRadius
  • • 【echarts 使用】之选中状态(默认不显示置灰)
  • • 【echarts 使用】之上下左右的距离（grid）
  • • 【echarts 使用】之设置拐点 hover 样式
  • • 【echarts 使用】之设置 x 轴从原点开始
  • • 【echarts 使用】之 tooltip 弹窗使用说明
  • • 【echarts 使用】之 x 轴时间戳展示 0-24 小时

【移动端】

• Native App
• Hybird App
• Web App
• 自适应
  • • 移动端自适应常见手段
  • • 【自适应】之 相关知识汇总
  • • 【自适应】之 px、rpx、em、rem 、vw/vh、百分比的区别？
• 兼容性
  • • 【兼容性】之 IOS:时间 Date 兼容性问题
  • • 【兼容性】之 IOS:iPhoneX 安全区域(Safe Area)底部小黑条在微信小程序和 H5 的屏幕适配
  • • 【兼容性】之 IOS:不支持audio自动播放问题
  • • 【兼容性】之 如何解决移动端 Retina 屏 1px 像素问题 ？

【浏览器】

• 【浏览器】之原理和实践

  • • 【浏览器】之XSS & CSRF
  • • 【浏览器】之同源策略
  • • 【浏览器】之跨域
  • • 【浏览器】之重绘和回流
  • • 【浏览器】之从输入URL到页面展示
  • • 【浏览器】之渲染机制
  • • 【浏览器】之缓存
  • • 【浏览器】之前端路由

• 浏览器缓存

  • • 【浏览器】之缓存的基本认识

• 参考

Reference	Reference
浏览器缓存知识小结及应用	【浏览器】缓存
有关 HTTP 缓存的首部字段说一下	浏览器存储
缓存相关的应用

【HTTP】

【性能优化】

• 【性能优化】之 webpack4+vue3项目白屏时间减少
• 【性能优化】之 DNS 查询
• 【性能优化】之 vite+vue3 性能优化

参考：

Reference	Reference
网站性能优化实战——从 12.67s 到 1.06s 的故事	前端性能优化之白屏时间
网站性能优化实战（二）	网页性能管理详解
掌握浏览器重绘(repaint)重排(reflow))-前端进阶	嗨，送你一张 Web 性能优化地图
页面性能优化办法有哪些	浏览器工作原理：从输入 URL 到页面加载完成

【Vue 学习笔记】

【React 学习笔记】

• 【HTTP】之 get 和 post

【TypeScript 学习笔记】

-[x] 简介

• TypeScript 是什么

【构建工具】

• Webpack

  • 【webpack】之编译提速
  • 【webpack】之打包优化
  • 【webpack】之插件

• Vue-cli

• Vite

【Git】

• git fetch 和 git pull 的区别
• git 简明指南

最后

后续会一直更新，希望各位看官不要吝啬手中的赞。

❤️ 感谢各位的支持！！！

❤️ 如果有错误或者不严谨的地方，请务必给予指正，十分感谢！！！

❤️ 喜欢或者有所启发，欢迎 star！！！

❤️ 关注公众号「前端小白易函 123」，让我们一起共同进步！！！