在掘金微信交流群裡的小夥伴們，你們每天都還在堅持讀小報嗎？如果你的回答是yes，那真的要給你點一萬個讚了?能堅持這麼久，真的很優秀噢！（嗯，每天堅持給大家收集文章的小餅也很優秀?）2018不知不覺已經過了一半了，這裡是上半年的小報優質文章合集，做了一些簡單分類，希望對大家有用！

程式語言相關

JavaScript

如何在疲勞的JS世界中持續學習

從瀏覽器多程式到JS單執行緒，JS執行機制最全面的一次梳理

幾道JS程式碼手寫題以及JavaScript資料結構與演算法資源分享

JavaScript：面試頻繁出現的幾個易錯點

Promise原理講解 && 實現一個Promise物件 (遵循Promise/A+規範)

我們需要注意的 immutable 操作

身份證號碼的正規表示式及驗證詳解(JavaScript，Regex)

前端模組化：CommonJS,AMD,CMD,ES6

簡單快速理解js中的this、call和apply

ES6 的幾個小技巧

面試官:請你實現一個深克隆

ES6會這些就夠了

入門babel--實現一個es6的class轉換器

低門檻徹底理解JavaScript中的深拷貝和淺拷貝

六種排序演算法的JavaScript實現以及總結

逐步學習什麼是遞迴？通過使用場景來深入認識遞迴。

Node.js

《Node.js設計模式》使用流進行編碼

Node.js：上傳檔案，服務端如何獲取檔案上傳進度

零基礎實現node+express個性化聊天室

基於 Node.js 前後端分離的一點思考

【譯】關於 Promise 的 9 個提示

一份為 Node.js 應用準備的 Dockerfile 指南

關於實現一個Node.js靜態伺服器你所需要知道的ALL

搭建Node.js應用部署平臺（一）—— 綜述

Node.js框架之express與koa對比分析

Express中介軟體原理詳解

小馬的大前端之路——Node.js初探

春風十里不如Node中的一股清流

Node.js+Mysql+Vue+ElementUI 實現登入註冊登出功能

NodeJS 微信公共號開發 - 實現微信網頁授權獲取使用者資訊

打造跳躍音波播音樂放器(Electron+Nodejs+React)

前端自動化：Node 命令列前端自動構建釋出系統

Nodejs安全清單

[譯] Node.js 能進行 HTTP/2 推送啦！

淺度理解NodeJS的HTTP模組

node基金爬蟲，自導自演瞭解一下？

node.js 命令列工具(cli)

如何構建「大型 Node.js 專案」的專案結構？

Node 在有讚的實踐

頁面佈局

CSS / CSS3

不可思議的純CSS導航欄下劃線跟隨效果

編寫自己的程式碼庫(css3常用動畫的實現)

“破碎-重組-破碎” CSS3實現Lowpoly風格變形動畫終極篇

【基礎】這15種CSS居中的方式，你都用過哪幾種？

基於 HTML5 Canvas 的互動式地鐵線路圖

探究 canvas 繪圖中撤銷（undo）功能的實現方式

canvas實現漂亮的下雨效果

移動端H5多頁開發拍門磚經驗

前端框架

React

《React原始碼解析》系列完結！

怎樣學習React？當然是自己動手實現一個React啦

React v16.3 版本新生命週期函式淺析及升級方案

React應用架構設計指南

[譯] 如何寫出更好的 React 程式碼？

談談 react 中的 key

React全家桶構建一款Web音樂App實戰（五）：歌曲狀態管理及播放功能實現

使 React Native App 更具原生質感

如何寫一個拖拽日曆元件（附原始碼）

面試官:既然React/Vue可以用Event Bus進行元件通訊,你可以實現下嗎?

Redux的前世-今生-來世

基於react/vue的移動端終極適配方案（更新css-modules配置）

淺入淺出圖解domDIff

React Suite v3.0 正式版釋出

Immutable 操作在 React 中的實踐

探索Virtual DOM的前世今生

React 深入系列１：React 中的元素、元件、例項和節點

React Native面試知識點

一幅圖明白React-Redux的原理

元件複用那些事兒 - React 實現按需載入輪子

ReactNative乾貨分享——視訊播放器App

React&Redux實戰

