Fork me on GitHub

2014-09-15のJS: JavaScriptエンジンの最適化、ビルドツールBroccoli

Edit on GitHub 編集履歴を見る

JSer.info #192 - 今週はnodeconfeuがあったのと、自分でも最適化についての記事を書いた影響でV8の最適化に関するものが多いです。

V8 Installation and d8 shell usage では、V8をビルドして起動オプションを使って最適化やトレースをする方法について分かりやすく紹介されています。

V8の最適化とIRHydraでの可視化とベンチマークについてのメモ では、Hidden Class等の著名な最適化がどうなると効かなくなるかをIRHydra2を使って見る方法等について書かれています。

V8の仕組みやプロファイリングについてはthlorenz/v8-perfに参考となる資料がまとめられていて、また同作者によるDemystifying v8 and JavaScript Performanceというスライドが公開されています。
(内容的にはv8-perfの一部)


Intro to Broccoli というスライドでは、ビルドツールであるBroccoliとは何かについて書かれています。

In Rails speak Broccoli is the asset pipeline, and Grunt and Gulp are rake

というように、Railsでいうasset piplineのような効率的なビルドを目的にしています。

ビルド対象はファイル単位ではなくTreeで扱うようになっていて、その仕組みについてはBroccoli: First Beta ReleaseNo more grunt watch: Modern build workflows with Broccoli - Ember Fest!にて紹介されています。

See also : nodeca/mincer


お知らせ

今回で192回目の更新ですが、このままのペースだと11月10日(月)に200回目となるので、
それを記念して勉強会的なイベントをやろうかと思ってます。

詳細は(まだ詳細は決まってない)以下に書いてありますが、2014年11月09日(日)を予定しています。

まだ、参加人数とか会場も決まってないので(会場を募集しています!)、イベントページを作って詳細が決まったらもう一度お知らせします。

参加人数の参考にしたいので、参加するかもという人は Vote を押しておいてもらえると助かります。


ヘッドライン


Intern 2.1 released | Blog | SitePen

www.sitepen.com/blog/2014/09/12/intern-2-1-released/

JavaScript testing library ReleaseNote

Intern 2.1リリース。

HTMLレポーター/JUnit XMLレポーターの追加。


Release 3.1 “Satyameva Jayate” · postcss/autoprefixer

github.com/postcss/autoprefixer/releases/tag/3.1.0

CSS Tools ReleaseNote

autoprefixer 3.1リリース


アーティクル


V8 Installation and d8 shell usage

gist.github.com/kevincennis/0cd2138c78a07412ef21

V8 console Tools tutorial

d8コマンドをインストールして、最適化/非最適化、プロファイリング、GCのトレース、Hidden Class等のチェック方法などについてまとまってるチュートリアル


V8の最適化とIRHydraでの可視化とベンチマークについてのメモ | Web Scratch

efcl.info/2014/09/13/v8-optimization-memo/

JavaScript V8 performance Tools まとめ

V8のHidden Class等のJavaScriptの最適化やhot codeについて。

IRHydra2を使った最適化されてない事の可視化や参考リソースについて。


「for やめろ」またはイベントループと nextTick() - Block Rockin’ Codes

jxck.hatenablog.com/entry/for-with-eventloop

JavaScript node.js

node.jsにおけるイベントループとブロックについて。

setTimeout、process.nextTick、setImmediateの意味の違い。

I/Oイベントとそれぞれの実行タイミングについて分かりやすく解説してる。


Integrating D3.js visualizations in a React app - Nicolas Hery

nicolashery.com/integrating-d3js-visualizations-in-a-react-app/

d3.js DOM

D3.jsのデータ・ドリブンのデータ更新とReactのVirtual DOMを組み合わせた話


Firefox Add-on Enables Web Development Across Browsers and Devices ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2014/09/firefox-tools-adapter/

firefox debug Chrome addon

Firefoxの開発者ツールを使ってChromeやSafariで表示してるページをデバッグするアダプタのアドオン。

remotedebug.org と似ているが、共有のプロトコルの提供ではなく、Firefoxのプロトコルをベースとしてる


スライド、動画関係


Intro to Broccoli

aexmachina.info/assets/talks/intro-to-broccoli/#1

JavaScript Tools スライド

ビルドツールであるBroccoliについてのスライド。 Railsで言えばBroccoliはasset pipelineで、GruntやGulpはrakeに当たるツール。

ビルドに焦点をおいているという特徴がある


Talk talks_12C5ADD371A9A5D4 - Ember Fest!

emberfest.eu/talks/talks_12C5ADD371A9A5D4

JavaScript Tools 動画

JavaScriptベースのビルドツールであるBroccoliについての動画

https://github.com/broccolijs/broccoli

Broccoliがどのようなプロセスでファイルを処理するかについて話されてる


9 anti-patterns for node.js teams

www.slideshare.net/jeharrell/9-antipatterns-for-nodejs-teams

JavaScript node.js スライド

node.jsにおける9つのアンチパターンについてのスライド http://efcl.hatenablog.com/entry/2014/09/11/212846


2014-09-09-performance-in-css-hikalab-yuya-saito.pdf • Droplr

d.pr/f/sP4H

CSS browser performance スライド

