diff --git a/README.md b/README.md index 39319af9b5..1d5fb9a7a1 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,3 @@ -# NexT +# Dok6n's blog -> 精于心，简于形 - -NexT 是由 [Hexo NexT](https://github.com/iissnan/hexo-theme-next) 移植而来的 Jekyll 主题。 - -在线预览 Preview | Yitao's Blog | NexT 使用文档 | [English Documentation](README.en.md) - -[![Join the chat at https://gitter.im/simpleyyt/jekyll-theme-next](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/jekyll-theme-next/lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) - -![NexT Schemes](http://iissnan.com/nexus/next/next-schemes.jpg) - - -## 浏览器支持 Browser support - -![Browser support](http://iissnan.com/nexus/next/browser-support.png) - - -## 贡献 Contributing - -欢迎提交问题与需求，修复代码。 - - -## 开发 Development - -NexT 主旨在于简洁优雅且易于使用，所以首先要尽量确保 NexT 的简洁易用性。 - -NexT is built for easily use with elegant appearance. First things first, always keep things simple. - - -## 捐赠 - -支付宝捐赠链接还是要有的，万一真的有人捐呢。 - -![支付宝扫码捐赠](http://7lryc0.com1.z0.glb.clouddn.com/a6x049034plyvjm1rvn4h28%20%281%29.png) +https://dok6n.github.io/ diff --git a/_config.yml b/_config.yml index 6f99140c74..6f631d740a 100644 --- a/_config.yml +++ b/_config.yml @@ -387,6 +387,32 @@ disqus: # count need to be false when hide is true hide: false +# +wildfire: + enable: false + # version - It's recommended to use the following versions. + loaderVersion: 1.2.5 # https://www.npmjs.com/package/wildfire-comment + useDev: true + version: 0.5.6 + # database config + databaseProvider: firebase # or wilddog + firebase: # your firebase config goes here ↓ + apiKey: + authDomain: + databaseURL: + projectId: + storageBucket: + messagingSenderId: + wilddog: # your wilddog config goes here ↓ + siteId: + # other configs + theme: light # or dark + locale: en # or other locales, e.g. zh-CN + defaultAvatarURL: +# Any question? +# Raise an issue here: https://github.com/cheng-kang/wildfire/issues +# + # Hypercomments #hypercomments_id: diff --git a/_includes/_macro/post.html b/_includes/_macro/post.html index b63a1267aa..0036aabf0d 100644 --- a/_includes/_macro/post.html +++ b/_includes/_macro/post.html @@ -146,6 +146,16 @@ data-disqus-identifier="{{ post.url }}" itemprop="commentCount"> + {% elsif site.wildfire.enable %} + + | + + + + + + + {% elsif site.hypercomments_id %} diff --git a/_includes/_partials/comments.html b/_includes/_partials/comments.html index 8233373b76..939ff0f210 100644 --- a/_includes/_partials/comments.html +++ b/_includes/_partials/comments.html @@ -32,6 +32,8 @@
{% elsif site.changyan.appid and site.changyan.appkey %}
+ {% elsif site.wildfire.enable %} +
{% endif %} {% endif %} diff --git a/_includes/_third-party/comments/index.html b/_includes/_third-party/comments/index.html index 523c45e498..6e20bf36e6 100644 --- a/_includes/_third-party/comments/index.html +++ b/_includes/_third-party/comments/index.html @@ -6,3 +6,4 @@ {% include _third-party/comments/youyan.html %} {% include _third-party/comments/livere.html %} {% include _third-party/comments/changyan.html %} +{% include _third-party/comments/wildfire.html %} diff --git a/_includes/_third-party/comments/wildfire.html b/_includes/_third-party/comments/wildfire.html new file mode 100644 index 0000000000..7b07d39b0e --- /dev/null +++ b/_includes/_third-party/comments/wildfire.html @@ -0,0 +1,44 @@ +{% if site.wildfire.enable %} + + {% if page.comments %} + {% if site.wildfire.loaderVersion %} + + {% else %} + + {% endif %} + {% endif %} + +{% endif %} diff --git "a/_posts/2021-09-19-\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270-\353\237\260\355\203\200\354\236\204-\355\231\230\352\262\275.md" "b/_posts/2021-09-19-\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270-\353\237\260\355\203\200\354\236\204-\355\231\230\352\262\275.md" new file mode 100644 index 0000000000..2a87552e88 --- /dev/null +++ "b/_posts/2021-09-19-\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270-\353\237\260\355\203\200\354\236\204-\355\231\230\352\262\275.md" @@ -0,0 +1,87 @@ +--- +title: 자바스크립트 런타임 환경 +description: 테마 적용 후 테스트용 포스팅 +categories: + - javascript +tags: +--- + +> 개발 공부하며 생각나거나 겪었던 이슈들과 참고할 내용들을 적어나갈 블로그 입니다. + + + +# 런타임 환경 + +## **자바스크립트 런타임 환경 ( 엔진 이해, 스택개념 정리 )** + +자바스크립트는 싱글 쓰레드 언어 + +브라우저안에 여러 가지의 쓰레드가 들어 있기때문에 웹 APIs들을 이용하면 멀티쓰레딩이 가능 + +![런타임환경 힙스택](https://dok6n.github.io/assets/images/javascript-Runtime/runtime01.png) + +- Memory Heap + - 데이터를 만들 때 저장되는 공간 + - 구조적으로 정리된 자료구조가 아니라 아무곳에서나 저장되어져 있다. +- Call Stack + - LIFO(last in first out) 쌓이는 구조 + - 재귀 함수 : 함수안에서 함수 자기자신을 호출 + - 프로세스또는 스택 마다 지정된 콜 스택 사이즈가 있어서 콜 스택을 잘못 쓸 경우 지정된 최고 사이즈를 초과하여 에러발생 할 수 있음 + +## 브라우저 런타임 환경 이해 ( 큐 개념정리 ) + +Queue +FIFO ( First In First Out ) => ex) add(), remove() + +![런타임환경 큐](https://dok6n.github.io/assets/images/javascript-Runtime/runtime02.png) + +**웹 API를 사용할때 콜백 함수를 등록 해 놓고,** + +**원하는 이벤트가 발생하면 바로 웹 API는 태스크 큐에 우리가 등록한 콜백 함수를 큐 안으로 넣고,** + +**이벤트 루프는 빙글빙글 돌면서 콜스택과 태스크 큐를 관찰하는 아이인데,** + +**콜 스택이 비워져 있으면 태스크 큐에 있는 아이를 하나만 가지고 와서 콜스택에 넣어준다.** + +# **전체적인 흐름** + +![런타임 환경 전체](https://dok6n.github.io/assets/images/javascript-Runtime/runtime03.png) + +자바스크립트 엔진에는 **`Heap`** 과 **`Call Stack`** 이 있다. + +**`Call Stack`** 은 함수가 실행되는 과정을 기억하기 위해서 쓰이는 자료구조이다. + +자바스크립트가 동작하는 런타임 환경에서는 **`태스크 큐`** 와 **`마이크로 태스크 큐`** 를 이용해서 **`asynchonous`** , **`비동기`** 적인 처리를 하게 된다. + +**`태스크 큐`** 는 한번에 하나씩만 **`Call Stack`** 으로 가지고 온다. + +**`마이크로 태스크 큐`** 는 들어 있는 아이들과 새로 추가된 아이들까지 모두 다 수행할 때까지, **`마이크로 태스크 큐`** 가 비어있게 될 때 까지 **`Call Stack`** 으로 가지고 온다. + +**`Render`** 는 **`이벤트 루프`** 가 매 번은 아니되 주기적으로 브라우저에게 UI를 업데이트 하기 위해서 + +자주 자주 들러준다. + +호출한 **`리퀘스트 애니메이션 프레임 콜백 큐`** 는 이 업데이트가 일어나기 전에 한번 쭉 순회하면서 코드가 실행이 된다. + +[리디아 할리의 시각화 움짤링크](https://dev.to/lydiahallie/series/3341) + +![https://res.cloudinary.com/practicaldev/image/fetch/s--44yasyNX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gid1.6.gif](https://res.cloudinary.com/practicaldev/image/fetch/s--44yasyNX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gid1.6.gif) + +![https://res.cloudinary.com/practicaldev/image/fetch/s--d_n4m4HH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif2.1.gif](https://res.cloudinary.com/practicaldev/image/fetch/s--d_n4m4HH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif2.1.gif) + +![https://res.cloudinary.com/practicaldev/image/fetch/s--MewGMdte--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif3.1.gif](https://res.cloudinary.com/practicaldev/image/fetch/s--MewGMdte--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif3.1.gif) + +![https://res.cloudinary.com/practicaldev/image/fetch/s--b2BtLfdz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif4.gif](https://res.cloudinary.com/practicaldev/image/fetch/s--b2BtLfdz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif4.gif) + +![https://res.cloudinary.com/practicaldev/image/fetch/s--NYOknEYi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif5.gif](https://res.cloudinary.com/practicaldev/image/fetch/s--NYOknEYi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif5.gif) + +```javascript +const foo = () => console.log("First"); +const bar = () => setTimeout(() => console.log("Second"), 500); +const baz = () => console.log("Third"); +bar(); +foo(); +baz(); +``` + +![https://res.cloudinary.com/practicaldev/image/fetch/s--BLtCLQcd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif14.1.gif](https://res.cloudinary.com/practicaldev/image/fetch/s--BLtCLQcd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://devtolydiahallie.s3-us-west-1.amazonaws.com/gif14.1.gif) \ No newline at end of file diff --git a/assets/images/javascript-Runtime/runtime01.png b/assets/images/javascript-Runtime/runtime01.png new file mode 100644 index 0000000000..21a51883db Binary files /dev/null and b/assets/images/javascript-Runtime/runtime01.png differ diff --git a/assets/images/javascript-Runtime/runtime02.png b/assets/images/javascript-Runtime/runtime02.png new file mode 100644 index 0000000000..ebca10bdb8 Binary files /dev/null and b/assets/images/javascript-Runtime/runtime02.png differ diff --git a/assets/images/javascript-Runtime/runtime03.png b/assets/images/javascript-Runtime/runtime03.png new file mode 100644 index 0000000000..8d270ec65b Binary files /dev/null and b/assets/images/javascript-Runtime/runtime03.png differ