shawncai / Blog-1

圆圆的博客，预计写七个系列：JavaScript深入系列、JavaScript专题系列、网络系列、Webpack系列、Vue系列、JavaScript基础系列、HTML&CSS应知应会系列。

圆圆的博客

我是圆圆，一名深耕于前端开发的攻城狮，如果想第一时间获取文章，欢迎关注我的公众号：「前端圆圆」。

如果文章对你的学习成长有所帮助，欢迎 Star，你的支持是我创作分享的动力。

使用了 GitHub 的 issues 区域来作为博文发布区。

我的其他平台

• 掘金博客(精华)
• CSDN博客(全集)
• https://yuanyuan.blog.csdn.net

JavaScript 深入系列

1. JavaScript 深入系列之从原型到原型链
2. JavaScript 深入系列之执行上下文栈和作用域链
3. JavaScript 深入系列之闭包的作用、使用场景以及性能问题
4. JavaScript 深入系列之宏任务、微任务和事件循环 Event Loop
5. JavaScript 深入系列之基本数据类型和引用数据类型
6. JavaScript 深入系列之深拷贝的实现
7. JavaScript 深入系列之 DOM 事件响应机制
8. JavaScript 深入系列之事件委托（事件代理）
9. JavaScript 深入系列之数据类型检测
10. JavaScript 深入系列之实现 AJAX，使用 Promise 封装 AJAX 请求
11. JavaScript 深入系列之 call 和 apply 方法的模拟实现
12. JavaScript 深入系列之 bind 方法的模拟实现
13. JavaScript 深入系列之 new 操作符的模拟实现
14. JavaScript 深入系列之 instanceof 操作符的模拟实现
15. JavaScript 深入系列之 Object.create 的模拟实现
16. JavaScript 深入系列之发布-订阅者模式的模拟实现
17. JavaScript 深入系列之防抖函数从基础到进阶版的实现
18. JavaScript 深入系列之节流函数的两种实现方式
19. JavaScript 深入系列之继承的五种实现方式
20. JavaScript 深入系列之前端模块化详解：CommonJS、AMD、CMD、ES6
21. JavaScript 深入系列之异步编程的 5 种解决方案
22. JavaScript 深入系列之内存泄漏与垃圾回收机制
23. JavaScript 深入系列之 Promise 核心原理的模拟实现，通过 Promises/A+ 官方872个测试用例
24. JavaScript 深入系列之 Promise 实例方法 catch 和 finally 的模拟实现
25. JavaScript 深入系列之 Promise 静态方法 resolve、reject、all、allSettled、any 和 race 的模拟实现

网络系列

1. 网络系列之 HTTP 协议
2. 网络系列之 HTTP/1.0、HTTP/1.1、HPPT/2.0 和 HTTP/3.0 版本的对比
3. 网络系列之 TCP 和 UDP 的特点、区别和使用场景
4. 网络系列之 HTTPS 工作原理，理解 HTTPS 加密、解密、验证及数据传输过程

浏览器系列

1. 浏览器系列之从 URL 输入到页面展现发生了什么，详解 TCP 三次握手和四次挥手
2. 浏览器系列之分析 304 状态码过程，图解 HTTP 强缓存和协商缓存

JavaScript 专题系列

1. JavaScript 专题系列之 ES6 新特性 Promise
2. JavaScript 专题系列之 ES6 新特性 Class 类
3. JavaScript 专题系列之 ES8 新特性 async/await
4. JavaScript 专题系列之 Axios
5. JavaScript 专题系列之 Fetch
6. JavaScript 专题系列之 Ajax、Axios 与 Fetch 的对比
7. JavaScript 专题系列之 Axios 拦截器的配置与使用
8. JavaScript 专题系列之正则表达式

Webpack 系列

1. Webpack系列之简介与五个核心概念
2. Webpack系列之开发环境配置(打包样式、html、图片和其他资源，配置devServer)
3. Webpack系列之生产环境配置(提取css为单独文件，js语法检查eslint，html、css和js的压缩与兼容性处理)
4. Webpack性能优化系列之 HMR 热模块替换
5. Webpack性能优化系列之 source-map
6. Webpack性能优化系列之 oneOf
7. Webpack性能优化系列之缓存 (详解如何做bable缓存和文件资源缓存)
8. Webpack性能优化系列之 tree shaking (去除未引用代码，减少代码体积)
9. Webpack性能优化系列之 code splitting (代码分割，优化资源加载)
10. Webpack性能优化系列之懒加载和预加载
11. Webpack性能优化系列之 PWA (使用渐进式网络应用程序为我们的项目添加离线体验)
12. Webpack性能优化系列之多进程打包 (极大的提升项目打包构建速度)

Vue 系列

1. Vue系列之对 vue 的理解
2. Vue系列之 MVVM 和 MVC 的区别
3. Vue系列之常用的 vue 内部指令
4. Vue系列之常用的 vue 修饰符
5. Vue系列之组件通信有哪几种方式
6. Vue系列之对 SPA 单页面的理解，它的优缺点分别是什么
7. Vue系列之对 vue 单向数据流的理解
8. Vue系列之 watch 有哪些属性，作用是什么
9. Vue系列之 computed 和 watch 的区别和使用场景
10. Vue系列之如何动态绑定 class 与 style
11. Vue系列之组件的 data 为什么必须是一个函数
12. Vue系列之为什么不建议同时使用 v-if 和 v-for
13. Vue系列之 v-if 和 v-show 的区别
14. Vue系列之 Vue 和 JQuery 的区别
15. Vue系列之对 vue 生命周期的理解
16. Vue系列之简述每个生命周期具体适合哪些场景
17. Vue系列之第一次页面加载会触发哪几个钩子
18. Vue系列之父组件和子组件生命周期钩子函数执行顺序
19. Vue系列之应该在哪个生命周期内发起异步请求
20. Vue系列之父组件可以监听到子组件的生命周期吗
21. Vue系列之计算属性缓存和表达式调用方法的区别

