reactjs / reactjs/react.dev

[Typo]: definitions of async/defer in the script tag documentation are incorrect

オープン 初心者向け
#7,328 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

type: typos
主要言語
JavaScript
スター
11.8k
フォーク
7.9k
平均マージ
1日 11時間
マージ済み PR(30日)
11

説明

Summary

Unless React has its own creative interpretation of the meanings of async and defer that are different from the DOM specification (per MDN), the descriptions for async and defer are confusing and misleading and may lead to runtime errors.

Page

https://react.dev/reference/react-dom/components/script

Details

The description for async confounds it with defer, but in fact async essentially cancels any kind of defer: the script will not block further parsing, but it will be executed as soon as it is available, there is no "deferring". This lets the browser execute it at its convenience, there is no longer any guarantee about when it runs other than "eventually": this can even be mid-parse!

defer, on the other hand, also doesn't block parsing by enqueueing the script to run after the page finishes parsing; but they are guaranteed to run before the DOMContentLoaded event. This is, actually, what is recommended for most scripts, enough that it is the default for script[type="module"]. It is canceled by async, as it removes the guarantee that the script will run only after parse is done. It only has an effect on src scripts, though, not inline.

It is, however, true that async is the best for performance, as there is no longer any execution time guarantees. It is also dangerous, as the DOM might not be available when the script runs: only (non-async) defer scripts have that guarantee.

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

https://react.dev/reference/react-dom/components/script の React DOM スクリプトドキュメントを開き、async と defer の説明を、リンク先の MDN DOM 仕様と比較します。実行タイミング、パース時の挙動、外部スクリプトへの適用可否を正確に区別できるように文言を更新し、そのうえでページがランタイムへの影響を明確に伝えていることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
documentation
issue の種類
ドキュメント
難易度
2/5
見積もり時間
1〜3時間
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
68/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。