左耳听风》读书心得之前端书单

一直佩服左耳朵耗子叔的知识广度，深度，看了他的专栏对人生规划清楚多了，下面分享下他推荐的前端需要掌握的书单

程序员练级攻略：前端基础和底层原理

HTML5 Canvas核心技术 作者: David Geary
https://developer.mozilla.org/kab/docs/Web/API/Canvas_API
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
https://github.com/diegocard/awesome-html5
https://github.com/willianjusten/awesome-svg
https://github.com/raphamorim/awesome-canvas
https://github.com/sjfricke/awesome-webgl
https://developer.mozilla.org/zh-CN/docs/Web/CSS
https://github.com/getify/You-Dont-Know-JS
JavaScript语言精粹 作者: 道格拉斯•克罗克福德 (Douglas Crockford) https://book.douban.com/subject/11874748/
https://book.douban.com/subject/26638316/ ，中文翻译版为《JavaScript 忍者秘籍》，本书是 jQuery 库创始人编写的一本深入剖析 JavaScript 语言的书。适合具备一定 JavaScript 基础知识的读者阅读，也适合从事程序设计工作并想要深入探索 JavaScript 语言的读者阅读。这本书有很多晦涩难懂的地方，需要仔细阅读，反复琢磨。
https://book.douban.com/subject/25786138/ Effective JavaScript ，Ecma 的 JavaScript 标准化委员会著名专家撰写，作者凭借多年标准化委员会工作和实践经验，深刻辨析 JavaScript 的内部运作机制、特性、陷阱和编程最佳实践，将它们高度浓缩为极具实践指导意义的 68 条精华建议。
http://es6.ruanyifeng.com/ 阮一峰翻译的 ES6 的教程
https://codetower.github.io/es6-features/?utm_campaign=read_more&utm_medium=email&utm_source=mybridge
https://mbeaudru.github.io/modern-js-cheatsheet/
https://auth0.com/blog/glossary-of-modern-javascript-concepts/ ，首先推荐这篇文章，其中收集了一些编程范式方面的内容，比如纯函数、状态、可变性和不可变性、指令型语言和声明式语言、函数式编程、响应式编程、函数式响应编程。
https://auth0.com/blog/glossary-of-modern-javascript-concepts-part-2/ ，在第二部分中主要讨论了作用域和闭包，数据流，变更检测，组件化……
JavaScript 内在的文章。
http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/
http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
https://medium.com/@DmitrySoshnikov/js-scope-static-dynamic-and-runtime-augmented-5abfee6223fe
How JavaScript Works
https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e 了解 V8 引擎
https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec 内存管理和 4 种常见的内存泄露问题。
https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5 Event Loop 和异步编程。
https://blog.sessionstack.com/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path-584e6b8e3bf7 WebSocket 和 HTTP/2。
https://blog.sessionstack.com/how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it-d80945172d79 JavaScript 内在原理。
https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a Web Workers 技术。
https://blog.sessionstack.com/how-javascript-works-the-mechanics-of-web-push-notifications-290176c5c55d Web 端 Push 通知技术。
https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401 Mutation Observer 技术
https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda 渲染引擎和性能优化
https://blog.sessionstack.com/how-javascript-works-inside-the-networking-layer-how-to-optimize-its-performance-and-security-f71b7414d34c 网络性能和安全相关
https://blog.sessionstack.com/how-javascript-works-under-the-hood-of-css-and-js-animations-how-to-optimize-their-performance-db0e79586216 CSS 和 JavaScript 动画性能优化。
https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
https://mathiasbynens.be/notes/javascript-unicode 这是一篇很有价值的 JavaScript 处理 Unicod
用 JavaScript 实现的各种基础算法库 https://mgechev.github.io/javascript-algorithms/index.html
https://github.com/30-seconds/30-seconds-of-code ，一堆你可以在 30 秒内看懂各种有用的 JavaScript 的代码，在 GitHub 上有 2 万颗星了。
https://github.com/denysdovhan/wtfjs/blob/master/README-zh-cn.md
https://github.com/airbnb/javascript ，Airbnb 的 JavaScript 的代码规范，GitHub 上有 7 万多颗星。
浏览器的工作原理：新式网络浏览器幕后揭秘: https://coolshell.cn/articles/9666.html https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/ 你需要了解一下浏览器是怎么工作的
虚拟dom
https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76
https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76
https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf
https://github.com/livoras/blog/issues/13
以及两个 Vitual-DOM 实现供你参考：
https://github.com/Matt-Esch/virtual-dom
https://maquettejs.org/
https://book.douban.com/subject/25856314/ Web性能权威指南 作者: Ilya Grigorik ，本书是谷歌公司高性能团队核心成员的权威之作，堪称实战经验与规范解读完美结合的产物。本书目标是涵盖 Web 开发者技术体系中应该掌握的所有网络及性能优化知识。全书以性能优化为主线，从 TCP、UDP 和 TLS 协议讲起，解释了如何针对这几种协议和基础设施来优化应用。然后深入探讨了无线和移动网络的工作机制。最后，揭示了 HTTP 协议的底层细节，同时详细介绍了 HTTP 2.0、 XHR、SSE、WebSocket、WebRTC 和 DataChannel 等现代浏览器新增的能力。
http2 https://ye11ow.gitbooks.io/http2-explained/content/
https://cascadingmedia.com/insites/2015/03/http-2.html
https://www.nginx.com/wp-content/uploads/2015/09/NGINX_HTTP2_White_Paper_v4.pdf
HPACK: Header Compression for HTTP/2:
https://httpwg.org/specs/rfc7540.html HTTP/2 的协议本身
https://httpwg.org/specs/rfc7541.html HTTP/2 的压缩算法。
websocket:
http://www.websocket.org/quantum.html ，这篇文章比较了 HTTP 的几种链接方式，Polling、Long Polling 和 Streaming，并引入了终级解决方案 WebSocket。你知道的，了解一个技术的缘由是非常重要的。
https://blog.teamtreehouse.com/an-introduction-to-websockets 一个 WebSocket 的简单教程
https://github.com/facundofarias/awesome-websockets GitHub 的 Awesome 资源列表
一些和 WebSocket 相关的想法，可以开阔你的思路：
https://www.html5rocks.com/zh/tutorials/websockets/basics/
http://lucumr.pocoo.org/2012/9/24/websockets-101/
https://banksco.de/p/state-of-realtime-web-2016.html
https://samsaffron.com/archive/2015/12/29/websockets-caution-required

