妙味课堂（年终回顾）

2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？

记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。

清单 github 地址

https://github.com/alienzhou/frontend-tech-list

不论你是正在自学前端遇到了瓶颈，还是对某些技术熟练掌握但某些还未涉足，都希望这份清单能对你有所帮助。

由于个人精力有限，一些技术点的归纳可能有失偏颇，或者目前并未纳入进来，因此github 上的清单内容 也会不断更新。目前只包含纯前端基础内容，NodeJS 、客户端泛前端、小程序、可视化等内容先留着坑吧。

年度报告

2018 前端工具调查报告 https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results 2018 JavaScript 调查报告 https://2018.stateofjs.com/

1 基础拾遗

温故而知新，不知则习之，是以牢固根基。

1.1 JavaScript

You-Dont-Know-JS [英]

https://github.com/getify/You-Dont-Know-JS

Event Loop（面试里总会有一题 Event Loop…）：

从 Event Loop 规范探究 JavaScript 异步及浏览器更新渲染时机

https://github.com/aooy/blog/issues/5

异步之 EventLoop [英]

https://link.juejin.im?target=https%3A%2F%2Fblog.sessionstack.com%2Fhow-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

NodeJS 中的 Event Loop、Timers 与 process.nextTick() [英]

https://link.juejin.im？target=https%3A%2F%2Fnodejs.org%2Fen%2Fdocs%2Fguides%2Fevent-loop-timers-and-nexttick%2F

Web Workers 及其5个常见使用场景 [英]

https://medium.com/m/global-identity?redirectUrl=https%3A%2F%2Fblog.sessionstack.com%2Fhow-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a

“回调地狱”的解决思路汇总

https://www.jianshu.com/p/bc7b8d542dcd

1.2. CSS

You-Need-to-Know-CSS

• https://lhammer.cn/You-need-to-know-css/#/

CSS布局指南

• https://juejin.im/post/5b3b56a1e51d4519646204bb

CSS 中的各类换行处理方式 [英]

• https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html/

浏览器将rem转成px时有精度误差怎么办？

• https://www.zhihu.com/question/264372456

精准操控的滚动体验，浅谈新标准 Scroll Snap

• https://juejin.im/post/5ba079e86fb9a05d1227fddb

如何完美实现一个非button元素的按钮 [英]

• https://link.juejin.im/?target=https%3A%2F%2Fwww.scottohara.me%2Fblog%2F2018%2F10%2F03%2Funbutton-buttons.html

巧用 CSS Grid 来创建横向滚动容器 [英]

• https://link.juejin.im?target=https%3A%2F%2Fuxdesign.cc%2Fcreating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585

如何处理内联元素中的空隙 [英]

• https://link.juejin.im?target=https%3A%2F%2Fcss-tricks.com%2Ffighting-the-space-between-inline-block-elements%2F

CSS Stacking Context 里那些鲜为人知的坑

• https://segmentfault.com/a/1190000002783265

1.3. 浏览器

浏览器的工作原理

• https://link.juejin.im?target=https%3A%2F%2Fwww.html5rocks.com%2Fzh%2Ftutorials%2Finternals%2Fhowbrowserswork%2F

现代浏览器内部是如何运行的：

• Chrome浏览器概览
• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2018%2F09%2Finside-browser-part1

渲染进程的内部工作原理

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2018%2F09%2Finside-browser-part3

compositor是如何来提高交互性能的？

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2018%2F09%2Finside-browser-part4

浏览时发生了什么？

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2018%2F09%2Finside-browser-part2

完整的页面生命周期 API 介绍 [英]

• https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html/

四个新的观察者：Intersection / Mutation / Resize / Performance (Observer)

• https://www.zeolearn.com/magazine/different-types-of-observers-supported-by-modern-browsers

渲染引擎工作方式及优化建议 [英]

• https://link.juejin.im?target=https%3A%2F%2Fblog.sessionstack.com%2Fhow-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda

浏览器内核渲染：重建引擎

• https://juejin.im/post/5bbaa7da6fb9a05d3761aafe

跨域解决方案汇总

• https://www.jianshu.com/p/438183ddcea8

2 工程化与工具

软件规模的扩大带来了工程化的需求，前端也不例外。随着 NodeJS 的出现，前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。

2.1. webpack

webpack 中的 Chunk 关系图算法 [英]

• https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2Fwebpack%2Fthe-chunk-graph-algorithm-week-26-29-7c88aa5e4b4e

webpack 进阶系列文章

• https://juejin.im/post/5bc1a73df265da0a8d36b74f#heading-13

编译优化：

• 如何提升大型项目中 webpack 的性能 [英]
• https://www.youtube.com/watch?v=AifDI71uqF0
• 运行时优化：Separating a Manifest [英]
• https://survivejs.com/webpack/optimizing/separating-manifest/
• 在 webpack 中使用 <link rel=”prefetch/preload”> [英]
• https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2Fwebpack%2Flink-rel-prefetch-preload-in-webpack-51a52358f84c
• 如何更好使用 webpack tree-shaking
• https://juejin.im/post/5b8ce49df265da438151b468

关于 webpack 编译缓存的讨论：

• mzgoddard's comment
• https://github.com/webpack/webpack/issues/250#issuecomment-240643985
• [spec: webpack 5] - A module disk cache between build processes
• https://github.com/webpack/webpack/issues/6527

2.2. Gulp

