Top Banner
War of Native Speed on Web Bekket McClane @ SITCON2016
75

War of Native Speed on Web (SITCON2016)

Apr 16, 2017

Download

Technology

Min-Yih Hsu
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: War of Native Speed on Web (SITCON2016)

War of Native Speed on Web

Bekket McClane @ SITCON2016

Page 2: War of Native Speed on Web (SITCON2016)

WHO AM I?

Page 3: War of Native Speed on Web (SITCON2016)

2

Page 4: War of Native Speed on Web (SITCON2016)

Bekket McClane

Page 5: War of Native Speed on Web (SITCON2016)

mshockwave

Page 6: War of Native Speed on Web (SITCON2016)

Department of Computer Science Sophomore

Page 7: War of Native Speed on Web (SITCON2016)

Dormitory Guardian

Page 8: War of Native Speed on Web (SITCON2016)

Android Developer (App/System)

Page 9: War of Native Speed on Web (SITCON2016)

Dragon Slaughter

Page 10: War of Native Speed on Web (SITCON2016)

FACT-1: Web Pages Need

Javascript

Page 11: War of Native Speed on Web (SITCON2016)

FACT-2: Javascript is Pretty Slow

Page 12: War of Native Speed on Web (SITCON2016)

E.g. Web Page Games

Page 13: War of Native Speed on Web (SITCON2016)

ASM.JS

Page 14: War of Native Speed on Web (SITCON2016)

BRIEF INTRODUCTION

▸2x~ faster than normal JS

▸NOT a new language (Strict subset of JS)

▸Nearly static type

Page 15: War of Native Speed on Web (SITCON2016)

KEY: IT’S ALL ABOUT

TYPE

Page 16: War of Native Speed on Web (SITCON2016)

KEY: IT’S ALL ABOUT

TYPE

Why types important?

Page 17: War of Native Speed on Web (SITCON2016)

STATIC TYPE

Page 18: War of Native Speed on Web (SITCON2016)

STATIC TYPE

I know how to handle these two variables

Page 19: War of Native Speed on Web (SITCON2016)

STATIC TYPE

Not allowed

I know how to handle these two variables

Page 20: War of Native Speed on Web (SITCON2016)

STATIC TYPE

I know what type it returns

Not allowed

I know how to handle these two variables

Page 21: War of Native Speed on Web (SITCON2016)

DYNAMIC TYPE (Assume No Optimization Applied)

Page 22: War of Native Speed on Web (SITCON2016)

DYNAMIC TYPEHow should I handle x?

(Assume No Optimization Applied)

Page 23: War of Native Speed on Web (SITCON2016)

DYNAMIC TYPEHow should I handle x?

(Assume No Optimization Applied)

Page 24: War of Native Speed on Web (SITCON2016)

DYNAMIC TYPE

What type it returns?

How should I handle x?

(Assume No Optimization Applied)

Page 25: War of Native Speed on Web (SITCON2016)

OPTIMIZE DYNAMIC TYPE▸ Better Type Inference

(At Runtime)

▸ Do As Much Static Analyze

▸ Inline Cache

Page 26: War of Native Speed on Web (SITCON2016)

HOW ASM.JS FIX THIS?

Page 27: War of Native Speed on Web (SITCON2016)

IN SHORT: (Try To) Ensure Each

Variables’ Type

Page 28: War of Native Speed on Web (SITCON2016)

EXAMPLE

Page 29: War of Native Speed on Web (SITCON2016)

EXAMPLE

x, y are both integers (32-bits)

Page 30: War of Native Speed on Web (SITCON2016)

EXAMPLE

x, y are both integers (32-bits)

So (x + y) has the same type, too

Page 31: War of Native Speed on Web (SITCON2016)

NO MORE TYPE CHECK

Page 32: War of Native Speed on Web (SITCON2016)

FACT: No Object Type

in ASM.js

Page 33: War of Native Speed on Web (SITCON2016)

FACT: No Object Type

in ASM.js

Page 34: War of Native Speed on Web (SITCON2016)

Use Raw Memory To Store Data

Page 35: War of Native Speed on Web (SITCON2016)

AKA: Manage Memory

ManuallyJust Like C/C++

Page 36: War of Native Speed on Web (SITCON2016)

BONUS: No Garbage Collection!!

(No GC Latency)

Page 37: War of Native Speed on Web (SITCON2016)

PROPERTIES

Page 38: War of Native Speed on Web (SITCON2016)

PROPERTIES▸ Explicit Type

Page 39: War of Native Speed on Web (SITCON2016)

PROPERTIES▸ Explicit Type

▸ No Object Type

Page 40: War of Native Speed on Web (SITCON2016)

PROPERTIES▸ Explicit Type

▸ No Object Type

▸ Manage Memory Manually

Page 41: War of Native Speed on Web (SITCON2016)

PROPERTIES▸ Explicit Type

▸ No Object Type

▸ Manage Memory Manually

Hard To Write Asm.js From Scratch

