2021-03-02のJS: Bundle Size以外のJavaScriptパフォーマンス、CORS 完全手冊

2021年03月02日

JSer.info #529 -JavaScript performance beyond bundle size | Read the Tea Leavesという記事では、JavaScriptのパフォーマンス測定について書かれています。
最近では、Bundle SizeについてはBundlePhobiaやWebpack Bundle Analyzerなど分かりやすく測定するツールがありますが、それ以外のJavaScriptのパフォーマンスのメトリクスについて書かれています。

ランタイムのCPUコスト、電力消費量、メモリ使用量、ディスクの使用量などのBundle Size以外のメトリクスをどのように見るのかについてまとめられています。

CORS 完全手冊というCORSについての連載記事では、
CORSの概念、対応方法、よくある間違い、CORB/CORP/COEP/COOPなど最近のオリジン関連のルール、セキュリティ的な問題について書かれています。

CORS 完全手冊（一）：為什麼會發生 CORS 錯誤？
- クロスオリジンリクエストとは何か? CORSエラーはなぜおきるのかについて
CORS 完全手冊（二）：如何解決 CORS 問題？
- CORS対応の仕方(expressを例にしている)
CORS 完全手冊（三）：CORS 詳解
- CORSの仕組み、それぞれのヘッダの意味をシナリオと合わせて解説している
CORS 完全手冊（四）：一起看規範
- CORSの仕様をFetch Standardと共に解説。Varyヘッダでのキャッシュの注意点についても書かれている
CORS 完全手冊（五）：跨來源的安全性問題
- res.headers['Access-Control-Allow-Origin'] = req.headers['Origin'] のようにOriginをオウム返しするよくある設定ミス(脆弱性)について
- CORB/CORP/COEP/COOPとSite Isolationについて
CORS 完全手冊（六）：總結、後記與遺珠
- CORSのエラーのパターン分類、Origin Policy、CORSの細かな話など

CORSについて必要な知識がほとんど書かれているため、おすすめです。

アーティクル

Introducing Env: a better way to read environment variables in JavaScript - Human Who Codes

humanwhocodes.com/blog/2021/02/introducing-env-javascript-environment-variables/

JavaScriptlibraryarticle

環境変数のよくある問題を回避するライブラリについて

CSS-in-JS support in DevTools | Web | Google Developers

developers.google.com/web/updates/2021/02/css-in-js

ChromedebugCSSarticle

Chrome 85 DevToolsのCSS-in-JSの対応について。
今まではCSSOM APIで追加されたルールのスタイルは編集できなかったが、編集できるようになったという話

JavaScript performance beyond bundle size | Read the Tea Leaves

nolanlawson.com/2021/02/23/javascript-performance-beyond-bundle-size/

JavaScriptperformancearticle

JavaScriptのBundle sizeとランタイムのCPUコスト、メモリ使用量、電力使用量の調べ方について。
Bundle SizeについてはBundlePhobiaやWeb Vitalsなどで分かるようになってきているが、パフォーマンスはもっと多面的なものであるため、他のメトリクスをどのように見るかについて

BundlePhobia ❘ cost of adding a npm package

How Web Content Can Affect Power Usage | WebKit

webkit.org/blog/8970/how-web-content-can-affect-power-usage/

safariwebkitdebugarticle

CPU、GPU、ネットワークなどが電力消費に与える影響について。
バックグラウンド時にCPU消費をなくす方法、Web InspectorのEnergy Impactの表示について

Why JavaScript Developers Should Prefer Axios Over Fetch | by Sabesan Sathananthan | Feb, 2021 | Better Programming

betterprogramming.pub/why-javascript-developers-should-prefer-axios-over-fetch-294b28a96e2c

JavaScriptFetcharticle

Fetch APIとaxiosの比較。
レスポンスデータの自動変換、エラー処理、ダウンロードのprogress処理、アップロードのprogress処理、HTTPのインターセプト、タイムアウト、並列リクエストについて比較している

Use CSS Variables instead of React Context | Epic React by Kent C. Dodds

epicreact.dev/css-variables/

ReactCSSarticle

CSS-in-JSを使ったThemeコンポーネントのようなテーマの切り替えをCSS Custom Propertiesで実装してみる話。
実装の違い、レンダリングフローの違いについて

React Context を export するのはアンチパターンではないかと考える | stin's blog

blog.stin.ink/articles/do-not-export-react-context

Reactarticle

React Contextをモジュールからexportするのではなく、Custom Hookとしてexportするという話。

CORS 完全手冊（一）：為什麼會發生 CORS 錯誤？ - Huli

blog.huli.tw/2021/02/19/cors-guide-1/

CORSsecuritybrowserarticle

CORSの概念、対応方法、よくある間違い、CORB/CORP/COEP/COOPなどオリジン関連のルール、セキュリティ的な問題についての連載記事。
クロスオリジンリクエストはなぜブロックされるのか、CORSの仕様解説、CORSのキャッシュ、CORSの設定ミスなどについて

What's New In DevTools (Chrome 90) | Web | Google Developers

developers.google.com/web/updates/2021/02/devtools

Chromedebugarticle

Chrome 90のDev Toolsの変更点について。
CSS flexboxのデバッグツールの追加、Core Web Vitalsのオーバーレイ表示、
Issues tabの改善、CSS color-gamutのエミュレート機能の追加。
Dev Toolsを開いた状態でのデバッグのパフォーマンス改善、fn.displayNameのサポートを非推奨化など