内容简介:摘要:一入前端深似海。学习文章的知识往往是碎片化的。而前端涉及到的面很广,这些知识如果不进行有效梳理,则无法相互串联、形成体系。因此,我结合工作体会将抽象出了一些前端基础能力,并将看过、写过的一些不错的文章进行整理,形成了一份(纯)前端技术清单。不论你是正在自学前端,还是对前端某些技术熟练掌握但某些还未涉足,我都希望这份清单能帮助你 review 一些前端的基础能力。
摘要:一入前端深似海。
学习文章的知识往往是碎片化的。而前端涉及到的面很广,这些知识如果不进行有效梳理,则无法相互串联、形成体系。因此,我结合工作体会将抽象出了一些前端基础能力,并将看过、写过的一些不错的文章进行整理,形成了一份(纯)前端技术清单。
不论你是正在自学前端,还是对前端某些技术熟练掌握但某些还未涉足,我都希望这份清单能帮助你 review 一些前端的基础能力。
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布局指南
- 在 (S)CSS 中实现主题功能的 4½ 种方法 [英]
- 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
- webpack 中的 Chunk 关系图算法 [英]
- webpack 进阶系列文章
- 编译优化:
- 关于 webpack 编译缓存的讨论:
2.2. Gulp
2.3. Linter
2.4. 静态类型(Typescript/Flow)
- Typescript 总体架构 [英]
- 为什么要在 JavaScript 中进行静态类型检查:
2.5. Babel
2.6. CSS预处理与模块化
3. 性能优化
性能优化其实就是在理解浏览器的基础上“因地制宜”,因此可以配合1.3节“浏览器”部分进行理解。
强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍,其基本涵盖了现代浏览器中性能优化的所有点,非常系统。下面也摘录了其中一些个人认为非常不错的篇幅。
3.1. 加载性能
- PRPL 模式 [英]
- 图片懒加载完全指南 [英]
- 使用 Intersection Observer 来懒加载图片 [英]
- 图片与视频懒加载的详细指南 [英]
- 使用 Application Shell 架构来实现秒开应用 [英]
3.2. 运行时性能
- 避免大型、复杂的布局和布局抖动 [英]
- 什么导致强制同步布局(reflow)? [英]
- 如何诊断强制同步布局 [英]
- 无线性能优化:Composite
- 如何不择手段提升scroll事件的性能
- 使用 passive event listener 来提高滚动流畅性 [英]
- 节流和去抖(throttle & debounce):
-
requestIdleCallback - 一个强大而神器的 API:
- requestIdleCallback使用入门 [英]
- Idle Until Urgent [英] :requestIdleCallback的妙用
3.3. 前端缓存
- Web 缓存简介:以购买牛奶的为例 [英]
- 大话前端缓存 [英]
- 缓存(一)—— 缓存总览:从性能优化的角度看缓存
- 缓存(二)—— 浏览器缓存机制:强缓存、协商缓存
- 缓存(三)—— 数据存储:cookie、Storage、indexedDB
3.4. 性能调试与实践
- 使用 Chrome DevTools 提升页面速度 [英] :Chrome DevTools实操讲解
- 了解 DevTools 中的 Resource Timing
- 淘宝新势力周H5性能优化实战
- 优化打包策略来提升页面加载速度
- Chrome DevTools 中你可能不知道的调试技巧
- 前端性能测量 [英]
3.5. 性能指标
- 以用户为中心的前端性能指标 [英] :前端性能指标的来龙去脉
- DOMContentLoaded:
- FP (First Paint):
- FCP (First Contentful Paint):
- FMP (First Meaningful Paint):
- TTI (Time to interactive):
- TTFB (Time To First Byte):
- FID (First Input Delay):
- Speed Index:
4. 安全
很多安全风险老生常谈,但是往往到出现问题时,才会被重视或者意识到。
4.1. XSS
4.2. CSRF
- 如何防止CSRF攻击?
- Site Isolation [英] :Chrome的新特性
4.3. CSP
4.4. HTTPS
4.5. 安全实录
-
About
rel=noopener
[英] :打开一个新页面是如何带来安全隐患的 - 一种新型的“钓鱼”方式 [英]
- 一个媒体文件请求引发的跨站风险 [英]
- Mitigating Spectre [英] : Chrome 中的跨站安全问题
5. 自动化测试
自动化测试是软件工程的重要部分之一,但却极容易被忽视。
5.1. 单元测试
5.2. 端到端测试 (E2E)
5.3. 其他
6. 框架与类库
如果说基础知识是道,那框架与工具可能就是术;学习与理解它们,但千万不要成为它们的奴隶。
6.1. React
- React 底层揭秘 [英]
- 你所需要知道的 React 细节
- React Fiber 架构
- React 16 Fiber 源码速览
- React 是怎样炼成的 :React早期的进化之路
- 从零开始实现一个React:
- 「react技术栈」单页应用实践快速入门
6.2. Vue
6.3. Redux
6.4. RxJS
7. 新技术/方向
前端领域新技术、新方向层出不穷,这里汇总一些新技术方向;作为开发者需要多了解但是不要盲从
7.1. PWA
- PWA 学习与实践系列
- Service Worker 入门简介 [英]
- PWA 在 iOS 平台上的特殊问题 [英]
- 在你的 PWA 中小心使用 iOS 的 meta 标签 [英]
- 饿了么的 PWA 升级实践
- 离线指南
- Android 中的 WebAPKs [英]
- Pinterest 的 PWA 实践 [英]
- 异步 HTTP Cookies API [英] :赋能Service Worker
7.2. CSS Houdini
7.3. Web Components
7.4. 微前端(Micro Frontends)
7.5. HTTP/2
7.6. WebAssembly
- WebAssembly 官网
- WebAssembly 现状与实战
- WebAssembly 系列:
8. 业务相关
在业务中往往还有一些与“业务无关”的场景需求 —— 不论是什么业务几乎都会遇到;因此,在变与不变中,我们更需要去抽象出这些问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 微前端自检清单
- 前端团队代码评审 CheckList 清单
- 前端每周清单:大前端技术生命周期模型;WWDC 发布 Safari 11;面向生产环境的前端性能优化
- 前端每周清单第 15 期:Node.js v8.0发布,从React迁移到 Vue,前端开发的未来
- 前端每周清单第 15 期:Node.js v8.0发布,从React迁移到 Vue,前端开发的未来
- 前端每周清单第 16 期:JavaScript 模块化现状;Node V8 与V6 真实性能对比
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大连接
[美] 尼古拉斯•克里斯塔基斯(Nicholas A. Christakis)、[美] 詹姆斯•富勒(James H. Fowler) / 简学 / 中国人民大学出版社 / 2013-1 / 59.90元
[内容简介] 1. 本书是继《六度分隔》之后,社会科学领域最重要的作品。作者发现:相距三度之内是强连接,强连接可以引发行为;相聚超过三度是弱连接,弱连接只能传递信息。 2. 本书讲述了社会网络是如何形成的以及对人类现实行为的影响,如对人类的情绪、亲密关系、健康、经济的运行和政治的影响等,并特别指出,三度影响力(即朋友的朋友的朋友也能影响到你)是社会化网络的强连接原则,决定着社会化网络的......一起来看看 《大连接》 这本书的介绍吧!