# AMP and Multithreaded JS - William Chou

{%hackmd dh921X26R26y_elFAEP5yg %}

###### tags: `jsdc2018`

---
## What is AMP?

有超過 53% 的使用者在網站載入超過3秒就會離開
19 seconds average mobile page load time on 3G

網站的檔案大小會越來越大

AMP: An open source project

* AMP HTML
* AMP JavaScript
* AMP Cache

就像 CDN 一樣， AMP 會快取內容

## AMP 的限制

* no custom JS
* 只能用 AMP html extension
* img 需要指定大小
* css 的大小也有限制

> AMP components == web components

In many countries, in 2017, at least half of ...

-7% conversions every second

## 用了 AMP 的平台
### wego - 新加坡的旅遊平台
* 49% increase in search-to-conversion rates
* 95% increase in partner's conversion rates

### Yahoo 奇摩
33% improvement in bounce rate
26% more transaction

[AMP](https://www.ampproject.org/) 整個網站都是用 AMP 的技術做的
amp 不只可以做手機網站，桌面版也行

## How is AMP fast?

* inline CSS
* external stylesheet 會降低畫面渲染的速度，因為還需要下載 stylesheet
* 移除沒用到的 css style (例如去年聖誕節用的 css XD)
* Lazy loading & resource priorization
* DOM read/write batching
* 因為對 DOM 做修改會需要重新渲染，可以將 DOM 的讀取跟寫入分開做，讓 rerendering 一次做完
* JS chunking

## Should I use AMP?

User experience vs. developer experience

* `<amp-bind>`: A programming component for binding data
[doc](https://www.ampproject.org/docs/reference/components/amp-bind)

## Concurrency in JS

傳統 web browser 只有一個 main thread，js 只能在這個 thread 上執行

如果要讓網站有 60 fps 的話，代表每個畫面重畫要在 16ms 之內完成 (1 second / 60 frames = 16ms)

假設 瀏覽器要花 8ms 處理網頁畫面，只剩 8ms 可以跑 js

這些都在在 8ms 做完
* Event handling
* Determine new state
* state change
* update DOM

可能有很多手機的效能不是很好，沒辦法在 8ms 之內處理完所有事情，就會讓網站不順暢

嘗試在一些效能比較差、網路比較慢的裝置測試您的網站

> Ok, let's try concurrency

10 年前就有 web worker 了 (Firefox 3.1)

## Web Workers
* No access to DOM
* No shared state
* Only communicate through `postMEssage()`

> **Idea**: Simulate DOM in the web worker?

[WorkerDOM](https://www.ampproject.org/latest/blog/workerdom/): Concurrency for JavaScript programming with the DOM
> 將 virtualDOM 放到 web worker 中

將這些事情放到 web worker 中
* Event handling
* Determine new state
* state change

[AMP HTML](https://github.com/ampproject/amphtml)
[AMP By Example](https://ampbyexample.com)
[AMP Start](https://www.ampstart.com)