前端工程师路上的宝藏：不可错过的进阶必读文章！

2023-09-21 16:06:59

JavaScript

《javascript高级程序设计》核心知识总结

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：建议初学者先读一两遍红宝石书（即JavaScript高级程序设计），犀牛书可以暂时不看（读起来有点累）

ES6 入门教程

必要性：⭐️⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：阮大佬的开源精品，强推！

JavaScript Event Loop 机制详解与 Vue.js 中实践应用

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️

谏言：JS事件循环机制的补充讲解

this、apply、call、bind

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️

谏言：JS的易错点，易混淆点

JS正则表达式完整教程（略长）

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：这可能是我看过讲正则最全，最有深度的文章了，当然也最难，推荐作为手册查询

[译] 理解 JavaScript 中的执行上下文和执行栈

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：JS执行机制的文章，对排bug很有帮助

WebAssembly完全入门——了解wasm的前世今身

必要性：⭐️⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：难在用C写，属于JS的一个补充吧，能带给Web更好的性能。用在Google Earth，Unity等方面

TypeScript

TypeScript中文官方文档

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：TS作为JS的超集，提供了类型检查等强大功能，更利于大型项目的维护。中文官网是很好的入门学习文档（系统化+示例多+持续迭代✅）

ts装饰器-元编程技巧：如何利用装饰器特性开发框架？

必要性：⭐️

难度：⭐️⭐️⭐️

谏言：个人挺喜欢装饰器的写法，这在TS中仍算是一个测试特性，感兴趣的同学可以了解下

H5

你真的了解前端路由吗？

必要性：⭐️⭐️⭐️

难度：⭐️⭐️

谏言：通俗易懂，喝口茶的功夫就学到了一个很实用的知识点

CSS

CSS知识点及技巧整理

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：很不错的CSS知识点汇总，适合复习，不适合初学者~

滚动视差？CSS 不在话下

必要性：⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：很有意思的CSS优化思路，比那些奇淫怪技实用多了（非黑，我个人之前也很喜欢那些骚操作，只是针对实用性上吐槽，手动狗头保命）

仅使用CSS提高页面渲染速度

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：淘系出品的优化指南，干货满满

React

React官方中文文档

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：React带来的框架理念革新很赞，官网永远是学习的第一步~

8k字 | Redux/react-redux/redux中间件设计实现剖析

必要性：⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：适合喜欢刨根问底的好奇宝宝

什么时候使用 useMemo 和 useCallback

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：这个来自code review，同事建议包一层useCallback，算是费力九牛二虎之力证明完全没必要，咱可不能做负优化~

聊一聊我对 React Context 的理解以及应用

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：虽然使用场景不是很频繁，但是很多优秀的库都有用到，了解下原理挺好的

让虚拟DOM和DOM-diff不再成为你的绊脚石

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️

谏言：比较经典的概念区分（这方面文章有点多，注水的也不少，本质都在讲一个东西，选择一个自己觉得有趣的文章读下去进行）

「react进阶」年终送给react开发者的八条优化建议(篇幅较长，占用20-30分钟)

必要性：⭐️⭐️

难度：⭐️⭐️⭐️

谏言：react优化干货

网络

关于 TCP/IP，必知必会的十个问题

必要性：⭐️⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️

谏言：前端必备的计网知识

把cookie聊清楚

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️

谏言：通俗易懂，查阅方便

傻傻分不清之 Cookie、Session、Token、JWT

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️

谏言：一些易混淆概念的区分

SSL/TLS 握手过程详解

必要性：⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：对HTTPS中TLS握手的详解

（建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：三元出品，必属精品

Git

Git 笔记 - 程序员都要掌握的 Git

必要性：⭐️⭐️⭐️⭐️

难度：⭐️

谏言：详略得到的Git工具使用指南，推荐阅读

Webpack

浅入浅出webpack

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️

谏言：Webpack的小白文，作为上手教程挺不错的

Vue项目Webpack优化实践，构建效率提高50%

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：非常全面的Webpack优化文章了，就是读起来稍微有点费时，建议使用时查询

Vite

vite源码分析(4) :vite 热更新原理分析

必要性：⭐️

难度：⭐️⭐️⭐️

