Blog

易函123 | 技术探索与成长笔记

博客定位
✍️ 知识沉淀 | 📚 系统学习 | 💡 经验分享
「以记录驱动思考，用输出倒逼成长」

内容方向

• 🐞《Bug全收录》：高频问题解决方案库
• ⚙️《LeetCode训练》：算法解题手记
• � 《JavaScript进阶之路》：JavaScript深度解析
• ✍️《ES6 学习笔记》：ES6新增用法介绍
• 💡 《浏览器原理》：浏览器原理专题
• 🔍《框架深挖》：Vue2源码解析与实践
• 🛠️《Node.js工坊》：从CLI调试到效率工具开发

核心理念
"吾生也有涯，而知也无涯"——在有限的技术生涯中，构建可复用的知识体系

【跟着大佬学 JavaScript】

• 防抖节流

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

• 数据去重

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

• 数据类型

  • • 【跟着大佬学 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 学习笔记】

• 简介
  • TypeScript 是什么

【Uni-App】

• 修饰符

• • Uni-App 子组件阻止父组件事件冒泡的解决方案

• mainfest.json

• • uni-app 中的AsyncError中组件具有获取router的能力吗

【构建工具】

• Webpack

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

• Vue-cli

• Vite

• 配置相关

  • • PostCSS Autoprefixer 深度使用指南

【Git】

• git fetch 和 git pull 的区别
• git 简明指南
• Git本地合并撤回方法总结
• Git commit vi编辑器报错解决方法

【HTML】

• Canvas

  • • 五芒星绘制
  • • 五芒星添加点击事件

【CSS】

• flex布局

• box-shadow

  • • 深入理解CSS box-shadow：从外发光到内发光的艺术

【Utils公共方法整理】

• 图片相关

  • • JavaScript图片格式转化
  • • 使用 requestAnimationFrame 优化图片线框绘制并更新数组
  • • 使用 Promise.all 优化图片批量处理

• 视频相关

  • • H5的Video在IOS上播放不了视频

• 时间相关

  • • 计算今日往前14年的时间戳
  • • js获取日期秒级时间戳

• 其他

  • • 判断并解析JSON字符串的完整解决方案
  • • 优化 uni-app 网络检测混入方案

【其他】

• MacOS

• • 解决 Mac M 系列芯片 Vue 项目 node-sass 兼容问题的完整方案
• • 2025年MacOS Homebrew国内镜像加速完整指南：解决安装慢、下载卡顿问题

• Tinymce

• • TinyMCE富文本编辑器：菜单与工具栏配置实战指南
• • TinyMCE富文本编辑器：菜单与工具栏配置指南

最后

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

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

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

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

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