作者：Litten
很多人都在說：“技術領域當中，前端最沒有技術含量，且容易被替代。”有人說，前端的能力界限頂多就在浏覽器那兒，無論你觸發了多少bug，最多導緻浏覽器崩潰，連電腦系統都影響不了。
就像二次元各種炫酷的毀滅世界，都不會導緻三次元的世界末日。
這我就不能忍了。作為一個前端，我發現還是有方式突破次元壁、打開次元大門的…
這個實驗腦洞較大，動機無聊，但某種意義上反映了一些安全問題。
想象一下，有天你在家裡上網，吃着火鍋還唱着歌，點開一個連結，電腦突然就藍屏了！想想還真有點小激動。
起因
故事得從localStorage（本地存儲）說起。
html5的本地存儲，相信大家都不陌生。将資料以二進制檔案形式存儲到本地，在目前應用得非常廣泛。
windows下的chrome，localStorage存儲于C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Local Storage檔案夾中。但如果任由網頁無限寫檔案，對使用者硬碟的傷害可想而知，因而浏覽器對其做了大小限制。
對于一個域名+端口，PC端的上限是5M-10M之間，移動端的則是不大于2.5M。
那麼問題就變成：這樣的限制足夠保護使用者硬碟了嗎？
關鍵
關鍵的問題在于，這一限制，針對的是一個域名+端口。
也就是說，你通路同一個域名的不同端口，它們的localStorage并無關聯，是分開存儲的。
我用node簡單地開啟了伺服器，這時，使用者通路http://127.0.0.1:1000到http://127.0.0.1:1099這100個端口，會請求到同一個頁面index.html。
當然，這個index.html裡涉及了localStorage寫操作。
我試着用浏覽器分别通路了幾個端口，結果是分開存儲。一切跟劇本一樣。
自動周遊
但這種程度還不夠。
如果要讓實驗變得更好（xie）玩（e）一些，問題就變成如何讓使用者自動周遊這些端口？
iframe是個好的嘗試。
隻要一打開http://127.0.0.1: 1000，頁面的腳本就會建立一個iframe，去請求http://127.0.0.1: 1001，一直循環下去。
當然iframe我們還可以設定為不可見，以掩蓋這種不厚道的行為…
比方說，有人發給你一個連結，你打開後發現是個視訊，而你根本注意不到背後的腳本，在視訊播放的幾分鐘裡，快要把你的C槽寫滿。
然後我就看到請求如潮水漸漲：
但是，請求到1081端口，最新的chrome就崩潰掉了…原來iframe嵌套太多，已經到達了浏覽器的極限。
防止浏覽器崩潰
C槽還未撐滿，同志還需努力。怎麼辦？
突然想到，到達iframe極限之前，我們可以重定向啊。
每通路50個端口，就使用window.location.href重定向一次，去確定浏覽器不崩潰。
事實證明，這種野蠻的方法的确可行。
至此，隻要通路http://127.0.0.1: 1000，就會往Local Storage檔案夾裡寫入近500M無用資料：
裡面的資料是這樣的：
繼續實驗的黑科技
算了下我的C槽還有空間嘛，那就把端口數量從100增長到200個。結果是這樣的，到達了1.17G大小。
在後續的實驗中，我就慢慢地把端口數量與存儲的資料調大。
電腦也運作得越來越慢。這是為什麼呢？
我觀察到，有時候執行localStorage.setItem()後，在檔案夾裡不一定立即能看到資料檔案。我懷疑這些資料會被chrome先放到記憶體裡，以避免重複讀寫帶來的消耗，在空閑或關閉的時機，再寫進硬碟裡。
但此時，浏覽器已經影響到系統了。它處于一種“不會崩潰”，但“因為占用了許多記憶體，已經妨礙使用者電腦的正常使用”的狀态。
即使使用者關閉了浏覽器視窗，也不會很快恢複。要知道讀寫任務并不是随視窗關閉而終止的，否則浏覽器會丢失資料。
遭遇黑科技的人們能做的隻有：
- 等待；
- 用任務管理器關掉chrome程序，再等待；
- 相信并嘗試“重新開機電腦解決90%電腦問題”的科學論斷。
可以說，浏覽器的内心幾乎是崩潰的。
最後
最後，還是得用嚴肅臉告誡一下：害人之心不可有。
本實驗，從一開始就是懷揣着将安全問題上交給國家的初衷去做的（是的就是這麼純粹）。
後續，看着C槽還有2G空間，我又把端口增長到2000個，試下會發生什麼。
由于請求過多，需要一定時間，我就去做别的事情了。
回來後發現房間安靜祥和，美輪美奂，一片藍光，像是加了特技。
那麼…
問題來了，計算機修理哪家強？
有點急…
從工作流程來看，前端開發工程師處于UI設計師的下遊，要接UI設計稿，轉化為網頁。同時又是後端工程師的上遊，需要把使用者産生的資料送出到服務端。橫向來看，他又與産品經理有着密切接觸，因為他可能随時和産品經理探（si）讨（bi）互動的細節。
對于産品經理天馬行空的思想，你要能把握到位，你得了解他比劃了半天到底是想要做什麼。與後端工程師打交道的時候，你又得馬上化身程式設計達人，跟他們聊資料類型，聊面向對象，聊設計模式。
前端的門檻好像很低，但要成為一名專業的前端工程師，需要掌握的東西太多了。除了前端技術外，還要思維細膩、有品味、有思想、情商高等等。畢竟你要通過代碼與使用者産生接觸，給使用者帶來愉悅感。
從某種程度上來說，好的前端工程師，一定得先是一個好人。
最後給大家分享我寫的SQL兩件套：《SQL基礎知識第二版》和《SQL進階知識第二版》的PDF電子版。裡面有各個文法的解釋、大量的執行個體講解和批注等等，非常通俗易懂，友善大家跟着一起來實操。