著者: MoeJue(xxx@example.com)

ネット速度の速遅による違いについて

ネットワークの普及に伴い、ユーザーは応答速度の速遅をますます重視するようになっています。ウェブサイトが速ければ速いほど、ユーザーの定着率とコンバージョン率も高まります。 簡単に言えば、スピードアップが重要です！ウェブサイトの速度に影響を与える要因はたくさんあります。例えば………………….

真面目な話は私のスタイルではありません。さて、私のパフォーマンスをご覧ください。 アイデアの起源： 最初は純粋なCSSで実装することを考えました。背景画像をbase64エンコードしてbackground-imageに直接配置すれば、背景画像がウェブページと一緒に読み込まれる効果が得られるだろうと。

ステップ1： まず、事前に準備した素材画像を処理し、水着と水着のスカートを脱がせます ステップ2： 新しいHTMLファイルを作成します ステップ3：

完了。。 すると問題が見つかりました。私の背景画像ファイルサイズが12MBに達していたため、エンコード後の文字列が大きすぎ、ウェブページの読み込みが重く遅くなり、まったくユーザー体験がありませんでした。 さらに、この方法で読み込まれた背景画像は突然表示され、唐突すぎて効果が良くありませんでした。

その後、変更しました： CSS+JavaScriptで実装することにしました。background-imageで背景画像を直接読み込むことで、徐々に表示される効果が得られ、背景画像の読み込みが完了した後、JSで動的に画像を挿入します。

window.onload = function(){ var img=new Image(); img.src=‘裸体.jpg’; if(img.width==0){ alert(‘图片加载失败’) }else{ document.getElementById(“泳衣”).style.backgroundImage=“url(泳衣.png)”; document.getElementById(“泳裙”).style.backgroundImage=“url(泳裙.png)”; } }

思わず一言漏らしました。「なんてひどいネットワークだ、遅すぎて人物画像の服すら読み込めないなんて！」

この記事は2020-11-07に阿珏酱のBlogで公開され、最終更新日は2025-08-15です

著者: MoeJue(xxx@example.com)

HTML5は、World Wide Webのコア言語であり、標準汎用マークアップ言語を応用したハイパーテキストマークアップ言語（HTML）の5回目の大幅な改訂版です。
1999年以降、HTML 4.01は大きく変化しました。今日では、HTML 4.01の一部の要素は廃止され、これらの要素はHTML5で削除または再定義されています。現代のインターネットアプリケーションをより良く扱うために、HTML5では多くの新しい要素と機能が追加されました。例えば、図形の描画、マルチメディアコンテンツ、より良いページ構造、より良いフォーム処理、そしてドラッグ＆ドロップ要素、ジオロケーション、ウェブアプリケーションキャッシュ、ストレージ、ウェブワーカーなどのいくつかのAPIが含まれます。

タグ

説明