性能调优：

http://www.allitebooks.in/web-performance-action/ 其中有 CSS、图片、字体、JavaScript 性能调优等

http://designingforperformance.com/ ，这本在线的电子书很不错，其中讲了很多网页优化的技术和相关的工具，可以让你对整体网页性能优化有所了解。
https://book.douban.com/subject/5362856/ 高性能JavaScript ，这本书在国内可以买到，能让你了解如何提升各方面的性能，包括代码的加载、运行、DOM 交互、页面生存周期等。雅虎的前端工程师尼古拉斯·扎卡斯（Nicholas C. Zakas）和其他五位 JavaScript 专家介绍了页面代码加载的最佳方法和编程技巧，来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践，以及有助于定位线上问题的工具。
https://book.douban.com/subject/26411563/ 高性能网站建设指南（第二版）全书内容丰富，主要包括减少 HTTP 请求、Edge Computing 技术、Expires Header 技术、gzip 组件、CSS 和 JavaScript 最佳实践、主页内联、Domain 最小化、JavaScript 优化、避免重定向的技巧、删除重复 JavaScript 的技巧、关闭 ETags 的技巧、Ajax 缓存技术和最小化技术等。
https://developers.google.com/web/fundamentals/performance/why-performance-matters/
https://browserdiet.com/zh/ ，前端权威性能指南（中文版）。这是一群为大型站点工作的专家们建立的一份前端性能的工作指南。
https://developers.google.com/speed/docs/insights/rules ，雅虎公司给的一份 7 个分类共 35 个最佳实践的文档。
https://wpostats.com/ 。WPO 是 Web Performance Optimization 的缩写，这个网站上有很多很不错的性能优化的案例分享，一定可以帮助你很多。
https://developer.yahoo.com/performance/rules.html?guccounter=1&guce_referrer=aHR0cHM6Ly90aW1lLmdlZWtiYW5nLm9yZy9jb2x1bW4vYXJ0aWNsZS8xMjM4OT91dG1fdGVybT16ZXVzOFoyUFQmdXRtX3NvdXJjZT1hcHAmdXRtX21lZGl1bT1hcHAmdXRtX2NhbXBhaWduPTE1NC1vbnNlbGwmdXRtX2NvbnRlbnQ9MDQwMXpodWFudGliYW5uZXI&guce_referrer_sig=AQAAAIYkR2V5y-N70GcBNMhe8YVFYh6kVob2XcoZkDXEc0NhRnpUyG8i66rM3F8bFlElgIbojexehuVRNZwvS4h3rNpX0Twv7q7uvFq7DMAdX0GceU5JmLfrHjNvhEoppJv8eGFrASVlr6LmTfNkHXxoH5DK_jTRijYzuTKTs4VxT9ww
http://blog.httpwatch.com/2015/01/16/a-simple-performance-comparison-of-https-spdy-and-http2/ ，这是一篇比较浏览器的 HTTPS、SPDY 和 HTTP/2 性能的文章，除了比较之外，还可以让你了解一些技术细节。
https://www.nginx.com/blog/7-tips-for-faster-http2-performance/ ，对于 HTTP/2 来说，Nginx 公司给出的 7 个增加其性能的小提示。
https://slack.engineering/reducing-slacks-memory-footprint-4480fec7e8eb Slack 团队减少内存使用量的实践
https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7 ，Pinterest 关于性能调优的一些分享，其中包括了前后端的一些性能调优实践。其实也是一些比较通用的玩法，这篇文章主要是想让前端的同学了解一下如何做整体的性能调优。
http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas ，10 个提高 JavaScript 运行效率的小提示，挺有用的。
http://deanhume.com/getting-started-with-the-picture-element/ ，这篇文章讲述了 Responsive 布局所带来的一些负面的问题。主要是图像适配的问题，其中引出了一篇文章"
https://dev.opera.com/articles/native-responsive-images/
使用DNS预取改善页面加载时间 http://www.deanhume.com/improve-page-load-times-with-dns-prefetching/
打破更好的渲染性能 https://www.html5rocks.com/en/tutorials/speed/rendering/
解决内存问题 https://developers.google.com/web/tools/chrome-devtools/memory-problems/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
使用PageSpeed工具分析和优化您的网站 https://developers.google.com/speed/
https://github.com/davidsonfellipe/awesome-wpo
中国互联网公司托管的流行的JavaScript库 https://chineseseoshifu.com/blog/china-hosted-javascript-libraries-jquery-dojo-boostrap.html

