fe-notes(前端开发笔记)

I'm a slow walker, but I never walk backwards. — Abragam Lincoln.

本仓库旨在收集整理前端基础知识以及开发实践。包括前端八股，最佳实践，踩坑汇总等，既有完整的系列，也有零碎的思考。

目录

• Browser_网络_安全
  • 0-从输入 URL 到浏览器渲染发生了什么
  • Cookie
  • DNS解析
  • HTTP1
  • HTTP2
  • HTTP3
  • HTTPS
  • JS中的执行原理-变量提升、调用栈、作用域以及闭包
  • Nginx必知必会
  • SSE(server-send-event)
  • TCP三次握手四次挥手
  • webRTC
  • web安全-内容安全策略CSP
  • web安全-同源策略与跨域解决
  • web安全-点击劫持
  • web安全渗透之CSRF
  • web安全渗透之XSS
  • web缓存-CDN缓存以及回源机制
  • web缓存
  • 加密算法
  • 响应头状态码
  • 浏览器的多进程架构
  • 理解HTTP中的Content-type
  • 理解get和post
  • 跨域验证的方案
  • 长轮询(Long polling)
• Webpack
  • 1-实现mini-webpack
  • 2-webpack中loader的运行机制
  • 3-webpack中的tabpable
  • AMD与RequireJS
  • CMD与SeaJS
  • CommonJS与Node
  • ES6-module
  • Tree-shaking工作原理
  • UMD
  • package.json中模块化相关的字段
  • vite的工作原理
  • webpack动态加载
  • webpack模块联邦原理
  • 重新梳理前端模块化
• Canvas
  • Excalidraw初探
  • canvas中的图片处理
  • canvas使用贝塞尔曲线优化自由画笔并探究其原理
  • canvas元素选中与碰撞检测算法
  • canvas入门指北
  • canvas坐标及无限画布的原理
  • canvas实现撤销重做
  • canvas尺寸
  • canvas性能优化
  • canvas性能分析的手段
  • canvas文本渲染
  • canvas画布擦除功能
• 性能优化
  • 0-README
  • CSS优化
  • GPU加速
  • Gzip工作原理
  • React profile优化React应用
  • React代码优化
  • css优化
  • react-ssr原理分析
  • script标签中的async与defer
  • webpack构建优化
  • web资源加载优先级
  • 回流与重绘
  • 图片优化
  • 性能优化的指标
  • 性能检测指标与工具
  • 用户交互体验优化
• Javascript
  • ES-Next 新特性
  • HTML中的焦点管理
  • JS 中的事件捕获与冒泡
  • JS中使用IndexDB
  • JS中的BigInt
  • JS中的proxy和defineProperty
  • JS中的二进制
  • JS中的位运算
  • JS中的类型转换
  • JS中的精度问题
  • JS实现多条件排序
  • JS正则表达式速查笔记
  • Set和Map
    • UnderScore源码
      • underscore源码学习笔记(一)如何读underscore源码
      • underscore源码学习笔记(三)初始化以及两种调用方式
      • underscore源码学习笔记(二)几个helper函数
      • underscore源码学习笔记(五)Array相关的方法
      • underscore源码学习笔记(六)实现bind,call, apply
      • underscore源码学习笔记(四)collction相关方法
  • keydown, input,change,compsition事件的区别
  • selection与range
  • 一文理解JS中的继承
  • 前端埋点
  • 前端异常处理
  • 前端截图
  • 剪贴板操作
  • 理解base64
• HTML_CSS
  • 0-css面试题汇总
  • css中有关用户行为的user-xx
  • css中的层叠,权重与继承
  • css中的方位与顺序
  • css中的线性渐变
  • css如何实现前一个兄弟节点的选择效果
  • css实现元素尺寸比例保持不变
  • css实现半椭圆效果
  • css实现平行四边形效果
  • css实现灵活的footer效果
  • css实现等高布局
  • css实现遮罩效果的几种方式
  • css实现饼图效果
  • css径向渐变
  • flex与margin auto为何能实现水平居中效果
  • line-height和vertical-align实现多行文字水平垂直居中效果
  • zIndex管理
  • 你不知道的margin
  • 关于设备自适应需要知道知识(DPI,PPI,分辨率,屏幕尺寸)
  • 实现一个按钮相关的单行布局效果
  • 文字布局基础
• React源码
  • React和Vue对比
  • diff算法
    • fiber
      • react中的fiber架构
    • scheduler
      • 任务调度的基本原理
    • 合成事件
      • React合成事件
      • 实现React合成事件
• React相关
  • React Hook实战-封装Audio
  • React-dev-inspector的工作原理
  • React为Modal添加国际化文案
  • i18n-automation-with-react-intl
  • 如何实现文字超出隐藏hover出现tooltip的效果
  • 如何实现路由中间件
  • 实现react-router
  • 实现一个简易的redux
  • 组件设计
  • 通过CDN使用React
• Vue
  • Vue Compiler的运行机制
  • 实现Vue-tiny-diff算法
  • 实现Vue-tiny-数据响应式
• Typescript
  • any-never-unknown
  • conditional-type
  • extends
  • indexed-type
  • infer
  • map-type
  • ts-declaration
• 工具_效率
  • ChatGPT初体验
  • Circleci机器人自动部署storybook到GitHub
    • Git
      • git-submodule
      • 常用git命令
  • Github
  • clash配置指南
  • iterms2-antigen-to-improve-your-work-experience
  • plantUML入门
  • prettier-eslint-vscode-实现前端代码格式化
  • windows配置
  • 在vscode上进行markdown写作
  • 在vscode中快速调试你的前端项目
  • 如何在线预览github的html页面
  • 常用的shell命令
  • 开发常用的效率工具(Mac)
  • 环境变量
• 跨端开发
  • chrome插件开发踩坑汇总
  • uniapp微信H5开发本地调试方案
  • web唤起app
• 代码手写题
  • JS实现AOP
  • 实现Promise
  • 实现call,apply,bind
  • 实现eventBus
  • 实现resolvablePromise
  • 实现几个 fp 相关的方法(partial,curry, pipe)
  • 实现深拷贝
  • 异步串行钩子
  • 批量请求函数
  • 红绿灯
  • 防抖节流
• 业务相关
  • 国际化
    • 前端国际化中的RTL适配
  • 统一登录
    • 单点登录
• 踩坑汇总
  • egg获取不到cookie的值
  • 如何在页面卸载前发送请求
  • 如何处理翻译软件翻译掉占位符
  • 子元素transform后父元素依然占据空间
  • 桌面web踩坑记录
  • 移动web踩坑
• 模式_架构
  • 控制反转与依赖注入
  • 策略模式
• Node
  • Node中事件循环
  • koa源码学习笔记
• SVG
  • SVG入门指南
• AngularJS
  • build-your-own-angular-0-project-setup
  • build-your-own-angular-2-scope-inheritance
  • build-your-own-angular-3-watch-collections
  • build-your-own-angular-4-events
  • build-your-own-angular-cp10-module-injection
  • build-your-own-angular-cp11-provider
  • build-your-own-angular-cp8-filters
  • build-your-own-angular-literal-expressions
  • build-your-own-angular-operator-expression
  • build-your-own-angular-property-lookup
  • 理解angularJS中的transclusion
• 程序人生
  • (译)提升你的逆向工程技能
  • 西班牙ISE2024之行