谏言：看源码时的辅助材料，适合想看源码的同学

Eslint

深入浅出eslint——关于我学习eslint的心得

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️

谏言：Eslint的小白文

手摸手教你写个ESLint 插件以及了解ESLint的运行原理

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：适合想要搭建自己团队编程风格的同学和插件爱好者

数据结构&算法

我接触过的前端数据结构与算法

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：给自己的脑子充充电

前端算法渣的救赎之路🚀

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：刷两三道题，偶尔虐虐自己也挺好的

浏览器

(1.6w字)浏览器灵魂之问，请问你能接得住几个？

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：三元yyds

深入理解Shadow DOM v1

必要性：⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：DOM划分的优雅解决方案

关于移动端适配，你必须要知道的

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️

谏言：你总会遇到适配问题的，对吧？

测试

使用Jest进行React单元测试

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️

谏言：单测工具Jest小白文

开始测试React Native App（上篇）

必要性：⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：系统全面的RN测试文，赞~

面试

【1 月最新】前端 100 问：能搞懂 80% 的请把简历给我

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：灵魂拷问比较多

那些年，自己没回答上来的react面试题

必要性：⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：主要是react方向，其他技术方向可以忽略

诚意满满的前端面试总结

必要性：⭐️⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：很全面的总结了，就是文章排版可以优化下，一眼看过去容易点赞 | 收藏 | 退出一气呵成

前端面试考点多？看这些文章就够了（2019年6月更新版）

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️⭐️

谏言：容易阅读，就是知识点有点太多太杂，部分知识有点陈旧，期待更新~

破解前端面试（80% 应聘者不及格系列）：从闭包说起

必要性：⭐️

难度：⭐️⭐️⭐️

谏言：单个知识点的深入讲解

破解前端面试（80% 应聘者不及格系列）：从 DOM 说起

必要性：⭐️

难度：⭐️⭐️⭐️

谏言：单个知识点的深入讲解

工具安装教程

VSCode 前端常用插件安装及设置详解

必要性：⭐️⭐️⭐️⭐️

难度：⭐️

谏言：Vs Code插件安装小白文

前端开发必备环境安装（Mac OS）

必要性：⭐️⭐️⭐️⭐️

难度：⭐️

谏言：Mac下开发环境构建的小白文

造轮子

前端页面可视化搭建工具业界的轮子

必要性：⭐️⭐️

难度：⭐️⭐️

谏言：可视化轮子的调研报告，至今没弄懂低代码结构和这个的区别…

项目实战

🔥基于React全家桶开发「网易云音乐PC」项目实战(一)]

必要性：⭐️⭐️

难度：⭐️⭐️⭐️

谏言：React练手项目，适合初学者

从零开始 Node实现前端自动化部署

必要性：⭐️⭐️

难度：⭐️⭐️⭐️

谏言：Node部署的小白文

开源项目学习

这些开源项目，让你轻松应对十大工作场景

必要性：⭐️

难度：⭐️⭐️⭐️

谏言：有很多好玩的前端玩具~

猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！

必要性：⭐️

难度：⭐️⭐️⭐️⭐️⭐️

谏言：特别烧脑的前端玩具~

设计稿（UI视图）自动生成代码方案的探索

必要性：⭐️⭐️

难度：⭐️⭐️⭐️

谏言：很有想法的项目思路，但如何保证生成代码质量是个问题

花活

如何写出一个惊艳面试官的深拷贝?

必要性：⭐️

难度：⭐️⭐️⭐️⭐️

谏言：ctrl C + ctrl V放到公共库里，封装成函数؏؏☝ᖗ乛◡乛ᖘ☝؏؏

用 css 画三角形、梯形、扇形、箭头和椭圆几种基本形状

必要性：⭐️⭐️⭐️

难度：⭐️⭐️⭐️

更多推荐

Kubernetes Ingress：灵活的集群外部网络访问的利器

《KubernetesIngress：集群外部访问的利器-打造灵活的集群网络》前提条件您已经拥有一个Kubernetes集群，并且可以访问该集群。您已经安装了kubectl命令行工具。版本选择安装前需要选择兼容你Kubernetes的版本，不能会失败ingress由两部分组成：IngressController：负责处

