高速化の観点から new Array(100) を使わない方が良い理由
別件で V8 の JIT コードの逆アセンブルを眺めている時に気づいたのですが、JavaScriptで new Array(100) という形で配列を作るのは、高速化の観点から言うと V8 においては避けるべき書き方です。 高速化を求める方は、 new Array() や [] で作成して Array#push で追加していくのが良いでしょう。この記事では、その理由を説明します。 今回の記事は、以下の V8 のブログ記事を参考にしております。 https://v8.dev/blog/elements-kinds 「詰まった配列(Packed Array)」と「穴あき配列(Holey Array)」 v8 は内部的に、その配列がどういうタイプの配列であるかの状態を記録しており、その情報を利用して最適化を適用します。状態は内部的には21個あるのですが、今回話題にするのは、その中でも「詰まってい
Optional chaining · V8
Long chains of property accesses in JavaScript can be error-prone, as any of them might evaluate to null or undefined (also known as “nullish” values). Checking for property existence on each step easily turns into a deeply-nested structure of if-statements or a long if-condition replicating the property access chain: // Error prone-version, could throw. const nameLength = db.user.name.length; //
Array.prototype.sort について
JavaScriptの配列にはsortメソッドがあり配列のソートを実行することができるけど、この配列のソートの中の実装はどうなっているのかという話。v8における配列ソートについての記事が大変参考になりました。 Chrome(V8)の実装はarray.jsにあり、配列の要素数が10以下の場合はInsertion sortを使い、それ以上の場合はQuicksortを利用する。Insersion sortの計算量はO(n^2)であるけど、少ない要素数の場合はQuicksortなどより高速になるらしい。直近のcommmitを見る限りだと、Chrome 69か70あたりでTimsortに置き換えるつもりらしい。TimsortはaverageがO(n log n)で、最悪でもO(n log n)の計算量で済む。QuicksortをTimSortに置き換えるつもりに至った経緯などは調べてない（ので間違っ
Chromium のソースコードの歩き方
これは Chromium Browser アドベントカレンダーの一日目の記事です。初日ということで、本記事では Chromium のソースコードを読む上で役に立つであろう、プロジェクトのディレクトリ構成やファイル構成を紹介します。 (2018/04/09) “The Great Blink mv”1 プロジェクトによってついに WebKit ディレクトリが blink ディレクトリにリネームされました。それに伴い本記事の内容を更新しました。差分は以下の通りです。 third_party/WebKit/Source を third_party/blink/renderer に置換。 blink/ 内のファイル名の命名規約を Bar.{cpp,h} から bar.{cc,h} に置換。 置換に伴う説明文の修正。 (2017/12/01) ディレクトリ構成について追記しました。 Chromium
Source to Binary - journey of V8 javascript engine
V8 javascript engineについて パーサー、AST、Ignition/TurboFan、最適化周り等
Node8.3.0でデフォルトになるTF/Iに関わるベンチマークについて - 技術探し
buildersconでのスライド 8.3.0 プロポーザル TurboFan + Ignition TurboFan Ignition Flow V8の5.9は・・・？ パフォーマンス webpack 8.2.1(V8 5.8) 8.3.0(V8 6.0) 結果 ESLint 8.2.1(V8 5.8) 8.3.0(V8 6.0) 結果 まとめ buildersconでのスライド speakerdeck.com 8.3.0 プロポーザル github.com 大きな変更はやはりV8の6.0とWHATWG Encoding Standardが入ることです🎉 今回はV8の6.0の話をします。 これはLTS対象であるNode8へのバックポートもされNodeのバージョンを9へ上げる準備ができました。 github.com github.com 今現在のcurrent(master branch
Upcoming regular expression features | Blog | Chrome for Developers
ES2015 introduced many new features to the JavaScript language, including significant improvements to the regular expression syntax with the Unicode (/u) and sticky (/y) flags. But development has not stopped since then. In tight collaboration with other members at TC39 (the ECMAScript standards body), the V8 team has proposed and co-designed several new features to make regular expressions even m
V8 javascript engine for フロントエンドデベロッパー
V8 is Google's open source JavaScript engine that is used in Chrome and Node.js. It uses several optimization techniques like hidden classes, inline caching, and TurboFan to improve JavaScript performance. V8 first parses JavaScript into an AST, then compiles it into bytecode which is executed by the Ignition bytecode interpreter or optimized by TurboFan into machine code using techniques like hid
V8、Firefox、Microsoft Edgeが「WebAssembly」の実装を発表。将来のWebの共通バイナリフォーマットへ期待 － Publickey
V8、Firefox、Microsoft Edgeが「WebAssembly」の実装を発表。将来のWebの共通バイナリフォーマットへ期待 WebAssemblyは、JavaScriptのようにどのWebブラウザでも実行可能なポータブル、かつコンパイル済みでロード時間が小さくて済み、汎用的なハードウェアの能力を活用したネイティブスピードで高速に実行できるという特性を備えた共通のバイナリフォーマットを目指してオープンソースで開発が進んでいます。 2015年6月には、Chrome、Firefox、WebKit、マイクロソフトなど主要なWebブラウザやW3Cが相次いでWebAssemblyのサポートを表明しました。 そして、ChromeのJavaScript実行エンジンであるV8、MozillaのFirefox、そしてMicrosoft Edgeで、このWebAssemblyのテスト実装が相次いで
V8 extras · V8
V8 implements a large subset of the JavaScript language’s built-in objects and functions in JavaScript itself. For example, you can see our promises implementation is written in JavaScript. Such built-ins are called self-hosted. These implementations are included in our startup snapshot so that new contexts can be quickly created without needing to setup and initialize the self-hosted built-ins at
末尾呼び出し最適化が実装された - JS.next
概要 ある関数Aから別の関数Bを呼び出すとき、処理系は後で戻って来れるように一旦Aの状態を保存し、関数Bの処理に入る。 これが問題になるのは再帰の時で、数万回程度の再帰でスタックが一杯になり、エラーとなってしまう。 しかし、もし関数B呼び出しの際に、関数Aに戻ってきて処理を続ける必要のない形で呼びだされていれば、 状態の保存を省略して関数Bに移行する最適化が可能であり、ES2015でその詳細が定義されることとなった。 例 具体的には、strictモードの関数で、「 return fn() 」という形での呼び出しについて最適化が有効になる。 最適化が効く例： function fn( n ) { 'use strict' if ( n <= 0 ) { return 'done!' } return fn( n - 1 ) // この関数がする処理はこれ以上ない } fn( 1e6 ) //
マイクロソフト、Node.jsのJSエンジンとして同社のChakraCoreも使えるように、Node.jsのメインラインにプルリクエストを投げたと表明
マイクロソフトがWindows 10やMicrosoft Edgeで使われているJavaScriptエンジンのコア「ChakraCore」のソースコードを公開したのは先週のこと。 マイクロソフトはこのChakraCoreをNode.jsのJavaScriptエンジンとして使えるようにすべく、Node.jsのメインラインに対してプルリクエストを投げたことを明らかにしました。 Node.jsは、GoogleのChromeで使われているJavaScriptエンジンのV8を用いています。このV8をChakraCoreで置き換えるために、マイクロソフトはChakraCoreをV8互換に見せるための「Chakra Shim」と呼ばれるコンポーネントを開発しました。 This pull request enables Node.js to optionally use the ChakraCore Ja
SIMD型について - JS.next
概要 新しいプリミティブ型であるSIMD型及びAPIがV8で実装されてきている。 SIMDとは、複数の数値を並べて１つの値としたようなデータ型である。 これはCPUによって効率良くサポートされているデータ型であり、 1 + 2 -> 3 をするように [ 1, 2, 3, 4 ] + [ 2, 3, 4, 5 ] -> [ 3, 5, 7, 9 ] を1回の演算ですることができる。 つまり、沢山の数値を扱う場面でSIMD型を利用することで、何倍ものパフォーマンス向上が期待できる。 （※WASMに入ることとなり、ESからは一旦取り除かれました。） 実装される型 float32x4 32bit浮動小数点型を4つ並べた128bitのデータ型 float32はJSの通常のnumberであるところのfloat64より精度が低い int32x4 32bit符号付き整数型を4つ並べた128bitのデータ
new.targetメタプロパティについて - JS.next
概要 「new.target」とは、ES2015で導入されたビルトインクラスのサブクラスを作る上で欠かせない存在である[[newTarget]]を取得するためのメタプロパティである。 従来の問題点 ES5まではArrayのようなビルトインクラスを適切に継承したサブクラスを作ることができなかった。 ES2015からのプロトタイプ設定機能を使うと可能であり、このようになる。 class Stack extends Array { constructor( ...args ) { var stack = new Array( ...args ) return Object.setPrototypeOf( stack, Stack.prototype ) } clear() { this.length = 0 } } しかし毎回このように書かないといけないのはスマートではない。 できればこの様に書
テンプレートリテラルが実装された - JS.next
概要 テンプレート文字列を記述できる構文が実装された。 テンプレートリテラル 基本の使い方 バッククオート『 ` 』で囲んだ文字が、文字列リテラル同様に文字列として評価される。 var t = `テンプレート` var s = "テンプレート" console.log(t) // "テンプレート" console.log(t == s) // true 改行がそのまま認識される。 var t = `テンプ レート` var s = "テンプ\n"+ "レート" console.log(t) // "テンプ⏎レート\t" console.log(t == s) // true 文字列中に変数などを埋め込む リテラル中の『${』と『}』で囲まれた部分は式として評価される。 var n = 123, f = () => 339 var t = `0${ n }45${ f() * 2 }9` v
@@unscopablesが実装された - JS.next
概要 with文に与えたオブジェクトの特定のプロパティがスコープに含まれることを防ぐための、 ビルトイン"unscopables"シンボルが実装された。 例 @@unscopablesプロパティのオブジェクトが有する名前のプロパティは、値がTruthyならスコープから外される。 var a = 'unscopable', b = 'unscopable', c = 'unscopable' var obj = { a: 'scopable', b: 'scopable', c: 'scopable', } obj[Symbol.unscopables] = { b: true, c: false } with (obj) { console.log(a, b, c) } /* log "scopable" "unscopable" "scopable" */ 何故必要なのか ES2015で
V8の最適化とIRHydraでの可視化とベンチマークについてのメモ
V8 の最適化について 色々(主にVyacheslav Egorovさんの記事やスライド)読んでたのでそれのメモ。 この文章は2014年9月13日に書かれて最適化されていないため、この文章を元に最適化をすると失敗すると思います。 参考まとめ V8に関するリソースまとめ V8 Resources - Vyacheslav Egorovさんによる thlorenz/v8-perf - Thorsten Lorenzさんによる Understanding V8 and JIT compilation basics - Google スライド - 概要分かりやすい Hidden Class V8がリリースされた時から特徴としてあげられている最適化 V8: an open source JavaScript engine - YouTube V8 祭り - Backnumbers: Steps to
アロー関数が実装された - JS.next
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://abouthiroppy.github.io/slides/node8/
V8 Stats in Chrome