Page 42: War of Native Speed on Web (SITCON2016)

TOOL:

Page 43: War of Native Speed on Web (SITCON2016)

C/C++ LLVM EMSCRIPTEN Asm.js

Emscripten Flow

LLVM IR

Page 44: War of Native Speed on Web (SITCON2016)

BENCHMARKS

Page 45: War of Native Speed on Web (SITCON2016)

Lower is Better

Page 46: War of Native Speed on Web (SITCON2016)

Native Client

Page 47: War of Native Speed on Web (SITCON2016)

BRIEF INTRODUCTION

▸AOT Compile

▸Portable(PNaCl) / Non-Portable

▸Use LLVM IR

Page 48: War of Native Speed on Web (SITCON2016)

LLVM IR

However,

Native Client Only Use A Subset of LLVM IR

C/C++, Haskell etc. LLVM IR x86, ARM,

MIPS etc.

Platform neutral (In PNaCl)

Page 49: War of Native Speed on Web (SITCON2016)

NaCl‣ Package prebuilt platform-dependent

binary images (one for each architecture).

‣ Only package LLVM bitcode, compile into (platform-dependent) executable before execution.

PNaCl

Page 50: War of Native Speed on Web (SITCON2016)

Manifest Example (NaCl)

Platform Dependent

Page 51: War of Native Speed on Web (SITCON2016)

Manifest Example (PNaCl)

Platform Independent

Page 52: War of Native Speed on Web (SITCON2016)

Usage

Page 53: War of Native Speed on Web (SITCON2016)

API

Platform Neutral

Pepper API (For Both C, C++)

Page 54: War of Native Speed on Web (SITCON2016)

HOWEVER…

Wrong Expectation

On LLVM IR

At The Beginning?

Page 55: War of Native Speed on Web (SITCON2016)

LLVM IR is NOT Designed

as Tool for Cross-Platform(e.g. Java bytecode)

FACT:

Page 56: War of Native Speed on Web (SITCON2016)

Evidences (In IR)

Page 57: War of Native Speed on Web (SITCON2016)

Evidences (In IR)▸ Target Triple / Target Data Layout

(e.g. x86_64-apple-macosx10.11.0)

Page 58: War of Native Speed on Web (SITCON2016)

Evidences (In IR)▸ Target Triple / Target Data Layout

(e.g. x86_64-apple-macosx10.11.0)

▸ Explicit Calling Convention

Page 59: War of Native Speed on Web (SITCON2016)

Evidences (In IR)▸ Target Triple / Target Data Layout

(e.g. x86_64-apple-macosx10.11.0)

▸ Explicit Calling Convention

▸ Target Dependent Attributes

Page 60: War of Native Speed on Web (SITCON2016)

WebAssembly

Page 61: War of Native Speed on Web (SITCON2016)

BRIEF INTRODUCTION

▸In binary format

▸AST-like structure

▸Interpret, AOT or JIT

Page 62: War of Native Speed on Web (SITCON2016)

USE WITH CAUTIOUS

First Commit: Spring, 2015

Page 63: War of Native Speed on Web (SITCON2016)

Low-Level Instructions

Page 64: War of Native Speed on Web (SITCON2016)

Low-Level Instructions

Explicit Type

Page 65: War of Native Speed on Web (SITCON2016)

AST-like Structure

S-expression

Pros: Fast Parsing (Interpreting)

Page 66: War of Native Speed on Web (SITCON2016)

SandBox Memory Model

One Large Linear Virtual Memory

‣ Simple Memory Access

‣ A Linear Address Space per Module

‣ Secure

Page 67: War of Native Speed on Web (SITCON2016)

Dynamic Link

‣ Useful for CDN (Only need to downloaded once)

‣ Use alternative invoke instructioncall_import

‣ Will Define Proper ABI In Future

Page 68: War of Native Speed on Web (SITCON2016)

TOOLS

Page 69: War of Native Speed on Web (SITCON2016)

v8 support

‣ Run wasm(binary form) in v8!

https://github.com/v8/v8/tree/master/src/wasm

Page 70: War of Native Speed on Web (SITCON2016)

sexpr-wasm-prototype

‣ Turn (human readable) s-expressionTo binary format wasm

‣ Use with v8

https://github.com/WebAssembly/sexpr-wasm-prototype

Page 71: War of Native Speed on Web (SITCON2016)

SUMMARY▸ We still need static type to aid

performance

▸ Binary format would become the future trends

▸ JS would work with other solutions in parallel

Page 72: War of Native Speed on Web (SITCON2016)

FACT: Web Pages Need

Javascript

Page 73: War of Native Speed on Web (SITCON2016)

FACT: Javascript won’t be

the only player anymore

Page 74: War of Native Speed on Web (SITCON2016)

It’s gonna be fun!

Thank you

Page 75: War of Native Speed on Web (SITCON2016)

CONTACT▸ github / bitbucket: mshockwave

▸ mshockwave.blogspot.tw

[email protected]

▸ www.facebook.com/bekket.mcclane