Fork me on GitHub

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

Edit on GitHub 編集履歴を見る

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

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


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

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/

JavaScript library article

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


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

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

Chrome debug CSS article

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/

JavaScript performance article

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


How Web Content Can Affect Power Usage | WebKit

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

safari webkit debug article

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

JavaScript Fetch article

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


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

epicreact.dev/css-variables/

React CSS article

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


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

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

React article

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


CORS 完全手冊(一):為什麼會發生 CORS 錯誤? - Huli

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

CORS security browser article

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

Chrome debug article

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


スライド、動画関係


github.com/GoudekettingRM/link-overview-jsworld-2021

JavaScript Conference video slide

JS World 2021のスライドや動画のまとめ


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


jcubic/tagger: Zero Dependency, Vanilla JavaScript Tag Editor

github.com/jcubic/tagger

JavaScript library

依存のないタグ入力UIライブラリ


wynntee/joss: JOSS can serialize almost every JavaScript data type and data structure, so data can be seamlessly exchanged between browsers and servers (Deno or Node.js).

github.com/wynntee/joss

JavaScript library

JOSSというJavaScriptオブジェクトのシリアライズ、デシアライズの仕様とそのリファレンス実装ライブラリ。
BigInt、循環参照、疎な配列、-0などJSONにはない部分もサポートしている。
ブラウザ、Node、Denoで動作する


andrewcourtice/harlem: Simple, unopinionated, lightweight and extensible state management for Vue 3

github.com/andrewcourtice/harlem

Vue JavaScript TypeScript library

Vue 3向けのステート管理ライブラリ。
pluginでVue DevToolsへの対応や、SSR、Storage保存、トランザクション対応などができる。


書籍関係


React テスト応用、テストに悩む人へ

zenn.dev/tkdn/books/react-testing-patterns

React testing book

ReactコンポーネントとHooksのテストについての書籍。


この記事へ修正リクエストをする
JSer.info Slackに参加する