文档章节

极客时间-左耳听风-程序员攻略-前端基础和底层原理

o
 osc_2h38v7rr
发布于 2019/08/06 16:30
字数 2761
阅读 3
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

前端基础和底层原理

对于前端的学习和提高,前端的三个最基本的东西 HTML 5、CSS 3 和 JavaScript(ES6)是必须要学好的。这其中有很多很多的技术,比如,CSS 3 引申出来的 Canvas(位图)、SVG(矢量图) 和 WebGL(3D 图),以及 CSS 的各种图形变换可以让你做出非常丰富的渲染效果和动画效果。

学习任何知识都要从基础出发,如下的这些知识,都是前端程序员需要花力气啃下来的硬骨头。

  • JavaScript 的核心原理
  • 浏览器的工作原理
  • 网络协议 HTTP,尤其是 HTTP/2,还有 HTTP 的几种请求方式:短连接、长连接、Stream 连接、WebSocket 连接。
  • 前端性能调优,各种性能调优技术。
  • 框架学习。 React 和 Vue 两个框架。就这两个框架来说,Virtual DOM 技术是其底层技术,组件化是其思想,管理组件的状态是其重点。而对于 React 来说,函数式编程又是其编程思想。
  • UI 设计。设计也是前端需要做的一个事,比如像 Google 的 Material UI,或是比较流行的 Atomic Design 等应该是前端工程师需要学习的。

而对于工具类的东西,只要去动手了,这种知识自然就会获得,还是把精力重点放在更重要的地方。

HTML 5

HTML 5 主要有以下几本书推荐。

  • HTML 5 权威指南 ,本书面向初学者和中等水平 Web 开发人员,是牢固掌握 HTML 5、CSS 3 和 JavaScript 的必读之作。书看起来比较厚,是因为里面的代码很多。
  • HTML 5 Canvas 核心技术 ,如果要做 HTML 5 游戏的话,这本书必读。

对于 SVG、Canvas 和 WebGL 这三个对应于矢量图、位图和 3D 图的渲染来说,给前端开发带来了重武器,很多 HTML5 小游戏也因此蓬勃发展。

最后是几个资源列表。

CSS

MDN Web Doc - CSS

需要学会使用 LESSSaSS 这两个 CSS 预处理工具,其可以帮你提高很多效率。

CSS 的书写规范。

CSS Framework,其中最著名的就是 Twitter 公司的 Bootstrap,其有很多不错的 UI 组件,页面布局方案,可以让你非常方便也非常快速地开发页面。除此之外,还有,主打清新 UI 的 Semantic UI、主打响应式界面的 Foundation 和基于 Flexbox 的 Bulma

在使用 CSS 之前,需要把你浏览器中的一些 HTML 标签给标准化掉。几个 Reset 或标准化的 CSS 库:NormalizeMiniRest.csssanitize.cssunstyle.css

关于更多的 CSS 框架,参看Awesome CSS Frameworks 上的列表。

接下来,是几个公司的 CSS 相关实践,供参考。

最后是一个可以写出可扩展的 CSS 的阅读列表 A Scalable CSS Reading List

JavaScript

下面是学习 JavaScript 的一些图书和文章。

浏览器原理

了解浏览器是怎么工作的,需要看《How browsers work》。这篇文章受众之大,后来被人重新整理并发布为《How Browsers Work: Behind the scenes of modern web browsers》,其中还包括中文版。

精简版的,可以看《浏览器的渲染原理简介》或是看一下这个幻灯片

然后,是对 Virtual DOM 的学习。Virtual DOM 是 React 的一个非常核心的技术细节,它也是前端渲染和性能的关键技术。所以,你有必要要好好学习一下这个技术的实现原理和算法。当然,前提条件是你需要学习过前面我所推荐过的浏览器的工作原理。下面是一些不错的文章。

网络协议

小结

学习任何知识都要从基础出发

HTML 5、CSS 3 和 JavaScript(ES6)这三大基础核心,给出了大量的图书、文章以及其他一些相关的学习资源。

学习浏览器的工作原理和网络协议相关的内容。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
REST/HTTP 工具包--Spray

Spray 是一个开源的 REST/HTTP 工具包和底层网络 IO 包,基于 Scala 和 Akka 构建。轻量级、异步、非堵塞、基于 actor 模式、模块化和可测试是 spray 的特点。 示例代码: val responses: F...

匿名
2013/02/20
7.1K
0
Android3D应用与游戏开发框架--JQGL

JQGL 是一款针对Android设备上3D应用、游戏的开发框架。 核心功能是OpenGL-ES的使用框架,相对于大部分开发者而已,OpenGL是陌生的,没有专门研究无法进行相关的开发。 本框架针对于Android...

Jping
2013/02/21
1.6K
0
工作流管理系统--Pegasus WMS

Pegasus (飞马座)工作流管理系统包括一套技术标准工作流程应用程序中执行帮助许多不同的环境中,包括桌面、校园集群、网格、云。它弥补了科学领域和执行环境通过自 动映射到分布式资源的高层工...

匿名
2013/02/24
5.4K
0
Steam Installer for Wheezy

Linux游戏最近因为Valve旗下Steam平台的支持而获得快速增长。最初Steam只承诺支持最流行的桌面发行版Ubuntu,但最近它已向其它流行发行版开放了大门。但如果你使用的是不那么流行的发行版呢?...

匿名
2013/03/06
890
0
StreetPass

StreetPass,最初是想模拟任天堂NDS掌机中的StreetPass开发的(但未完成,大体框架已可行)。适用于记录每天在街上偶遇的纸妹Or帅锅的信息。 原理是想采用Wifi hot技术,由此可以在搜索到附近...

口米巴
2013/03/18
1.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

一道多线程面试题区分平庸与卓越

展开 本文分享自微信公众号 - Java架构师联盟(msbxq2019)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

Java架构师联盟
04/22
0
0
推荐 33 个 IDEA 最牛配置,写代码太爽了

来源:http://u6.gg/sS7XJ 1.设置maven 1.在File->settings->搜索maven 2.Mavan home directory--设置maven安装包的bin文件夹所在的位置 3.User settings file--设置setting文件所在的位置 ......

程序员闪充宝
04/08
0
0
各位端午节快乐[玫瑰]

本文分享自微信公众号 - 漫游前端世界(gh_6ac344b74a01)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

Chorer
06/25
0
0
6个超酷的网站,专门用于学习算法

https://mp.weixin.qq.com/s?__biz=MzIwNTc4NTEwOQ==&mid=2247488953&idx=2&sn=9b45800a84113d9a573539de043dcf9c&chksm=972ac4c3a05d4dd524522990e631768d7eb73a483bf62fb3496711953e625832......

osc_wfvuuuju
6分钟前
11
0
网络安全-跨站请求伪造(CSRF)的原理及防御

目录 简介 原理 举例 漏洞发现 链接及请求伪造 CSRF攻击 不同浏览器 未登录状态 登录状态 代码查看 防御 用户 供应商(程序员) 简介 跨站请求伪造(Cross-site request forgery),也被称为...

osc_bs9rqgec
7分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部