├── README.md ├── .DS_Store ├── images ├── mvc.png ├── mvp.png ├── qq.png ├── .DS_Store ├── HEAD1.png ├── diff.png ├── flux.png ├── framework ├── hooks.jpg ├── jsonp.png ├── mvvm.png ├── qqall.png ├── qqget.png ├── swDev.png ├── tag1.png ├── theUi.png ├── 163all.png ├── 163get.png ├── 163score.png ├── 163type.png ├── 163write.png ├── beshow.gif ├── branch.jpg ├── branch1.png ├── cacheDev.png ├── coding.gif ├── framework2 ├── gitArea.png ├── gmailall.png ├── gmailget.png ├── gmailui1.png ├── hookall1.jpg ├── hookall2.jpg ├── ifHooks1.png ├── issue1.png ├── issue2.png ├── layout1.png ├── option1.png ├── pm2list.png ├── promise.png ├── pwaDev.png ├── pwademo1.png ├── qqscore.png ├── qqtype.png ├── reactGit.jpg ├── request1.png ├── request2.png ├── request3.png ├── vue_data.png ├── 163Merics.png ├── FIberTree1.png ├── TTIreason1.png ├── TTIreason2.png ├── allHooks1.png ├── api-login.jpg ├── bplustree.png ├── browseexp.png ├── chunkID1.jpeg ├── eventloop.png ├── fiberLink.jpeg ├── fontRender.png ├── gitAndSvn.png ├── gmailget1.png ├── gmailget3.png ├── gmailscore.png ├── gmailtype.png ├── gmailwrite.png ├── h5_history.png ├── hookLink.jpeg ├── hookLink1.jpg ├── hooklink2.jpg ├── hooklink3.jpg ├── moduleID1.jpeg ├── moduleID2.jpeg ├── mountState.png ├── reactHooks.png ├── virtualDom.png ├── webServe2.png ├── webServer1.png ├── 163PMetrics.png ├── 163imageCache.png ├── FiberTree2.jpeg ├── addToScreen.png ├── bePrerender.gif ├── bereactvrcode.png ├── beshowSmall.gif ├── browseExpHome.png ├── clickjacking.png ├── cors_option.png ├── cors_response.png ├── cros_success.png ├── effectHook1.jpg ├── fiberCarton.jpeg ├── manifestDev.png ├── mountState2.png ├── my_cors_error.png ├── networkFirst.png ├── postCssImage.png ├── skeletonOne.png ├── skeletonTwo.png ├── sqcoreForBe.png ├── stateHooks1.png ├── updateQueue.jpg ├── updateQueue2.jpg ├── useEffectAll1.jpg ├── useStateInput.jpg ├── useStateInput.png ├── useStateType.png ├── 163PDiagnostics.png ├── 163pwaOptimized.png ├── 202110131732315.png ├── 202111081309845.png ├── 202111120947474.png ├── 202111121206886.png ├── 202112072256803.png ├── 202112072303099.png ├── 202112072303684.png ├── 202112072304794.png ├── 202112142334924.png ├── 202201021910119.jpg ├── 202201062010323.png ├── 202201281128747.jpg ├── 202202102258258.png ├── 202202172342428.png ├── 202204041554633.png ├── 202204101656913.png ├── 202204112353612.png ├── 202204112355516.png ├── 202204120016116.png ├── 202204161820784.png ├── FiberRootsList.jpeg ├── FiberUpdate_p.jpeg ├── FiberWorkLoop.jpeg ├── cors_put_error.png ├── dispatchAction.png ├── mountAndUpdate.png ├── node_event_loop.png ├── pattern-marker.png ├── reactFiberHooks.png ├── reactlifeCycle2.png ├── reactlifecycle1.png ├── updateChildren.png ├── updateReducer1.jpg ├── useStateInput1.png ├── useStateInput2.png ├── 163POpportunities.png ├── 202110161815376.jpeg ├── FiberCallbackList.jpeg ├── FiberCallback_r_2.jpeg ├── FiberEffectList.jpeg ├── FiberEffectList_2.jpeg ├── FiberUpdateQueue.jpeg ├── bereactAddtoScreen.png ├── browse-exp-react.gif ├── fiberTreeCarton1.jpeg ├── hooksInFiberNode.png ├── hooksInFiberNode2.jpg ├── postCssPluginColor.png ├── react-default-pwa.png ├── stackreconclier.jpeg ├── vue_data_binding.png ├── 11580142173_.pic_hd.jpg ├── FiberCallbackNode_r.jpeg ├── FiberCallback_Root.jpeg ├── holygrail-by-flexbox.png ├── mountWorkInProgressHook.png ├── useEffectInFiberNode1.png ├── useEffectInFiberNode2.png ├── 1_Sp2Kk29yH_3VsOeB4i1dpg.jpeg ├── FiberBuildWorkInProgress.jpeg ├── FiberChildExpirationTime.jpeg ├── mountWorkInProgressHook1.png ├── image-2019-12-02-20-49-07-696.png ├── 163marker.patt └── pattern-marker.patt └── draft └── react16学习.md /README.md: -------------------------------------------------------------------------------- 1 | # holyZheng-blog 2 | 学习笔记,草稿 3 | 4 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/.DS_Store -------------------------------------------------------------------------------- /images/mvc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/mvc.png -------------------------------------------------------------------------------- /images/mvp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/mvp.png -------------------------------------------------------------------------------- /images/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/qq.png -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/.DS_Store -------------------------------------------------------------------------------- /images/HEAD1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/HEAD1.png -------------------------------------------------------------------------------- /images/diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/diff.png -------------------------------------------------------------------------------- /images/flux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/flux.png -------------------------------------------------------------------------------- /images/framework: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/framework -------------------------------------------------------------------------------- /images/hooks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hooks.jpg -------------------------------------------------------------------------------- /images/jsonp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/jsonp.png -------------------------------------------------------------------------------- /images/mvvm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/mvvm.png -------------------------------------------------------------------------------- /images/qqall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/qqall.png -------------------------------------------------------------------------------- /images/qqget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/qqget.png -------------------------------------------------------------------------------- /images/swDev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/swDev.png -------------------------------------------------------------------------------- /images/tag1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/tag1.png -------------------------------------------------------------------------------- /images/theUi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/theUi.png -------------------------------------------------------------------------------- /images/163all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163all.png -------------------------------------------------------------------------------- /images/163get.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163get.png -------------------------------------------------------------------------------- /images/163score.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163score.png -------------------------------------------------------------------------------- /images/163type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163type.png -------------------------------------------------------------------------------- /images/163write.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163write.png -------------------------------------------------------------------------------- /images/beshow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/beshow.gif -------------------------------------------------------------------------------- /images/branch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/branch.jpg -------------------------------------------------------------------------------- /images/branch1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/branch1.png -------------------------------------------------------------------------------- /images/cacheDev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/cacheDev.png -------------------------------------------------------------------------------- /images/coding.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/coding.gif -------------------------------------------------------------------------------- /images/framework2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/framework2 -------------------------------------------------------------------------------- /images/gitArea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gitArea.png -------------------------------------------------------------------------------- /images/gmailall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gmailall.png -------------------------------------------------------------------------------- /images/gmailget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gmailget.png -------------------------------------------------------------------------------- /images/gmailui1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gmailui1.png -------------------------------------------------------------------------------- /images/hookall1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hookall1.jpg -------------------------------------------------------------------------------- /images/hookall2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hookall2.jpg -------------------------------------------------------------------------------- /images/ifHooks1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/ifHooks1.png -------------------------------------------------------------------------------- /images/issue1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/issue1.png -------------------------------------------------------------------------------- /images/issue2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/issue2.png -------------------------------------------------------------------------------- /images/layout1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/layout1.png -------------------------------------------------------------------------------- /images/option1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/option1.png -------------------------------------------------------------------------------- /images/pm2list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/pm2list.png -------------------------------------------------------------------------------- /images/promise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/promise.png -------------------------------------------------------------------------------- /images/pwaDev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/pwaDev.png -------------------------------------------------------------------------------- /images/pwademo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/pwademo1.png -------------------------------------------------------------------------------- /images/qqscore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/qqscore.png -------------------------------------------------------------------------------- /images/qqtype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/qqtype.png -------------------------------------------------------------------------------- /images/reactGit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/reactGit.jpg -------------------------------------------------------------------------------- /images/request1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/request1.png -------------------------------------------------------------------------------- /images/request2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/request2.png -------------------------------------------------------------------------------- /images/request3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/request3.png -------------------------------------------------------------------------------- /images/vue_data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/vue_data.png -------------------------------------------------------------------------------- /images/163Merics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163Merics.png -------------------------------------------------------------------------------- /images/FIberTree1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FIberTree1.png -------------------------------------------------------------------------------- /images/TTIreason1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/TTIreason1.png -------------------------------------------------------------------------------- /images/TTIreason2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/TTIreason2.png -------------------------------------------------------------------------------- /images/allHooks1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/allHooks1.png -------------------------------------------------------------------------------- /images/api-login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/api-login.jpg -------------------------------------------------------------------------------- /images/bplustree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/bplustree.png -------------------------------------------------------------------------------- /images/browseexp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/browseexp.png -------------------------------------------------------------------------------- /images/chunkID1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/chunkID1.jpeg -------------------------------------------------------------------------------- /images/eventloop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/eventloop.png -------------------------------------------------------------------------------- /images/fiberLink.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/fiberLink.jpeg -------------------------------------------------------------------------------- /images/fontRender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/fontRender.png -------------------------------------------------------------------------------- /images/gitAndSvn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gitAndSvn.png -------------------------------------------------------------------------------- /images/gmailget1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gmailget1.png -------------------------------------------------------------------------------- /images/gmailget3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gmailget3.png -------------------------------------------------------------------------------- /images/gmailscore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gmailscore.png -------------------------------------------------------------------------------- /images/gmailtype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gmailtype.png -------------------------------------------------------------------------------- /images/gmailwrite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/gmailwrite.png -------------------------------------------------------------------------------- /images/h5_history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/h5_history.png -------------------------------------------------------------------------------- /images/hookLink.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hookLink.jpeg -------------------------------------------------------------------------------- /images/hookLink1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hookLink1.jpg -------------------------------------------------------------------------------- /images/hooklink2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hooklink2.jpg -------------------------------------------------------------------------------- /images/hooklink3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hooklink3.jpg -------------------------------------------------------------------------------- /images/moduleID1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/moduleID1.jpeg -------------------------------------------------------------------------------- /images/moduleID2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/moduleID2.jpeg -------------------------------------------------------------------------------- /images/mountState.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/mountState.png -------------------------------------------------------------------------------- /images/reactHooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/reactHooks.png -------------------------------------------------------------------------------- /images/virtualDom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/virtualDom.png -------------------------------------------------------------------------------- /images/webServe2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/webServe2.png -------------------------------------------------------------------------------- /images/webServer1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/webServer1.png -------------------------------------------------------------------------------- /images/163PMetrics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163PMetrics.png -------------------------------------------------------------------------------- /images/163imageCache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163imageCache.png -------------------------------------------------------------------------------- /images/FiberTree2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberTree2.jpeg -------------------------------------------------------------------------------- /images/addToScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/addToScreen.png -------------------------------------------------------------------------------- /images/bePrerender.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/bePrerender.gif -------------------------------------------------------------------------------- /images/bereactvrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/bereactvrcode.png -------------------------------------------------------------------------------- /images/beshowSmall.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/beshowSmall.gif -------------------------------------------------------------------------------- /images/browseExpHome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/browseExpHome.png -------------------------------------------------------------------------------- /images/clickjacking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/clickjacking.png -------------------------------------------------------------------------------- /images/cors_option.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/cors_option.png -------------------------------------------------------------------------------- /images/cors_response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/cors_response.png -------------------------------------------------------------------------------- /images/cros_success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/cros_success.png -------------------------------------------------------------------------------- /images/effectHook1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/effectHook1.jpg -------------------------------------------------------------------------------- /images/fiberCarton.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/fiberCarton.jpeg -------------------------------------------------------------------------------- /images/manifestDev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/manifestDev.png -------------------------------------------------------------------------------- /images/mountState2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/mountState2.png -------------------------------------------------------------------------------- /images/my_cors_error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/my_cors_error.png -------------------------------------------------------------------------------- /images/networkFirst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/networkFirst.png -------------------------------------------------------------------------------- /images/postCssImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/postCssImage.png -------------------------------------------------------------------------------- /images/skeletonOne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/skeletonOne.png -------------------------------------------------------------------------------- /images/skeletonTwo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/skeletonTwo.png -------------------------------------------------------------------------------- /images/sqcoreForBe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/sqcoreForBe.png -------------------------------------------------------------------------------- /images/stateHooks1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/stateHooks1.png -------------------------------------------------------------------------------- /images/updateQueue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/updateQueue.jpg -------------------------------------------------------------------------------- /images/updateQueue2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/updateQueue2.jpg -------------------------------------------------------------------------------- /images/useEffectAll1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/useEffectAll1.jpg -------------------------------------------------------------------------------- /images/useStateInput.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/useStateInput.jpg -------------------------------------------------------------------------------- /images/useStateInput.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/useStateInput.png -------------------------------------------------------------------------------- /images/useStateType.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/useStateType.png -------------------------------------------------------------------------------- /images/163PDiagnostics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163PDiagnostics.png -------------------------------------------------------------------------------- /images/163pwaOptimized.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163pwaOptimized.png -------------------------------------------------------------------------------- /images/202110131732315.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202110131732315.png -------------------------------------------------------------------------------- /images/202111081309845.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202111081309845.png -------------------------------------------------------------------------------- /images/202111120947474.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202111120947474.png -------------------------------------------------------------------------------- /images/202111121206886.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202111121206886.png -------------------------------------------------------------------------------- /images/202112072256803.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202112072256803.png -------------------------------------------------------------------------------- /images/202112072303099.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202112072303099.png -------------------------------------------------------------------------------- /images/202112072303684.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202112072303684.png -------------------------------------------------------------------------------- /images/202112072304794.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202112072304794.png -------------------------------------------------------------------------------- /images/202112142334924.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202112142334924.png -------------------------------------------------------------------------------- /images/202201021910119.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202201021910119.jpg -------------------------------------------------------------------------------- /images/202201062010323.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202201062010323.png -------------------------------------------------------------------------------- /images/202201281128747.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202201281128747.jpg -------------------------------------------------------------------------------- /images/202202102258258.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202202102258258.png -------------------------------------------------------------------------------- /images/202202172342428.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202202172342428.png -------------------------------------------------------------------------------- /images/202204041554633.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202204041554633.png -------------------------------------------------------------------------------- /images/202204101656913.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202204101656913.png -------------------------------------------------------------------------------- /images/202204112353612.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202204112353612.png -------------------------------------------------------------------------------- /images/202204112355516.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202204112355516.png -------------------------------------------------------------------------------- /images/202204120016116.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202204120016116.png -------------------------------------------------------------------------------- /images/202204161820784.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202204161820784.png -------------------------------------------------------------------------------- /images/FiberRootsList.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberRootsList.jpeg -------------------------------------------------------------------------------- /images/FiberUpdate_p.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberUpdate_p.jpeg -------------------------------------------------------------------------------- /images/FiberWorkLoop.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberWorkLoop.jpeg -------------------------------------------------------------------------------- /images/cors_put_error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/cors_put_error.png -------------------------------------------------------------------------------- /images/dispatchAction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/dispatchAction.png -------------------------------------------------------------------------------- /images/mountAndUpdate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/mountAndUpdate.png -------------------------------------------------------------------------------- /images/node_event_loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/node_event_loop.png -------------------------------------------------------------------------------- /images/pattern-marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/pattern-marker.png -------------------------------------------------------------------------------- /images/reactFiberHooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/reactFiberHooks.png -------------------------------------------------------------------------------- /images/reactlifeCycle2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/reactlifeCycle2.png -------------------------------------------------------------------------------- /images/reactlifecycle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/reactlifecycle1.png -------------------------------------------------------------------------------- /images/updateChildren.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/updateChildren.png -------------------------------------------------------------------------------- /images/updateReducer1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/updateReducer1.jpg -------------------------------------------------------------------------------- /images/useStateInput1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/useStateInput1.png -------------------------------------------------------------------------------- /images/useStateInput2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/useStateInput2.png -------------------------------------------------------------------------------- /images/163POpportunities.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/163POpportunities.png -------------------------------------------------------------------------------- /images/202110161815376.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/202110161815376.jpeg -------------------------------------------------------------------------------- /images/FiberCallbackList.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberCallbackList.jpeg -------------------------------------------------------------------------------- /images/FiberCallback_r_2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberCallback_r_2.jpeg -------------------------------------------------------------------------------- /images/FiberEffectList.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberEffectList.jpeg -------------------------------------------------------------------------------- /images/FiberEffectList_2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberEffectList_2.jpeg -------------------------------------------------------------------------------- /images/FiberUpdateQueue.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberUpdateQueue.jpeg -------------------------------------------------------------------------------- /images/bereactAddtoScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/bereactAddtoScreen.png -------------------------------------------------------------------------------- /images/browse-exp-react.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/browse-exp-react.gif -------------------------------------------------------------------------------- /images/fiberTreeCarton1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/fiberTreeCarton1.jpeg -------------------------------------------------------------------------------- /images/hooksInFiberNode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hooksInFiberNode.png -------------------------------------------------------------------------------- /images/hooksInFiberNode2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/hooksInFiberNode2.jpg -------------------------------------------------------------------------------- /images/postCssPluginColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/postCssPluginColor.png -------------------------------------------------------------------------------- /images/react-default-pwa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/react-default-pwa.png -------------------------------------------------------------------------------- /images/stackreconclier.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/stackreconclier.jpeg -------------------------------------------------------------------------------- /images/vue_data_binding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/vue_data_binding.png -------------------------------------------------------------------------------- /images/11580142173_.pic_hd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/11580142173_.pic_hd.jpg -------------------------------------------------------------------------------- /images/FiberCallbackNode_r.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberCallbackNode_r.jpeg -------------------------------------------------------------------------------- /images/FiberCallback_Root.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberCallback_Root.jpeg -------------------------------------------------------------------------------- /images/holygrail-by-flexbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/holygrail-by-flexbox.png -------------------------------------------------------------------------------- /images/mountWorkInProgressHook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/mountWorkInProgressHook.png -------------------------------------------------------------------------------- /images/useEffectInFiberNode1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/useEffectInFiberNode1.png -------------------------------------------------------------------------------- /images/useEffectInFiberNode2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/useEffectInFiberNode2.png -------------------------------------------------------------------------------- /images/1_Sp2Kk29yH_3VsOeB4i1dpg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/1_Sp2Kk29yH_3VsOeB4i1dpg.jpeg -------------------------------------------------------------------------------- /images/FiberBuildWorkInProgress.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberBuildWorkInProgress.jpeg -------------------------------------------------------------------------------- /images/FiberChildExpirationTime.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/FiberChildExpirationTime.jpeg -------------------------------------------------------------------------------- /images/mountWorkInProgressHook1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/mountWorkInProgressHook1.png -------------------------------------------------------------------------------- /images/image-2019-12-02-20-49-07-696.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HolyZheng/holyZheng-blog/HEAD/images/image-2019-12-02-20-49-07-696.png -------------------------------------------------------------------------------- /draft/react16学习.md: -------------------------------------------------------------------------------- 1 | ## react 为什么需要引入fiber 架构? 2 | #### 首先理解一下react的UI更新方式。 3 | react 的一个关键特性是Virtual Dom,通过 diff 新旧Virtual Dom来计算出要做的修改,最终根据不同的环境通过不同的方式渲染更新到视图上。 4 | 5 | 6 | 7 | ### Stack reconciler 8 | 在先前的react中,采用的是stack reconciler的协调方式。react 从根组件或setState()的组件开始自顶向下递归,进行diff,并更新UI,整个过程不可打断。由于js线程和ui线程时互斥的,当遇到频繁的更新场景时,js就会持续占据主线程,页面就会出现卡顿的现象。 9 | 10 | 11 | 12 | #### Fiber reconciler 13 | 为了解决这个问题,react16源码进行了一次重写,将reconciler过程进行时间分片,减轻卡顿的问题。这次重写将vDom tree 由 **树状结构** 改造为 **链表结构**,将基于递归的自顶向下遍历方式改造为循环的自顶向下遍历方式。遍历的上下文从原来存储于系统栈中变为存放在Fiber tree的节点中,更容易打断与恢复。 14 | 15 | 16 | 17 | 把渲染/更新过程分成了 reconciliation 和 commit 两个阶段,reconciliation主要负责fiber tree的构建和diff运算,这个过程是可以拆分的。commit阶段主要是讲执行收集到的effect list 更新dom,这个阶段是不可以拆分的,因为涉及到dom操作,做拆分的话可能造成DOM实际状态与维护的内部状态不一致,另外还会影响体验 18 | 19 | ### 利用每帧的空闲时间 20 | 21 | ![](https://github.com/HolyZheng/holyZheng-blog/blob/master/images/framework?raw=true) 22 | 23 | 浏览器的每一帧就对应着浏览器dom视图的每一次更新。在每一帧中,浏览器要完成以下事情: 24 | - 脚本执行 25 | - 样式计算 26 | - 布局 27 | - 重绘 28 | - 合成等 29 | 30 | ![](https://github.com/HolyZheng/holyZheng-blog/blob/master/images/framework2?raw=true) 31 | 32 | 详细可看图示。如果整个过程花的时间少的话,每一帧就会有空闲时间,比如我们浏览器的主流刷新频率是60Hz左右,那么每一帧的时间就是16ms,如果浏览器在16ms内完成了以上的工作,那么我们就可以利用这一帧中空闲出来的时间,这样就不会阻塞到浏览器视图的更新工作。 33 | 34 | 经过fiber改造后,reconciliation阶段是可以中断和恢复的。基于这个基础,可以将reconciliation阶段分片到浏览器每一帧的空闲时间当中去。我们浏览器中有个叫 **requestIdleCallback** 的api,可以在浏览器空闲时间去执行对应的回调函数。同时还可以设置timeout,避免回调一直得不到执行。 35 | ```js 36 | requestIdelCallback(myNonEssentialWork); 37 | 38 | function myNonEssentialWork (deadline) { 39 | // deadline.timeRemaining() 当前帧剩余时间 40 | while (deadline.timeRemaining() > 0 && tasks.length > 0) { 41 | doWorkIfNeeded(); 42 | } 43 | if (tasks.length > 0){ 44 | requestIdleCallback(myNonEssentialWork); 45 | } 46 | } 47 | ``` 48 | 当然requestIdleCallback 的兼容性并不好,所以react自己实现了一个,一边将reconciliation阶段的工作放置于每一帧的空闲时间来执行。 49 | 50 | ### reconciliation 阶段如何运作 51 | 52 | `ps: 以下两段引用自 黯羽轻扬的 完全理解React Fiber` 53 | ``` 54 | // 原react运行时3种实例。 55 | DOM 真实DOM节点 56 | ------- 57 | Instances React维护的vDOM tree node 58 | ------- 59 | Elements 描述UI长什么样子(type, props) 60 | ``` 61 | ``` 62 | // Fiber 架构下react运行时 63 | DOM 64 | 真实DOM节点 65 | ------- 66 | effect 67 | 每个workInProgress tree节点上都有一个effect list 68 | 用来存放diff结果 69 | 当前节点更新完毕会向上merge effect list(queue收集diff结果) 70 | - - - - 71 | workInProgress 72 | workInProgress tree是reconcile过程中从fiber tree建立的当前进度快照,用于断点恢复 73 | - - - - 74 | fiber 75 | fiber tree与vDOM tree类似,用来描述增量更新所需的上下文信息 76 | ------- 77 | Elements 78 | 描述UI长什么样子(type, props) 79 | ``` 80 | reconciliation 阶段的拆分,以每一个fiber tree 节点为单位,每处理一个节点(每一次循环)后就查看是否还有剩余时间,有就继续下一个单元,没有就等下一次空闲时间来执行。 81 | 82 | 在reconciliation过程中,react会同时维护两颗fiber tree,当前的current tree和一个正在构建的workInProgress tree。对fiber tree进行深度优先遍历,同时去构建workInProgress tree,可以将current tree理解为旧的vDom tree,workInProgress tree为新的vDom tree。如果当前节点有变化的话,就会在workInProgress tree这个节点中搭上effect tag记录当前节点要做的修改。(双缓冲)最终在commit阶段执行effect list 中所有的任务。 83 | 84 | 85 | 86 | 87 | 88 | 补充: 89 | 1. fiber 结构是怎样的? 90 | 2. 调度过程是怎样的? 91 | 3. 对应的源码在哪? 92 | 93 | ### react hooks最佳实践和带来影响? -------------------------------------------------------------------------------- /images/163marker.patt: -------------------------------------------------------------------------------- 1 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 2 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 3 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 4 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 5 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 6 | 255 255 255 255 241 254 236 228 255 255 255 255 255 255 255 255 7 | 255 255 255 255 20 172 187 5 203 180 221 206 172 255 255 255 8 | 255 255 255 255 41 4 185 74 192 166 201 185 158 245 255 255 9 | 255 255 255 255 45 22 79 138 242 229 228 232 248 254 255 255 10 | 255 255 255 255 26 19 105 91 216 206 225 224 211 198 255 255 11 | 255 255 255 255 214 239 251 222 244 238 248 242 238 241 255 255 12 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 13 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 14 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 15 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 16 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 17 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 18 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 19 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 20 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 21 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 22 | 255 255 255 255 241 254 236 228 255 255 255 255 255 255 255 255 23 | 255 255 255 255 20 172 187 5 203 180 222 206 172 255 255 255 24 | 255 255 255 255 41 4 185 74 192 167 202 185 159 245 255 255 25 | 255 255 255 255 45 22 79 138 243 229 229 232 248 254 255 255 26 | 255 255 255 255 26 19 105 91 216 206 225 224 211 198 255 255 27 | 255 255 255 255 214 239 251 222 244 238 248 242 238 241 255 255 28 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 29 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 30 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 31 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 32 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 33 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 34 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 35 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 36 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 37 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 38 | 255 255 255 255 252 254 252 250 255 255 255 255 255 255 255 255 39 | 255 255 255 255 219 242 244 217 203 181 222 207 173 255 255 255 40 | 255 255 255 255 223 217 244 227 192 167 202 186 160 245 255 255 41 | 255 255 255 255 223 219 228 237 243 229 229 233 248 254 255 255 42 | 255 255 255 255 220 219 232 230 215 206 225 224 211 198 255 255 43 | 255 255 255 255 249 252 254 249 244 238 248 242 238 241 255 255 44 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 45 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 46 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 47 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 48 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 49 | 50 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 51 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 52 | 255 255 255 255 255 255 255 245 254 195 243 255 255 255 255 255 53 | 255 255 255 255 255 255 171 160 249 209 240 255 255 255 255 255 54 | 255 255 255 255 255 255 205 186 233 223 244 255 255 255 255 255 55 | 255 255 255 255 255 255 219 204 228 225 249 255 255 255 255 255 56 | 255 255 255 255 255 255 180 166 231 204 241 255 255 255 255 255 57 | 255 255 255 255 255 255 203 192 243 214 246 255 255 255 255 255 58 | 255 255 255 255 255 224 15 67 147 81 227 255 255 255 255 255 59 | 255 255 255 255 255 234 191 180 79 107 252 255 255 255 255 255 60 | 255 255 255 255 255 255 162 4 22 19 241 255 255 255 255 255 61 | 255 255 255 255 255 240 21 42 45 25 220 255 255 255 255 255 62 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 63 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 64 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 65 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 66 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 67 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 68 | 255 255 255 255 255 255 255 245 254 195 243 255 255 255 255 255 69 | 255 255 255 255 255 255 171 161 249 209 240 255 255 255 255 255 70 | 255 255 255 255 255 255 205 186 233 223 244 255 255 255 255 255 71 | 255 255 255 255 255 255 220 205 229 225 249 255 255 255 255 255 72 | 255 255 255 255 255 255 180 167 231 204 241 255 255 255 255 255 73 | 255 255 255 255 255 255 203 192 244 214 246 255 255 255 255 255 74 | 255 255 255 255 255 224 15 67 147 81 227 255 255 255 255 255 75 | 255 255 255 255 255 234 191 180 79 107 252 255 255 255 255 255 76 | 255 255 255 255 255 255 162 4 22 19 241 255 255 255 255 255 77 | 255 255 255 255 255 240 21 42 45 25 220 255 255 255 255 255 78 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 79 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 80 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 81 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 82 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 83 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 84 | 255 255 255 255 255 255 255 245 254 195 243 255 255 255 255 255 85 | 255 255 255 255 255 255 172 162 249 209 240 255 255 255 255 255 86 | 255 255 255 255 255 255 206 187 233 223 244 255 255 255 255 255 87 | 255 255 255 255 255 255 220 205 229 225 249 255 255 255 255 255 88 | 255 255 255 255 255 255 181 167 231 203 241 255 255 255 255 255 89 | 255 255 255 255 255 255 203 193 244 213 246 255 255 255 255 255 90 | 255 255 255 255 255 250 219 226 238 229 251 255 255 255 255 255 91 | 255 255 255 255 255 252 245 244 229 232 254 255 255 255 255 255 92 | 255 255 255 255 255 255 241 218 220 220 253 255 255 255 255 255 93 | 255 255 255 255 255 253 220 223 224 221 250 255 255 255 255 255 94 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 95 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 96 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 97 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 98 | 99 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 100 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 101 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 102 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 103 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 104 | 255 255 243 240 244 249 241 246 227 252 241 220 255 255 255 255 105 | 255 255 195 209 223 225 204 214 81 107 19 25 255 255 255 255 106 | 255 255 254 249 233 228 231 243 147 79 22 45 255 255 255 255 107 | 255 255 245 160 186 204 166 192 67 180 4 42 255 255 255 255 108 | 255 255 255 171 205 219 180 203 15 191 162 21 255 255 255 255 109 | 255 255 255 255 255 255 255 255 224 234 255 240 255 255 255 255 110 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 111 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 112 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 113 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 114 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 115 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 116 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 117 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 118 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 119 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 120 | 255 255 243 240 244 249 241 246 227 252 241 220 255 255 255 255 121 | 255 255 195 209 223 225 204 214 81 107 19 25 255 255 255 255 122 | 255 255 254 249 233 229 231 244 147 79 22 45 255 255 255 255 123 | 255 255 245 161 186 205 167 192 67 180 4 42 255 255 255 255 124 | 255 255 255 171 205 220 180 203 15 191 162 21 255 255 255 255 125 | 255 255 255 255 255 255 255 255 224 234 255 240 255 255 255 255 126 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 127 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 128 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 129 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 130 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 131 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 132 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 133 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 134 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 135 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 136 | 255 255 243 240 244 249 241 246 251 254 253 250 255 255 255 255 137 | 255 255 195 209 223 225 203 213 229 232 220 221 255 255 255 255 138 | 255 255 254 249 233 229 231 244 238 229 220 224 255 255 255 255 139 | 255 255 245 162 187 205 167 193 226 244 218 223 255 255 255 255 140 | 255 255 255 172 206 220 181 203 219 245 241 220 255 255 255 255 141 | 255 255 255 255 255 255 255 255 250 252 255 253 255 255 255 255 142 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 143 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 144 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 145 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 146 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 147 | 148 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 149 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 150 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 151 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 152 | 255 255 255 255 255 220 25 45 42 21 240 255 255 255 255 255 153 | 255 255 255 255 255 241 19 22 4 162 255 255 255 255 255 255 154 | 255 255 255 255 255 252 107 79 180 191 234 255 255 255 255 255 155 | 255 255 255 255 255 227 81 147 67 15 224 255 255 255 255 255 156 | 255 255 255 255 255 246 214 243 192 203 255 255 255 255 255 255 157 | 255 255 255 255 255 241 204 231 166 180 255 255 255 255 255 255 158 | 255 255 255 255 255 249 225 228 204 219 255 255 255 255 255 255 159 | 255 255 255 255 255 244 223 233 186 205 255 255 255 255 255 255 160 | 255 255 255 255 255 240 209 249 160 171 255 255 255 255 255 255 161 | 255 255 255 255 255 243 195 254 245 255 255 255 255 255 255 255 162 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 163 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 164 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 165 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 166 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 167 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 168 | 255 255 255 255 255 220 25 45 42 21 240 255 255 255 255 255 169 | 255 255 255 255 255 241 19 22 4 162 255 255 255 255 255 255 170 | 255 255 255 255 255 252 107 79 180 191 234 255 255 255 255 255 171 | 255 255 255 255 255 227 81 147 67 15 224 255 255 255 255 255 172 | 255 255 255 255 255 246 214 244 192 203 255 255 255 255 255 255 173 | 255 255 255 255 255 241 204 231 167 180 255 255 255 255 255 255 174 | 255 255 255 255 255 249 225 229 205 220 255 255 255 255 255 255 175 | 255 255 255 255 255 244 223 233 186 205 255 255 255 255 255 255 176 | 255 255 255 255 255 240 209 249 161 171 255 255 255 255 255 255 177 | 255 255 255 255 255 243 195 254 245 255 255 255 255 255 255 255 178 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 179 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 180 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 181 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 182 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 183 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 184 | 255 255 255 255 255 250 221 224 223 220 253 255 255 255 255 255 185 | 255 255 255 255 255 253 220 220 218 241 255 255 255 255 255 255 186 | 255 255 255 255 255 254 232 229 244 245 252 255 255 255 255 255 187 | 255 255 255 255 255 251 229 238 226 219 250 255 255 255 255 255 188 | 255 255 255 255 255 246 213 244 193 203 255 255 255 255 255 255 189 | 255 255 255 255 255 241 203 231 167 181 255 255 255 255 255 255 190 | 255 255 255 255 255 249 225 229 205 220 255 255 255 255 255 255 191 | 255 255 255 255 255 244 223 233 187 206 255 255 255 255 255 255 192 | 255 255 255 255 255 240 209 249 162 172 255 255 255 255 255 255 193 | 255 255 255 255 255 243 195 254 245 255 255 255 255 255 255 255 194 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 195 | 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 196 | -------------------------------------------------------------------------------- /images/pattern-marker.patt: -------------------------------------------------------------------------------- 1 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 2 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 3 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 4 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 5 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 6 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 7 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 8 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 9 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 10 | 221 217 205 215 222 212 201 202 207 218 221 222 222 222 222 222 11 | 221 186 108 179 221 165 105 117 110 181 221 222 222 222 222 222 12 | 219 159 109 154 213 163 132 204 149 160 219 222 222 222 222 222 13 | 208 123 142 121 195 163 107 122 117 194 221 222 222 222 222 222 14 | 174 118 153 121 166 163 134 183 135 188 221 222 223 222 222 222 15 | 161 176 212 182 156 178 162 216 171 168 219 222 223 222 222 222 16 | 214 218 221 219 214 217 215 221 217 215 221 222 222 222 222 222 17 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 18 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 19 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 20 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 21 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 22 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 23 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 24 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 25 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 26 | 221 217 205 215 222 212 201 202 207 218 221 222 222 222 222 222 27 | 221 186 108 179 221 165 105 117 110 181 221 220 220 221 222 222 28 | 219 159 109 154 213 163 132 204 149 160 219 212 175 215 214 219 29 | 208 123 142 121 195 163 107 122 117 194 221 212 176 186 169 207 30 | 174 118 153 121 166 163 134 183 135 188 216 210 164 188 177 195 31 | 161 176 212 182 156 178 162 216 171 168 195 206 166 195 177 196 32 | 214 218 221 219 214 217 215 221 217 215 217 185 179 217 216 219 33 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 34 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 35 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 36 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 37 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 38 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 39 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 40 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 41 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 42 | 221 217 205 215 222 212 201 202 207 218 221 222 222 222 222 222 43 | 221 186 108 179 221 165 105 117 110 181 221 220 218 221 222 222 44 | 219 159 109 154 213 163 132 204 149 160 219 197 110 208 204 216 45 | 208 123 142 121 195 163 107 122 117 194 221 199 111 139 96 188 46 | 174 118 153 121 166 163 134 183 135 188 208 193 83 140 114 158 47 | 161 176 212 182 156 178 162 216 171 168 160 185 89 159 115 162 48 | 214 218 221 219 214 217 215 221 217 215 211 134 119 211 208 216 49 | 50 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 51 | 222 222 222 222 222 222 222 222 222 222 222 222 223 222 222 222 52 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 53 | 222 222 222 222 222 222 222 222 222 222 222 223 222 223 223 223 54 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 55 | 222 222 222 222 222 222 222 222 222 222 221 221 222 222 221 222 56 | 222 222 222 222 222 222 222 222 222 219 183 164 198 190 170 217 57 | 222 222 222 222 222 222 222 222 222 207 107 146 119 135 172 219 58 | 222 222 222 222 222 222 222 222 222 201 115 201 123 183 216 222 59 | 222 222 222 222 222 222 222 222 222 201 103 134 110 137 166 218 60 | 222 222 222 222 222 222 222 222 222 212 162 162 161 162 179 219 61 | 222 222 222 222 222 222 222 222 222 222 222 214 199 167 157 216 62 | 222 222 222 222 222 222 222 222 222 216 182 156 119 121 183 220 63 | 222 222 222 222 222 222 222 222 222 205 105 111 141 156 213 222 64 | 222 222 222 222 222 222 222 222 222 217 183 157 123 121 179 219 65 | 222 222 222 222 222 222 222 222 222 222 221 217 205 171 162 217 66 | 222 222 222 222 222 222 222 222 222 222 222 219 209 195 198 220 67 | 222 222 222 222 222 222 222 222 222 222 222 213 170 177 178 218 68 | 222 222 222 222 222 222 222 222 222 222 222 215 185 188 195 218 69 | 222 222 222 222 222 222 222 222 222 222 220 178 177 166 168 181 70 | 222 222 222 222 222 222 222 222 222 222 221 210 211 208 204 184 71 | 222 222 222 222 222 222 222 222 222 222 221 221 222 216 195 218 72 | 222 222 222 222 222 222 222 222 222 219 183 164 198 190 170 217 73 | 222 222 222 222 222 222 222 222 222 207 107 146 119 135 172 219 74 | 222 222 222 222 222 222 222 222 222 201 115 201 123 183 216 222 75 | 222 222 222 222 222 222 222 222 222 201 103 134 110 137 166 218 76 | 222 222 222 222 222 222 222 222 222 212 162 162 161 162 179 219 77 | 222 222 222 222 222 222 222 222 222 222 222 214 199 167 157 216 78 | 222 222 222 222 222 222 222 222 222 216 182 156 119 121 183 220 79 | 222 222 222 222 222 222 222 222 222 205 105 111 141 156 213 222 80 | 222 222 222 222 222 222 222 222 222 217 183 157 123 121 179 219 81 | 222 222 222 222 222 222 222 222 222 222 221 217 205 171 162 217 82 | 222 222 222 222 222 222 222 222 222 222 222 216 192 158 166 218 83 | 222 222 222 222 222 222 222 222 222 222 222 201 98 115 115 212 84 | 222 222 222 222 222 222 222 222 222 222 222 206 135 140 157 214 85 | 222 222 222 222 222 222 222 222 222 222 218 115 114 88 94 125 86 | 222 222 222 222 222 222 222 222 222 222 220 193 195 188 180 131 87 | 222 222 222 222 222 222 222 222 222 222 221 221 222 208 158 214 88 | 222 222 222 222 222 222 222 222 222 219 183 164 198 190 170 217 89 | 222 222 222 222 222 222 222 222 222 207 107 146 119 135 172 219 90 | 222 222 222 222 222 222 222 222 222 201 115 201 123 183 216 222 91 | 222 222 222 222 222 222 222 222 222 201 103 134 110 137 166 218 92 | 222 222 222 222 222 222 222 222 222 212 162 162 161 162 179 219 93 | 222 222 222 222 222 222 222 222 222 222 222 214 199 167 157 216 94 | 222 222 222 222 222 222 222 222 222 216 182 156 119 121 183 220 95 | 222 222 222 222 222 222 222 222 222 205 105 111 141 156 213 222 96 | 222 222 222 222 222 222 222 222 222 217 183 157 123 121 179 219 97 | 222 222 222 222 222 222 222 222 222 222 221 217 205 171 162 217 98 | 99 | 222 222 222 223 222 222 217 219 222 218 219 216 220 222 219 217 100 | 222 222 222 223 222 221 170 172 216 166 179 157 183 213 179 162 101 | 222 222 222 223 222 222 190 135 183 137 162 167 121 156 121 171 102 | 222 223 222 222 222 222 198 119 123 110 161 199 119 141 123 205 103 | 222 222 222 223 222 221 164 146 201 134 162 214 156 111 157 217 104 | 222 222 222 222 222 221 183 107 115 103 162 222 182 105 183 221 105 | 222 222 222 222 222 222 219 207 201 201 212 222 216 205 217 222 106 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 107 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 108 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 109 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 110 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 111 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 112 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 113 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 114 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 115 | 220 218 218 181 184 218 217 219 222 218 219 216 220 222 219 217 116 | 198 178 195 168 204 195 170 172 216 166 179 157 183 213 179 162 117 | 195 177 188 166 208 216 190 135 183 137 162 167 121 156 121 171 118 | 209 170 185 177 211 222 198 119 123 110 161 199 119 141 123 205 119 | 219 213 215 178 210 221 164 146 201 134 162 214 156 111 157 217 120 | 222 222 222 220 221 221 183 107 115 103 162 222 182 105 183 221 121 | 222 222 222 222 222 222 219 207 201 201 212 222 216 205 217 222 122 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 123 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 124 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 125 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 126 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 127 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 128 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 129 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 130 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 131 | 218 212 214 125 131 214 217 219 222 218 219 216 220 222 219 217 132 | 166 115 157 94 180 158 170 172 216 166 179 157 183 213 179 162 133 | 158 115 140 88 188 208 190 135 183 137 162 167 121 156 121 171 134 | 192 98 135 114 195 222 198 119 123 110 161 199 119 141 123 205 135 | 216 201 206 115 193 221 164 146 201 134 162 214 156 111 157 217 136 | 222 222 222 218 220 221 183 107 115 103 162 222 182 105 183 221 137 | 222 222 222 222 222 222 219 207 201 201 212 222 216 205 217 222 138 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 139 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 140 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 141 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 142 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 143 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 144 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 145 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 146 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 147 | 148 | 217 162 171 205 217 221 222 222 222 222 222 222 222 222 222 222 149 | 219 179 121 123 157 183 217 222 222 222 222 222 222 222 222 222 150 | 222 213 156 141 111 105 205 222 222 222 222 222 222 222 222 222 151 | 220 183 121 119 156 182 216 222 222 222 222 222 222 222 222 222 152 | 216 157 167 199 214 222 222 222 222 222 222 222 222 222 222 222 153 | 219 179 162 161 162 162 212 222 222 222 222 222 222 222 222 222 154 | 218 166 137 110 134 103 201 222 222 222 222 222 222 222 222 222 155 | 222 216 183 123 201 115 201 222 222 222 222 222 222 222 222 222 156 | 219 172 135 119 146 107 207 222 222 222 222 222 222 222 222 222 157 | 217 170 190 198 164 183 219 222 222 222 222 222 222 222 222 222 158 | 222 221 222 222 221 221 222 222 222 222 222 222 222 222 222 222 159 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 160 | 223 223 223 222 223 222 222 222 222 222 222 222 222 222 222 222 161 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 162 | 222 222 222 223 222 222 222 222 222 222 222 222 222 222 222 222 163 | 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 164 | 217 162 171 205 217 221 222 222 222 222 222 222 222 222 222 222 165 | 219 179 121 123 157 183 217 222 222 222 222 222 222 222 222 222 166 | 222 213 156 141 111 105 205 222 222 222 222 222 222 222 222 222 167 | 220 183 121 119 156 182 216 222 222 222 222 222 222 222 222 222 168 | 216 157 167 199 214 222 222 222 222 222 222 222 222 222 222 222 169 | 219 179 162 161 162 162 212 222 222 222 222 222 222 222 222 222 170 | 218 166 137 110 134 103 201 222 222 222 222 222 222 222 222 222 171 | 222 216 183 123 201 115 201 222 222 222 222 222 222 222 222 222 172 | 219 172 135 119 146 107 207 222 222 222 222 222 222 222 222 222 173 | 217 170 190 198 164 183 219 222 222 222 222 222 222 222 222 222 174 | 218 195 216 222 221 221 222 222 222 222 222 222 222 222 222 222 175 | 184 204 208 211 210 221 222 222 222 222 222 222 222 222 222 222 176 | 181 168 166 177 178 220 222 222 222 222 222 222 222 222 222 222 177 | 218 195 188 185 215 222 222 222 222 222 222 222 222 222 222 222 178 | 218 178 177 170 213 222 222 222 222 222 222 222 222 222 222 222 179 | 220 198 195 209 219 222 222 222 222 222 222 222 222 222 222 222 180 | 217 162 171 205 217 221 222 222 222 222 222 222 222 222 222 222 181 | 219 179 121 123 157 183 217 222 222 222 222 222 222 222 222 222 182 | 222 213 156 141 111 105 205 222 222 222 222 222 222 222 222 222 183 | 220 183 121 119 156 182 216 222 222 222 222 222 222 222 222 222 184 | 216 157 167 199 214 222 222 222 222 222 222 222 222 222 222 222 185 | 219 179 162 161 162 162 212 222 222 222 222 222 222 222 222 222 186 | 218 166 137 110 134 103 201 222 222 222 222 222 222 222 222 222 187 | 222 216 183 123 201 115 201 222 222 222 222 222 222 222 222 222 188 | 219 172 135 119 146 107 207 222 222 222 222 222 222 222 222 222 189 | 217 170 190 198 164 183 219 222 222 222 222 222 222 222 222 222 190 | 214 158 208 222 221 221 222 222 222 222 222 222 222 222 222 222 191 | 131 180 188 195 193 220 222 222 222 222 222 222 222 222 222 222 192 | 125 94 88 114 115 218 222 222 222 222 222 222 222 222 222 222 193 | 214 157 140 135 206 222 222 222 222 222 222 222 222 222 222 222 194 | 212 115 115 98 201 222 222 222 222 222 222 222 222 222 222 222 195 | 218 166 158 192 216 222 222 222 222 222 222 222 222 222 222 222 196 | --------------------------------------------------------------------------------