Работа с WebAssembly и Go: продвинутые техники интеграции

Работа с WebAssembly и Go: продвинутый уровень

WebAssembly (WASM) открывает новые горизонты для веб-разработки, позволяя выполнять высокопроизводительный код, написанный на языках, отличных от JavaScript. Go (Golang) с его компилятором в WASM и простой моделью конкурентности является отличным кандидатом для создания сложных веб-модулей. В этой статье мы рассмотрим продвинутые техники интеграции Go и WebAssembly: работу с памятью, передачу сложных структур данных, двустороннюю коммуникацию с JavaScript и оптимизацию производительности.

1. Передача сложных структур данных между Go и JavaScript

Базовая передача чисел и строк через syscall/js проста, но для реальных приложений этого недостаточно. Продвинутый подход предполагает сериализацию сложных структур (слайсов, мап, пользовательских типов) в JSON или бинарный формат.

Сериализация через JSON

Самый простой и универсальный метод — использовать encoding/json. Вы экспортируете функцию, которая принимает JSON-строку, десериализует её в структуру Go, обрабатывает и возвращает результат обратно в виде JSON.

// main.go
package main

import (
    "encoding/json"
    "syscall/js"
)

type InputData struct {
    Name  string `json:"name"`
    Value float64 `json:"value"`
}

type OutputData struct {
    Greeting string  `json:"greeting"`
    Square   float64 `json:"square"`
}

func processData(this js.Value, args []js.Value) interface{} {
    if len(args) < 1 {
        return "Error: expected JSON string"
    }
    inputJSON := args[0].String()

    var input InputData
    if err := json.Unmarshal([]byte(inputJSON), &input); err != nil {
        return "Error: " + err.Error()
    }

    output := OutputData{
        Greeting: "Hello, " + input.Name,
        Square:   input.Value * input.Value,
    }

    resultJSON, _ := json.Marshal(output)
    return string(resultJSON)
}

func main() {
    c := make(chan struct{}, 0)
    js.Global().Set("processData", js.FuncOf(processData))
    <-c
}

Прямая работа с памятью (бинарный протокол)

Для максимальной производительности можно передавать данные через линейную память WASM. Вы экспортируете функции для записи/чтения из памяти и передаёте указатели (в виде целых чисел) в JavaScript. Этот метод сложнее, но позволяет избежать накладных расходов на парсинг JSON.

// Экспорт функции для записи в память
//go:wasmexport allocateMemory
func allocateMemory(size int) uintptr {
    // Используем C.malloc или свой аллокатор
    // Возвращаем указатель
}

//go:wasmexport getMemoryBuffer
func getMemoryBuffer() uintptr {
    // Возвращаем начало буфера
}

В JavaScript вы используете WebAssembly.Memory и Uint8Array для чтения/записи по полученным адресам.

2. Вызов JavaScript из Go и управление DOM

Пакет syscall/js позволяет вызывать любые функции JavaScript и манипулировать DOM. Продвинутый уровень подразумевает создание реактивных интерфейсов и обработку событий.

Создание и обновление элементов DOM

func appendDiv(this js.Value, args []js.Value) interface{} {
    document := js.Global().Get("document")
    body := document.Get("body")

    newDiv := document.Call("createElement", "div")
    newDiv.Set("innerHTML", "<h2>Hello from Go WASM!</h2>")
    newDiv.Get("style").Set("color", "blue")
    body.Call("appendChild", newDiv)
    return nil
}

func main() {
    js.Global().Set("appendDiv", js.FuncOf(appendDiv))
    select {}
}

Обработка событий на стороне Go

func setupClickHandler(this js.Value, args []js.Value) interface{} {
    document := js.Global().Get("document")
    button := document.Call("getElementById", "myButton")

    clickCallback := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        js.Global().Get("console").Call("log", "Button clicked from Go!")
        return nil
    })

    button.Call("addEventListener", "click", clickCallback)
    return nil
}

3. Управление памятью и утечки данных

Одна из главных проблем при работе с WASM на Go — утечки памяти. Каждый вызов js.FuncOf создаёт функцию, которая не освобождается сборщиком мусора Go, если вы не вызовете Release().

Правильное освобождение ресурсов

var callback js.Func

func setupHandler() {
    callback = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        // ... обработка ...
        return nil
    })
    js.Global().Get("window").Call("addEventListener", "resize", callback)
}

func cleanupHandler() {
    js.Global().Get("window").Call("removeEventListener", "resize", callback)
    callback.Release() // Важно! Освобождаем ресурс
}

Избегание глобальных переменных

Старайтесь не хранить ссылки на JavaScript-объекты в глобальных переменных Go. Это может помешать сборщику мусора. Если нужно сохранить состояние, используйте js.Global().Get("localStorage") или передавайте данные через замыкания.

4. Оптимизация производительности и размера WASM-модуля

Go-модули для WASM по умолчанию могут быть большими (2-10 МБ). Для продакшена это критично.

Уменьшение размера бинарника

• Используйте флаги сборки: GOOS=js GOARCH=wasm go build -ldflags="-s -w" -o main.wasm main.go. Флаги -s -w отключают таблицу символов и отладочную информацию.
• Дополнительная компрессия: После сборки сожмите файл через gzip или brotli. На сервере настройте отдачу сжатых версий.
• Исключите ненужные пакеты: Избегайте импорта fmt и net/http, если они не нужны. Замените fmt.Sprintf на конкатенацию строк.

Профилирование производительности

Используйте встроенный профилировщик Go. Включите сбор метрик в коде и выводите их в консоль браузера:

<