原创 8個方向做好前端性能優化
一、webpack方向 webpack優化其實可以歸爲HTTP層面的優化（網絡層面）。因爲HTTP這一層的優化兩大方向就是：減少請求次數和縮短單次請求所花費的時間。而這兩個優化點的手段就是“資源的合併與壓縮”，正是我們每天用構建工具在做的事
2021-01-22 00:27:05
原创 再看瀏覽器事件循環和NodeJS事件循環
事件循環是瀏覽器和Node用來解決JS單線程運行帶來的問題的一種運行機制。瀏覽器和NodeJS環境下的事件循環是不同的，瀏覽器是完全遵循HTML5規範去實現的，NodeJS的事件循環是基於libuv實現的，在HTML5規範的基礎上做了些取捨
2021-01-19 00:26:03
原创 Object.prototype.toString()到底有哪些值？
Object.prototype.toString()是目前JS提供的顆粒度最小的類型判斷方法，用來精確判斷數據類型。如果我們把Object.prototype.toString的值全部枚舉出來，也就掌握了JS所有的數據類型了，美滋滋。那麼
2021-01-14 00:27:30
原创 解析“用ES5原型鏈實現的組合繼承”
用ES5實現繼承，就是用原型鏈實現。只要把子類和父類的原型鏈打通就解決了主要問題。最常用的是組合繼承： 1、先看第1個關鍵語句Father.call(this, age)。這句話的作用很明顯，是在Child()執行時，當執行到Father
2021-01-14 00:27:30
原创 面試時vue響應式原理這麼說，全面而有條理
簡單來說： vue實現響應式（雙向綁定）主要做了3件事，一是用劫持數據或者代理數據來監聽數據變化；二是收集依賴，也就是確定Dom依賴了哪些數據；三是使用了發佈訂閱模式去實現，當數據變化時自動通知需要更新的視圖部分，並進行更新。 具體來說：
2021-01-12 00:37:24
原创 你不知道的javaScript箭頭函數，this只是冰山一角
導讀 如果你查閱了javascript箭頭函數的資料，大抵會得出這樣的結論： 1、箭頭函數最大的特點是沒有this，如果在箭頭函數內部使用this，則this指向函數被定義時所在的作用域所指向的this； 2、不能作爲構造函數； 3、不能用
2020-11-25 00:33:52
原创 圖解JavaScript事件循環、執行棧、任務隊列、宏任務、微任務
事件循環就是Event Loop，是JavaScript 一個特殊的地方。特殊就在於JavaScript 是單線程語言，註定了對異步操作的處理有別於多線程語言。執行棧和任務隊列是JavaScript 執行異步任務的管理方式，宏任務和微任務是
2020-06-14 17:01:21
原创 “一法三表”徹底記住JS顯式/隱式強制類型轉換
一、導讀 由於各種歷史原因javaScript的類型轉換真的令人吐血。本文是老弟翻閱各種材料自己總結出的javaScript強制類型轉換規則，整理了3張表和1個分析方法，便於記憶，小夥伴們可以先看結論，繼續往下看分析有助於理解和記憶。 前言
2020-06-14 17:01:21
原创 Vue單文件組件開發的基本套路--以常用的Modal模態框組件開發爲例
在實際開發工程化vue項目時，基本都是使用單文件組件形式，即每個.vue文件都是一個組件。最基本的就是UI組件了，我們一般會根據自己的喜好和項目的需要選擇一個成熟的組件庫來使用，iView組件庫、餓了麼的Element組件庫都是很優秀很全面
2020-06-14 17:01:21
原创 不一樣的面向對象，javaScript原型揭祕
一、導讀 本篇文章將說清楚javaScript的原型、原型鏈機制，說的不對評論區砸板磚~ 如果你看了很多篇博客仍然搞不清楚prototype 、_ _ proto _ _、new、constructor的關係，請往下看！ 如果你剛從java
2020-06-14 17:01:21
原创 前端打包gzip + nginx開啓靜態gzip
一、爲什麼用靜態gzip方案？ 服務端動態gzip是常見的方案，即服務端判斷瀏覽器http請求頭中的Accept-Encodin是否有gzip，有的話就說明瀏覽器支持gzip服務器就實時壓縮生成gzip返回給瀏覽器，否則就返回原文件。但是這
2020-06-14 17:01:21
原创 weex-ui的wxc-loading組件擴展，支持自定義gif、尺寸等
weex-ui官網的wxc-loading加載提示組件，可能因爲時間緊急吧，一些擴展性做的不夠好，看了代碼就清楚了比如這裏把一些東西寫死了： 當我們直接引入weex-ui並想使用wxc-loading組件時這些寫死的地方往往會限制我們的
2020-06-14 17:01:21
原创 CSS彈性佈局FlexBox用法詳解
Flex彈性佈局，將是未來佈局的首選，幾乎所有的瀏覽器都已支持。 傳統的盒模型display+position+float方案針對一些特殊的佈局較考驗程序員的功力，比如垂直居中（還記得面試官第一個問題就是：騷年，茴字有幾種寫法？垂直居中有幾
2020-06-14 17:01:21
原创 3張圖記牢javaScript原型
javaScript原型和原型鏈的詳細介紹網上已經有很多大神文章介紹過，本篇不打算再講原理。如果朋友您已經理解了原型、原型鏈興許這邊文章能起到一點點作用。 說實在的我在實際工作中很少用到原型鏈，頂多在自建的對象原型上或者預定義對象原型上（比
2020-06-14 17:01:11
原创 瀏覽器緩存HTTP緩存的細節補充和探討
最近在掘金上看到一篇講解HTTP緩存的文章《前端優化：瀏覽器緩存技術介紹》，我覺得講得很好，如果大家不熟悉HTTP緩存的話可以先看下這篇博客，很多細節都講的很具體，向博主學習！ 看完後感覺有幾個細節博主可能沒有展開，引起了疑問和好奇，我查了
2020-06-14 17:01:11