框架
https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2 这篇文章讲了所有的 React.js 的基本原理
https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
https://zh-hans.reactjs.org/
https://reactjs.org/docs/thinking-in-react.html 篇文章将引导你完成使用 React 构建可搜索产品数据表的思.
https://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/ React.js 编程的常见错误——不必要的状态。
https://daveceddia.com/thinking-statefully/ 几个很不错的例子让你对声明式有状态的技术有更好的理解。
https://www.robinwieruch.de/tips-to-learn-react-redux/ 。Redux 是一个状态粘合组件，一般来说，我们会用 Redux 来做一些数据状态和其上层 Component 上的同步。这篇教程很不错。
最后是 "State Architecture Patterns in React " 系列文章，非常值得一读。
https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6 回顾
https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89 第2部分：顶级重型架构，流量和性能
https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391 关节点，杂志和整体策略
https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-4-purity-flux-duality-and-dataflow-d06016b3379a React中的状态架构模式，第4部分：纯度，流量对偶和数据流
https://jigsawye.gitbooks.io/mostly-adequate-guide/content/ JavaScript 函数式编程的东西
下面有几篇文章非常不错。前两篇和函数式编程有关的文章非常值得一读。后三篇是一些比较实用的函数式编程和 React 结合的文章。
https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0 什么是函数式编程？
https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c 功能编程（组合软件）的兴衰与兴起
https://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/ 功能UI和组件作为高阶函数
https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7 功能组件的几点思考
https://reactpatterns.com/ 是一个不错的学习 React 模式的地方
https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e
https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9
https://medium.freecodecamp.org/reusable-web-application-strategies-d51517ea68c8
https://medium.com/@robftw/characteristics-of-an-ideal-react-architecture-883b9b92be0b
还有一些不错的实践和经验。
https://camjackson.net/post/9-things-every-reactjs-beginner-should-know
https://engineering.sift.com/best-practices-for-building-large-react-applications/ 构建大型React应用程序的最佳实践
https://americanexpress.io/clean-code-dirty-code/ 清洁代码与脏代码：反应最佳实践
https://dev.to/jakoblind/how-to-become-a-more-productive-react-developer 如何成为一个更高效的React Developer
https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594
这是一些 React 相关资源的列表，很大很全 https://github.com/enaqx/awesome-react
这也是 React 相关的资源列表，与上面不一样的是，这个主要收集了大量文章，比上面的好 https://github.com/markerikson/react-redux-links
组件 https://react.rocks/
vue:
https://medium.com/@dalaidunc/10-things-i-love-about-vue-505886ddaff2 了解 Vue 的一些比较优秀的特性
https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/
https://zhuanlan.zhihu.com/p/23134551
https://itnext.io/how-not-to-vue-18f16fe620b5 ，任何技术都有坑，了解 Vue 的短板，你就能扬长避短，就能用得更好。
https://medium.com/js-dojo/4-ajax-patterns-for-vue-js-apps-add915fc9168
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/
https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
https://lobotuerto.com/blog/dynamic-and-async-components-made-easy-with-vuejs/
https://github.com/vuejs/awesome-vue

UI / UX设计师

UI / UX设计师的7个步骤 https://blog.nicolesaidy.com/7-steps-to-become-a-ui-ux-designer-8beed7639a95
https://www.jianshu.com/p/13e87bf4f857
https://medium.com/uxeastmeetswest/網頁設計-atomic-design簡介及工作實例-42e666358d52
http://atomicdesign.bradfrost.com/table-of-contents/
http://bradfrost.com/blog/post/atomic-web-design/
https://patternlab.io/
https://codeburst.io/atomic-design-with-react-e7aea8152957
https://blog.codinghorror.com/
问答网站 https://stackoverflow.com/