2018 眼看就要过去了,今年的你相较去年技术上有怎样的收获呢?
记得年初的时候我给自己制定了一个学习计划,现在回顾来看完成度还不错。但仍有些遗憾,一些技术点没有时间去好好学习。
清单 github 地址
不论你是正在自学前端遇到了瓶颈,还是对某些技术熟练掌握但某些还未涉足,都希望这份清单能对你有所帮助。 由于个人精力有限,一些技术点的归纳可能有失偏颇,或者目前并未纳入进来,因此github 上的清单内容 也会不断更新。目前只包含纯前端基础内容,NodeJS 、客户端泛前端、小程序、可视化等内容先留着坑吧。
年度报告
2018 前端工具调查报告
ashleynolan.co.uk/blog/fronte…
2018 JavaScript 调查报告
1 基础拾遗
温故而知新,不知则习之,是以牢固根基。
1.1 JavaScript You-Dont-Know-JS [英] github.com/getify/You-… Event Loop(面试里总会有一题 Event Loop…): 从 Event Loop 规范探究 JavaScript 异步及浏览器更新渲染时机 github.com/aooy/blog/i… 异步之 EventLoop [英] 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() [英] link.juejin.im?target=https%3A%2F%2Fnodejs.org%2Fen%2Fdocs%2Fguides%2Fevent-loop-timers-and-nexttick%2F Web Workers 及其5个常见使用场景 [英] medium.com/m/global-id… “回调地狱”的解决思路汇总 www.jianshu.com/p/bc7b8d542…
1.2. CSS
You-Need-to-Know-CSS lhammer.cn/You-need-to… CSS布局指南 juejin.im/post/5b3b56… CSS 中的各类换行处理方式 [英] css-tricks.com/where-lines… 浏览器将rem转成px时有精度误差怎么办? www.zhihu.com/question/26… 精准操控的滚动体验,浅谈新标准 Scroll Snap juejin.im/post/5ba079… 如何完美实现一个非button元素的按钮 [英] link.juejin.im/?target=htt… 巧用 CSS Grid 来创建横向滚动容器 [英] link.juejin.im?target=https%3A%2F%2Fuxdesign.cc%2Fcreating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585 如何处理内联元素中的空隙 [英] link.juejin.im?target=https%3A%2F%2Fcss-tricks.com%2Ffighting-the-space-between-inline-block-elements%2F CSS Stacking Context 里那些鲜为人知的坑 segmentfault.com/a/119000000…
1.3. 浏览器
浏览器的工作原理 link.juejin.im?target=https%3A%2F%2Fwww.html5rocks.com%2Fzh%2Ftutorials%2Finternals%2Fhowbrowserswork%2F 现代浏览器内部是如何运行的: Chrome浏览器概览 link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2018%2F09%2Finside-browser-part1 渲染进程的内部工作原理 link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2018%2F09%2Finside-browser-part3 compositor是如何来提高交互性能的? link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2018%2F09%2Finside-browser-part4 浏览时发生了什么? link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2018%2F09%2Finside-browser-part2 完整的页面生命周期 API 介绍 [英] css-tricks.com/where-lines… 四个新的观察者:Intersection / Mutation / Resize / Performance (Observer) www.zeolearn.com/magazine/di… 渲染引擎工作方式及优化建议 [英] link.juejin.im?target=https%3A%2F%2Fblog.sessionstack.com%2Fhow-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda 浏览器内核渲染:重建引擎 juejin.im/post/5bbaa7… 跨域解决方案汇总 www.jianshu.com/p/438183ddc…
2 工程化与工具
软件规模的扩大带来了工程化的需求,前端也不例外。随着 NodeJS 的出现,前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。
2.1. webpack
webpack 中的 Chunk 关系图算法 [英] link.juejin.im?target=https%3A%2F%2Fmedium.com%2Fwebpack%2Fthe-chunk-graph-algorithm-week-26-29-7c88aa5e4b4e webpack 进阶系列文章 juejin.im/post/5bc1a7… 编译优化: 如何提升大型项目中 webpack 的性能 ? [英] www.youtube.com/watch?v=Aif… 运行时优化:Separating a Manifest [英] survivejs.com/webpack/opt… 在 webpack 中使用 [英] link.juejin.im?target=https%3A%2F%2Fmedium.com%2Fwebpack%2Flink-rel-prefetch-preload-in-webpack-51a52358f84c 如何更好使用 webpack tree-shaking juejin.im/post/5b8ce4… 关于 webpack 编译缓存的讨论: mzgoddard's comment github.com/webpack/web… [spec: webpack 5] - A module disk cache between build processes github.com/webpack/web…
2.2. Gulp
Gulp 4 简介 [英] fettblog.eu/gulp-4-para… 基于Gulp的多页面应用实践指南 www.jianshu.com/p/355711247…
2.3. Linter
JS Linter 进化史 zhuanlan.zhihu.com/p/34656263 为何要在项目汇总使用 ESLint [英] 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 总体架构 [英] github.com/Microsoft/T… 为什么要在 JavaScript 中进行静态类型检查: 第一部分 www.jianshu.com/p/bda750e2d… 第二、三部分 www.jianshu.com/p/289b3c734… 第四部分 www.jianshu.com/p/d23f93be8…
2.5. Babel
Babel 用户手册 github.com/jamiebuilds… Babel 插件手册 github.com/jamiebuilds…
2.6 CSS预处理与模块化
CSS 进化史 [英] link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40perezpriego7%2Fcss-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b CSS 模块化方案系列 juejin.im/post/5b20e8…
3 性能优化
性能优化其实就是在理解浏览器的基础上“因地制宜”,因此可以配合1.3节“浏览器”部分进行理解。 强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍,其基本涵盖了现代浏览器中性能优化的所有点,非常系统。下面也摘录了其中一些个人认为非常不错的篇幅。
3.1. 加载性能
PRPL 模式 [英] link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ffundamentals%2Fperformance%2Fprpl-pattern%2F 图片懒加载完全指南 [英] css-tricks.com/the-complet… 使用 Intersection Observer 来懒加载图片 [英] deanhume.com/lazy-loadin… 图片与视频懒加载的详细指南 [英] link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ffundamentals%2Fperformance%2Flazy-loading-guidance%2Fimages-and-video%2F 使用 Application Shell 架构来实现秒开应用 [英] link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2015%2F11%2Fapp-shell
3.2. 运行时性能
避免大型、复杂的布局和布局抖动 [英] 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 如何诊断强制同步布局 [英] link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Fchrome-devtools%2Frendering-tools%2Fforced-synchronous-layouts%3Fhl%3Dzh-cn 无线性能优化:Composite taobaofed.org/blog/2016/0… 如何不择手段提升scroll事件的性能 zhuanlan.zhihu.com/p/30078937 使用 passive event listener 来提高滚动流畅性 [英] github.com/WICG/EventL… 节流和去抖(throttle & debounce) JavaScript 函数节流和函数去抖应用场景辨析 github.com/hanzichi/un… underscore 函数去抖的实现 github.com/hanzichi/un… requestIdleCallback - 一个强大而神器的 API requestIdleCallback使用入门 [英] link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2015%2F08%2Fusing-requestidlecallback Idle Until Urgent [英] philipwalton.com/articles/id…
3.3. 前端缓存
Web 缓存简介:以购买牛奶的为例 [英] dev.to/kbk0125/web… 大话前端缓存 [英] calendar.perfplanet.com/2016/a-tale… 缓存(一)—— 缓存总览:从性能优化的角度看缓存 github.com/amandakelak… 缓存(二)—— 浏览器缓存机制:强缓存、协商缓存 github.com/amandakelak… 缓存(三)—— 数据存储:cookie、Storage、indexedDB github.com/amandakelak…
3.4. 性能调试与实践
使用 Chrome DevTools 提升页面速度 [英] link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Fchrome-devtools%2Fspeed%2Fget-started 了解 DevTools 中的 Resource Timing link.juejin.im?target=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Fchrome-devtools%2Fnetwork-performance%2Funderstanding-resource-timing 淘宝新势力周H5性能优化实战 segmentfault.com/a/119000001… 优化打包策略来提升页面加载速度 juejin.im/post/5aed03… Chrome DevTools 中你可能不知道的调试技巧 zhuanlan.zhihu.com/p/42059158 前端性能测量 [英] speedcurve.com/blog/user-t…
3.5. 性能指标
以用户为中心的前端性能指标 [英] link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40perezpriego7%2Fcss-evolution-from-css-sass-bem-css-modules-to-styled-components-d4c1da3a659b CSS 模块化方案系列 juejin.im/post/5b20e8…
注:其中部分外文文章可能需要“科学上网”
想要继续了解后续内容,在本文下方留言告诉我们吧~
作者:AlienZHOU