[譯] 如何寫出更好的 React 程式碼？

一個基於 React 開發的PC端音樂App

一份傳男也傳女的 React Native 學習筆記

基於Webpack搭建React開發環境

React Fiber架構

Redux + Immutable.js 效能優化

React + Koa 實現服務端渲染(SSR)

TypeScript 2.8下的終極React元件模式

精讀《用160行js程式碼實現一個React》

Vue.js

當面試官問你Vue響應式原理，你可以這麼回答他

Vue學習看這篇就夠

Vue前端開發規範

2018 我所瞭解的 Vue 知識大全（一）

vue常見面試題

【大型乾貨】手拉手帶你過一遍vue部分原始碼

面試題：你能寫一個Vue的雙向資料繫結嗎？

vue多頁面開發和打包的正確姿勢

vue中需要注意的問題總結(上)

Vue專案自動轉換 px 為 rem，高保真還原設計圖

手摸手，帶你用vue擼後臺系列四(vueAdmin 一個極簡的後臺基礎模板)

Vue+ElementUI實現表單動態渲染、視覺化配置

你應該要知道的Vue.js

聊聊 cube-ui 的技術內幕

Web 端實現 app “輸入驗證碼 ”的效果

Vue 使用中的小技巧

致敬 React: 為 Vue 引入容器元件和展示元件

vue+canvas如何實現b站萌系登入介面

更酷的Console，更簡單的輸出方式，Enjoy it in Vue

手把手帶你擼一個vue元件庫！

Vue全家桶打造自適應 web 音樂播放器

Vue頁面骨架屏

Event Loop是個什麼玩意：從 Vue 的 nextTick 說起

Vue 頁面切換效果之 BubbleTransition

從零開始：一個正式的vue+webpack專案的目錄結構是怎麼形成的

全面解析Vue.nextTick實現原理

VUE從零開始系列（安裝腳手架），呆萌小白上手VUE

如何解釋vue的生命週期才能令面試官滿意？

Mand Mobile - 基於金融場景的Vuejs元件庫

論如何用Vue實現一個彈窗-一個簡單的元件實現

複習Vue中的方法,計算和偵聽者

[譯]vue技術分享-你可能不知道的7個祕密

Vue SPA專案 + Sentry 實現前端錯誤監控

vue不止雙向繫結，來看看EventEmitter是怎麼實現的

Vue專案全域性配置微信分享實踐

Vue 常見業務場景以及細節心得

Vue.js中 watch 的高階用法

當vue遇到pwa--vue+pwa移動端適配解決方案模板案例

Vue頁面骨架屏注入實踐

mpvue: vuejs和小程式碰撞出來的火花

Vue單頁及多頁應用全域性配置404頁面實踐

記一次vue+element+echarts專案的優化（如何輕鬆將專案效能提升70%）

詳解vue的diff演算法

Angular.js

[譯] Angular: 使用 RxJS Observables 來實現簡易版的無限滾動載入指令

[譯] Angular 安全 —— 使用 JSON 網路令牌（JWT）的身份認證

所謂的 Virtual DOM 到底是什麼？

[譯] 所有你需要知道的關於Angular的變更檢測（Change Detection）

[譯]Angular自動取消訂閱

原始碼分析 @angular/cdk 之 Portal

計算機網路相關

Http / Https / Websocket

HTTP2基本概念學習筆記

小哥哥,小姐姐,我有一份tcp、http面試指南你要嗎？

WebSocket 是什麼原理？為什麼可以實現持久連線？

你應該知道的前端——快取

分分鐘讓你理解HTTPS

前端工程師系列，TCP複習及濃縮總結

如何實現一個HTTP請求庫——axios原始碼閱讀與分析

TCP入門與例項講解

看圖學HTTPS

瀏覽器相關

瀏覽器的迴流與重繪 (Reflow & Repaint)

如何解決 touchstart 事件與 click 事件的衝突

前端必須要懂的瀏覽器快取機制

如何判斷使用者瀏覽器以及一些前端常用的正則表單驗證

徹底理解瀏覽器的快取機制

效能優化相關

2018 前端效能優化清單

重構 - 改善程式碼的各方面問題

前端專案重構的些許收穫

[翻譯] Async/Await 使你的程式碼更簡潔