Gulp 4 简介 [英]

• https://fettblog.eu/gulp-4-parallel-and-series/

基于Gulp的多页面应用实践指南

• https://www.jianshu.com/p/35571124770f

2.3. Linter

JS Linter 进化史

• https://zhuanlan.zhihu.com/p/34656263

为何要在项目汇总使用 ESLint [英]

• https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2Fthe-node-js-collection%2Fwhy-and-how-to-use-eslint-in-your-project-742d0bc61ed7

2.4. 静态类型

Typescript 总体架构 [英]

• https://github.com/Microsoft/TypeScript/wiki/Architectural-Overview

为什么要在 JavaScript 中进行静态类型检查：

• 第一部分
• https://www.jianshu.com/p/bda750e2d15e
• 第二、三部分
• https://www.jianshu.com/p/289b3c734a9f
• 第四部分
• https://www.jianshu.com/p/d23f93be8821

2.5. Babel

Babel 用户手册

• https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md

Babel 插件手册

• https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md

2.6 CSS预处理与模块化

CSS 进化史 [英]

• https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40perezpriego7%2Fcss-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b

CSS 模块化方案系列

• https://juejin.im/post/5b20e8e0e51d4506c60e47f5

3 性能优化

性能优化其实就是在理解浏览器的基础上“因地制宜”，因此可以配合1.3节“浏览器”部分进行理解。

强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍，其基本涵盖了现代浏览器中性能优化的所有点，非常系统。下面也摘录了其中一些个人认为非常不错的篇幅。

3.1. 加载性能

PRPL 模式 [英]

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ffundamentals%2Fperformance%2Fprpl-pattern%2F

图片懒加载完全指南 [英]

• https://css-tricks.com/the-complete-guide-to-lazy-loading-images/

使用 Intersection Observer 来懒加载图片 [英]

• http://deanhume.com/lazy-loading-images-using-intersection-observer/

图片与视频懒加载的详细指南 [英]

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ffundamentals%2Fperformance%2Flazy-loading-guidance%2Fimages-and-video%2F

使用 Application Shell 架构来实现秒开应用 [英]

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2015%2F11%2Fapp-shell

3.2. 运行时性能

避免大型、复杂的布局和布局抖动 [英]

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ffundamentals%2Fperformance%2Frendering%2Favoid-large-complex-layouts-and-layout-thrashing%3Fhl%3Dzh-cn%23avoid-forced-synchronous-layouts

如何诊断强制同步布局 [英]

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Fchrome-devtools%2Frendering-tools%2Fforced-synchronous-layouts%3Fhl%3Dzh-cn

无线性能优化：Composite

• http://taobaofed.org/blog/2016/04/25/performance-composite/

如何不择手段提升scroll事件的性能

• https://zhuanlan.zhihu.com/p/30078937

使用 passive event listener 来提高滚动流畅性 [英]

• https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.mdhttps://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

节流和去抖（throttle & debounce）

• JavaScript 函数节流和函数去抖应用场景辨析
• https://github.com/hanzichi/underscore-analysis/issues/20
• underscore 函数去抖的实现
• https://github.com/hanzichi/underscore-analysis/issues/21

requestIdleCallback - 一个强大而神器的 API

• requestIdleCallback使用入门 [英]
• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2015%2F08%2Fusing-requestidlecallback
• Idle Until Urgent [英]
• https://philipwalton.com/articles/idle-until-urgent/

3.3. 前端缓存

Web 缓存简介：以购买牛奶的为例 [英]

• https://dev.to/kbk0125/web-caching-explained-by-buying-milk-at-the-supermarket-9k4

大话前端缓存 [英]

• https://calendar.perfplanet.com/2016/a-tale-of-four-caches/

缓存（一）—— 缓存总览：从性能优化的角度看缓存

• https://github.com/amandakelake/blog/issues/43

缓存（二）—— 浏览器缓存机制：强缓存、协商缓存

• https://github.com/amandakelake/blog/issues/41

缓存（三）—— 数据存储：cookie、Storage、indexedDB

• https://github.com/amandakelake/blog/issues/13

3.4. 性能调试与实践

使用 Chrome DevTools 提升页面速度 [英]

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Fchrome-devtools%2Fspeed%2Fget-started

了解 DevTools 中的 Resource Timing

• https://link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Fchrome-devtools%2Fnetwork-performance%2Funderstanding-resource-timing

淘宝新势力周H5性能优化实战

• https://segmentfault.com/a/1190000014359615

优化打包策略来提升页面加载速度

• https://juejin.im/post/5aed037b6fb9a07aa047e1e1https://juejin.im/post/5aed037b6fb9a07aa047e1e1

Chrome DevTools 中你可能不知道的调试技巧

• https://zhuanlan.zhihu.com/p/42059158

前端性能测量 [英]

• https://speedcurve.com/blog/user-timing-and-custom-metrics/

3.5. 性能指标

以用户为中心的前端性能指标 [英]

• https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40perezpriego7%2Fcss-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b

CSS 模块化方案系列

• https://juejin.im/post/5b20e8e0e51d4506c60e47f5

注：其中部分外文文章可能需要“科学上网”

想要继续了解后续内容，在本文下方留言告诉我们吧~

作者：AlienZHOU

来源：https://juejin.im/post/5bdfb387e51d452c8e0aa902

觉得本文对你有帮助？请分享给更多人