fixes
This commit is contained in:
Ilya Kantor
parent
f96872425d
commit
6d1fa5de73
8 changed files with 84 additions and 79 deletions
|
|
@ -11,13 +11,15 @@ In this chapter we first cover theoretical details about how things work, and th
|
|||
|
||||
The concept of *event loop* is very simple. There's an endless loop, when JavaScript engine waits for tasks, executes them and then sleeps waiting for more tasks.
|
||||
|
||||
The general algorithm of the engine:
|
||||
|
||||
1. While there are tasks:
|
||||
- execute the oldest task.
|
||||
- execute them, starting with the oldest task.
|
||||
2. Sleep until a task appears, then go to 1.
|
||||
|
||||
That's a formalized algorithm for what we see when browsing a page. JavaScript engine does nothing most of the time, only runs if a script/handler/event activates.
|
||||
That's a formalization for what we see when browsing a page. JavaScript engine does nothing most of the time, only runs if a script/handler/event activates.
|
||||
|
||||
A task can be JS-code triggered by events, but can also be something else, e.g.:
|
||||
Examples of tasks:
|
||||
|
||||
- When an external script `<script src="...">` loads, the task is to execute it.
|
||||
- When a user moves their mouse, the task is to dispatch `mousemove` event and execute handlers.
|
||||
|
|
@ -34,27 +36,25 @@ The tasks form a queue, so-called "macrotask queue" (v8 term):
|
|||
|
||||
For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated on the picture above.
|
||||
|
||||
Tasks from the queue are processed on "first come – first served" basis. When the engine browser finishes with `fetch`, it handles `mousemove` event, then `setTimeout` handler, and so on.
|
||||
Tasks from the queue are processed on "first come – first served" basis. When the engine browser is done with the `script`, it handles `mousemove` event, then `setTimeout` handler, and so on.
|
||||
|
||||
So far, quite simple, right?
|
||||
|
||||
Two more details:
|
||||
1. Rendering never happens while the engine executes a task.
|
||||
1. Rendering never happens while the engine executes a task. Doesn't matter if the task takes a long time. Changes to DOM are painted only after the task is complete.
|
||||
2. If a task takes too long, the browser can't do other tasks, process user events, so after a time it raises an alert like "Page Unresponsive" and suggesting to kill the task with the whole page. That happens when there are a lot of complex calculations or a programming error leading to infinite loop.
|
||||
|
||||
Doesn't matter if the task takes a long time. Changes to DOM are painted only after the task is complete.
|
||||
2. If a task takes too long, the browser can't do other tasks, process user events, so after a time it raises an alert like "Page Unresponsive" and suggesting to kill the task with the whole page.
|
||||
That was a theory. Now let's see how we can apply that knowledge.
|
||||
|
||||
Now let's see how we can apply that knowledge.
|
||||
|
||||
## Use-case: splitting CPU-hungry tasks
|
||||
## Use-case 1: splitting CPU-hungry tasks
|
||||
|
||||
Let's say we have a CPU-hungry task.
|
||||
|
||||
For example, syntax-highlighting (used to colorize code examples on this page) is quite CPU-heavy. To highlight the code, it performs the analysis, creates many colored elements, adds them to the document -- for a big text that takes a lot of time.
|
||||
|
||||
While the engine is busy with syntax highlighting, it can't do other DOM-related stuff, process user events, etc. It may even cause the browser to "hang", which is unacceptable.
|
||||
While the engine is busy with syntax highlighting, it can't do other DOM-related stuff, process user events, etc. It may even cause the browser to "hang" for a bit, which is unacceptable.
|
||||
|
||||
So we can split the long text into pieces. Highlight first 100 lines, then schedule another 100 lines using zero-delay `setTimeout`, and so on.
|
||||
We can evade problems by splitting the big task into pieces. Highlight first 100 lines, then schedule `setTimeout` (with zero-delay) another 100 lines, and so on.
|
||||
|
||||
To demonstrate the approach, for the sake of simplicity, instead of syntax-highlighting let's take a function that counts from `1` to `1000000000`.
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ function count() {
|
|||
count();
|
||||
```
|
||||
|
||||
The browser may even show "the script takes too long" warning (but hopefully it won't, because the number is not very big).
|
||||
The browser may even show "the script takes too long" warning.
|
||||
|
||||
Let's split the job using nested `setTimeout`:
|
||||
|
||||
|
|
@ -154,7 +154,9 @@ Why?
|
|||
|
||||
That's simple: as you remember, there's the in-browser minimal delay of 4ms for many nested `setTimeout` calls. Even if we set `0`, it's `4ms` (or a bit more). So the earlier we schedule it - the faster it runs.
|
||||
|
||||
## Use case: progress indication
|
||||
Finally, we've split a CPU-hungry task into parts - now it doesn't block the user interface. And its overall execution time isn't much longer.
|
||||
|
||||
## Use case 2: progress indication
|
||||
|
||||
Another benefit of splitting heavy tasks for browser scripts is that we can show progress indication.
|
||||
|
||||
|
|
@ -214,11 +216,11 @@ This looks prettier:
|
|||
Now the `<div>` shows increasing values of `i`, a kind of a progress bar.
|
||||
|
||||
|
||||
## Use case: doing something after the event
|
||||
## Use case 3: doing something after the event
|
||||
|
||||
In an event handler we may decide to postpone some actions until the event bubbled up and was handled on all levels. We can do that by wrapping the code in zero delay `setTimeout`.
|
||||
|
||||
In the chapter <info:dispatch-events> we saw an example: a custom event `menu-open` is dispatched after the "click" event is fully handled.
|
||||
In the chapter <info:dispatch-events> we saw an example: custom event `menu-open` is dispatched in `setTimeout`, so that it happens after the "click" event is fully handled.
|
||||
|
||||
```js
|
||||
menu.onclick = function() {
|
||||
|
|
@ -227,7 +229,6 @@ menu.onclick = function() {
|
|||
// create a custom event with the clicked menu item data
|
||||
let customEvent = new CustomEvent("menu-open", {
|
||||
bubbles: true
|
||||
/* details: can add more details, e.g. clicked item data here */
|
||||
});
|
||||
|
||||
// dispatch the custom event asynchronously
|
||||
|
|
@ -235,20 +236,15 @@ menu.onclick = function() {
|
|||
};
|
||||
```
|
||||
|
||||
The custom event is totally independent here. It's dispatched asynchronously, after the `click` event bubbled up and was fully handled. That helps to workaround some potential bugs, that may happen when different events are nested in each other.
|
||||
|
||||
## Microtasks
|
||||
## Macrotasks and Microtasks
|
||||
|
||||
Along with *macrotasks*, described in this chapter, there exist *microtasks*, mentioned in the chapter <info:microtask-queue>.
|
||||
|
||||
There are two main ways to create a microtask:
|
||||
Microtasks come solely from our code. They are usually created by promises: an execution of `.then/catch/finally` handler becomes a microtask. Microtasks are used "under the cover" of `await` as well, as it's another form of promise handling.
|
||||
|
||||
1. When a promise is ready, the execution of its `.then/catch/finally` handler becomes a microtask. Microtasks are used "under the cover" of `await` as well, as it's a form of promise handling, similar to `.then`, but syntactically different.
|
||||
2. There's a special function `queueMicrotask(func)` that queues `func` for execution in the microtask queue.
|
||||
There's also a special function `queueMicrotask(func)` that queues `func` for execution in the microtask queue.
|
||||
|
||||
After every *macrotask*, the engine executes all tasks from *microtask* queue, prior to running any other macrotasks.
|
||||
|
||||
**Microtask queue has a higher priority than the macrotask queue.**
|
||||
**Immediately after every *macrotask*, the engine executes all tasks from *microtask* queue, prior to running any other macrotasks or rendering or anything else.**
|
||||
|
||||
For instance, take a look:
|
||||
|
||||
|
|
@ -261,21 +257,23 @@ Promise.resolve()
|
|||
alert("code");
|
||||
```
|
||||
|
||||
What's the order?
|
||||
What's going to be the order here?
|
||||
|
||||
1. `code` shows first, because it's a regular synchronous call.
|
||||
2. `promise` shows second, because `.then` passes through the microtask queue, and runs after the current code.
|
||||
3. `timeout` shows last, because it's a macrotask.
|
||||
|
||||
**There may be no UI event between microtasks.**
|
||||
The richer event loop picture looks like this:
|
||||
|
||||
Most of browser processing is macrotasks, including processing network request results, handling UI events and so on.
|
||||
|
||||
|
||||
So if we'd like our code to execute asynchronously, but want the application state be basically the same (no mouse coordinate changes, no new network data, etc), then we can achieve that by creating a microtask with `queueMicrotask`.
|
||||
**All microtasks are completed before any other event handling or rendering or any other macrotask takes place.**
|
||||
|
||||
Rendering also waits until the microtask queue is emptied.
|
||||
That's important, as it guarantees that the application environment be basically the same (no mouse coordinate changes, no new network data, etc) between microtasks.
|
||||
|
||||
Here's an example with a "counting progress bar", similar to the one shown previously, but `queueMicrotask` is used instead of `setTimeout`. You can see that it renders at the very end, just like the regular code:
|
||||
If we'd like to execute a function asynchronously (after the current code), but before changes are rendered or new events, we can schedule it with `queueMicrotask`.
|
||||
|
||||
Here's an example with "counting progress bar", similar to the one shown previously, but `queueMicrotask` is used instead of `setTimeout`. You can see that it renders at the very end. Just like the synchronous code:
|
||||
|
||||
```html run
|
||||
<div id="progress"></div>
|
||||
|
|
@ -303,14 +301,8 @@ Here's an example with a "counting progress bar", similar to the one shown previ
|
|||
</script>
|
||||
```
|
||||
|
||||
So, microtasks are asynchronous from the point of code execution, but they don't allow any browser processes or events to stick in-between them.
|
||||
|
||||
## Summary
|
||||
|
||||
The richer event loop picture may look like this:
|
||||
|
||||
|
||||
|
||||
The more detailed algorithm of the event loop (though still simplified compare to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
|
||||
|
||||
1. Dequeue and run the oldest task from the *macrotask* queue (e.g. "script").
|
||||
|
|
@ -318,23 +310,23 @@ The more detailed algorithm of the event loop (though still simplified compare t
|
|||
- While the microtask queue is not empty:
|
||||
- Dequeue and run the oldest microtask.
|
||||
3. Render changes if any.
|
||||
4. Wait until the macrotask queue is not empty (if needed).
|
||||
4. If the macrotask queue is empty, wait till a macrotask appears.
|
||||
5. Go to step 1.
|
||||
|
||||
To schedule a new macrotask:
|
||||
To schedule a new *macrotask*:
|
||||
- Use zero delayed `setTimeout(f)`.
|
||||
|
||||
That may be used to split a big calculation-heavy task into pieces, for the browser to be able to react on user events and show progress between them.
|
||||
|
||||
Also, used in event handlers to schedule an action after the event is fully handled (bubbling done).
|
||||
|
||||
To schedule a new microtask:
|
||||
To schedule a new *microtask*
|
||||
- Use `queueMicrotask(f)`.
|
||||
- Also promise handlers go through the microtask queue.
|
||||
|
||||
There's no UI or network event handling between microtasks: they run immediately one after another.
|
||||
|
||||
So one may want to `queueMicrotask` to execute a function asynchronously, but also with the same application state.
|
||||
So one may want to `queueMicrotask` to execute a function asynchronously, but within the environment state.
|
||||
|
||||
```smart header="Web Workers"
|
||||
For long heavy calculations that shouldn't block the event loop, we can use [Web Workers](https://html.spec.whatwg.org/multipage/workers.html).
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<tspan x="45.1621094" y="189">event</tspan>
|
||||
<tspan x="51.1152344" y="222">loop</tspan>
|
||||
</text>
|
||||
<g id="Group-Copy" transform="translate(255.000000, 267.000000)" fill="#EE6B47">
|
||||
<g id="Group-Copy" transform="translate(256.000000, 267.000000)" fill="#EE6B47">
|
||||
<path d="M23.1454405,0.978488667 C21.7366033,0.348781349 20.1862777,-0.000633284678 18.5591614,8.61663483e-07 C15.9694405,-0.000633284678 13.5756265,0.885269154 11.6377196,2.37931793 L10.4743707,0.618927691 C10.4060451,0.515561837 10.2863242,0.466732569 10.1690219,0.494000862 C10.0523242,0.521269154 9.96404514,0.618927691 9.94288235,0.742586228 L8.7970684,7.77907403 C8.78195212,7.87229354 8.80734747,7.96678135 8.86781259,8.03717159 C8.92404514,8.10312281 9.0038591,8.13926915 9.08669631,8.13926915 C9.09274282,8.13926915 9.09939398,8.13863501 9.10544049,8.13863501 L12.2169754,7.93253745 L15.7209289,7.70043989 C15.8382312,7.69219598 15.9398126,7.61229354 15.9791149,7.49561062 C16.0184172,7.37892769 15.9887893,7.24956184 15.9011149,7.16648867 L14.4408824,5.75107403 C15.6217661,4.92922037 17.0354405,4.45043989 18.5591614,4.44980574 C19.6281847,4.44980574 20.6421847,4.68761062 21.5618591,5.11185452 C21.6344172,5.14546428 21.7178591,5.14609842 21.7916265,5.11502525 C21.8647893,5.08331793 21.9240451,5.02117159 21.9536731,4.94380574 L23.3032544,1.37609842 C23.3619056,1.22009842 23.2923707,1.04507403 23.1454405,0.978488667" id="Fill-52" transform="translate(16.058418, 4.069635) scale(-1, 1) translate(-16.058418, -4.069635) "></path>
|
||||
<path d="M12.7869128,13.3145374 C12.923564,14.9144887 13.36375,16.5119033 14.133471,18.0148301 C15.3584942,20.4080984 17.2341221,22.2014643 19.4066338,23.2858545 L18.4784942,25.1933667 C18.423471,25.3056106 18.4391919,25.4394155 18.5171919,25.5345374 C18.5951919,25.6290253 18.7191454,25.6651716 18.8334244,25.6252204 L25.2868663,23.3562448 C25.3721221,23.3258057 25.4398431,23.2579521 25.4700756,23.1691716 C25.4984942,23.0860984 25.4918431,22.9947813 25.4519361,22.9180496 C25.4489128,22.9123423 25.4464942,22.906635 25.4428663,22.9015618 L23.7982151,20.1233667 L21.945564,16.995757 C21.8826803,16.8911228 21.7677965,16.8353179 21.6510989,16.8537082 C21.5350058,16.8727326 21.4406803,16.9615131 21.411657,17.0820009 L20.9134244,19.1004887 C19.6642151,18.3984887 18.5927733,17.3179033 17.8720291,15.9100984 C17.3665407,14.9227326 17.0859826,13.8732204 17.0073779,12.823074 C17.0019361,12.7400009 16.9626338,12.6620009 16.901564,12.6087326 C16.8404942,12.5560984 16.7600756,12.5313667 16.681471,12.5408789 L13.0457035,12.9809765 C12.8872849,13.000635 12.7724012,13.1483911 12.7869128,13.3145374" id="Fill-54" transform="translate(19.136573, 19.090084) scale(-1, 1) translate(-19.136573, -19.090084) "></path>
|
||||
<path d="M2.64553278,22.3327326 C3.89716069,21.4081472 4.99581185,20.2089765 5.85139324,18.7574155 C7.21427696,16.4484887 7.75664906,13.8472204 7.56436999,11.3328301 L9.60325371,11.2212204 C9.72357929,11.2148789 9.82697464,11.1337082 9.86567231,11.0144887 C9.90497464,10.8965374 9.87292813,10.7659033 9.78223045,10.682196 L4.68078859,5.95780574 C4.61246301,5.89502525 4.52297464,5.86839111 4.43409092,5.8861472 C4.35125371,5.90073257 4.27990487,5.95273257 4.23576534,6.02692769 C4.23274208,6.03263501 4.22971882,6.03834233 4.22669557,6.04404964 L2.75618394,8.92687891 L1.10185836,12.1743423 C1.04623045,12.2840496 1.05771882,12.4159521 1.13209092,12.5129765 C1.20585836,12.6093667 1.32618394,12.6499521 1.43925371,12.6169765 L3.35539324,12.0589277 C3.40074208,13.5440984 3.0452072,15.0571716 2.24404441,16.4167813 C1.68171882,17.3699033 0.955532778,18.1492692 0.127160685,18.746635 C0.0618583596,18.7935618 0.0171141736,18.8671228 0.00381184799,18.9495618 C-0.00888582643,19.0313667 0.0104630108,19.1169765 0.0570211503,19.1835618 L2.2404165,22.2648789 C2.33595138,22.3993179 2.51492813,22.4284887 2.64553278,22.3327326" id="Fill-56" transform="translate(4.941093, 14.134846) scale(-1, 1) translate(-4.941093, -14.134846) "></path>
|
||||
|
|
@ -41,16 +41,16 @@
|
|||
<text id="render-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="297.3" y="142">render</tspan>
|
||||
</text>
|
||||
<g id="np_paint_2296353_000000-copy" transform="translate(255.000000, 233.000000)" fill="#EE6B47" fill-rule="nonzero">
|
||||
<g id="np_paint_2296353_000000-copy" transform="translate(256.000000, 233.000000)" fill="#EE6B47" fill-rule="nonzero">
|
||||
<path d="M3.07894737,0 C1.39113684,0 0,1.39113684 0,3.07894737 L0,22.9210526 C0,24.6088632 1.39113684,26 3.07894737,26 L22.9210526,26 C24.6088632,26 26,24.6088632 26,22.9210526 L26,3.07894737 C26,1.39113684 24.6088632,0 22.9210526,0 L3.07894737,0 Z M3.07894737,2.05252895 L22.9210526,2.05252895 C23.5076947,2.05252895 23.9473684,2.49230526 23.9473684,3.07894737 L23.9473684,16.1217105 L21.0608553,13.4383053 C20.8590679,13.2485429 20.5891263,13.1483163 20.3125,13.1603447 C20.0492397,13.1710355 19.8006763,13.2819529 19.6176158,13.4703776 L13.8979579,19.4250618 L8.86251053,15.2770355 C8.64735711,15.1006392 8.3694,15.0191189 8.09277368,15.0525289 C7.86158579,15.0805922 7.64642895,15.1848279 7.48341579,15.3518711 L2.05249474,20.7827921 L2.05249474,3.07884474 C2.05249474,2.49220263 2.49216842,2.05252895 3.07881053,2.05252895 L3.07894737,2.05252895 Z M6.15789474,3.42105263 C4.47008421,3.42105263 3.07894737,4.81218947 3.07894737,6.5 C3.07894737,8.18781053 4.47008421,9.57894737 6.15789474,9.57894737 C7.84570526,9.57894737 9.23684211,8.18781053 9.23684211,6.5 C9.23684211,4.81218947 7.84570526,3.42105263 6.15789474,3.42105263 Z M6.15789474,5.47368421 C6.73653158,5.47368421 7.18421053,5.92136316 7.18421053,6.5 C7.18421053,7.07863684 6.73653158,7.52631579 6.15789474,7.52631579 C5.57925789,7.52631579 5.13157895,7.07863684 5.13157895,6.5 C5.13157895,5.92136316 5.57925789,5.47368421 6.15789474,5.47368421 Z M20.3340526,6.04027895 C19.9571895,6.04027895 19.5749895,6.76191579 19.5749895,7.12003158 C19.1152684,7.23228316 18.8266342,7.47818158 18.8266342,7.83633158 C18.8266342,8.19448158 19.1981263,8.55263158 19.5749895,8.55263158 L22.2369789,8.55263158 C22.9666211,8.55263158 23.3461526,7.12006579 22.2155974,7.12006579 C22.1942158,6.44252632 21.7705868,6.2608 21.0823737,6.40376579 C20.8992926,6.12046158 20.7068447,6.01756316 20.3340184,6.04027895 L20.3340526,6.04027895 Z M16.7097895,9.23684211 C16.3957471,9.23684211 16.0790158,9.82081579 16.0790158,10.1134868 C15.6968158,10.2056945 15.4482421,10.4088195 15.4482421,10.7014974 C15.4482421,10.9941753 15.7649563,11.2895079 16.0790158,11.2895079 L18.2920263,11.2895079 C18.90005,11.2895079 19.2234763,10.1135211 18.2813355,10.1135211 C18.2639631,9.55893421 17.9031382,9.40792895 17.3298724,9.52551053 C17.1775295,9.29432263 17.0198395,9.21814947 16.7098066,9.23685921 L16.7097895,9.23684211 Z M20.3980263,15.6191579 L23.9473684,18.9119211 L23.9473684,22.9210526 C23.9473684,23.5076947 23.5076947,23.9473684 22.9210526,23.9473684 L3.07894737,23.9473684 C2.71279211,23.9473684 2.40407632,23.7709721 2.22368421,23.4983553 L8.27484211,17.4581447 L12.4762368,20.9113553 L11.2361053,22.2049237 L12.7114342,23.6267816 L20.3980263,15.6191579 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="np_paint_2296353_000000-copy-2" transform="translate(255.000000, 124.000000)" fill="#EE6B47" fill-rule="nonzero">
|
||||
<g id="np_paint_2296353_000000-copy-2" transform="translate(256.000000, 124.000000)" fill="#EE6B47" fill-rule="nonzero">
|
||||
<path d="M3.07894737,0 C1.39113684,0 0,1.39113684 0,3.07894737 L0,22.9210526 C0,24.6088632 1.39113684,26 3.07894737,26 L22.9210526,26 C24.6088632,26 26,24.6088632 26,22.9210526 L26,3.07894737 C26,1.39113684 24.6088632,0 22.9210526,0 L3.07894737,0 Z M3.07894737,2.05252895 L22.9210526,2.05252895 C23.5076947,2.05252895 23.9473684,2.49230526 23.9473684,3.07894737 L23.9473684,16.1217105 L21.0608553,13.4383053 C20.8590679,13.2485429 20.5891263,13.1483163 20.3125,13.1603447 C20.0492397,13.1710355 19.8006763,13.2819529 19.6176158,13.4703776 L13.8979579,19.4250618 L8.86251053,15.2770355 C8.64735711,15.1006392 8.3694,15.0191189 8.09277368,15.0525289 C7.86158579,15.0805922 7.64642895,15.1848279 7.48341579,15.3518711 L2.05249474,20.7827921 L2.05249474,3.07884474 C2.05249474,2.49220263 2.49216842,2.05252895 3.07881053,2.05252895 L3.07894737,2.05252895 Z M6.15789474,3.42105263 C4.47008421,3.42105263 3.07894737,4.81218947 3.07894737,6.5 C3.07894737,8.18781053 4.47008421,9.57894737 6.15789474,9.57894737 C7.84570526,9.57894737 9.23684211,8.18781053 9.23684211,6.5 C9.23684211,4.81218947 7.84570526,3.42105263 6.15789474,3.42105263 Z M6.15789474,5.47368421 C6.73653158,5.47368421 7.18421053,5.92136316 7.18421053,6.5 C7.18421053,7.07863684 6.73653158,7.52631579 6.15789474,7.52631579 C5.57925789,7.52631579 5.13157895,7.07863684 5.13157895,6.5 C5.13157895,5.92136316 5.57925789,5.47368421 6.15789474,5.47368421 Z M20.3340526,6.04027895 C19.9571895,6.04027895 19.5749895,6.76191579 19.5749895,7.12003158 C19.1152684,7.23228316 18.8266342,7.47818158 18.8266342,7.83633158 C18.8266342,8.19448158 19.1981263,8.55263158 19.5749895,8.55263158 L22.2369789,8.55263158 C22.9666211,8.55263158 23.3461526,7.12006579 22.2155974,7.12006579 C22.1942158,6.44252632 21.7705868,6.2608 21.0823737,6.40376579 C20.8992926,6.12046158 20.7068447,6.01756316 20.3340184,6.04027895 L20.3340526,6.04027895 Z M16.7097895,9.23684211 C16.3957471,9.23684211 16.0790158,9.82081579 16.0790158,10.1134868 C15.6968158,10.2056945 15.4482421,10.4088195 15.4482421,10.7014974 C15.4482421,10.9941753 15.7649563,11.2895079 16.0790158,11.2895079 L18.2920263,11.2895079 C18.90005,11.2895079 19.2234763,10.1135211 18.2813355,10.1135211 C18.2639631,9.55893421 17.9031382,9.40792895 17.3298724,9.52551053 C17.1775295,9.29432263 17.0198395,9.21814947 16.7098066,9.23685921 L16.7097895,9.23684211 Z M20.3980263,15.6191579 L23.9473684,18.9119211 L23.9473684,22.9210526 C23.9473684,23.5076947 23.5076947,23.9473684 22.9210526,23.9473684 L3.07894737,23.9473684 C2.71279211,23.9473684 2.40407632,23.7709721 2.22368421,23.4983553 L8.27484211,17.4581447 L12.4762368,20.9113553 L11.2361053,22.2049237 L12.7114342,23.6267816 L20.3980263,15.6191579 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="Group-Copy-2" transform="translate(253.000000, 159.000000)" fill="#EE6B47">
|
||||
<path d="M26.7062775,1.12902538 C25.0806961,0.402440019 23.2918589,-0.00073071309 21.414417,9.94227133e-07 C18.4262775,-0.00073071309 15.6641845,1.02146441 13.428138,2.74536685 L12.0858124,0.714147336 C12.0069752,0.594879043 11.8688356,0.53853758 11.7334868,0.570000994 C11.5988356,0.601464409 11.4969752,0.714147336 11.4725566,0.856830263 L10.1504635,8.97585465 C10.1330217,9.08341563 10.162324,9.19244002 10.2320914,9.27365953 C10.2969752,9.34975709 10.3890682,9.39146441 10.4846496,9.39146441 C10.4916263,9.39146441 10.4993007,9.3907327 10.5062775,9.3907327 L14.0965101,9.15292782 L18.1395333,8.88512295 C18.2748821,8.87561075 18.3920914,8.78341563 18.4374403,8.64878148 C18.4827891,8.51414734 18.4486031,8.36487904 18.3474403,8.26902538 L16.6625566,6.63585465 C18.0251147,5.68756197 19.6562775,5.13512295 21.414417,5.13439124 C22.6479054,5.13439124 23.8179054,5.40878148 24.8790682,5.89829368 C24.9627891,5.93707416 25.0590682,5.93780587 25.1441845,5.90195221 C25.2286031,5.86536685 25.2969752,5.79365953 25.3311612,5.70439124 L26.8883705,1.58780587 C26.9560449,1.40780587 26.8758124,1.20585465 26.7062775,1.12902538" id="Fill-52" transform="translate(18.528944, 4.695732) scale(-1, 1) translate(-18.528944, -4.695732) "></path>
|
||||
<path d="M14.7541302,15.3629278 C14.9118046,17.2090254 15.4197116,19.0521961 16.3078511,20.7863425 C17.7213395,23.5478059 19.8855255,25.6170742 22.3922697,26.8682937 L21.3213395,29.0692693 C21.2578511,29.1987815 21.2759906,29.3531717 21.3659906,29.4629278 C21.4559906,29.5719522 21.5990139,29.6136595 21.7308744,29.567562 L29.1771534,26.9495132 C29.2755255,26.9143912 29.3536651,26.8360986 29.3885488,26.7336595 C29.4213395,26.6378059 29.4136651,26.53244 29.3676186,26.4439034 C29.3641302,26.4373181 29.3613395,26.4307327 29.3571534,26.424879 L27.459479,23.2192693 L25.3218046,19.6104888 C25.2492465,19.4897571 25.1166883,19.4253668 24.9820372,19.4465864 C24.8480837,19.4685376 24.7392465,19.5709766 24.7057581,19.710001 L24.1308744,22.0390254 C22.689479,21.2290254 21.4531999,19.9821961 20.621572,18.3578059 C20.0383162,17.2185376 19.7145953,16.007562 19.6238976,14.7958547 C19.6176186,14.700001 19.5722697,14.610001 19.5018046,14.5485376 C19.4313395,14.4878059 19.3385488,14.4592693 19.2478511,14.4702449 L15.0527348,14.9780498 C14.8699441,15.0007327 14.737386,15.1712205 14.7541302,15.3629278" id="Fill-54" transform="translate(22.080661, 22.027020) scale(-1, 1) translate(-22.080661, -22.027020) "></path>
|
||||
<path d="M3.05253782,25.7685376 C4.49672387,24.7017083 5.76439829,23.3180498 6.75160759,21.6431717 C8.32416573,18.9790254 8.94997968,15.977562 8.72811922,13.0763425 L11.0806774,12.947562 C11.2195146,12.9402449 11.3388169,12.8465864 11.3834681,12.7090254 C11.4288169,12.5729278 11.3918401,12.4221961 11.287189,12.3256108 L5.40090991,6.87439124 C5.3220727,6.80195221 5.21881689,6.77122051 5.11625875,6.79170831 C5.02067736,6.80853758 4.93835177,6.86853758 4.88742154,6.95414734 C4.88393317,6.9607327 4.8804448,6.96731807 4.87695643,6.97390343 L3.18021224,10.3002449 L1.27137503,14.0473181 C1.20718898,14.1739034 1.2204448,14.3260986 1.30625875,14.4380498 C1.39137503,14.5492693 1.53021224,14.5960986 1.66067736,14.5580498 L3.87160759,13.9141473 C3.92393317,15.6278059 3.51370061,17.3736595 2.58928201,18.94244 C1.9404448,20.0421961 1.10253782,20.9414644 0.146723868,21.6307327 C0.0713750303,21.684879 0.0197471233,21.7697571 0.00439828614,21.864879 C-0.0102528767,21.9592693 0.0120727047,22.0580498 0.065793635,22.134879 L2.58509596,25.6902449 C2.69532852,25.8453668 2.90184015,25.8790254 3.05253782,25.7685376" id="Fill-56" transform="translate(5.701261, 16.309438) scale(-1, 1) translate(-5.701261, -16.309438) "></path>
|
||||
<g id="Group-Copy-2" transform="translate(256.000000, 159.000000)" fill="#EE6B47">
|
||||
<path d="M23.1454405,0.978488667 C21.7366033,0.348781349 20.1862777,-0.000633284678 18.5591614,8.61663483e-07 C15.9694405,-0.000633284678 13.5756265,0.885269154 11.6377196,2.37931793 L10.4743707,0.618927691 C10.4060451,0.515561837 10.2863242,0.466732569 10.1690219,0.494000862 C10.0523242,0.521269154 9.96404514,0.618927691 9.94288235,0.742586228 L8.7970684,7.77907403 C8.78195212,7.87229354 8.80734747,7.96678135 8.86781259,8.03717159 C8.92404514,8.10312281 9.0038591,8.13926915 9.08669631,8.13926915 C9.09274282,8.13926915 9.09939398,8.13863501 9.10544049,8.13863501 L12.2169754,7.93253745 L15.7209289,7.70043989 C15.8382312,7.69219598 15.9398126,7.61229354 15.9791149,7.49561062 C16.0184172,7.37892769 15.9887893,7.24956184 15.9011149,7.16648867 L14.4408824,5.75107403 C15.6217661,4.92922037 17.0354405,4.45043989 18.5591614,4.44980574 C19.6281847,4.44980574 20.6421847,4.68761062 21.5618591,5.11185452 C21.6344172,5.14546428 21.7178591,5.14609842 21.7916265,5.11502525 C21.8647893,5.08331793 21.9240451,5.02117159 21.9536731,4.94380574 L23.3032544,1.37609842 C23.3619056,1.22009842 23.2923707,1.04507403 23.1454405,0.978488667" id="Fill-52" transform="translate(16.058418, 4.069635) scale(-1, 1) translate(-16.058418, -4.069635) "></path>
|
||||
<path d="M12.7869128,13.3145374 C12.923564,14.9144887 13.36375,16.5119033 14.133471,18.0148301 C15.3584942,20.4080984 17.2341221,22.2014643 19.4066338,23.2858545 L18.4784942,25.1933667 C18.423471,25.3056106 18.4391919,25.4394155 18.5171919,25.5345374 C18.5951919,25.6290253 18.7191454,25.6651716 18.8334244,25.6252204 L25.2868663,23.3562448 C25.3721221,23.3258057 25.4398431,23.2579521 25.4700756,23.1691716 C25.4984942,23.0860984 25.4918431,22.9947813 25.4519361,22.9180496 C25.4489128,22.9123423 25.4464942,22.906635 25.4428663,22.9015618 L23.7982151,20.1233667 L21.945564,16.995757 C21.8826803,16.8911228 21.7677965,16.8353179 21.6510989,16.8537082 C21.5350058,16.8727326 21.4406803,16.9615131 21.411657,17.0820009 L20.9134244,19.1004887 C19.6642151,18.3984887 18.5927733,17.3179033 17.8720291,15.9100984 C17.3665407,14.9227326 17.0859826,13.8732204 17.0073779,12.823074 C17.0019361,12.7400009 16.9626338,12.6620009 16.901564,12.6087326 C16.8404942,12.5560984 16.7600756,12.5313667 16.681471,12.5408789 L13.0457035,12.9809765 C12.8872849,13.000635 12.7724012,13.1483911 12.7869128,13.3145374" id="Fill-54" transform="translate(19.136573, 19.090084) scale(-1, 1) translate(-19.136573, -19.090084) "></path>
|
||||
<path d="M2.64553278,22.3327326 C3.89716069,21.4081472 4.99581185,20.2089765 5.85139324,18.7574155 C7.21427696,16.4484887 7.75664906,13.8472204 7.56436999,11.3328301 L9.60325371,11.2212204 C9.72357929,11.2148789 9.82697464,11.1337082 9.86567231,11.0144887 C9.90497464,10.8965374 9.87292813,10.7659033 9.78223045,10.682196 L4.68078859,5.95780574 C4.61246301,5.89502525 4.52297464,5.86839111 4.43409092,5.8861472 C4.35125371,5.90073257 4.27990487,5.95273257 4.23576534,6.02692769 C4.23274208,6.03263501 4.22971882,6.03834233 4.22669557,6.04404964 L2.75618394,8.92687891 L1.10185836,12.1743423 C1.04623045,12.2840496 1.05771882,12.4159521 1.13209092,12.5129765 C1.20585836,12.6093667 1.32618394,12.6499521 1.43925371,12.6169765 L3.35539324,12.0589277 C3.40074208,13.5440984 3.0452072,15.0571716 2.24404441,16.4167813 C1.68171882,17.3699033 0.955532778,18.1492692 0.127160685,18.746635 C0.0618583596,18.7935618 0.0171141736,18.8671228 0.00381184799,18.9495618 C-0.00888582643,19.0313667 0.0104630108,19.1169765 0.0570211503,19.1835618 L2.2404165,22.2648789 C2.33595138,22.3993179 2.51492813,22.4284887 2.64553278,22.3327326" id="Fill-56" transform="translate(4.941093, 14.134846) scale(-1, 1) translate(-4.941093, -14.134846) "></path>
|
||||
</g>
|
||||
<path id="Path" d="M271.37688,54.2091068 L277.281818,43.0430224 L279.933822,44.4454762 L270.10532,63.030918 L259.326034,44.9802923 L261.901723,43.4421687 L268.37789,54.2869371 L268.114902,44.1533849 C266.186912,31.2365743 257.43807,26.5 240.535714,26.5 L189.464286,26.5 C170.419705,26.5 161.5,32.5455101 161.5,49.720739 L161.5,344.396487 C161.5,353.579279 164.161121,359.079115 169.381009,362.098821 C173.770528,364.638159 179.668177,365.5 189.464286,365.5 L240.535714,365.5 C250.331823,365.5 256.229472,364.638159 260.618991,362.098821 C265.838879,359.079115 268.5,353.579279 268.5,344.396487 L268.5,337.923831 L271.5,337.923831 L271.5,344.396487 C271.5,354.57926 268.348133,361.093339 262.12123,364.695603 C257.137794,367.578522 250.832047,368.5 240.535714,368.5 L189.464286,368.5 C179.167953,368.5 172.862206,367.578522 167.87877,364.695603 C161.651867,361.093339 158.5,354.57926 158.5,344.396487 L158.5,49.720739 C158.5,30.5855262 168.954172,23.5 189.464286,23.5 L240.535714,23.5 C258.785035,23.5 268.930165,29.0165608 271.096211,43.8064028 L271.111539,43.9848515 L271.37688,54.2091068 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Loading…
Add table
Add a link
Reference in a new issue