Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
用錯非同步，服務一樣會卡住 陳柏融
Slide 2
Slide 2 text
Javascript is a single threaded language
Slide 3
Slide 3 text
single thread 代表什麼
Slide 4
Slide 4 text
圖片來源：https://bytearcher.com/articles/parallel-vs-concurrent/ Concurrency Parallelism single thread
Slide 5
Slide 5 text
那為什麼服務不會卡住？
Slide 6
Slide 6 text
因為有 Event Loop
Slide 7
Slide 7 text
圖片來源：https://zhuanlan.zhihu.com/p/34229323 大神在此 專注在這 特別留意這裡的 setTimeout 和 Promise
Slide 8
Slide 8 text
那如果是耗能的 I/O 操作呢
Slide 9
Slide 9 text
圖片來源：https://nexocode.com/blog/posts/behind-nodejs-event-loop/ 大神在此 專注在這
Slide 10
Slide 10 text
readFile 有兩種版本：非同步 vs. 同步
Slide 11
Slide 11 text
所以 Node.js 的 API 都鼓勵使用非同步 的方法，好像後面有個大神會幫忙做事
Slide 12
Slide 12 text
所以只要有了非同步和 event loop，就 不用擔心 JavaScript single thread 的問 題嗎？
Slide 13
Slide 13 text
放在 Promise 的 then 之後？ 大神會來嗎？
Slide 14
Slide 14 text
大神會來嗎？ 把東西都包到 Promise 裡？
Slide 15
Slide 15 text
大神會來嗎？ 使用 setTimeout
Slide 16
Slide 16 text
把東西都包到 Asyc/Await 裡？ 大神會來嗎？
Slide 17
Slide 17 text
你覺得呢？
Slide 18
Slide 18 text
實際來看一下 server 卡住會怎麼樣吧
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
醒醒吧！你不是大神！
Slide 21
Slide 21 text
圖片來源：https://zhuanlan.zhihu.com/p/34229323 大神在此 但你在這
Slide 22
Slide 22 text
你看得到的程式碼 大部分都會回到 single thread 中被執行
Slide 23
Slide 23 text
我要換語言了嗎！？
Slide 24
Slide 24 text
等等，你也可以是大神！
Slide 25
Slide 25 text
圖片來源：https://nexocode.com/blog/posts/behind-nodejs-event-loop/ 大神在此 你也可以在這
Slide 26
Slide 26 text
開啟 Node.js 的 multi-thread
Slide 27
Slide 27 text
app.js worker.js 專案網址：https://github.com/pjchender/jsdc-2020
Slide 28
Slide 28 text
專案網址：https://github.com/pjchender/jsdc-2020
Slide 29
Slide 29 text
回到前端一樣也有 web worker 可用
Slide 30
Slide 30 text
開啟 worker 後避免畫面卡頓 專案網址：https://pjchender.github.io/web-worker-example/
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
找到適合的地方，試著用用看 Worker 吧
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
參考連結 - Node.js Worker threads 範例專案：https://github.com/pjchender/jsdc-2020 - Web Worker 範例專案：https://github.com/pjchender/web-worker-example - Node.js Worker threads 官方文件 - Using Web Workers @ MDN：