EveryDay

# EveryDay

GitHub ｜ Timeline ｜ Blog ｜ Blog-SSG ｜ English

> 勤学如春起之苗，不见其增，日有所长； > 辍学如磨刀之石，不见其损，日有所亏。 如果觉得还不错，点个`star`吧 版本库中共有`512`篇文章，总计`103589`行，`1266986`字，`3427734`字符。 这是一个前端小白的学习历程，如果只学习而不记录点什么那基本就等于白学了。这个版本库的名字`EveryDay`就是希望激励我能够每天学习，下面的文章就是从`2020.02.25`开始积累的文章，都是参考众多文章归纳整理学习而写的。文章包括了`HTML`基础、`CSS`基础、`JavaScript`基础与拓展、`Browser`浏览器相关、`Vue`使用与分析、`React`使用与分析、`Plugin`插件相关、`RichText`富文本、`Patterns`设计模式、`Linux`命令、`LeetCode`题解等类别，内容都是比较基础的，毕竟我也还是个小白。此外基本上每个示例都是本着能够即时运行为目标的，新建一个`HTML`文件复制之后即可在浏览器运行或者直接可以在`console`中运行。 如果想按照笔记顺序进行阅读的话可以 [查看目录](./Timeline.md) ，另外如果想更条理地查看的话可以访问 [我的博客](https://blog.touchczy.top/) 独立站点。博客同时也是本版本库的`gh-pages`分支，是作为纯静态页面搭建在`Git Pages`上的，使用`jsdelivr`以及`cloudflare`作为缓存缓解国内访问速度问题。后期还在`gh-pages-ssg`分支上部署了`SSG`版本的 [新版博客](https://blog-ssg.touchczy.top/)，并且借助`ChatGPT`提供了英文翻译版本，分支是部署在`Vercel`上来缓解国内访问速度问题。在博客中的内容就相对比较多了，除了学习笔记之外还有一些做项目时的记录以及遇到的坑等。`HXDM`如果觉得还不错，点个`star`吧，这个对我真的很重要。 ## HTML * [DOCTYPE](HTML/DOCTYPE.md) * [HTML语义化](HTML/HTML语义化.md) * [Cookie与Session](HTML/Cookie与Session.md) * [LocalStorage与SessionStorage](HTML/LocalStorage与SessionStorage.md) * [Iframe框架及优缺点](HTML/Iframe框架及优缺点.md) * [HTML节点操作](HTML/HTML节点操作.md) * [手动实现轮播图功能](HTML/手动实现轮播图功能.md) * [Canvas基础](HTML/Canvas基础.md) * [前端性能优化方案](HTML/前端性能优化方案.md) * [HTML5新特性](HTML/HTML5新特性.md) * [行内元素和块级元素](HTML/行内元素和块级元素.md) * [图片等比例缩放方案](HTML/图片等比例缩放方案.md) * [实现瀑布流布局](HTML/实现瀑布流布局.md) * [实现图片懒加载](HTML/实现图片懒加载.md) * [Web Worker](HTML/Web%20Worker.md) * [300ms点击延迟](HTML/300ms点击延迟.md) * [默认行为及阻止](HTML/默认行为及阻止.md) * [可替换元素和非替换元素](HTML/可替换元素和非替换元素.md) * [HTML与XHTML区别](HTML/HTML与XHTML区别.md) * [常见的兼容性问题](HTML/常见的兼容性问题.md) * [Attribute和Property的区别](HTML/Attribute和Property的区别.md) * [实现拼图滑动验证码](HTML/实现拼图滑动验证码.md) * [实现加载提示组件](HTML/实现加载提示组件.md) * [实现消息提示组件](HTML/实现消息提示组件.md) * [DOM和BOM的区别](HTML/DOM和BOM的区别.md) * [实现三栏布局](HTML/实现三栏布局.md) * [Shadow DOM的理解](HTML/Shadow%20DOM的理解.md) * [Service Worker的应用](HTML/Service%20Worker的应用.md) * [蒙层禁止页面滚动的方案](HTML/蒙层禁止页面滚动的方案.md) * [SVG与foreignObject元素](HTML/SVG与foreignObject元素.md) ## CSS * [布局垂直居中](CSS/布局垂直居中.md) * [伪类与伪元素](CSS/伪类与伪元素.md) * [CSS盒子模型](CSS/CSS盒子模型.md) * [CSS选择器](CSS/CSS选择器.md) * [CSS样式优先级](CSS/CSS样式优先级.md) * [Flex布局](CSS/Flex布局.md) * [Grid布局](CSS/Grid布局.md) * [Table布局](CSS/Table布局.md) * [SVG基础](CSS/SVG基础.md) * [CSS引入方式](CSS/CSS引入方式.md) * [CSS3新特性](CSS/CSS3新特性.md) * [响应式布局的实现](CSS/响应式布局的实现.md) * [块级格式化上下文](CSS/块级格式化上下文.md) * [Position定位](CSS/Position定位.md) * [Float浮动](CSS/Float浮动.md) * [文本溢出截断省略](CSS/文本溢出截断省略.md) * [CSS隐藏元素的方法](CSS/CSS隐藏元素的方法.md) * [如何避免FOUC](CSS/如何避免FOUC.md) * [display的值及作用](CSS/display的值及作用.md) * [CSS常用单位](CSS/CSS常用单位.md) * [实现毛玻璃效果](CSS/实现毛玻璃效果.md) * [CSS实现图形效果](CSS/CSS实现图形效果.md) * [实现文字滚动播放](CSS/实现文字滚动播放.md) * [CSS实现展开动画](CSS/CSS实现展开动画.md) * [CSS实现渐隐渐现效果](CSS/CSS实现渐隐渐现效果.md) ## JavaScript * [手动实现AJAX](JavaScript/手动实现AJAX.md) * [ES6新特性](JavaScript/ES6新特性.md) * [原型与原型链](JavaScript/原型与原型链.md) * [JavaScript闭包](JavaScript/JavaScript闭包.md) * [JS变量提升](JavaScript/JS变量提升.md) * [匿名函数与自执行函数](JavaScript/匿名函数与自执行函数.md) * [apply、call、bind](JavaScript/apply、call、bind.md) * [事件冒泡及阻止](JavaScript/事件冒泡及阻止.md) * [JS事件流模型](JavaScript/JS事件流模型.md) * [函数声明与函数表达式](JavaScript/函数声明与函数表达式.md) * [JS中this的指向](JavaScript/JS中this的指向.md) * [new运算符](JavaScript/new运算符.md) * [Js遍历数组总结](JavaScript/Js遍历数组总结.md) * [Promise对象](JavaScript/Promise对象.md) * [async、await](JavaScript/async、await.md) * [Generator函数](JavaScript/Generator函数.md) * [Js中==与===](JavaScript/Js中==与===.md) * [JavaScript选择器](JavaScript/JavaScript选择器.md) * [Json Web Token](JavaScript/Json%20Web%20Token.md) * [Js模块化导入导出](JavaScript/Js模块化导入导出.md) * [let与const](JavaScript/let与const.md) * [作用域与作用域链](JavaScript/作用域与作用域链.md) * [JavaScript异步机制](JavaScript/JavaScript异步机制.md) * [Js数组操作](JavaScript/Js数组操作.md) * [Js继承的实现方式](JavaScript/Js继承的实现方式.md) * [Function与Object](JavaScript/Function与Object.md) * [Js严格模式](JavaScript/Js严格模式.md) * [Js箭头函数](JavaScript/Js箭头函数.md) * [手动实现apply call bind](JavaScript/手动实现apply%20call%20bind.md) * [Js遍历对象总结](JavaScript/Js遍历对象总结.md) * [Js获取数据类型](JavaScript/Js获取数据类型.md) * [手动实现Promise](JavaScript/手动实现Promise.md) * [Js实现数组排序](JavaScript/Js实现数组排序.md) * [defineProperty](JavaScript/defineProperty.md) * [Js实现链表操作](JavaScript/Js实现链表操作.md) * [getter与setter](JavaScript/getter与setter.md) * [Js中的堆栈](JavaScript/Js中的堆栈.md) * [防抖与节流](JavaScript/防抖与节流.md) * [Js的GC机制](JavaScript/Js的GC机制.md) * [实现浅拷贝与深拷贝](JavaScript/实现浅拷贝与深拷贝.md) * [Map与WeakMap](JavaScript/Map与WeakMap.md) * [Set与WeakSet](JavaScript/Set与WeakSet.md) * [Object对象](JavaScript/Object对象.md) * [Js捕获异常的方法](JavaScript/Js捕获异常的方法.md) * [Js中fetch方法](JavaScript/Js中fetch方法.md) * [XML和JSON的比较](JavaScript/XML和JSON的比较.md) * [Js文件异步加载](JavaScript/Js文件异步加载.md) * [深入理解Js数组](JavaScript/深入理解Js数组.md) * [模板语法的简单实现](JavaScript/模板语法的简单实现.md) * [Thunk函数的使用](JavaScript/Thunk函数的使用.md) * [async、await剖析](JavaScript/async、await剖析.md) * [null和undefined的区别](JavaScript/null和undefined的区别.md) * [Js创建对象的方式](JavaScript/Js创建对象的方式.md) * [Js中RegExp对象](JavaScript/Js中RegExp对象.md) * [Js中String对象](JavaScript/Js中String对象.md) * [Js中Number对象](JavaScript/Js中Number对象.md) * [Js中Math对象](JavaScript/Js中Math对象.md) * [Js中数组空位问题](JavaScript/Js中数组空位问题.md) * [Js中Array对象](JavaScript/Js中Array对象.md) * [Js中Currying的应用](JavaScript/Js中Currying的应用.md) * [Js中Date对象](JavaScript/Js中Date对象.md) * [Js中Symbol对象](JavaScript/Js中Symbol对象.md) * [valueOf与toString](JavaScript/valueOf与toString.md) * [Js模块化开发的理解](JavaScript/Js模块化开发的理解.md) * [常见的内存泄漏场景](JavaScript/常见的内存泄漏场景.md) * [Js中Proxy对象](JavaScript/Js中Proxy对象.md) * [Js中Reflect对象](JavaScript/Js中Reflect对象.md) * [Js中的逻辑运算符](JavaScript/Js中的逻辑运算符.md) * [Js将字符串转数字的方式](JavaScript/Js将字符串转数字的方式.md) * [函数式编程的理解](JavaScript/函数式编程的理解.md) * [Js实用小技巧](JavaScript/Js实用小技巧.md) * [深入理解Js中的this](JavaScript/深入理解Js中的this.md) * [Js中的位操作符](JavaScript/Js中的位操作符.md) ## Browser * [跨域问题](Browser/跨域问题.md) * [XSS跨站脚本攻击](Browser/XSS跨站脚本攻击.md) * [CSRF跨站请求伪造](Browser/CSRF跨站请求伪造.md) * [SQL注入](Browser/SQL注入.md) * [浏览器渲染与内核](Browser/浏览器渲染与内核.md) * [浏览器重绘与回流](Browser/浏览器重绘与回流.md) * [HTTP协议概述](Browser/HTTP协议概述.md) * [CSS劫持攻击](Browser/CSS劫持攻击.md) * [HTTPS加密传输过程](Browser/HTTPS加密传输过程.md) * [对称加密与非对称加密](Browser/对称加密与非对称加密.md) * [分布式SESSION一致性](Browser/分布式SESSION一致性.md) * [TCP三次握手](Browser/TCP三次握手.md) * [TCP与UDP异同](Browser/TCP与UDP异同.md) * [浏览器事件](Browser/浏览器事件.md) * [浏览器页面呈现过程](Browser/浏览器页面呈现过程.md) * [RESTful架构与RPC架构](Browser/RESTful架构与RPC架构.md) * [HTTP协议发展历程](Browser/HTTP协议发展历程.md) * [微信小程序实现原理](Browser/微信小程序实现原理.md) * [Window对象](Browser/Window对象.md) * [OSI七层模型](Browser/OSI七层模型.md) * [浏览器窗口间通信](Browser/浏览器窗口间通信.md) * [OAUTH开放授权](Browser/OAUTH开放授权.md) * [SSO单点登录](Browser/SSO单点登录.md) * [DNS解析过程](Browser/DNS解析过程.md) * [强缓存与协商缓存](Browser/强缓存与协商缓存.md) * [GET和POST的区别](Browser/GET和POST的区别.md) * [CDN缓存的理解](Browser/CDN缓存的理解.md) * [domReady的理解](Browser/domReady的理解.md) * [Document对象](Browser/Document对象.md) * [Location对象](Browser/Location对象.md) * [SSRF服务器端请求伪造](Browser/SSRF服务器端请求伪造.md) * [浏览器本地存储方案](Browser/浏览器本地存储方案.md) * [Node对象](Browser/Node对象.md) * [History对象](Browser/History对象.md) * [Navigator对象](Browser/Navigator对象.md) * [Element对象](Browser/Element对象.md) * [HTMLElement对象](Browser/HTMLElement对象.md) * [Event对象](Browser/Event对象.md) * [IntersectionObserver对象](Browser/IntersectionObserver对象.md) * [MutationObserver对象](Browser/MutationObserver对象.md) * [基于fetch的SSE方案](Browser/基于fetch的SSE方案.md) ## Vue * [Vue学习笔记](Vue/Vue学习笔记.md) * [Vue-Cli4笔记](Vue/Vue-Cli4笔记.md) * [Vue生命周期](Vue/Vue生命周期.md) * [Vue中key的作用](Vue/Vue中key的作用.md) * [Vue数据双向绑定](Vue/Vue数据双向绑定.md) * [data为何以函数形式返回](Vue/data为何以函数形式返回.md) * [Vue中$nextTick的理解](Vue/Vue中$nextTick的理解.md) * [MVVM模式的理解](Vue/MVVM模式的理解.md) * [v-if与v-show的区别](Vue/v-if与v-show的区别.md) * [Vue中$refs的理解](Vue/Vue中$refs的理解.md) * [Vue中虚拟DOM的理解](Vue/Vue中虚拟DOM的理解.md) * [Vue中diff算法的理解](Vue/Vue中diff算法的理解.md) * [$router和$route的区别](Vue/$router和$route的区别.md) * [对keep-alive组件的理解](Vue/对keep-alive组件的理解.md) * [SPA单页应用的优缺点](Vue/SPA单页应用的优缺点.md) * [Vue事件绑定原理](Vue/Vue事件绑定原理.md) * [Vue中数组变动监听](Vue/Vue中数组变动监听.md) * [Vue父子组件生命周期](Vue/Vue父子组件生命周期.md) * [Vue中computed分析](Vue/Vue中computed分析.md) * [Vue路由Hash模式分析](Vue/Vue路由Hash模式分析.md) * [Vue路由History模式分析](Vue/Vue路由History模式分析.md) * [v-model数据绑定分析](Vue/v-model数据绑定分析.md) * [Vue路由懒加载](Vue/Vue路由懒加载.md) * [VueRouter导航守卫](Vue/VueRouter导航守卫.md) * [服务端渲染SSR的理解](Vue/服务端渲染SSR的理解.md) * [Vue常用性能优化](Vue/Vue常用性能优化.md) * [Vuex和普通全局对象](Vue/Vuex和普通全局对象.md) * [Vuex中的核心方法](Vue/Vuex中的核心方法.md) * [Vue中组件间通信的方式](Vue/Vue中组件间通信的方式.md) * [Vue3.0新特性](Vue/Vue3.0新特性.md) * [Vue为何采用异步渲染](Vue/Vue为何采用异步渲染.md) * [Vue中的三种Watcher](Vue/Vue中的三种Watcher.md) * [v-html可能导致的问题](Vue/v-html可能导致的问题.md) * [初探webpack之搭建Vue开发环境](Plugin/初探webpack之搭建Vue开发环境.md) * [Vue首屏性能优化组件](Vue/Vue首屏性能优化组件.md) ## React * [React生命周期](React/React生命周期.md) * [React虚拟DOM的理解](React/React虚拟DOM的理解.md) * [React中JSX的理解](React/React中JSX的理解.md) * [React组件的state和props](React/React组件的state和props.md) * [有状态和无状态组件](React/有状态和无状态组件.md) * [受控组件和非受控组件](React/受控组件和非受控组件.md) * [React中的纯组件](React/React中的纯组件.md) * [React中的高阶组件](React/React中的高阶组件.md) * [React中refs的理解](React/React中refs的理解.md) * [React中的合成事件](React/React中的合成事件.md) * [ReactRouter的实现](React/ReactRouter的实现.md) * [React中组件间通信的方式](React/React中组件间通信的方式.md) * [React组件复用的方式](React/React组件复用的方式.md) * [React中diff算法的理解](React/React中diff算法的理解.md) * [Hooks中的useState](React/Hooks中的useState.md) * [useEffect与useLayoutEffect](React/useEffect与useLayoutEffect.md) * [useMemo与useCallback](React/useMemo与useCallback.md) * [setState同步异步场景](React/setState同步异步场景.md) * [手写useState与useEffect](React/手写useState与useEffect.md) * [Mobx与Redux的异同](React/Mobx与Redux的异同.md) * [Context与Reducer](React/Context与Reducer.md) * [Hooks与普通函数的区别](React/Hooks与普通函数的区别.md) * [Hooks与事件绑定](React/Hooks与事件绑定.md) * [React闭包陷阱](React/React闭包陷阱.md) * [ReactPortals传送门](React/ReactPortals传送门.md) * [基于React的SSG渲染方案](React/基于React的SSG渲染方案.md) * [基于React的虚拟滚动方案](React/基于React的虚拟滚动方案.md) * [低代码场景的状态管理方案](React/低代码场景的状态管理方案.md) ## Plugin * [Git常用命令](Plugin/Git常用命令.md) * [Git与SVN对比](Plugin/Git与SVN对比.md) * [Nginx常用配置](Plugin/Nginx常用配置.md) * [Rollup的基本使用](Plugin/Rollup的基本使用.md) * [Jest中Mock网络请求](Plugin/Jest中Mock网络请求.md) * [TS内置类型与拓展](Plugin/TS内置类型与拓展.md) * [竞态问题与RxJs](Plugin/竞态问题与RxJs.md) * [BGF处理Git历史Blob文件](Plugin/BGF处理Git历史Blob文件.md) * [基于NoCode构建简历编辑器](Plugin/基于NoCode构建简历编辑器.md) * [基于drawio构建流程图编辑器](Plugin/基于drawio构建流程图编辑器.md) * [初探webpack之编写plugin](Plugin/初探webpack之编写plugin.md) * [初探webpack之搭建Vue开发环境](Plugin/初探webpack之搭建Vue开发环境.md) * [初探webpack之编写loader](Plugin/初探webpack之编写loader.md) * [初探webpack之单应用多端构建](Plugin/初探webpack之单应用多端构建.md) * [初探webpack之解析器resolver](Plugin/初探webpack之解析器resolver.md) * [从零实现的Chrome扩展](Plugin/从零实现的Chrome扩展.md) * [从零实现的浏览器Web脚本](Plugin/从零实现的浏览器Web脚本.md) * [基于Chrome扩展的浏览器事件](Plugin/基于Chrome扩展的浏览器事件.md) * [从脚本管理器的角度审视Chrome扩展](Plugin/从脚本管理器的角度审视Chrome扩展.md) * [浏览器扩展开发的相关问题与解决方案](Plugin/浏览器扩展开发的相关问题与解决方案.md) * [基于WebRTC的局域网文件传输](Plugin/基于WebRTC的局域网文件传输.md) * [基于ServiceWorker的文件传输方案](Plugin/基于ServiceWorker的文件传输方案.md) * [基于Canvas构建简历编辑器](Plugin/基于Canvas构建简历编辑器.md) * [Canvas编辑器之数据结构设计](Plugin/Canvas编辑器之数据结构设计.md) * [Canvas编辑器之剪贴板数据处理](Plugin/Canvas编辑器之剪贴板数据处理.md) * [Canvas编辑器之图形状态管理](Plugin/Canvas编辑器之图形状态管理.md) * [Canvas编辑器之Rspack工程实践](Plugin/Canvas编辑器之Rspack工程实践.md) * [Canvas编辑器之层级渲染事件管理](Plugin/Canvas编辑器之层级渲染事件管理.md) * [Canvas编辑器之选中绘制交互方案](Plugin/Canvas编辑器之选中绘制交互方案.md) * [基于向量检索实现基础RAG服务](Plugin/基于向量检索实现基础RAG服务.md) * [流式Markdown增量富文本解析算法](Plugin/流式Markdown增量富文本解析算法.md) * [仿照豆包实现Prompt变量模板输入框](Plugin/仿照豆包实现Prompt变量模板输入框.md) * [基于NodeJs实现任务队列与优雅停机](Plugin/基于NodeJs实现任务队列与优雅停机.md) * [基于MdIt的无序列表折叠插件](Plugin/基于MdIt的无序列表折叠插件.md) ## RichText * [初探富文本之富文本概述](RichText/初探富文本之富文本概述.md) * [初探富文本之编辑器引擎](RichText/初探富文本之编辑器引擎.md) * [初探富文本之OT协同算法](RichText/初探富文本之OT协同算法.md) * [初探富文本之OT协同实例](RichText/初探富文本之OT协同实例.md) * [初探富文本之CRDT协同算法](RichText/初探富文本之CRDT协同算法.md) * [初探富文本之CRDT协同实例](RichT