CSSとパフォーマンスについてのスライド。CSSのスタイル変更がどのようなレンダリングツリーの変更/再描画を起こしてるか、それを計測する方法、回避する方法について詳しく書かれてる


OSCON - React Architecture // Speaker Deck

speakerdeck.com/vjeux/oscon-react-architecture

JavaScript DOM スライド

Reactの歴史とReactのDOM Diffについてのスライド

https://www.youtube.com/watch?v=eCf5CquV_Bw

ReactのVirtual DOM = DOMのバージョン管理という話やVirtual DOMのdiffの仕組みについて解説されてる


Building high quality services at Uber

raynos.github.io/nodeconfeu2014-talk/#/

JavaScript node.js スライド

Uber社のnode.jsを使ったプロダクションを運用するにあたってのスライド。

ログ、モニター、設定の管理、例外のログ、プロファイル、初期設定のscaffolding等のツールについて。


Asynchronous JavaScript & Promises

www.innoarchitech.com/asynchronous-javascript-promises/

JavaScript Promises スライド 動画

JavaScriptの非同期処理、Promiseについての動画とスライド。

Promiseとはどういうものかについて


BSidesLA Managing Content Security Policy // Speaker Deck

speakerdeck.com/oreoshake/bsidesla-managing-content-security-policy

セキュリティ CSP browser スライド

CSPについてのスライド。

CSPとは何か、どうやって適応するか、どうやって管理するかについてTwitterの人が発表した内容。

CSP Lv2のscript hashについてやCSPレポート解析と http://caspr.io/ について


サイト、サービス


Polyfill service

cdn.polyfill.io/v1/

JavaScript library

polyfillライブラリを配信してくれるCDNサービス。

クエリでfeaturesやuaを指定してそれに対するpolyfillをまとめくれたものを配信してくれる


srcset と sizes

terkel.github.io/srcset-sizes/

HTML 画像 CSS 翻訳

srcset と sizes 属性の入門の翻訳

http://ericportis.com/posts/2014/srcset-sizes/


thlorenz/v8-perf

github.com/thlorenz/v8-perf

Chrome V8 performance まとめ

V8のパフォーマンスに関するレポートや資料のまとめ。

Data type、コンパイラ、最適化、GC、メモリ、CPUプロファイリング。

またfast objectであるかどうかの確認方法やプロファイルの取り方などについて


Speed Hall of Fame - The Chromium Projects

www.chromium.org/developers/speed-hall-of-fame

V8 Chrome まとめ

ChromiumやV8のパフォーマンスの最適化/向上のIssue(内容)とその結果についてまとめられてるページ


DartLanguageSpecification_Japanese.pdf

www.cresc.co.jp/tech/java/GoogleDart/DartLanguageSpecificationJapanese.pdf

dart spec 翻訳

Dartの仕様書日本語訳

ECMA-408版


ソフトウェア、ツール、ライブラリ関係


ES6 right now

johnkpaul.github.io/presentations/jqcon/2014/es6-now/#/

ECMAScript JavaScript スライド

ES6の動かせるサンプルと共に機能紹介と今スグ使う設定についてのスライド

traceur(+grunt/gulp/broccoli/browserify)やes6-shimの紹介


davidmarkclements/decofun

github.com/davidmarkclements/decofun

JavaScript debug Tools

無名関数を自動的にそのコンテキストに応じた名前を付けるデバッグツール。


GraftJS/jschan · GitHub

github.com/GraftJS/jschan

JavaScript library

libchanのJavaScriptポート。

ネットワークを超えてChannel同士でやり取りをする。

WebSocketsとSPDYをサポートしていて、msgpackを使う


uupaa/WMCache.js

github.com/uupaa/WMCache.js

JavaScript library Chrome safari

FileSystem, IndexedDB, Quota Management APIを使って100MB超えのテンポラリなストレージを管理するライブラリ


hello.js - Javascript API for OAuth2 authentication and REST services

adodson.com/hello.js/

JavaScript OAuth library

OAuth 2対応のアプリの認証やAPIを叩く機能を持ったライブラリ。

https://auth-server.herokuapp.com/ という認証のサーバを使っていて、クライアントサイドを書くだけでGitHubやFacebook等のAPIを利用できる


BlackDice/lill

github.com/BlackDice/lill

JavaScript library node.js

es6-symbolを使った linked-listの実装ライブラリ


ブラウザ内で安全に文字列からDOMを組み立てるためのRickDOMというライブラリを書いた - 葉っぱ日記

d.hatena.ne.jp/hasegawayosuke/20140912/p1

JavaScript DOM library

DOMParserやcreateHTMLDocumentを使って文字列から安全にDOMを組み立てるライブラリ


thlorenz/proxyquireify

github.com/thlorenz/proxyquireify

browserify plugin testing library

requireをラップして読み込んだモジュールのメソッドのstubを行えるbrowserify plugin。

変換によってDIが行われるので元モジュールに特殊な仕組みが必要ない


書籍関係


JavaScript: Novice to Ninja - O'Reilly Media

shop.oreilly.com/product/9780992461225.do

JavaScript book

2014年10月 発売

基礎から学ぶJavaScript


この記事へ修正リクエストをする
記事を紹介する