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