2024年前端最新前端技术清单(1)，前端开发自适应

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

• Babel 用户手册

• Babel 插件手册

• 如何通过 Babel 实现你的自定义 JS 语法

2.6. CSS预处理与模块化

• CSS 进化史 [英]

• CSS 模块化方案系列

3. 性能优化

---

性能优化其实就是在理解浏览器的基础上“因地制宜”，因此可以配合1.3节“浏览器”部分进行理解。

强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍，其基本涵盖了现代浏览器中性能优化的所有点。笔者也梳理了一份「前端性能优化指南 🚀」，可以帮助大家系统地了解和学习前端性能优化。

下面也摘录了其中一些个人认为非常不错的文章。

3.1. 加载性能

• PRPL 模式 [英]

• 图片懒加载完全指南 [英]

• 使用 Intersection Observer 来懒加载图片 [英]

• 图片与视频懒加载的详细指南 [英]

• 使用 Application Shell 架构来实现秒开应用 [英]

3.2. 运行时性能

• 避免大型、复杂的布局和布局抖动 [英]

• 什么导致强制同步布局（reflow）？ [英]

• 如何诊断强制同步布局 [英]

• 无线性能优化：Composite

• 如何不择手段提升scroll事件的性能

• 使用 passive event listener 来提高滚动流畅性 [英]

• 节流和去抖（throttle & debounce）

• JavaScript 函数节流和函数去抖应用场景辨析

• underscore 函数去抖的实现

• requestIdleCallback

• requestIdleCallback使用入门 [英]

• Idle Until Urgent [英]：requestIdleCallback的妙用

3.3. 前端缓存

• Web 缓存简介：以购买牛奶的为例 [英]

• 大话前端缓存 [英]

• 缓存（一）—— 缓存总览：从性能优化的角度看缓存

• 缓存（二）—— 浏览器缓存机制：强缓存、协商缓存

• 缓存（三）—— 数据存储：cookie、Storage、indexedDB

3.4. 性能调试与实践

• 使用 Chrome DevTools 提升页面速度 [英]：Chrome DevTools实操讲解

• 了解 DevTools 中的 Resource Timing

• 淘宝新势力周H5性能优化实战

• 优化打包策略来提升页面加载速度

• Chrome DevTools 中你可能不知道的调试技巧

• 前端性能测量 [英]

3.5. 性能指标

• 以用户为中心的前端性能指标 [英]：前端性能指标的来龙去脉

• DOMContentLoaded:

• 你不知道的 DOMContentLoaded

• Deciphering the Critical Rendering Path [英]

• FP (First Paint)：

• Chrome的First Paint

• FCP (First Contentful Paint)：

• First Contentful Paint Explained [英]

• First Contentful Paint [英]

• FMP (First Meaningful Paint)：

• Chrome 中的 First Meaningful Paint

• Time to First Meaningful Paint

• TTI (Time to interactive)：

• Time to Interactive Explainer

• 衡量用户体验的新标准

• TTFB (Time To First Byte)：

• TTFB，以及页面加载的时间节点

• FID (First Input Delay)：

• First Input Delay

• Speed Index：

• WebPagetest: Speed Index

4. 安全

---

很多安全风险老生常谈，但是往往到出现问题时，才会被重视或者意识到。

• 8大前端安全问题上篇

• 8大前端安全问题下篇

• 概念讲解：编码、加密、哈希与混淆 [英]

• 常见 Web 安全攻防总结

4.1. XSS

• 如何防止XSS攻击？

4.2. CSRF

• 如何防止CSRF攻击？

• Site Isolation [英]：Chrome的新特性

4.3. CSP

• Content Security Policy 入门教程

• Content Security Policy (CSP) [英]

4.4. HTTPS

• 图文还原 HTTPS 原理

• 浅谈有赞全站 HTTPS 推进

4.5. 安全实录

• About rel=noopener [英]：打开一个新页面是如何带来安全隐患的

• 一种新型的“钓鱼”方式 [英]

• 一个媒体文件请求引发的跨站风险 [英]

• Mitigating Spectre [英]： Chrome 中的跨站安全问题

4.6. 代码保护

• JavaScript 混淆安全加固

• 前端核心代码保护技术面面观

4.7. JS沙盒

• 如何在 Web 上实现一个插件系统 [英]

• 如何安全地运行用户的 JavaScript 脚本

4.8. 其他

• 一些安全相关的HTTP响应头

5. 自动化测试

---

自动化测试是软件工程的重要部分之一，但却极容易被忽视。

• 2018 前端自动化测试综述 [英]

• 测试你的前端代码（介绍篇）[英]

5.1. 单元测试

• 测试你的前端代码（单元测试篇）[英]

• Fakes、Mocks 以及 Stubs 概念明晰

• 测试覆盖（率）到底有什么用？

5.2. 端到端测试 (E2E)

• 测试你的前端代码（E2E 测试篇）[英]

• 什么是一个好的 E2E 测试？[英]

• 平衡单元测试和端到端测试

• 对过多的 E2E 测试说“不” [英]

5.3. 其他

• 测试你的前端代码（集成测试篇）[英]

• 测试你的前端代码（可视化测试篇）[英]

• 关于 Property Based Testing 的介绍 [英]

6. 框架与类库

---

如果说基础知识是道，那框架与工具可能就是术；学习与理解它们，但千万不要成为它们的奴隶。

6.1. React

• 手把手教你如何实现一个简易的 React [英]

• React 底层揭秘 [英]

• 你所需要知道的 React 细节

• React Fiber 架构

• React 16 Fiber 源码速览

• React 是怎样炼成的：React早期的进化之路

• 从零开始实现一个React：

• 1. JSX和虚拟DOM

• 2. 组件和生命周期

• 3. diff算法

• 4. 异步的setState

• 「react技术栈」单页应用实践快速入门

• React 生命周期图示

6.2. Vue

• 深入浅出 - vue变化侦测原理

• Vue 模板编译原理

6.3. Redux

• 重新设计 Redux [英]：Rematch

• 如何用 GraphQL 来替代 Redux [英]

• 解读 Redux 的设计思路与用法

• (Redux)应用构建的三个原则 [英]

• React-Redux 的发展历史与实现 [英]

6.4. RxJS

• ReactiveX 官网：宝石图真的非常形象易读

• 响应式编程，是明智的选择

• 图解RxJS [英]

• 调试RxJS：Tooling [英]

• 调试RxJS：Logging [英]

7. 新技术/方向

---

前端领域新技术、新方向层出不穷，这里汇总一些新技术方向；作为开发者需要多了解但是不要盲从

7.1. PWA

• PWA 学习与实践系列

• Service Worker 入门简介 [英]

• PWA 在 iOS 平台上的特殊问题 [英]

• 在你的 PWA 中小心使用 iOS 的 meta 标签 [英]

• 饿了么的 PWA 升级实践

• 离线指南

• Android 中的 WebAPKs [英]

• Pinterest 的 PWA 实践 [英]

• 异步 HTTP Cookies API [英]：赋能Service Worker

7.2. CSS Houdini

• 认识 Houdini 与 CSS Paint API [英]

• 用 Houdini 来拯救 CSS Polyfill [英]

7.3. Web Components

• Web Components 基本概念和用法

• Web Components 指南 [英]

• Shadow DOM 使用简介

• HTMLUnknownElement 与 HTML5 自定义元素的故事

7.4. 微前端（Micro Frontends）

• 微前端主页 [英]

• 微前端的那些事儿

• 技术雷达之「微前端」- 将微服务理念扩展到前端开发

7.5. HTTP/2

• HTTP/2 幕后原理

• 全面介绍的 HTTP/2 [英]

• HTTP/2 主页:

• HTTP/2 协议 [英]

• HPACK: HTTP/2 Header压缩 [英]

7.6. WebAssembly

• WebAssembly 官网

• WebAssembly 现状与实战

• WebAssembly 系列：

• 一、生动形象地介绍 WebAssembly

• 二、JavaScript Just-in-time (JIT) 工作原理

• 三、编译器如何生成汇编

• 四、WebAssembly 工作原理

• 五、为什么 WebAssembly 更快？

• 六、WebAssembly 的现在与未来

7.7. 小程序

• 微信，支付宝小程序实现原理概述

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

7.8. Serverless

• Serverless 给前端带来了什么

• 基于 Serverless 的淘宝前端研发模式升级

• Serverless，将给前端发展带来大变革的技术？

• Why Netflix Rolled Its Own Node.js Functions-as-a-Service for its API Platform

8. 业务相关

---

在业务中往往还有一些与“业务无关”的场景需求 —— 不论是什么业务几乎都会遇到；因此，在变与不变中，我们更需要去抽象出这些问题。

8.1. 数据打点上报

• 如何精确统计页面停留时长

• 揭开JS无埋点技术的神秘面纱

8.2. 前端监控

• 前端异常监控解决方案研究

• 监控平台前端SDK开发实践

• 把前端监控做到极致

• 前端监控系统探索总结

• 60 天急速自研-搭建前端埋点监控系统

8.3. A/B测试

• Twitter的A/B测试实践：

• 一、为什么要测试以及测试的意义

• 二、技术概述

• 三、检测和避免 A/B Test中 bucket不平衡问题

• 四、A/B Test中使用多个控制的启示

• Netflix A/B Test 实验平台实践 [英]

• 指导方法

• 实验中容易遇到的七种问题 [英]

• 实验的七个准则 [英]

• 小流量如何进行AB测试

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题