请选择 进入手机版 | 继续访问电脑版
搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

就去干小说 如何系统地学习前端基础和底层原理?看完这些书就够了 透明国际

[复制链接]
查看: 669|回复: 0

112

主题

468

帖子

692

积分

等待验证会员

积分
692
发表于 2019-7-12 00:27 | 显示全部楼层 |阅读模式
这是写在帖子头部的内容
前端小智:https://segmentfault.com/a/1190000017072371

若何系统地进修前端根本和底层道理?看完这些书就够了

如何系统地学习前端基础和底层原理?看完这些书就够了  国内新闻 002759xu8ecz8e97q8k80t


对于前真个进修和进步,首先前真个三个最根基的工具 HTML5、CSS3 和 JavaScript(ES6)是必必要学好的。这其中有很多很多的技术,比如,CSS3 引伸出来的 Canvas(位图)、SVG(矢量图) 和 WebGL(3D 图),以及 CSS 的各类图形变更可以让你做出很是丰富的衬着结果和动画结果。
ES6 简直就是把 JavaScript 带到了一个新的台阶,JavaScript 说话的强大,大大开释了前端开辟职员的生产力,让前端得以开辟更加复杂的代码和法式,因而像 React 和 Vue 这样的框架起头成为前端编程的不贰之选。
我一向以为进修任何常识都要从根本动身,所以我会有很大的篇幅在讲各类技术的根本常识和根基道理,特别是以下的这些常识,都是前端法式员需要一块一块啃掉的硬骨头。
JavaScrit 的焦点道理。
我会给出好些网上很不错的讲 JavaScript 的道理的文章或图书,你一定要学好说话的特征和其中的各类坑。
阅读器的工作道理。
这也是一块硬骨头,我感觉这是前端法式员需要领会和大白的工具,否则,你将没法深入下去。
收集协议 HTTP。
也是要侧重领会的,特别是 HTTP/2,还有 HTTP 的几种请求方式:短毗连、长毗连、Stream 毗连、WebSocket 毗连。
前端性能调优。
有了以上的这些根本后,便可以进入前端性能调优的主题了,可以很轻易上手各类性能调优技术的。
框架进修。
保举 React 和 Vue 两个框架。就这两个框架来说,Virtual DOM 技术是其底层技术,组件化是其思惟,治理组件的状态是其重点。而对于 React 来说,函数式编程又是其编程思惟,所以,这些根本技术都是你需要好好研讨和进修的。
UI 设想。
设想也是前端需要做的一个事,比如像 Google 的 Material UI,或是比力风行的 Atomic Design 等应当是前端工程师需要进修的。
下面我们畴前端根本和底层道理起头讲起。先来说讲 HTML5 相关的内容。
<h1>HTML5

HTML5 威望指南
本书面向初学者和中等水平 Web 开辟职员,是安稳把握 HTML5、CSS3 和 JavaScript 的必读之作。书看起来比力厚,是由于里面的代码很多。
HTML5 Canvas 焦点技术
假如你要做 HTML5 游戏的话,这本书必读。
别的,对于 SVG、Canvas 和 WebGL 这三个对应于矢量图、位图和 3D 图的衬着来说,给前端开辟带来了重兵器,很多 HTML5 小游戏也是以兴旺成长。所以,也可以进修一下。
进修这三个技术,最好的地方是 MDN。

  • SVG: Scalable Vector Graphics
  • Canvas API
  • The WebGL API: 2D and 3D graphics for the web
最初是几个资本列表。

  • Awesome HTML5 。。
  • Awesome SVG
  • Awesome Canvas
  • Awesome WebGL
<h1>CSS

MDN Web Doc - CSS 。我小我感觉只要你仔细读一下文档,CSS 并不难学。绝大大都感觉难的,一方面是文档没读透,另一方面是阅读器支持的标准纷歧致。所以,学好 CSS 最关键的还是要仔细地读文档。
以后,在写 CSS 的时辰,你会发现,你的 CSS 中有很多看起来类似的工具。你的 DRY - Don’t Repeat Yourself 洁癖告诉你,这是差池的。所以,你需要学会利用 LESS 和 SaSS
这两个 CSS 预处置工具,其可以帮你进步很多效力。
然后,你需要进修一下 CSS 的誊写标准,前面的《法式员修养》一文中提到过一些,这里再补充几个。

  • Principles of writing consistent, idiomatic CSS
  • Opinionated CSS styleguide for scalable applications
  • Google HTML/CSS Style Guide
