TIL 01-script asyncとdefer
スクリプトasyncとdefer
head + script
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>
✓進行方式
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>短所
jsファイルが大きい場合やネットワーク速度が遅い場合は速度が遅い
body + script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>content</div>
<script src="index.js"></script>
</body>
</html>✓進行方式
短所
ウェブサイトがjsに依存すると,ユーザは意味のあるコンテンツを見ることができない.
head + asyn
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script asyn src="index.js"></script>
</head>✓進行方式
**パラレル要素は、ページ全体のダウンロード時間を短縮します.
短所
jsはまず閉じますので、queryselectorなどの未定義のjsがある場合があります.まず、jsはダウンタイムの順に動作するので、順序依存のjsがあるとエラーが発生します
👍🏻 head + defer
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="index.js"></script>
</head>✓進行方式
最良の方法はhead+deferの組合せである.
asynは前にjsを学んだことがあって、asyn/awaitで学んだことがあって、とても喜んであなたに会って、ほほほ
会社は新しいプロジェクトを始めるたびに、あるいは新しいapiを使うたびに、インポートを行います.今日初めてasynとdeferを使うことを知りました.😿
今日はまた私がどんなに井戸の中の蛙なのかを感じました呜呜...💪🏻
Reference
この問題について(TIL 01-script asyncとdefer), 我々は、より多くの情報をここで見つけました https://velog.io/@jjung-developer/210519-TIL-script-async와-defer의-차의점テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol