FE-Cookbook

在从事前端开发的时光中，从日常大牛的博客、动态中能零零散散看到不少好的技术文章，同时也看了不少前端书籍，包括《JavaScript 高级程序设计》、《JavaScript 语言精粹》、《HTML5高级程序设计》、《You Don't Know JS》系列、《CSS揭秘》等等，也针对很多方面的问题进行了细致的探索和查漏补缺，比如 CSS3 弹性盒布局、Hybrid App 唤起实现、Web 加载渲染性能、WebAssembly 等等，因此想通过这个项目把个人持续关注的前端相关内容汇总收集，一方面方便自己和其他同学日后查看、另一方面希望与有同样兴趣的同学一起将该项目完善壮大。

本项目持续更新中，如果觉得有用欢迎给项目添加 Star；如果觉得有任何需要改进或者需要完善的地方，欢迎贡献代码提请 PR，针对无冲突的内容我会快速合并。希望为前端圈贡献一些自己的力量。

根据个人理解，本项目分为以下六个部分，见目录

Outline / 目录

• 读书笔记与计算机书籍
• 基础概念与常用框架
• 构建流程与技术文章
• QA - 校招/社招前端笔试面试题汇总，计划纳入上百道题，正在持续更新中；
• LeetCodeOJ - 用 JavaScript 刷算法题的一个项目集锦；

读书笔记与计算机书籍

基础概念与常用框架

基础概念

• World Wide Web
• 渲染性能

构建流程与技术文章

知识点框架

• webpack - TBD
• Vue - TBD
• React - TBD
• Angular - TBD
• RxJS - TBD
• TypeScript - TBD

前端相关基础技术文章

1. Understanding JavaScript’s async await
2. 6 Reasons Why JavaScript’s Async/Await Blows Promises Away
3. An Introduction to Source Maps
4. Babel 入门教程
5. How to use SVG as a Placeholder, and Other Image Loading Techniques
6. Understanding Node.js Event-Driven Architecture
7. Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More
8. JSON Web Tokens vs. Session Cookies In Practice
9. ES6 In Depth: Modules
10. Why (and how) to use eslint in your project
11. Speed up Your Node.js App with Native Addons
12. Ten Things A Serious JavaScript Developer Should Learn
13. Await and Async Explained with Diagrams and Examples
14. But really, what is a JavaScript test?
15. What the Fu*k JavaScript: A list of funny and tricky JavaScript examples
16. Modern JavaScript Explained For Dinosaurs
17. Modern JavaScript for Ancient Web Developers
18. The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery) — SitePoint
19. The Cost Of JavaScript - Addy Osmani
20. JavaScript Start-up Performance - Addy Osmani
21. How JavaScript works: memory management + how to handle 4 common memory leaks
22. How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await
23. How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code
24. Understanding V8’s Bytecode
25. How JavaScript works: an overview of the engine, the runtime, and the call stack
26. Build a state management system with vanilla JavaScript
27. Inside look at modern web browser (part 2)
28. [Paper] Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications
29. Mouse events basics

Web 开发教程与最佳实践

• HTTP协议入门
• How to center in CSS
• 正则表达式30分钟入门教程
• 在安卓设备上使用 Chrome 远程调试功能
• 关于通过H5页面唤Native户端的介绍
• 前端性能优化最佳实践
• The Cost Of JavaScript
• SSL/TLS协议运行机制的概述 | 图解SSL/TLS协议
• The 12-Factor App - 简体中文 | 原版
• JavaScript 运行机制详解：再谈Event Loop
• web worker详解
• A simple interactive ES6 Feature list
• Airbnb Javascript Styleguide
• How I rediscovered my love for JavaScript after throwing 90% of it in the trash.
• 80 Linux Monitoring Tools
• The Modern JavaScript Tutorial
• Abortable fetch
• Removing jQuery from GitHub.com frontend

Web 开发利器与书籍

• The birth and death of JavaScript
• cssreference.io - A free visual guide to CSS.
• JavaScript equality table
• Color Picker
• Simple Icons, SVG icons for popular brands
• Web Page Test - Test a website's performance
• Web Manifest Validator - Test the validity of a Web Manifest
• Modern-js-cheatsheet: Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
• Exploring ES2018 and ES2019
• Git Cheat Sheet
• PreLoaders - Loading 动画收集网站
• Modernizr - 针对浏览器中的 HTML5 和 CSS3 功能支持度检测库
• Webpack Visualizer
• Source Map Explorer

打包与构建

• webpack | webpack 学习与起步教程 | webpack 配置文件样例
• JSLint - The JavaScript Code Quality Tool
• WebAssembly - A new portable, size- and load-time-efficient format suitable for compilation to the web.
• wasm-pack - rust -> wasm workflow tool!
• Dependency injection
  • Dependency injection in JavaScript
  • 控制反转

CSS 相关文章

• 学习 CSS 布局
• 深入理解 CSS3 弹性盒布局模型
• Color - MDN
• 移动端 1px 细线解决方案总结
• CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
• 学习使用：before和：after伪元素
• Android 浏览器文本垂直居中问题

会议

• ELECTRON & DESKTOP JS http://www.covalenceconf.com/

WebAssembly 中文教程资源

• WebAssembly 系列（一）生动形象地介绍 WebAssembly
• WebAssembly 系列（二）JavaScript Just-in-time (JIT) 工作原理
• WebAssembly 系列（三）编译器如何生成汇编
• WebAssembly 系列（四）WebAssembly 工作原理
• WebAssembly 系列（五）为什么 WebAssembly 更快
• WebAssembly 系列（六）WebAssembly 的现在与未来

算法与面试题

面试题汇总

由于从校招实习到校招提前批，一直在学习前端相关的基础知识并针对具体遇到的细节进行查漏补缺，零零散散发现很多内容值得反复回顾，所以将自己看到过认为还比较经典的题目汇总到这里，供大家参考。欢迎有兴趣的同学一起建设该部分，针对你擅长的部分添加问题与回答并提请 PR，问题格式参考各细分文件。

本部分内容大致分为以下几个方面：

本部分面试题在整理过程中有参考自如下内容源：

• https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers
• https://sites.google.com/site/amitsciscozone/home/security/ssl-connection-setup
• http://robertheaton.com/2014/03/27/how-does-https-actually-work/
• http://www.cnblogs.com/lixiansen/p/5618541.html
• http://harttle.com/2016/01/22/doctype.html
• http://jerryzou.com/posts/cookie-and-web-storage/
• https://www.zhihu.com/question/20653055/answer/17786008
• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
• http://blog.csdn.net/NJUPT_T/article/details/50700209
• http://web.jobbole.com/84826/
• http://web.jobbole.com/85340/
• http://blog.csdn.net/i10630226/article/details/54880363
• http://www.ruanyifeng.com/blog/2015/04/generator.html
• https://hijiangtao.github.io/2019/08/31/Webpack-Basic-Concepts/
• https://hijiangtao.github.io/2019/12/01/Introduction-of-webpack-plugin/
• https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts
• http://www.ruanyifeng.com/blog/2017/05/websocket.html

LeetCode

用 JavaScript 刷 LeetCode

Contribute

非常欢迎为该项目增加内容，共同完善前端技术整理。请 Fork 之后提交代码后发起 PR。

LICENSE

Apache 2.0

Contact

Joe Jiang, Email