假如你需要更有用力,那末你还需要利用一些 CSS Framework,其中最著名的就是 Twitter 公司的 Bootstrap,其有很多不错的 UI 组件,页面结构计划,可以让你很是方便也很是快速地开辟页面。除此之外,还有,主打清新 UI 的 Semantic UI 、主打响应式界面的 Foundation 和基于 Flexbox 的 Bulma。
固然,在利用 CSS 之前,你需要把你阅读器中的一些 HTML 标签给标准化掉。所以,保举几个 Reset 或标准化的 CSS 库:Normalize 、MiniRest.css、 sanitize.css 和 unstyle.css。
保举几个公司的 CSS 相关理论,供参考。

  • CodePen’s CSS
  • Github 的 CSS
  • Medium’s CSS is actually pretty f*ing good
  • CSS at BBC Sport
  • Refining The Way We Structure Our CSS At Trello
  • 最初是一个可以写出可扩大的 CSS 的阅读列表 A Scalable CSS Reading List
<h1>JavaScript

进修 JavaScript 的一些图书和文章。
Professional JavaScript for Web Developers,javascript高级法式设想。
典范红宝书。
JavaScript: The Good Parts ,中文译版为《JavaScript 说话精炼》。

  • 这是一本先容 JavaScript 说话本质的威望图书,值得任何正在或预备处置 JavaScript 开辟的人阅读,而且需要频频阅读。进修、了解。
Secrets of the JavaScript Ninja ,中文翻译版为《JavaScript 忍者秘籍》
本书是 jQuery 库开创人编写的一本深入分解 JavaScript 说话的书。合适具有一定 JavaScript 根本常识的读者阅读,也合适处置法式设想工作并想要深入摸索 JavaScript 说话的读者阅读。这本书有很多艰涩难明的地方,需要仔细阅读,频频琢磨。
Effective JavaScript
Ecma 的 JavaScript 标准化委员会著名专家撰写,作者凭仗多年标准化委员会工作和理论经历,深入辨析 JavaScript 的内部运作机制、特征、圈套和编程最好理论,将它们高度稀释为极具理论指导意义的 68 条精华倡议。
接下来是 ES6 的进修,这里给三个进修手册源。

  • ES6 in Depth,InfoQ 上有相关的中文版 - ES6 深入浅出。还可以看看 A simple interactive ES6 Feature list,或是看一下 阮一峰翻译的 ES6 的教程。
  • ECMAScript 6 Tools ,这是一堆 ES6 工具的列表,可以帮助你进步开辟效力。
  • Modern JS Cheatsheet ,这个 Cheatsheet 在 GitHub 上有 1 万 6 千颗星,你便可见其影响力了。
然后,还有一组很不错的《You Don’t Know JS 系列》 的书。

  • You Don’t Know JS: “Up & Going”
  • You Don’t Know JS: “Scope & Closures”
  • You Don’t Know JS: “this & Object Prototypes”
  • You Don’t Know JS: “ES6 & Beyond”
接下来是一些和编程范式相关的文章。

  • Glossary of Modern JavaScript Concepts: Part 1 ,首先保举这篇文章,其中收集了一些编程范式方面的内容,比如纯函数、状态、可变性和不成变性、指令型说话和声明式说话、函数式编程、响应式编程、函数式响应编程。
  • Glossary of Modern JavaScript Concepts: Part 2 ,在第二部分中首要会商了感化域和闭包,数据流,变更检测,组件化……
下面三篇文章是德米特里·索什尼科夫(Dmitry Soshnikov)小我网站上三篇讲 JavaScript 内在的文章。

  • JavaScript. The Core: 2nd Edition
  • JavaScript. The Core (older ES3 version)
  • JS scope: static, dynamic, and runtime-augmented
  • How JavaScript Works” 是一组很是不错的文章(能够还没有写完),激烈保举。这一系列的文章是 SessionStake 的 CEO 写的,现在有 13 篇,我感受能够还没有写完。这个叫 亚历山大·兹拉特科夫(Alexander Zlatkov) 的 CEO 太猛了。

  • An overview of the engine, the runtime, and the call stack
  • Inside the V8 engine + 5 tips on how to write optimized code ,领会 V8 引擎。这里,也保举 Understanding V8’s Bytecode 这篇文章可以让你领会 V8 引擎的底层字节码。
  • Memory management + how to handle 4 common memory leaks ,内存治理和 4 种常见的内存泄露题目。
  • Event loop and the rise of Async programming + 5 ways to better coding with async/await ,Event Loop 和异步编程。
  • Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path ,WebSocket 和 HTTP/2。
  • A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript ,JavaScript 内在道理。
  • The building blocks of Web Workers + 5 cases when you should use them ,Web Workers 技术。
  • Service Workers, their lifecycle and use cases ,Service Worker 技术。
  • The mechanics of Web Push Notifications ,Web 端 Push 告诉技术。
  • Tracking changes in the DOM using MutationObserver ,Mutation Observer 技术。
  • The rendering engine and tips to optimize its performance ,衬着引擎和性能优化。
  • Inside the Networking Layer + How to Optimize Its Performance and Security ,收集性能战争安相关。
  • Under the hood of CSS and JS animations + how to optimize their performance ,CSS 和 JavaScript 动画性能优化。
