前端进阶知识汇总（持续更新中）_前端开发知识进阶-CSDN博客

本文链接：https://blog.csdn.net/sc909090/article/details/121445856

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

前言

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

js系列

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

es6常用语法总结

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

js技巧

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

作用域链和闭包

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

原型链和this指向

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

Array.prototype.slice.call(arguments)

深浅拷贝

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

事件循环 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了。

事件冒泡和事件捕获

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

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

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

<li onclick="clickLi(this)">1</li>

	function clickLi(li) {
		console.log(li.innerHTML);
	}

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

<ul onclick="cliclUl()">

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

html系列

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

html基础知识查漏补缺

html语义化

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

seo优化

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

css系列

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

css基础提升

css设计技巧

css工程化

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

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

设计模式

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

设计原则

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

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

设计模式

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

设计模式实践

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,浏览器的渲染似乎理所当然，没人去研究它的工作模式。但是相信我，了解工作原理，是优化的开始。

浏览器差异性

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

浏览器渲染机制

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

重绘与回流

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

浏览器缓存

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

图层与硬件加速

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

跨域

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

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

后记

到这里呢，就把我还想得起的前端基础能力提升放到这里了，有些东西要遇到了才能想得到，如果后面想起了会再来更新一下。

事先声明的一点是，这些基础都是非常需要时间去积累的，我这里也只是放了几篇参考文章，只是指出了一个方向，光是看我这些都完全不够，更不说还要去实践中总结自己的经验，所以这里就姑且当做是知识的一个概述，点出了一个方向。

由于是基础能力的进阶，所以业务上常用的框架和点都没有讲，例如TypeScript、web component、uniapp、WebAssembly、编程范式等等之类一堆东西，可能就要留到后面去了。