owned this note   changed 6 years ago  
Linked with GitHub

AMP and Multithreaded JS - William Chou

歡迎來到 JSDC 2018 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/c/JSDC2018
手機版請點選上方 按鈕展開議程列表。

另外點選筆記中的 符號就可以直接對那個段落補充或留下意見哦！

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 整個網站都是用 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

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: Concurrency for JavaScript programming with the DOM

將 virtualDOM 放到 web worker 中

將這些事情放到 web worker 中

  • Event handling
  • Determine new state
  • state change

AMP HTML
AMP By Example
AMP Start

Select a repo