JSer.info #350 - Chrome 62betaがリリースされました。

Chromium Blog: Chrome 62 Beta: Network Quality Estimator API, OpenType variable fonts, and media capture from DOM elements

Network Quality Estimator API、OpenType Variable Fonts、DOM要素をキャプチャできるcaptureStream()のサポートなどが行われています。

また、62からHTTPのページでのフォーム入力時に"Not secure"と表示されてるようになっています。

Safari 11が正式リリースされました。

WebRTCとMedia Capture、WebAssembly、OpenType Variable Fontのサポートが行われています。
また、Web Cryptography APIの更新や動画などのメディアの自動再生がデフォルトブロックする変更などが含まれています。

Auto-Play Policy Changes for macOS | WebKit

またiPhone Xに関するviewport-fit=coverとCSSのconstants()（env()にリネーム予定）とsafe-areaについての解説もかかれているので併せて読むと良さそうです。

Designing Websites for iPhone X | WebKit

Introduction to WebRender – Part 1 – Browsers today – Mozilla Gfx Team Blogという記事では、現在のメジャーなモダンブラウザにおけるレンダリングプロセスについて書かれています。

ServoのWebRenderを例に、現在のレンダリングパイプラインについて書かれています。

Layout
1. DOMツリー: DOMパースしてDOMツリーを作る
2. Frameツリー: 各DOMツリーのレイアウト結果
Painting
1. Display List: Frameツリーごとに描画コマンドへ
2. Layerツリー: レイヤーに描画
Compositor
1. LayerツリーのCompositing: レイヤー同士を合成

各ブラウザに差異はありますが、描画までのプロセス(Layout -> Painting)と合成のプロセス(Compositing)を分けるという手法は、現在のモダンウェブブラウザでは取り入れられています。

他のブラウザのレンダリングプロセスについても最近発表があったので併せてみるとよいかもしれません。

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

Chromium Blog: Chrome 62 Beta: Network Quality Estimator API, OpenType variable fonts, and media capture from DOM elements

blog.chromium.org/2017/09/chrome-62-beta-network-quality.html

Chrome ReleaseNote

Chrome 62βリリース。
Network Quality Estimator API、OpenType Variable Fontsのサポート。
CSS color parserが#RRGGBBAAのような形式もサポート、MSEがFLACをサポートなど

Safari 11.0

developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html

ReleaseNote safari

Safari 11.0リリース。 WebRTC、WebAssermbly、Media Capture API、WebCrypto APIのアルゴリズム追加、Resource timing APIのサポート。 CSSではVariable fonts、CSS strokeのサポート。ホームスクリーンアプリでWebKitの機能をサポート、追跡クッキーの防止など

New WebKit Features in Safari 11 | WebKit

Relicensing React, Jest, Flow, and Immutable.js | Engineering Blog | Facebook Code

code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

React license news

React、Jest、Flow、Immutable.jsはBSD + PatentライセンスからMITライセンスへ変更される。
技術的要因以外で停滞するのは好ましくないため、エコシステムの基盤となるライブラリ/ツールのライセンス変更を決定した。

Release Dexie v2.0.0 · dfahlander/Dexie.js

github.com/dfahlander/Dexie.js/releases/tag/v2.0.0

JavaScript library ReleaseNote

IndexedDBラッパーのDexie v2.0.0リリース。
IndexedDB 2.0のサポート、Safariのサポートなど

アーティクル

Almin + React/Vue.jsのパフォーマンスプロファイルをタイムライン表示できるように | Web Scratch

efcl.info/2017/09/20/almin-performance-profile-0.14.0/

React Vue almin debug performance

Almin/React/Vueのパフォーマンスオプションについて。
開発者ツールのタイムラインでそれぞれの処理時間を可視化できる。

asm.js: 仕様と実装の今 - Qiita

qiita.com/mod_poppo/items/de5c6f2f4604b84b1bc1

JavaScript asm.js

asm.jsの仕様と各ブラウザ(Firefox、MSEdge、Chrome)の実装の差異について

dherman/asm.js: A low-level, extraordinarily optimizable subset of JavaScript.

Upcoming TypeScript Changes in Vue 2.5 – The Vue Point – Medium

medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08

TypeScript Vue

Vue 2.5でTypeScriptの型定義周りが改善されることについて。
また、Vueのlanuguage-serverも併せて更新されているため、JavaScriptを使った場合もエディタでの補完などが改善される。

vetur/server at master · vuejs/vetur

To type or not to type: quantifying detectable bugs in JavaScript | the morning paper

blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/

JavaScript TypeScript flowtype 論文 article

JavaScriptに型注釈を加えることでどの程度バグを検出できるかという論文の紹介記事。
GitHubで実際の修正コミットを元に、TSとFlowで型付けし、修正されたバグが検出できるかをテストした。
型注釈をつけることで大体15%のバグは発見できた。

Type or Not to Type:Quantifying Detectable Bugs in JavaScript

Lifecycle Simulators

reactarmory.com/guides/lifecycle-simulators

React Tools

Reactコンポーネントのライフサイクルをシミュレートできるツール。
初期化、Stateの更新、Propsの更新をそれぞれ試すことができる

Introduction to WebRender – Part 1 – Browsers today – Mozilla Gfx Team Blog

mozillagfx.wordpress.com/2017/09/21/introduction-to-webrender-part-1-browsers-today/

browser firefox servo article

ServoのWebRenderを例にしてメジャーブラウザのレンダリングの仕組みについて解説している。
frame treeと呼ばれる各要素ツリーのレイアウト結果から、display listと呼ばれるフラットな描画コマンドを作成する。その描画結果をlayerに乗せ、最後にlayerをcompositingで合成する。
各ブラウザに差異はあるが描画と合成を分けるという手法は、現在のウェブブラウザでは取り入れられている。