原创 D3.js SVG繪圖實踐：波浪動畫

效果圖 TALK IS CHEAP 源碼就50多行，比較好看懂。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>svg動畫</title>

2018-09-04 10:10:18 62

原创 前端性能優化：webpack分離 + LocalStorage緩存

一，優化背景 上一篇關於webpack優化的文章webpack + react 優化：縮小js包體積談到如何縮小webpack打包後的js代碼體積，來減少網絡請求數據量，這次嘗試將第三方庫（React，ajax等）從業務代碼中分離出來，並

2018-09-04 10:10:18

原创 前端性能優化利器：Chrome Timeline學習及實踐

Timeline Chrome相信是絕大部分前端工程師的基礎開發調試環境，正所謂，工慾善其事必先利其器，當然這裏說的不是打磨Chrome，說的是怎麼用好Chrome。 基礎介紹 在Chrome裏打開（鼠標右鍵選擇檢查/Mac下CMD+o

2018-09-04 10:10:18

原创 動畫學習之Animate.css的使用與解析

近況 近期生活比較單一。 const 提升自己 = true; while( 提升自己 ) { 寫碼 ... 看書 ... 思考

2018-09-04 10:10:18

原创 ReactJS修煉之路（五）：Immutable.js的使用及setState的一個誤區

問題 這篇博客僅作爲學習筆記，沒有多少自己的東西，只有一個小誤區，記錄下來當做備忘。 學習資料： Immutable.js Immutable 詳解及 React 中實踐 關於Immutable.js如何整合進React中，推薦閱讀官

2018-09-04 10:10:18 5

原创 asm.js：面向未來的開發

這是一個可深可淺的話題，會先簡單介紹一下什麼是asm.js，看看它長什麼樣子，再來聊聊asm.js爲什麼能帶來高性能，會有一些簡單的對比，然後再從工程的角度講講兼容性，如何打包使用等等。水平有限，肯定講不透，就當是拋裝引玉吧。 Wha

2018-09-04 10:10:18 4

原创 Safari不能正確解析yyyy-mm-dd

一，困惑 昨天寫代碼遇到的一個bug，在chrome上顯示得好好的時間，一到Safari就提示 “invalid date”，於是回來看代碼（爲了一目瞭然，進行一些處理）： var deadline = new Date("2016-06

2018-09-04 10:10:18 3

原创 渲染性能：讀寫style對渲染過程的影響

讀寫style對渲染過程的影響 一直都說操作DOM性能很差，那麼爲什麼差呢？讀寫style會給性能造成什麼影響？本文作爲渲染性能的第一篇（從發佈時間來看）其實不太合適，第一篇應該先和大家簡單介紹瀏覽器對於頁面的渲染過程，後面會補上，恰好今

2018-09-04 10:10:18

原创 學會學習

學會學習 《學習之道》讀後感。在這裏簡單分享書本的大體內容和結合自身學習經歷與大家共同探討“如何學習”這個話題。 《學習之道》 作者芭芭拉•奧克利（Barbara Oakley）是美國奧克蘭大學的工程學教授，她所開設的“Learnin

2018-09-04 10:10:18

原创 基於svg mask實現的tab切換效果

效果 第一次看到這個效果是在阿里媽媽MUX的博客：UI動效—細微交互，極致體驗，裏面蒐集的一些微交互都讓人眼前一亮，恰好自己最近要做一個按鈕組，就參考了裏面Sergey Valiukh的一個設計。 源碼 和上兩篇博客一樣，相對簡單，爲了

2018-09-04 10:10:18

原创 Vue.js組件開發從0到1

前言 Vue.js憑藉簡潔高效易用的特點迅速被前端開源社區接受，並藉助weex覆蓋移動開發場景，逐步演變成一個完整的生態圈，未來充滿想象。而組件化的出現是爲了確保代碼高內聚低耦合並實現高效複用，從而提升開發效率和降低維護成本。Vue.js

2018-09-04 10:10:18 1

原创 ReactJS修煉之路（四）：組件的性能優化及開發思路

少年，加油 昨天週五，那個喊我“少年”的朋友離職了去新加坡了，我的實習生涯又錯過了一位大神，不過短短一個月還是被影響不少，例如入坑happy hacking keybord同時學習各類軟件的快捷鍵，例如開始用sass，例如初次使用 fl

2018-09-04 10:10:18

原创 webpack + react 優化：縮小js包體積

一，前言 學校這邊的項目剛組建好開發團隊，前一段時間都在考慮如何前後端分離，如何多人協作開發的問題，恰好上一週陪女朋友去承德寫生，能暫時放下工作和學校的事物，有了更多的思考時間。假期期間學習了webpack，並將前端代碼進行了遷移，實現了

2018-09-04 10:10:18 2

原创 淺談圖片加載：逐行掃描VS交錯掃描

一，前言 最近在不斷地擴充自己web開發的知識面，看得比較泛，難得五一假期就在學習之餘實踐一下，畢竟紙上得來終覺淺，況且“紙上”的不一定都對，之前看了一篇博客講圖片加載的，博主大概是淘寶前端團隊的吧，講得很透徹，分享一下： 圖片格式與設

2018-09-04 10:10:18

原创 前端工程：apis接口封裝實踐

前言 最近在學習Chromium內核blink部分的代碼，感觸比較深的是Chromium項目的代碼組織實現，同樣是C++代碼，大二時候寫的項目真是慘不忍睹，而Chromium的代碼（blink部分，據說V8裏面用了各種奇技淫巧）卻清晰明瞭

2018-09-04 10:10:18