前端效能優化之路——圖片篇。

網頁效能 CaseStudy：以 PressOne 首頁為例

前端優化系列 - JS混淆引入效能天坑

提高 10 倍效能：優化靜態網站

F2 3.1 釋出，開箱即用的移動端視覺化解決方案

前端效能優化之瀏覽器渲染優化 —— 打造60FPS頁面

CSS animation和transition的效能探究

移動端常見bug彙總001

優化頁面的開啟速度，要不要了解一下~

[譯] JavaScript 是如何工作的：深入網路層 + 如何優化效能和安全

用Flow提升前端健壯性

Redux + Immutable.js 效能優化

React 16 載入效能優化指南

安全

面試／個人成長

一年前端面試打怪升級之路（一）

記錄面試中一些回答不夠好的題（Vue 居多）

分享收集的一大波前端面試題和答案

有意思的前端函式面試題

ajax常見面試題

幾個Js程式碼手寫題以及JavaScript資料結構與演算法資源分享

面試：你知道為什麼會有 Generator 嗎

小程式

如何解決目前微信小遊戲無法進行網路請求的問題

【開源】微信小程式、小遊戲以及 Web 通用 Canvas 渲染引擎-Cax

米8搶到沒？不急，擼個小程式先?

PWA

什麼是 PWA

Google I/O 2018 : 應用於 PC 端的 PWA

工具資源

前端開發大殺器hey-cli，全域性支援vue react es6開發部署

手把手教你如何編寫一個前端圖片壓縮、方向糾正、預覽、上傳外掛

不可錯過的javascript迷你庫

從只會git add .的菜鳥到掌握git基本功能

git 常用命令收集與git-flow 簡介

使用 YApi 管理 API 文件，測試， mock

面向前端的 Lottie & AE 動畫手把手入門教學

實戰筆記：Jenkins打造強大的前端自動化工作流

能讓你開發效率翻倍的 VSCode 外掛配置（中）

moment太重? 那就試試miment--一個超輕量級的js時間庫

⏰Day.js 2kB超輕量時間庫和Moment.js一樣的API

免費，一鍵釋出web頁面

MongoDB的基本用法

為什麼我的經緯度座標放在百度地圖上會偏移幾百米？

如何優雅地使用 Git

推薦2個前端工具：Charles和Postman

優雅的提交你的 Git Commit Message

如何閱讀大型前端開源專案的原始碼

論如何實現一個完美的Select元件

v-charts | 餓了麼團隊開源的基於 Vue 和 ECharts 的圖表工具

推薦一款基於Vue的Markdown編輯器外掛——mavonEditor

強大的 VS Code

Webpack

webpack詳解

webpack4-用之初體驗，一起敲它十一遍

元件庫webpack構建速度優化經驗總結

webpack打包之後的檔案過大的解決方法

Webpack + Vue，部署時減少包體積的幾種方法

帶你走進webpack世界，成為webpack頭號玩家

優化 WEBPACK 以更快地構建 REACT

Webpack中publicPath詳解

Webpack4+ 多入口程式構建

其他

不好意思！耽誤你的十分鐘，讓MVVM原理還給你

前端人工智慧？TensorFlow.js 學會遊戲通關

最後：

今年的文章量比去年又多了好多，看來大家在掘金越來越活躍啦！可以Mark起來慢慢看～不過呢小餅還是建議大家到微信群裡看每日小報，畢竟每天消化一兩篇會更加有用，日積月累就會有很大的收益。反而積攢到一起的話要麼就是「債多了不愁。。」再也不會開啟（比如我TAT）；要麼就是看得很累，要花很多時間來補。

歡迎加入掘金前端交流群，找對屬於你的技術圈子

掃下方二維碼加小編（回覆「fe」）邀請你進群喲

2018上半年掘金微信群日報優質文章合集：前端篇

程式語言相關

JavaScript

Node.js

頁面佈局

CSS / CSS3

前端框架

React

Vue.js

Angular.js

計算機網路相關

Http / Https / Websocket

瀏覽器相關

效能優化相關

安全

面試／個人成長

小程式

PWA

工具資源

Webpack

其他

最後：

歡迎加入掘金前端交流群，找對屬於你的技術圈子

相關文章