原创 前端內存泄漏的分析案例
在最近給客戶交付的一個項目中，客戶反映系統跑一段時間就會奔潰掉。我的第一直覺就是可能發生了內存泄漏。##復現bug 爲了能夠讓bug復現，我讓開發的小夥，先把模擬系統在本地跑起來。要知道，bug復現是很重要的。bug復現，能夠讓開發人員直觀
2019-02-22 23:08:56
原创 WebGL 單通道wireframe渲染
如果要把一個對象的線框繪製出來，一般的方法是先繪製實體對象，然後通過gl.LINES的模式再繪製一遍模型，此時模型的線框就會被繪製出來。#gl.LINES的問題 此方法需要繪製兩遍對象，因此會造成性能的損失。 使用此種方式繪製線框的時候
2019-02-22 23:08:56
1
原创 WebGL 繪製Line的bug(三)
上一篇已經講述了通過面模擬線條時候，每一個頂點的頂點數據包括：端點座標、偏移量、前一個端點座標、後一個端點座標，當然如果我們通過索引的方式來繪製的話，還包括索引數組，下面的代碼通過傳遞一組線條的端點數組來創建上述相關數據： ```bk.Li
2019-02-22 23:08:56
1
原创 WebGL 繪製Line的bug(二)
基本思路上一篇文章簡單介紹了WebGL繪製Line的bug，這一篇文章會講述解決這個問題的work around。 上一篇文章結尾簡單提了下解決的思路，就是通過三角形來模擬線條。 以兩個端點組成的線段爲例，繪製line的時候只用指定兩個端點
2019-02-22 23:08:50
2
原创 簡化一段javascript代碼
在實際的項目中，我們經常會有如下的需求：從一個map中獲取某key的值，如果發現對應的key的值爲null，則爲該key創建一個值(一般爲初始值)，然後把這個值存回到map中，代碼如下： var value = map[key]; if(v
2019-02-22 23:08:50
原创 如何提高思維能力(不止針對程序猿)
最近公司有小夥伴向我反饋，說自己好像跟不上，感覺拖後腿了。希望我能夠幫忙指點下迷津。他的問題是主管交給他的任務，他都能理解。但是就是自己動手寫程序的時候，發現很多問題解決不了，很慢。針對他這種情況，我指出了他的可能存在的一些問題。其中比較主
2019-02-22 23:08:50
原创 canvas反向裁剪技巧
我們都知道在canvas 可以通過clip來實現剪裁功能，其步驟一般是先設置要裁剪的區域（路徑），然後通過ctx.clip()的實現裁剪，裁剪之後，後續的繪製只能在裁剪的區域顯示效果，比如如下一段代碼，實現了一個圓形裁剪： ctx.begi
2019-02-16 13:55:18
原创 canvas 繪製雙線技巧
楔子 最近一個項目，需要繪製雙線的效果，雙線效果表示的是軌道（類似鐵軌之類的），如下圖所示： 負責這塊功能開發的小夥，姑且稱之爲L吧，最開始是通過數學計算的方式來實現這種雙線，也就是在原來的路徑的基礎上，計算出兩條路徑。但是這個過程的計算算
2018-12-21 13:00:06
原创 WebGL2系列之實例數組(Instanced Arrays)
實例化數組 實例化是一種只調用一次渲染函數卻能繪製出很多物體的技術，它節省渲染一個物體時從CPU到GPU的通信時間。實例數組是這樣的一個對象，使用它，可以把原來的的uniform變量轉換成attribute變量，而且這個attribute變
2018-12-06 13:00:14
原创 canvas高效繪製10萬圖形,你必須知道的高效繪製技巧
最近的一個客戶項目中，簡化的需求是繪製按照行列繪製很多個圓圈。需求看起來不難，上手就可以做,寫兩個for循環。 原始繪製方法 首先定義了很多Circle對象，在遍歷循環中調用該對象的draw方法。代碼如下： for (var i = 0;
2018-12-06 13:00:14
原创 Linux命令對應的英文及整體學習法
linux命令注意一下內容收集與互聯網，如果覺得有版權問題，請聯繫。 用Linux命令的時候，如果熟悉對應英文的含義，更有助於理解相應的命令。man: Manual 意思是手冊，可以用這個命令查詢其他命令的用法。這個命令類似其他語言 比如M
2018-11-15 02:08:42
原创 分享兩個故事
第一個故事 前兩天和寫文檔的小姑娘聊天。 她說寫文檔的效率提高了差不多近一倍。讓我感到挺驚喜。 在此之前，一個項目負責人和說起最近文檔的工作累計的比較多。 我比較疑惑，所有的項目都需要文檔嗎？ 然後和負責人簡單的聊了幾句，大概瞭解了下相關的
2018-11-06 02:07:38
原创 分享兩個故事
第一個故事 前兩天和寫文檔的小姑娘聊天。 她說寫文檔的效率提高了差不多近一倍。讓我感到挺驚喜。 在此之前，一個項目負責人和說起最近文檔的工作累計的比較多。 我比較疑惑，所有的項目都需要文檔嗎？ 然後和負責人簡單的聊了幾句，大概瞭解了下相關的
2018-11-06 02:07:37
3
原创 前端內存泄漏的分析案例
在最近給客戶交付的一個項目中，客戶反映系統跑一段時間就會奔潰掉。我的第一直覺就是可能發生了內存泄漏。##復現bug 爲了能夠讓bug復現，我讓開發的小夥，先把模擬系統在本地跑起來。要知道，bug復現是很重要的。bug復現，能夠讓開發人員直觀
2018-09-26 02:09:11
2
原创 JavaScript指定斷點操作
#什麼是斷點操作（Breakpoint action）做前端開發的小夥伴，或許對這個斷點操作不是很熟悉。不過你要是問其他語言（比如C，C++ ，C #等）的開發者，他們應該都挺熟悉斷點操作，這種斷點操作在諸如XCode或者Visual St
2018-09-19 02:07:21
4