2018 眼看就要过去了,今年的你相较去年技术上有怎样的收获呢?
记得年初的时候我给自己制定了一个学习计划,现在回顾来看完成度还不错。但仍有些遗憾,一些技术点没有时间去好好学习。
在学习中我发现,像文章这样的知识往往是碎片化的,而前端涉及到的面很多,如果不将这些知识有效梳理,则无法形成体系、相互串联。最后有一种东懂一块,西了解一点的感觉。因此,我结合工作体会抽象出了一些前端基础技术能力,并将这段时间学习或产出的一些不错的内容根据这些能力进行整理,形成了一份前端技术清单(github 地址)。
不论你是正在自学前端遇到了瓶颈,还是对某些技术熟练掌握但某些还未涉足,都希望这份清单能对你有所帮助。
由于个人精力有限,一些技术点的归纳可能有失偏颇,或者目前并未纳入进来,因此 github 上的清单内容 也会不断更新。目前只包含纯前端基础内容,NodeJS 、客户端泛前端、小程序、可视化等内容先留着坑吧。
清单内容↓↓↓
0. 年度报告
1. 基础拾遗
温故而知新,不知则习之,是以牢固根基。
1.1. JavaScript
- You-Dont-Know-JS [英]
- JavaScript 基础运行机制:
- Event Loop(面试里总会有一题 Event Loop…):
- Web Workers 及其5个常见使用场景 [英]
- 如何避免 async/await 地狱 [英]
- “回调地狱”的解决思路汇总
1.2. CSS
- You-Need-to-Know-CSS
- CSS布局指南
- CSS 中的各类换行处理方式 [英]:处理经典的换行问题
- 浏览器将rem转成px时有精度误差怎么办?
- 精准操控的滚动体验,浅谈新标准 Scroll Snap
- 如何完美实现一个非button元素的按钮 [英]
- 巧用 CSS Grid 来创建横向滚动容器 [英]
- 如何处理内联元素中的空隙 [英]
- CSS Stacking Context 里那些鲜为人知的坑
1.3. 浏览器
- 浏览器的工作原理
- 现代浏览器内部是如何运行的:
- 完整的页面生命周期 API 介绍 [英]
- 四个新的观察者:Intersection / Mutation / Resize / Performance (Observer)
- 渲染引擎工作方式及优化建议 [英]
- 浏览器内核渲染:重建引擎
- 跨域解决方案汇总
2. 工程化与工具
软件规模的扩大带来了工程化的需求,前端也不例外。随着 NodeJS 的出现,前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。
2.1. webpack
- 本文固定链接: https://zxbcw.cn/post/6099/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)