Fork me on GitHub

2017-09-26のJS: Chrome 62 Beta、Safari 11.0、モダンブラウザのレンダリングパイプライン

Edit on GitHub 編集履歴を見る

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

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

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


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

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

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


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

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

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

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

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


ヘッドライン


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の機能をサポート、追跡クッキーの防止など


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)の実装の差異について


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を使った場合もエディタでの補完などが改善される。


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%のバグは発見できた。


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に乗せ、最後にlayercompositingで合成する。
各ブラウザに差異はあるが描画と合成を分けるという手法は、現在のウェブブラウザでは取り入れられている。


スライド、動画関係


Debugging in 2017 with Node.js - YouTube

www.youtube.com/watch?v=Xb_0awoShR8

node.js Chrome debug video

Node.jsなアプリをChromeの開発者ツールでデバッグする方法についての発表。
process._debugProcess(pid)での既存プロセスのデバッグ、開発者ツールをコードから扱う方法、chrome://tracingとの連携などについて


Microsoft Edge Web Summit 2017 | Channel 9

channel9.msdn.com/Events/WebPlatformSummit/Microsoft-Edge-Web-Summit-2017

MSEdge video イベント

MSEdge Web Summit 2017の動画一覧


HTML5 Conference 2017 - YouTube

www.youtube.com/user/html5j

HTML5 イベント

HTML5 Conference 2017の動画一覧


React v16 and beyond React Fiber // Speaker Deck

speakerdeck.com/koba04/react-v16-and-beyond-react-fiber

React slide

React 16の変更点と16以降に導入されるReact Fiberの仕組みについてのスライド


サイト、サービス、ドキュメント


cure53/browser-sec-whitepaper

github.com/cure53/browser-sec-whitepaper/

PDF browser security

ブラウザセキュリティに関する文章。 各ブラウザ/色々なケースでの攻撃方法や脆弱性について書かれている


mbeaudru/modern-js-cheatsheet: Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.

github.com/mbeaudru/modern-js-cheatsheet

JavaScript チートシート

ES2015の構文などを中心に紹介するチートシート


Performance metrics. What’s this all about? – codeburst

codeburst.io/performance-metrics-whats-this-all-about-1128461ad6b

browser performance

ウェブブラウザのパフォーマンスのメトリクスについての解説。
またそれらを計測できるツールについて


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


Vue.js 2 Material Component Framework | Vuetify.js

vuetifyjs.com/

Vue UI library

Vueを使ったMaterialデザインのUIフレームワーク


uber/luma.gl: A JavaScript WebGL Framework for Data Visualization

github.com/uber/luma.gl

WebGL JavaScript

WebGLを使ったデータビジュアライゼーションフレームワーク。
WebGL2にも対応していて、過度な抽象化を避けたAPIを提供する目的


書籍関係


Building Progressive Web Apps: Bringing the Power of Native to the Browser: Tal Ater: 9781491961650: Amazon.com: Books

www.amazon.com/Building-Progressive-Web-Apps-Bringing/dp/1491961651

ProgressiveWebApp JavaScript book

PWAについての書籍


mjavascript/practical-modern-javascript: 🏊 Dive into ES6 and the future of JavaScript

github.com/mjavascript/practical-modern-javascript

JavaScript book

ES2015以降のJavaScriptについて書かれた電子書籍。CC by-nc-saで公開されている。


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