前端优质学习资源

文章描述

• 从零带你手把手实现 Vue3 响应式原理-上

• 从零带你手把手实现 Vue3 响应式原理-下

• 为什么说 Vue 的响应式更新精确到组件级别？

• 学习 vuex 源码整体架构，打造属于自己的状态管理库

• Vue ssr 指南

• 老外挥手百行代码，Vue.js 3.2 响应式性能暴增

• 手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码

• 基于Vue的前端架构，我做了这15点

• 架构师让 Vue Table 组件提速 10 倍，背后用到了哪些源码知识？

• 知乎热议的 Vue3 Ref 语法糖，实现原理是啥？

• LRU 缓存-keep-alive 实现原理

• 做好这 16 个方向，逐步搭建出团队的 vue3 前端架构

• 六千字详解！讲透 Vue3 响应式是如何实现的

• 如何为 Vue3 组件标注 TS 类型，看这个就够了！

性能优化

• 面试官：你知道的前端优化手段

• 任何东西只要够深，都是一把刀（面试版）

• 分析一下阿里美团是如何做性能优化的

• 这些前端性能优化的知识我从来不告诉别人（上）

• 这些前端性能优化的知识我从来不告诉别人（下）

• (1.6w字)浏览器与前端性能灵魂之问，请问你能接得住几个？（上）

• 从 8 道面试题看浏览器渲染过程与性能优化

• 淘宝首页性能优化实践

• 飞书文档移动端极致体验优化实践

计算机网络

• TTPS系列干货（一）：HTTPS 原理详解

• HTTP/2做错了什么？刚刚辉煌2年就要被弃用了！？

• HTTP/3 原理实战

• CDN是什么CDN的原理和作用什么

• 彻底搞懂HTTPS的加密原理

• （2.6w字）网络知识点灵魂拷问——前端面试必问

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

• 从 Chrome 源码看浏览器如何 layout 布局

• 万字详文：深入理解浏览器原理

• 经过一个月的探索，我如何将 AST 操作得跟呼吸一样自然

算法

• 算法突击笔试计划

• leetcode 最常见的 150 道前端面试题（简单题上）

• leetcode 最常见的150道前端面试题（简单题下）

• 【算法面试】leetcode最常见的150道前端面试题 --- 中等题2（共80题）

• 字节跳动最爱考的 64 道算法题（JS版）

• OT算法

• 协同编辑冲突处理算法综述

• LeetCode 热题 HOT 100

小程序

• 小程序底层实现原理及一些思考

• 小程序原理科普

工程化

• 【万字长文】从零配置一个vue组件库

• Webpack 大法之 Code Splitting

• 轻松理解webpack热更新原理

• 带你深度解锁Webpack系列(优化篇)

• webpack原理浅析

• webpack 方方面面的核心原理总结

• 分析 webpack dynamic import的实现

• Writing a webpack Loader

• Writing a webpack Plugin

• 重构于 Vite：我如何做 SSG、静态资源发布以及自动化部署

• 你的Tree-Shaking并没什么卵用

• VuePress + Travis CI + Github Pages 全自动上线文档

• 2021 年当我们聊前端部署时，我们在聊什么

• lerna 已停止维护，Monorepo 发包新方案是什么？

• 字节跳动 Modern.js 开源 —— 现代 Web 工程体系

• 迈入现代 Web 开发（GMTC 2021 演讲《字节跳动的现代 Web 开发实践》全文）

• 手把手教你写一个迷你 Webpack

• Webpack 原理—如何实现代码打包

• create-?」每个前端开发者都可以拥有属于自己的命令行脚手架

• 在浏览器中，把 Vite 跑起来了！

• 超硬核｜带你畅游在 Webpack 插件开发者的世界

• 前端部署的发展历程

• ESBuild & SWC浅谈: 新一代构建工具

• 非大厂的我们，要如何去搞前端基建？

• 从零实现一个迷你 Webpack

移动端

• JSBridge的原理

• 响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

• Webview加载pdf遇到的一些坑及解决方法

• Hybrid App技术解析 -- 原理篇

• Hybrid App技术解析 -- 实战篇

框架/库

• 尤大都推荐的组件库是如何开发出来的？

• 一份 ElementUI 问题清单

• Semi Design 组件库通过分层设计同时支持 React、Vue 等框架的秘密

