前端进阶知识汇总（持续更新中）
掘金原文。
前端进阶知识汇总（持续更新中）
前言
针对学习了前端三件套，html、css、javascript以及vue、react等前端框架其一，但感觉基础知识体系不牢固的同学，补充提供多个方向知识体系，所放链接均为笔者曾经阅读完全的文章，过滤水货。每日一更
js系列
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的情况下，重用代码的方式。本部分学习的小目标为搞明白以下代码。
Array.prototype.slice.call(arguments)
- 前端的那些事（六）：原型与原型链（精选篇） - 简书 (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运行有个更深的理解，加强对代码的掌控能力。
// 回答执行顺序
console.log('start 1');
setTimeout(function() {
console.log("start 2");
}, 0);
Promise.resolve().then(function() {
console.log('start 3');
}).then(function() {
console.log('start 4');
});
console.log('start 5');
这个机制的水很深，浏览器和node环境又有不同的区别，在不深入学习的情况下，只要搞明白上面的代码执行情况，就算是ok了。
- 带你彻底弄懂Event Loop - SegmentFault 思否
- 【JS】深入理解事件循环,这一篇就够了!(必看) - 知乎 (zhihu.com)
- 一次弄懂Event Loop（彻底解决此类面试问题） - 掘金 (juejin.cn)
事件冒泡和事件捕获
事件冒泡与事件捕获是浏览器触发事件的两种情况，一种是从html标签一直往下，一直到你触发事件的元素，一种是从你点击的事件处开始冒泡，把事件当做泡泡一直浮动到html标签。学习事件处理的机制可以在实际开发中做一些相关优化。如下：
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
我们想要通过点击li获取li的数字，我们怎么做，第一时间想到的，在每一个li上面绑定事件，通过事件传入每一个li本身，获取innnerHTML.如下
<li onclick="clickLi(this)">1li>
function clickLi(li) {
console.log(li.innerHTML);
}
但可以设想，如果li多了，我们每一个li都绑定一个点击事件，且不说性能问题，单是这样看起来已经很蠢了好吧，结合上面我们说的事件冒泡，点击事件会一路传递到html标签，那么我们可以在父元素ul上面监听点击事件。如下
<ul onclick="cliclUl()">
所以这一小节的学习目的就是完成这个简单的问题，可以在开发中进行一定优化。
- 你真的理解事件冒泡和事件捕获吗？ - SegmentFault 思否
- 你真的理解 事件冒泡 和 事件捕获 吗？ - 掘金 (juejin.cn)
html系列
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这个东西，学起来非常简单，搞明白几种常用选择器，然后实战，积累一段时间的属性就可以算是滚瓜烂熟了，但是实际上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)
后记
到这里呢，就把我还想得起的前端基础能力提升放到这里了，有些东西要遇到了才能想得到，如果后面想起了会再来更新一下。
事先声明的一点是，这些基础都是非常需要时间去积累的，我这里也只是放了几篇参考文章，只是指出了一个方向，光是看我这些都完全不够，更不说还要去实践中总结自己的经验，所以这里就姑且当做是知识的一个概述，点出了一个方向。
由于是基础能力的进阶，所以业务上常用的框架和点都没有讲，例如TypeScript、web component、uniapp、WebAssembly、编程范式等等之类一堆东西，可能就要留到后面去了。