网络安全系列

1. 网络安全系列之前端常见的 Web 安全攻防解析

JavaScript 基础系列

1. JavaScript 基础系列之 JS 的数据类型有哪些
2. JavaScript 基础系列之 typeof 能判断哪些类型
3. JavaScript 基础系列之判断数组的方式有哪些
4. JavaScript 基础系列之 null 和 undefined 的区别， typeof null 的结果是什么
5. JavaScript 基础系列之 == 和 === 的区别，理解隐式类型转换步骤
6. JavaScript 基础系列之分析 [] == ![] 的结果
7. JavaScript 基础系列之分析 {} 和 [] 的 valueOf() 和 toString() 的结果
8. JavaScript 基础系列之原始值和引用值
9. JavaScript 基础系列之原始值转换的抽象操作 toPrimitive
10. JavaScript 基础系列之 let、const 以及 var 的区别
11. JavaScript 基础系列之理解变量提升和暂时性死区
12. JavaScript 基础系列之 this 指向问题
13. JavaScript 基础系列之 call、apply 和 bind 方法的用法、区别和使用场景
14. JavaScript 基础系列之 for of，for in，forEach 和 map 的区别
15. JavaScript 基础系列之数组原生方法梳理
16. JavaScript 基础系列之分析 0.1+0.2 !== 0.3
17. JavaScript 基础系列之对严格模式 "use strict" 的理解
18. JavaScript 基础系列之常见的 DOM 操作
19. JavaScript 基础系列之对 JSON 的理解
20. JavaScript 基础系列之箭头函数的 this 指向
21. JavaScript 基础系列之箭头函数与普通函数的区别
22. JavaScript 基础系列之对象属性简写
23. JavaScript 基础系列之分析 const 对象的属性是否可以修改
24. JavaScript 基础系列之理解函数的 arguments 参数为什么是类数组而不是数组，如何遍历类数组
25. JavaScript 基础系列之分析 setTimeout 倒计时为什么会出现误差
26. JavaScript 基础系列之 eval() 方法
27. JavaScript 基础系列之认识 bable
28. JavaScript 基础系列之 ECMAScript 的发展历史及各版本名称介绍

HTML 应知应会系列

1. HTML系列之 DOCTYPE 的作用
2. HTML系列之 HTML、XHTML 和 XML 之间的区别
3. HTML系列之 data- 属性
4. HTML系列之语义化的理解
5. HTML系列之什么是 HTML5？HTML5 和 HTML 的区别
6. HTML系列之常用的 meta 标签
7. HTML系列之 src 和 href 的区别
8. HTML系列之 img 的 srcset 的作用
9. HTML系列之 script 标签中 defer 和 async 的区别
10. HTML系列之前端存储

CSS 应知应会系列

1. CSS系列之性能优化总结
2. CSS系列之选择器的优先级
3. CSS系列之多类选择器和结合元素选择器
4. CSS系列之什么是 BFC，如何形成，应用场景有哪些
5. CSS系列之盒模型的理解，标准盒模型和怪异盒模型有什么区别
6. CSS系列之清除浮动有哪些方法，为什么要清除浮动
7. CSS系列之如何让一个元素水平垂直居中(方案总结+代码实例)
8. CSS系列之圣杯布局和双飞翼布局的实现和理解
9. CSS系列之 px/em/rem 的区别，详解 em 和 rem 是如何转换为像素值
10. CSS系列之对 flex 的理解
11. CSS系列之手写三角形
12. CSS系列之定位方式有哪几种，详解 sticky 粘性定位
13. CSS系列之如何理解 z-index 和层叠上下文
14. CSS系列之媒体查询
15. CSS系列之动画和过渡
16. CSS系列之伪类和伪元素的区别
17. CSS系列之隐藏页面元素的方式
18. CSS系列之禁止用户选中
19. CSS系列之浏览器如何解析 CSS 选择器
20. CSS系列之为什么要初始化 CSS 样式
21. CSS系列之 display:none 与 visibility：hidden 的区别
22. CSS系列之 png、jpg、gif 和 webp 图片格式的理解
23. CSS系列之页面导入样式时，使用 link 和 @import 的区别

彩蛋

1. 中文文案排版指北

关于订阅

如果喜欢或者有所启发，欢迎 Star，你的支持是我创作分享的动力。

订阅本博客的话，点击 Watch 按钮，再选中 Watching 即可。这样每次有更新 github 就会提醒你。

勘误及提问

如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误。

关于版权

博客内容主要为本人的原创和网络优质内容的收录与个人理解。

人人为我，我为人人，转载注明出处

原创文章的商业转载联系我

❤️感谢大家

欢迎添加我的个人微信 yuanyuanbyte

关注公众号「前端圆圆」，拉你进交流群，大家一起交流进步。