Jamie的一些筆記-DingYu的一些筆記

Posted by李定宇 Monday, October 31, 2022

[Frontend筆記]瀏覽器視角下的前端性能優化

利用瀏覽器的渲染原理，對前端性能優化進行解析

瀏覽器從 Network Process 接收到HTML數據後，會交給 Render Process 來進行渲染；而在前端工程角度下的性能優化，便是考慮在 Render Process 渲染中、如何對程式碼進行調優，進而加快渲染速度。

Posted by李定宇 Wednesday, October 26, 2022

[Frontend筆記]在瀏覽器輸入URL後發生什麼事？

從Chrome多進程架構解析網頁載入流程

面試常被問到的「在瀏覽器輸入URL後發生什麼事？」，從Chrome的多進程架構、網路請求、到渲染流程做完整解析。

Posted by李定宇 Tuesday, October 25, 2022

[Frontend筆記] Typescript+Webpack5+Jest 的路徑命名問題

如何在專案中，一勞永逸的改動Typescript、Webpack、Jest中的路徑別名問題？

因為在專案中，原本只有在webpack中使用路徑重命名，發現在vscode中還是沒辦法找到該路徑、jest單元測試的時候也有該問題，最後發現Typescript和Jest都還要分別加上別名設定

Posted by李定宇 Wednesday, October 12, 2022

[Frontend筆記] Vue是如何實現響應式數據

結合虛擬DOM、數據劫持、Side Effect 函數，在Vue中實現響應式數據

在Vue3發布的這段時間裡面，可以看到許多人分享在面試中，很常被問到「Vue2和Vue3的響應式數據的原理分別是什麼?」，本文將參考Vue團隊的出版書籍，來實作Vue響應式數據

Posted by李定宇 Thursday, October 6, 2022

[Frontend筆記] 使用i18next/vue-i18n + Typescript，讓多語言前端專案的開發更順暢

多語言開發，如果翻譯的文件太肥大、key太多，就需要Typescript來幫忙！

筆者之前接手了一個前端專案，有中、日、英三國語言版本，而且文本中的翻譯還有多層嵌套，因此在開發的時候很容易打錯一個字而造成i18n找不到key、畫面顯示錯誤的字。

Posted by李定宇 Friday, September 30, 2022

[Frontend筆記] Vue專案中的規範設置

專案配置:Vue3+Typescript+Webpack5+Eslint+Prettier

如何在Vue3+Typescript+Webpack5專案中配置Eslint+Prettier？

Posted by李定宇 Sunday, September 18, 2022

[Frontend筆記] React專案中的規範設置

專案配置:React+Typescript+Webpack5+Eslint+Prettier

如何在React+Typescript+Webpack5專案中配置Eslint+Prettier？

Posted by李定宇 Wednesday, September 14, 2022

[Frontend筆記] 前端工程化之 ESLint + Prettier

在Vue3的專案中使用Typescript和Webpack5，在路徑重命名的小issue

雖然因為工作專案的緣故，大部分都是使用Vue、也很習慣Vue的寫法了；不過人都是吃著碗內看著碗外，React這種自由的jsx寫法也吸引到了筆者。

Posted by李定宇 Saturday, September 10, 2022

[Frontend筆記] 從Vue跨到React，該注意些什麼？--基本概念

在Vue3的專案中使用Typescript和Webpack5，在路徑重命名的小issue

雖然因為工作專案的緣故，大部分都是使用Vue、也很習慣Vue的寫法了；不過人都是吃著碗內看著碗外，React這種自由的jsx寫法也吸引到了筆者。

Posted by李定宇 Wednesday, August 10, 2022

Jamie的一些筆記

[Frontend筆記]EventLoop中的宏任務與微任務是什麼

利用宏任務與微任務，充分了解Javascript中的異步

[Frontend筆記]瀏覽器視角下的前端性能優化

利用瀏覽器的渲染原理，對前端性能優化進行解析

[Frontend筆記]在瀏覽器輸入URL後發生什麼事？

從Chrome多進程架構解析網頁載入流程

[Frontend筆記] Typescript+Webpack5+Jest 的路徑命名問題

如何在專案中，一勞永逸的改動Typescript、Webpack、Jest中的路徑別名問題？

[Frontend筆記] Vue是如何實現響應式數據

結合虛擬DOM、數據劫持、Side Effect 函數，在Vue中實現響應式數據

[Frontend筆記] 使用i18next/vue-i18n + Typescript，讓多語言前端專案的開發更順暢

多語言開發，如果翻譯的文件太肥大、key太多，就需要Typescript來幫忙！

[Frontend筆記] Vue專案中的規範設置

專案配置:Vue3+Typescript+Webpack5+Eslint+Prettier

[Frontend筆記] React專案中的規範設置

專案配置:React+Typescript+Webpack5+Eslint+Prettier

[Frontend筆記] 前端工程化之 ESLint + Prettier

在Vue3的專案中使用Typescript和Webpack5，在路徑重命名的小issue

[Frontend筆記] 從Vue跨到React，該注意些什麼？--基本概念

在Vue3的專案中使用Typescript和Webpack5，在路徑重命名的小issue

FEATURED TAGS

ABOUT ME