博文

目前显示的是 四月, 2023的博文

JavaScript 核心觀念(9)-JS回收機制

图片
 今天要來簡單講一下,關於JS的回收機制究竟是什麼東西 主要的概念會是記憶體的存放與釋放 執行環境中,會創造屬於它的記憶體空間,離開執行環境時,釋放記憶體。 *會在沒有任何物件使用到的時候,回收記憶體。 以下是依些小撇步 需要一直使用 → 放全域變數 函式fn()內需要而已 → 放區域變數 consoel.log也會占用記憶體空間哦 *Chrome小工具 F12開啟開發者工具 → 選擇Memory頁籤 → 按下Take heap snapshot按鈕 可以看網頁佔用了多少記憶體哦。 『如果你能做你擅長的事同時又快樂, 你在生命中以走的比大多數人還遠。』-李奧納多.狄卡皮歐

JavaScript 核心觀念(8)-執行緒與同步、非同步

图片
 嗨,大家好 我是Kris,今天要來分享關於JS的執行緒、事件佇列是如何進行的 那就開始吧~ 單執行緒:一次只能做一件事,做完才會做下一件事,JS就是如此,像是單工的感覺。 多執行緒:可以同時執行多個任務。 同步:依照程式碼依序執行fn() 非同步:針對程式語言本身,放到最後才做。 如同上面範例,doWork()會依序執行三個fn(),且都要等上一個完成才能進行下一個。 非同步:因應JS的某些程式的特性,能達成非同步的樣子。 如同上方範例的setTimeout的用意是隔3秒再執行,JS的處理方式是會先放置事件佇列,讓我們繼續瞭解事件佇列是什麼吧! 事件佇列:非同步行為先移到事件佇列,JS還是依照同步的概念在執行程式碼哦! 依照之前分享過的執行堆疊的概念,會先進入do work()、接著eatBreakfast()完成後離開堆疊,再執行callSomeone() 由於callSomeone內有setTimeout屬於非同步事件,會先放到事件佇列Event Queue,也就是圖片中的右邊方格,等待同步執行結束後再進行。 *注意setTimeout不管秒數設定幾秒都是這樣執行,就算是0秒也是哦* 非同步的例子 addEventListener是屬於監聽事件,那範例寫的意思是當有人點擊時,再去執行clickThis 跟setTimeout一樣是一個非同步事件,會先放到事件佇列等待被點擊的時候才會觸發。 補充 事件佇列有多個非同步事件時 *setTimeout有確定秒數,就可以知道誰先執行 *如果沒有確定,其結果會是隨機的,可以用Promise解決 *AJAX也是非同步事件,需要等待回傳資料 *監聽事件是等使用者觸發才會執行 *非同步的概念是因為JS在執行需要呼叫其他資源時,不能準確知道他的完成時間,所以才會先放到事件佇列。 『用現在的努力,換自己喜歡的人生』