JSer.info #484 - Headless Chromeを扱うライブラリであるpuppeteer 3.0.0がリリースされました。

Release v3.0.0 · puppeteer/puppeteer

Chromium 81.0.4044.0へアップデートされています。
また、v2.1.0でFirefoxをサポートしていますが、インストール時にPUPPETEER_PRODUCT=firefox npm installとすることでFirefox Nightlyのバイナリをダウンロードできるようになっています。

その他にはNode.js 8のサポート終了やコードベースをTypeScriptへマイグレーションしていくなどの変更が含まれています。

Chrome 83 Betaがリリースされました。

Chromium Blog: Chrome 83 Beta: Cross-site Scripting Protection, Improved Form Controls, and Safe Cross-origin Resource Sharing

前回お伝えしていたようにChrom 82はスキップされ、Chrome 83は本来より3週間早くリリースされます。

CSPとしてTrusted Typeを指定できるように、Form UI/Accessibilityの改善、Cross-Origin-Embedder-Policy(COEP)とCross-Origin-Opener-Policy(COOP)の実装などが行われています。詳細は次の記事で解説されています。

Making your website "cross-origin isolated" using COOP and COEP

Origin Trialとして新しいNative File System、Performance.measureMemory()、Scheduler.postTask()が追加されています。
その他には、ARIA Annotations 1.3 draftの対応、Barcode Detection API、CSSの@supports selector()のサポートなども行われています。

State of Vue Apr 16 2020というスライドでは現在開発中のVue 3のBeta版が公開されたことについて発表されています。

vue-next/CHANGELOG.md at master · vuejs/vue-next

このスライドでは、Vue 3の主な変更について書かれています。
Composition API、Fragment、Teleport、Suspense、Custom Renderer APIについて紹介されています。
また、Tree-shakingの対応によるファイルサイズの削減やTypeScriptのサポートについても書かれています。

Vue 3のロードマップについては次のProject Boardを参照してください。

Roadmap

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

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

JSer.info Sponsors

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

ヘッドライン

Node v13.13.0 (Current) | Node.js

nodejs.org/en/blog/release/v13.13.0/

node.js ReleaseNote

Node.js 13.13.0リリース。
fs.readvの追加、fs.readSyncにoffsetとlengthオプションの追加、dns.ALLフラグの追加。
HTTPヘッダサイズのデフォルト値を8KBから16KBに変更など

Release v3.0.0 · puppeteer/puppeteer

github.com/puppeteer/puppeteer/releases/tag/v3.0.0

Chrome Firefox library ReleaseNote

Puppeteer 3.0.0リリース。
Chromium 81にアップデート、Firefox Nightlyのバイナリをインストールできるように、Node.js 8のサポート終了など。

blog.chromium.org/2020/04/chrome-83-beta-cross-site-scripting.html

Chrome ReleaseNote

Chrome 83 Betaリリース。
CSPとしてTrusted Typeを指定できるように、Form UI/Accessibilityの改善、COOPとCOEPの実装。
Origin Trialとして新しいNative File System、Performance.measureMemory()、Scheduler.postTask()の追加。
その他には、ARIA Annotations 1.3 draftの対応、Barcode Detection API、CSSの@supports selector()のサポートなど

Release v1.7.0 · pikapkg/snowpack

github.com/pikapkg/snowpack/releases/tag/v1.7.0

npm browser Tools ReleaseNote bundler

Snowpack 1.7.0リリース。
--envのサポート、Babelプラグインの更新、JSXとTypeScriptのサポート。
また Snowpack 2.0に向けて変更予定について書かれている

アーティクル

AddyOsmani.com - Profiling React.js Performance

addyosmani.com/blog/profiling-react-js/

React performance article

Reactアプリのレンダリングパフォーマンスの計測方法について。
ExperimentalなReact Profiler API、Interaction tracingを使った方法。
PuppeteerやUser Timing API、Lighthouseを使ったReactに依存しない計測についてなど

A Tour of Inline Caching with Delete | WebKit

webkit.org/blog/10298/inline-caching-delete/

webkit performance article JavaScript

delete演算子でプロパティを削除するオブジェクトの構造が変わって構造IDが変わることで、構造IDをkeyにしてキャッシュするInline Cachingが無効化されて遅くなる問題について。
JSCではこのdeleteによる削除遷移に対する最適化を行うことで、Emberのデバッグビルドのようなdeleteを多用するアプリでのパフォーマンスを改善したという話

Making your website "cross-origin isolated" using COOP and COEP

web.dev/coop-coep/

Chrome security article

SharedArrayBufferなど高度な機能はself.crossOriginIsolatedがtrueの場合に利用できる。
crossOriginIsolatedを有効にするには、Cross-Origin-Embedder-PolicyとCross-Origin-Opener-Policyの対応が必要という話。
Cross-Origin-* HTTPヘッダーの動きについての解説

Speed Up Your Angular App - 14 Angular Optimization Tips | GrapeCity

www.grapecity.com/blogs/14-ways-to-speed-up-your-angular-app

Angular article performance

Angular 9を使ったアプリの最適化Tips。

What's new in ECMAScript 2020 | Strict Mode

www.strictmode.io/articles/whats-new-es2020/

ECMAScript JavaScript article

ES2020で追加される構文やメソッドについての紹介記事

スライド、動画関係

vime-js/vime: All your media player needs in one place - a modern alternative to Videojs and Plyr. Supports Html5, Hls, Dash, YouTube, Vimeo, Dailymotion and more to come.

github.com/vime-js/vime

JavaScript plugin video library

プラグインで拡張できるVideoプレイヤーライブラリ。
機能ごとにモジュール化されているため、必要なモジュールだけを利用できる。

State of Vue Apr 16 2020 - Google スライド

docs.google.com/presentation/d/1LHp-8hEtXEMSE1fd6YLAhYmtndQelQKbWlGggZKe4y8/edit#slide=id.p

Vue slide

Vue.js 3βリリースについてのスライド。
Vue 3の主な変更について。
Composition API、Fragment、Teleport、Suspense、Custom Renderer APIの対応など。
また、Tree-shakingの対応によるファイルサイズの削減やTypeScriptのサポートについて