В эти дни я работал над своей игрой https://neoinvade.com и столкнулся с некоторыми серьезными проблемами с потрясающим однопоточным javascript. Если вы не знаете, что означает single thread
, самым простым объяснением будет то, что даже если вы можете асинхронизировать некоторые команды, которые создают ложное впечатление о параллельном запуске, есть только one call-stack
, поэтому пользовательский интерфейс все равно будет отставать от больших данных. обработка на ЦП.
Итак, как же осуществить законный параллельный запуск кода, интенсивно использующего ЦП? Использование веб-воркера!
Мне было трудно настраивать машинописный текст и веб-воркеры, поэтому я решил собрать эту информацию воедино и помочь некоторым людям.
Во-первых, вам нужен упаковщик. Я часами пытался настроить watchify & browserify
, но безуспешно. Если вы сталкиваетесь с той же проблемой, я считаю, что webpack гораздо более продвинутый и простой в использовании и настройке.
{ mode: 'development', devtool: 'source-map', // used to show ts files in debugger & better error stack entry: { bundle: '<main-app-entry>.ts', // replace it with real files worker: '<worker-path>.ts' // replace it with real files }, output: { filename: '[name].js', // [name] is an actuall variable path: path.resolve(__dirname, 'assets/js'), }, watch: true, // allows watching instead of one-time build watchOptions: { aggregateTimeout: 200, poll: 1000 }, resolve: { extensions: [ '.tsx', '.ts', '.js' ], }, module: { rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/, }] }, plugins: [ new WebPack.DefinePlugin({ 'WORKER_URL': JSON.stringify('/assets/js/worker.js') // define variables that can be used in code - for production I used worker.min.js }) ] };
Следующая остановка main.js
/* you can use the variable here to add the destination of the file - remember that this path is relative to your server url and not to your ts file in the project */ let worker = new Worker(WORKER_URL) worker.postMessage('ping')
Последняя остановка worker.ts
const scope = (self as unknown) as Worker scope.addEventListener('message', event => { console.log(event.data) scope.postMessage('pong') })
Вот и все! Удачного кодирования!