掘金原文。
前端进阶知识汇总（持续更新中）

针对学习了前端三件套，html、css、javascript以及vue、react等前端框架其一，但感觉基础知识体系不牢固的同学，补充提供多个方向知识体系，所放链接均为笔者曾经阅读完全的文章，过滤水货。每日一更

js系列是web开发中最重要的一环，你可以写不出太好看的页面，但是功能一定要到位，这是最基本的。

es6常用语法总结

抛开各种让人眼花缭乱的衍生api，最原汁原味的ECMA语法

• ES6 常用总结(前端开发js技术进阶提升总结） - xiaobe - 博客园 (cnblogs.com)
• ES6进阶之路 - GavinJay - 博客园 (cnblogs.com)
• 前端基础进阶（十六）：es6常用基础合集 - 简书 (jianshu.com)

js技巧

有很多技巧其实没有必要或者用起来让人感到费解，但是这个阶段应该大量的阅读代码，看看一种功能的多种实现方式，深入思考。

• 灵活运用JS开发技巧 - 掘金 (juejin.cn)
• 33个有用的 JavaScript 小技巧 - 云+社区 - 腾讯云 (tencent.com)
• 8个JS的reduce使用实例，和reduce的骚操作 - 掘金 (juejin.cn)

作用域链和闭包

闭包也算是js的一种特色了，其本质就是延长变量的生命周期，推荐与js垃圾回收机制一起理解。

• 前端的那些事（二）：作用域与作用域链（词法与块级作用域） - 简书 (jianshu.com)
• 前端的那些事（三）：你真的理解闭包吗 - 简书 (jianshu.com)
• javascript 垃圾回收机制 - 掘金 (juejin.cn)

原型链和this指向

原型链是js实现继承的方法，也是js在没有class的情况下，重用代码的方式。本部分学习的小目标为搞明白以下代码。

• 前端的那些事（六）：原型与原型链（精选篇） - 简书 (jianshu.com)
• 彻底搞懂JavaScript中的this指向问题 - 知乎 (zhihu.com)
• this、apply、call、bind - 掘金 (juejin.cn)

深浅拷贝

通过深浅拷贝了解js变量的内存分配机制，简而言之就是简单类型变量存储在栈内存中，复制是值的复制，复杂类型，如对象，数组等类型存储在堆内存中，复制是地址引用的复制。

• JavaScript深浅拷贝 - 掘金 (juejin.cn)
• 浅拷贝与深拷贝（JavaScript） - 简书 (jianshu.com)
• JavaScript深浅拷贝 - 掘金 (juejin.cn)

事件循环 event loop

事件循环是js作为一个单线程语言实现并发与异步的手段，严格来说事件循环是浏览器所支持的，但因为是讲解js运行机制，所以也一并归为js系列。了解事件循环，就了解了js复杂繁琐的异步问题。简单的来说就是解决了以下问题。让程序员对js运行有个更深的理解，加强对代码的掌控能力。

这个机制的水很深，浏览器和node环境又有不同的区别，在不深入学习的情况下，只要搞明白上面的代码执行情况，就算是ok了。

• 带你彻底弄懂Event Loop - SegmentFault 思否
• 【JS】深入理解事件循环,这一篇就够了!(必看) - 知乎 (zhihu.com)
• 一次弄懂Event Loop（彻底解决此类面试问题） - 掘金 (juejin.cn)

事件冒泡和事件捕获

事件冒泡与事件捕获是浏览器触发事件的两种情况，一种是从html标签一直往下，一直到你触发事件的元素，一种是从你点击的事件处开始冒泡，把事件当做泡泡一直浮动到html标签。学习事件处理的机制可以在实际开发中做一些相关优化。如下：

我们想要通过点击li获取li的数字，我们怎么做，第一时间想到的，在每一个li上面绑定事件，通过事件传入每一个li本身，获取innnerHTML.如下

但可以设想，如果li多了，我们每一个li都绑定一个点击事件，且不说性能问题，单是这样看起来已经很蠢了好吧，结合上面我们说的事件冒泡，点击事件会一路传递到html标签，那么我们可以在父元素ul上面监听点击事件。如下

所以这一小节的学习目的就是完成这个简单的问题，可以在开发中进行一定优化。

• 你真的理解事件冒泡和事件捕获吗？ - SegmentFault 思否
• 你真的理解 事件冒泡 和 事件捕获 吗？ - 掘金 (juejin.cn)

html确实是最容易被忽略的一个，因为它足够简单，因为浏览器底层优化较好，在用户写出比较糟糕的标签的时候也能保持不报错，但是基础必须要掌握。

html基础知识查漏补缺

• 不为人知的 HTML 技巧 - 掘金 (juejin.cn)
• html篇–这可能是目前较为全面的html面试知识点了吧 - 掘金 (juejin.cn)

html语义化

html语义化是html5之后兴起的一个概念，相比于以前的div一把梭，html5出了一些具有语义化的标签，当然只是具有语义化，并没有什么样式和特点，本质上和div没有区别，对于html的语义化，有人觉得好，有人觉得还不如div+class语义化，但归根结底这是官方推行的方案。语义化的好处，除了编码美观以外，其实对于机器是比较友好的，因为机器不会认识你漂亮的css，它只检查html标签。比如自动阅读，而且更好的语义化结构，在去掉css后，也能保持不错的可阅读性。
如果这些还不能说服你开始html语义化的学习，那么设想一下，语义化的意义就是定义你的衣服裤子，虽然没人阻止你把裤子套在头上，但我想，没有必要。

• 如何理解HTML结构的语义化？ - 简书 (jianshu.com)
• 什么是HTML语义化？html语义化的好处（总结）-html教程-PHP中文网
• 初探 · HTML5语义化 - 知乎 (zhihu.com)

seo优化

seo优化，又叫搜索引擎优化，简单的来说就是通过配合搜索引擎的搜索方式，提高网站在搜索引擎下面的自然排名，白嫖自然流量。毕竟一个网站最主要的就是给人看嘛（管理平台除外），当然，通过给搜索引擎厂商砸钱也可以达到同样或者更好的效果…

• 作为前端，你不得不知道的搜索引擎优化 - 掘金 (juejin.cn)
• 前端搜索引擎优化（SEO）的技巧 - 掘金 (juejin.cn)
• 不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化 - 掘金 (juejin.cn)

css这个东西，学起来非常简单，搞明白几种常用选择器，然后实战，积累一段时间的属性就可以算是滚瓜烂熟了，但是实际上css远比你想象的强大，网页上所有的效果（包括3D）都是可以用css实现的，css真的困难起来，那简直已经突破前端工程的范围了，可以称得上艺术了（真有本讲css艺术的书）

css基础提升

• 1.5 万字 CSS 基础拾遗（核心知识、常见需求） - 掘金 (juejin.cn)
• 不为人知的 CSS 技巧 - 掘金 (juejin.cn)
• 前端基础篇之CSS世界 - 掘金 (juejin.cn)

css设计技巧

• 8个硬核技巧带你迅速提升CSS技术 | 掘金直播总结 - 掘金 (juejin.cn)
• 能用CSS实现的就不用麻烦JavaScript - 掘金 (juejin.cn)
• CSS揭秘实用技巧总结 - 掘金 (juejin.cn)

css工程化

前面的都没啥好说的，基础就积累，技巧就多练，但是工程化有必要介绍一下，工程化我比较中意TailwindCSS，因为以前我写代码的时候喜欢用flex布局，了解这个的都知道flex是和html高度绑定的，而且写起来一层套一层的时候特别麻烦，我就把通用的flex抽出来，然后每次写类名就可以了，这个库就是用的这种思想，把html和css合在一起，熟悉了写起来特别快，但是这里可能就有聪明的同学要说了，不都说解耦合么，怎么又混到一起了，这里就仁者见仁智者见智了，反正我感觉是好用的不行，何妨一试呢？

• 2021 年你需要知道的 CSS 工程化技术 - 掘金 (juejin.cn)

前端设计模式是基于js的，因为内容较多所以单独拿出来说道说道，设计模式是在软件开发过程中被积累出来的一种经验，一种高效的问题解决方案，之所以放在后面，也是因为学习设计模式就自动默认你的js知识已经足够。如果不知道为什么要学设计模式，请回想自己平时的开发经历，是否为自己写不出代码而尴尬，是否为自己嵌套过多的if而羞愧，是否为自己反人类的设计而自豪（自豪？）。学习设计模式，一次性解决上述问题。

设计原则

在学习设计模式之前，让我们先过一遍软件设计原则。

• 六大设计原则超详细介绍（再不理解你打我） - 知乎 (zhihu.com)

设计模式

设计模式是基于面向对象的，所以不包括函数式、响应式、切片编程。这些编程范式我们放在另一个章节。再次声明，设计模式是要多次学习的，仅仅靠我放在这里的文章是不够的，并且学习了后，要在实际中进行使用，这是一种经验，并非技能。

• 前端设计模式（一看就会）！ - 简书 (jianshu.com)
• 不知道怎么封装代码？看看这几种设计模式吧！ - 简书 (jianshu.com)
• JavaScript中常见的十五种设计模式 - -渔人码头- - 博客园 (cnblogs.com)
  基于ts的设计模式
• 设计模式这样学也太简单了吧！ - 掘金 (juejin.cn)

设计模式实践

• JavaScript设计模式:策略模式——表单验证 - 简书 (jianshu.com)

在vue中使用设计模式

这是一个系列，直接点进去跟着看就是

• 设计模式在vue中的应用（一） - 掘金 (juejin.cn)

作为一个前端，和网络打交道无可避免，不需要了解底层，只要了解工作原理就足以在工作中解决大部分由此引起的bug.

http

大部分情况下，我们使用的都是http请求，在前端开发中http最容易出现问题的就是content-type字段，如果后台定义的解析方式和前端的发送格式不一样，加上如果交流不当（别人不知道你连这个都不知道）那么就会出现控制台明明有数据，但是后台返回说你没有传参。

• HTTP content-type | 菜鸟教程 (runoob.com)
  上面这个特别重要，其他的积累即可。
• （建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系 - 掘金 (juejin.cn)
• 「查缺补漏」巩固你的HTTP知识体系 - 掘金 (juejin.cn)
  了解一下https
• 看完这篇 HTTPS，和面试官扯皮就没问题了 - 掘金 (juejin.cn)
  了解一下http2
• 面试官问：你了解HTTP2.0吗？ - 掘金 (juejin.cn)

WebSocket

了解一下即可，很简单，但是测试需要搭建一个本地服务器。

• WebSocket 教程 - 阮一峰的网络日志 (ruanyifeng.com)

浏览器主流前端开发的运行环境（就算跨平台，一样是浏览器的内核），但是我们往往对浏览器不太重视，从你在html写上第一个p标签，浏览器显示一个hello wold开始，它好像就是这样。你写什么它显示什么，从html到css再到js,浏览器的渲染似乎理所当然，没人去研究它的工作模式。但是相信我，了解工作原理，是优化的开始。

浏览器差异性

开始扫盲，了解一下不同浏览器的差异（免试热门）

• 浏览器之间的差异性及浏览器渲染简介 - 掘金 (juejin.cn)
• 如何机智地回答浏览器兼容性问题 - 掘金 (juejin.cn)

浏览器渲染机制

浏览器的渲染机制，了解即可

• 【干货】十分钟读懂浏览器渲染流程 - 掘金 (juejin.cn)
• 你不知道的浏览器页面渲染机制 - 掘金 (juejin.cn)

重绘与回流

重绘与回流简单来说就是，在你操作dom元素后浏览器需要做的操作，比如你把位于上方的元素删除了，那么下方的元素就会自动顶上去，这个就是回流操作，回流又叫重排，如果只是改变dom的颜色，不改变大小影响布局，那么浏览器只进行重绘，字面意思，重新画一次。一般来说回流的开销远大于重绘（ie正好相反）。但是无论怎么说，这都是比较消耗性能的，所以开发的时候要尽量避免回流与重绘。这又是一个优化点。

• 浏览器的回流与重绘 (Reflow & Repaint) - 掘金 (juejin.cn)
• 重排(reflow)和重绘(repaint) - 掘金 (juejin.cn)
• 你真的了解回流和重绘吗 - 掘金 (juejin.cn)

浏览器缓存

浏览器缓存主要是缓存资源请求过程，这里还涉及到http的知识。缓存分为强缓存与协商缓存，简单的来说强缓存就是一次请求之后，后面都使用它，不会再向服务器发起请求，协商缓存就是向服务器发起请求，服务器资源发生变化再重新请求资源，否则继续使用缓存。

• 实践这一次,彻底搞懂浏览器缓存机制 - 掘金 (juejin.cn)
• 前端浏览器缓存知识梳理 - 掘金 (juejin.cn)
• 强缓存和协商缓存 - 简书 (jianshu.com)

图层与硬件加速

上面讲到了在浏览器中操作dom会引起重绘和回流，但是转念一想，css动画怎么办，dom可是无时无刻都在变化，难道一直触发回流重绘么。这里解决的方式就是，对于transform的变化，浏览器会开一个新的图层，在新的图层进行操作，使其不会影响现有的dom。所以这里也引申出动画优化，即尽量使用transform变化来完成动画而不要修改dom的宽高等属性。
至于硬件加速，有一些css属性是可以开启gpu渲染的，例如上面说的transform，所以在复杂动画中，我们可以通过transform 的3D变化开启gpu渲染，提高性能。这是一个利用原理取巧的操作，实际上css有个属性是专门做这个的，叫做will-change，这个属性作用是，提前告诉浏览器，在这个地方要开启gpu加速。

• css图层 - 掘金 (juejin.cn)
• CSS will-change 属性 - yuzhongwusan - 博客园 (cnblogs.com)
• GPU加速在前端的应用 - 掘金 (juejin.cn)
• 这一次，彻底搞懂 GPU 和 css 硬件加速 - 掘金 (juejin.cn)

跨域

这个大家可能都比较清楚了，所以放最后，很简单，了解的跳过即可。

• 跨域，不可不知的基础概念 - 掘金 (juejin.cn)