接下来是 Google Chrome 工程司理 阿迪·奥斯马尼(Addy Osmani) 的几篇 JavaScript 性能相关的文章,也是很是好的。

  • The Cost Of JavaScript
  • JavaScript Start-up Performance
别的与 JavaScript 相关的资本。

  • JavScript has Unicode Problem ,这是一篇很有代价的 JavaScript 处置 Unicode 的文章。
  • JavaScript Algorithms ,用 JavaScript 实现的各类根本算法库。
  • JavaScript 30 秒代码 ,一堆你可以在 30 秒内看懂各类有用的 JavaScript 的代码,在 GitHub 上有 2 万颗星了。
  • What the f*ck JavaScript ,一堆 JavaScript 搞笑和比力 tricky 的样例。
  • Airbnb JavaScript Style Guide ,Airbnb 的 JavaScript 的代码标准,GitHub 上有 7 万多颗星。
  • JavaScript Patterns for 2017 ,YouTube 上的一个 JavaScript 形式分享,值得一看。
<h1>阅读器道理

你需要领会一下阅读器是怎样工作的,所以,你必必要看《How browsers work》。这篇文章受众之大,后来被人重新整理并公布为《How Browsers Work: Behind the scenes of modern web browsers》,其中还包括中文版。这篇文章很是很是长,所以,你要有耐心看完。然后,是对 Virtual DOM 的进修。Virtual DOM 是 React 的一个很是焦点的技术细节,它也是前端衬着和性能的关键技术。所以,你有需要要好勤进修一下这个技术的实现道理和算法。固然,条件条件是你需要进修过前面我所保举过的阅读器的工作道理。下面是一些不错的文章可以帮你进修这一技术。

  • How to write your own Virtual DOM
  • Write your Virtual DOM 2: Props & Events
  • How Virtual-DOM and diffing works in React
  • The Inner Workings Of Virtual DOM
  • 深度分解:若何实现一个 Virtual DOM 算法
  • 以及两个 Vitual-DOM 实现供你参考:
  • Matt-Esch/Virtual-DOM
  • Maquette
<h1>收集协议

High Performance Browser Networking
本书是谷歌公司高性能团队焦点成员的威望之作,可谓实战经历与标准解读完善连系的产物。本书方针是涵盖 Web 开辟者技术系统中应当把握的一切收集及性能优化常识。
全书以性能优化为主线,从 TCP、UDP 和 TLS 协议讲起,诠释了若何针对这几种协议和根本设备来优化利用。然后深入探讨了无线和移动收集的工作机制。最初,揭露了 HTTP 协议的底层细节,同时具体先容了 HTTP 2.0、 XHR、SSE、WebSocket、WebRTC 和 DataChannel 等现代阅读器新增的才能。
别的,HTTP/2也是 HTTP 的一个新的协议,于 2015 年被核准经过,现在根基上一切的支流阅读器都默许启用这个协议。所以,你有需要进修一下这个协议。下面相关的进修资本。

  • Gitbook - HTTP/2 详解
  • http2 explained(中译版)
  • HTTP/2 for a Faster Web
HTTP/2 的两个 RFC
RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) ,HTTP/2 的协议自己。
RFC 7541 - HPACK: Header Compression for HTTP/2RFC 7541 - HPACK: Header Compression for HTTP/2
新的 HTML5 支持 WebSocket,所以,这也是你要学的一个重要协议。
HTML5 WebSocket: A Quantum Leap in Scalability for the Web ,这篇文章比力了 HTTP 的几种链接方式,Polling、Long Polling 和 Streaming,并引入了终级处理计划 WebSocket。你晓得的,领会一个技术的缘由是很是重要的。
StackOverflow: My Understanding of HTTP Polling, Long Polling, HTTP Streaming and WebSockets ,这是 StackOverflow 上的一个 HTTP 各类链接方式的比力,也可以让你有所熟悉。
An introduction to Websockets ,一个 WebSocket 的简单教程。
Awesome Websockets ,GitHub 的 Awesome 资本列表。
<h1>小结

进修任何常识都要从根本动身,首要报告了 HTML5、CSS3 和 JavaScript(ES6)这三大根本焦点,给出了大量的图书、文章以及其他一些相关的进修资本。以后,倡议你进修阅读器的工作道理和收集协议相关的内容。把握这些道理也是学好前端常识的条件和根本。值得花时候,好勤进修消化。
感激您的阅读
[url=http://reportnet.ru]главные новос
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2006-2014 科技资讯网|科技新闻网--最新最快科技新闻发布汇集平台。 版权所有 法律顾问:高律师 客服电话:0791-88289918
技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表