【踩坑日记】springboot MultipartFile上传，@Async异步执行时报错：java,io.FileNotFoundException

项目场景：springboot项目中使用MultipartFile上传文件导入时，文件内容过大会导致页面等待时间较长，所以考虑使用上传文件时用@Async异步处理数据的方式来解决页面等待问题。问题描述给处理MultipartFile文件的方法添加@Async注解后，上传文件时出现异常，找不到临时文件异常如下：(org.

RISC-V Reader 笔记（七）RV64，特权架构，未来可选扩展

RV64比起RV32，其实扩展不多。主要是添加了一系列字，双字为单位的操作。各个ISA3264比较x86：变量都存在寄存器里，不像32存在内存里，因此指令数少很多，但是因此添加了很多新操作码来操作更多的寄存器，因此指令长度变长了（添加前缀来区分），代码体积大很多。arm：有一系列和arm32类似的问题，：分支指令使用的

重庆思庄技术分享——linux du 命令

linuxdu命令inuxdu（英文全拼：diskusage）命令用于显示目录或文件的大小。du会显示指定的目录或文件所占用的磁盘空间。语法du[-abcDhHklmsSx][-L<符号连接>][-X<文件>][--block-size][--exclude=<目录或文件>][--max-depth=<目录层数>][-

Nodejs 第十六章（ffmpeg）

FFmpeg是一个开源的跨平台多媒体处理工具，可以用于处理音频、视频和多媒体流。它提供了一组强大的命令行工具和库，可以进行视频转码、视频剪辑、音频提取、音视频合并、流媒体传输等操作。FFmpeg的主要功能和特性：格式转换：FFmpeg可以将一个媒体文件从一种格式转换为另一种格式，支持几乎所有常见的音频和视频格式，包括M

Linux arm64 pte相关宏

文章目录一、pte和pfn1.1pte_pfn1.2pfn_pte二、其他宏参考资料一、pte和pfn//linux-5.4.18/arch/arm64/include/asm/pgtable.h#definepte_pfn(pte)(__pte_to_phys(pte)>>PAGE_SHIFT)#definepfn_

Zebec 生态 AMA 回顾：Nautilus 以及 $ZBC 的未来

在9月7日，Zebec创始人Sam做客社区，并进行了“NautilusChain以及$ZBC的未来”主题的AMA访谈。Sam在本次访谈中对NautilusChain生态的价值捕获、Zebec生态布局规划、可能会推出的NautilusChain治理通证NAUT进行了解读。本文将对本次AMA进行回顾与总结。主持人：社区新的

java顺序表的基本操作

Java中的顺序表通常可以使用数组来实现。顺序表是一种线性数据结构，它包含一组按照顺序排列的元素。以下是顺序表的基本操作：创建顺序表：int[]array=newint[capacity];//创建一个具有指定容量的整数数组作为顺序表插入元素：//在指定位置插入元素voidinsert(int[]array,intin

Polygon L2扩容方案揭秘

1.引言前序博客：Polygon生态以太坊扩容是一个几乎与以太坊本身一样古老的问题。扩容任务的复杂性是以太坊伟大之处的直接结果：以太坊是有活力的协议，其缓慢进化，以确保链的安全性和去中心化。当活动的增加刺激了更大的需求时，使用以太坊可能会变得昂贵得令人望而却步。但以太坊扩容意味着什么？本文将解答：何为Layer2（L2

鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统

Java版工程项目管理系统SpringCloud+SpringBoot+Mybatis+Vue+ElementUI+前后端分离功能清单如下：首页工作台：待办工作、消息通知、预警信息，点击可进入相应的列表项目进度图表：选择（总体或单个）项目显示1、项目进度图表2、项目信息施工地图：1、展示当前角色权限下能看到的施工地图（

黑马JVM总结（十四）

（1）分代回收_1Java虚拟机都是结合前面几种算法，让他们协同工作，具体实现是虚拟机里面一个叫做分代的垃圾回收机制，把我们堆内存大的区域划分为两块新生代、老年代新生代有划分为伊甸园、幸存区Form、幸存区To为什么要这样区域划分呢？因为java中有的对象需要长时间使用，长时间使用的对象呢我就把放到老年代当中，哪些用完

热文推荐
  1. 如何在Ubuntu中挂载新硬盘

    参考：如何在Ubuntu中挂载新硬盘_笔记大全_设计学院ubuntu将大于2T硬盘挂载到/home目录并使其永久生效的详细操作步骤_ubuntu挂载硬盘到home目录_菲玛的博客-CSDN博客win10+ubuntu18.04home目录扩容方法_ubuntu增加home空间_cfreeze的博客-CSDN博客1、检测

  2. 【二分法查找】

    使用二分法查找需要注意的点：使用二分法的前提：数组为有序数组，同时题目还强调数组中无重复元素。二分法经常写乱，主要是因为对区间的定义没有想清楚，区间的定义就是不变量。要在二分查找的过程中，保持不变量，就是在while寻找中每一次边界的处理都要坚持根据区间的定义来操作，这就是循环不变量规则。写二分法，区间的定义一般为两种

  3. clickhouse简单安装部署

    目录前言(来源于官方文档)：一.下载并上传1.下载地址：点我跳转下载2.上传至Linux二.解压和配置1.解压顺序注意：必须按照以下顺序解压，并且每解压一个都要执行该解压后文件的install/doinst.sh文件解压步骤：三.启动1.启动服务2.启动客户端四.建表语法与clickhouse数据类型1.建表语法2.数

  4. UI设计师面试时如何自我介绍优漫动游

    学会了UI设计技术，接下来的计划就是要找工作了，UI设计在面试环节的自我介绍很重要，有时候一分钟的自我介绍已经足够让HR判断出你适不适合他们公司，那做为一名UI设计师面试时如何自我介绍呢?来看看下面的详细介绍。UI设计师面试时如何自我介绍UI设计师面试时如何自我介绍：怎么做好一次自我介绍？1、自我介绍内容：结合面试岗位

  5. 什么是高阶成分(HOC)?解释 React 中 render() 的目的？

    高阶成分（HOC）是一种基于React的组合特性而形成的设计模式。HOC是自定义组件，在其中包裹了另一个组件。他们可以接受任何动态提供的子组件，但不会修改或复制其输入组件中的任何行为。您可以说HOC是"纯"组件1。HOC通过对组件逻辑的重用，让组件逻辑可复用、可测试、可维护，从而提高开发效率1。在React中，rend

  6. 利用爬虫技术自动化采集汽车之家的车型参数数据

    导语汽车之家是一个专业的汽车网站，提供了丰富的汽车信息，包括车型参数、图片、视频、评测、报价等。如果我们想要获取这些信息，我们可以通过浏览器手动访问网站，或者利用爬虫技术自动化采集数据。本文将介绍如何使用Python编写一个简单的爬虫程序，实现对汽车之家的车型参数数据的自动化采集，并使用亿牛云爬虫代理服务来提高爬虫的稳

  7. Java AOP Framework概述

    JavaAOPFramework概述1.AspectJ1.1使用AspectJ进行切面编程2.SpringAOP2.1使用SpringAOP进行切面编程2.2如何决定使用哪种动态代理2.3如何通过配置指定代理方式2.4SpringAOP和AspectJ的关系3.SpringBootAOP4.扩展4.1AspectJ织入

  8. 面向面试知识--MySQL数据库与索引

    面向面试知识–MySQL数据库与索引优化难点与面试点什么是MySQL索引？索引的MySQL官方定义：索引是帮助MySQL快速获取数据的数据结构。动力节点原文：MysQL官方对于索引的定义:索引是帮助MySQL高效获取数据的数据结构。MysQL在存储数据之外，数据库系统中还维护着满足特定查找算法的数据结构，这些数据结构以

  9. HarmonyOS Codelab 优秀样例——溪村小镇（ArkTS）

    一、介绍溪村小镇是一款展示溪流背坡村园区风貌的应用，包括园区内的导航功能，小火车行车状态查看，以及各区域的风景展览介绍，主要用于展示HarmonyOS的ArkUI能力和动画效果。具体包括如下功能：打开应用时进入启动页，启动页轮播展示溪村小镇风景图，之后进入应用首页。在首页的“地图浏览”标签页，可以拖动和缩放查看地图，并