• 一篇非常 Nice 的 UmiJS 教程

部署

• 分享一篇适合前端学习的 Docker 入门指南

源码

• 如何阅读源码 —— 以 Vetur 为例

• 学会Rollup插件思想，打造高可扩展工具

• 庖丁解牛：最全babel-plugin-import源码详解

其他

• 如何实现多人协作的在线文档

• 这三年沉淀的前端错误监控系统，一篇文章讲透给你

• 学习 axios 源码整体架构，打造属于自己的请求库

• 我在支付宝前端体验技术部这四年学到了什么？

• 听完玉伯的直播，我学到了这些。

• 如何定个目标：成长为滴滴D8的前端大佬！

• 字节跳动是如何落地微前端的

• VSCode 语言插件开发入门

• 深入浅出解析阿里成熟的微前端框架 qiankun 源码【图文并茂】

• 从零开始实现一个颜色选择器（原生JavaScript实现）

• Garfish 微前端实现原理

• 钉钉表格，从零到一打造在线 Excel

• 精读《高性能表格》

• 在线协作系统总体架构

• 面试官：如何实现扫码登录功能？

• 有赞美业微前端的落地总结

• 实时协同编辑的实现

• 多人协同编辑技术的演进

• 谈谈浏览器中富文本编辑器的技术演进

• 现代 Web 开发困局

• 当微前端遇见企业微信侧边栏需求，会碰撞出什么样的火花？

• 前端团队代码规范最佳实践，个人成长必备！

• Rejouer：探秘web页面录制与回放的新大陆

• 从零实现并扩展可自由绘制的画板

• Twitter和微博都在用的 @ 人的功能是如何设计与实现的？

• CANVAS增量渲染：裁剪和拼接，小数与残影

• CodeSandbox 浏览器端的webpack是如何工作的？ 上篇

• 基于 iframe 的全新微前端方案

• 文本文档协同编辑的实现原理

• 全景封面视频生成技术在双促的应用

• 今年做的最有挑战的一件事，文档阅读器，支持 doc、pdf、ppt、txt 渲染

• 2021 年 JavaScript 明星项目公布，最受欢迎的竟是它？

• 动态列表组件 - 拖拽排序功能设计与实现

• 一篇从购买服务器到部署博客代码的详细教程

• 前端领域的 “干净架构”

• 语雀新画板

• 跨端技术的本质与现状

• Web端短视频编辑器的设计与实现 - 像做PPT一样做视频

• 浅谈在线文档的那些事儿

• 音视频通信加餐 —— WebRTC一肝到底

• 我们用 AntV/S2 替换了十几万的商业表格软件

• Scroll，你玩明白了嘛？

• 看了9个开源的 Vue3 组件库，发现了这些前端的流行趋势

• 深入浅出富文本编辑器

• 深入理解 Mocha 测试框架：从零实现一个 Mocha

• 纯 JS 实现语雀的划词高亮功能

• 如何使用 Monaco Editor 做一个在线的网页代码编辑器

• 你的图片加载，一点都不酷炫！不信You Look Look...

web 多媒体

• Cutter - Web视频剪辑工具原理浅析

• 多媒体前端技术入门指南

• web多媒体技术在视频编辑场景的应用

• 爱奇艺云剪辑Web端的技术实现

• Web端短视频编辑器的设计与实现 - 像做PPT一样做视频

• WebRTC 从实战到未来！迎接风口，前端必学的技术

小册

• Taro 多端开发实现原理与项目实战

• 从零开发H5可视化搭建项目

集锦

• 模拟面试题

• 「中高级前端面试」手写代码合集

• 栈与队列力扣题目总结

• 面试题集锦

• 集锦

• web全栈体系

• 前端开发博客

• 前端乐园

• 前端面试

• DDFE-blog

vue 源码系列

• vuejs源码解析

• 深入剖析Vue源码

• vue源码解析

• vue3源码解读

• 精通 Vue 技术栈的源码原理

简历完善/职业规划

• 一个大佬的简历

• 如何写「前端简历」，能敲开字节跳动的大门？

• 坐下来谈谈如何写好一份简历？

• 若川知乎问答：2年前端经验，做的项目没什么技术含量，怎么办？

• 5 年前端经验的大佬提供的职业规划

网站

• 面圈网