いわゆるファイルのプリフェッチとは、ページが正常にロードされた後、後でアクセスされる可能性のあるページのリソースをサイレントにプリロードすることです。実際、フロントエンド リソースのプリロードについては何も新しいことはありませんが、それを理解するプロセスは非常に興味深く、刺激的です。
最初のバージョンはシンプルで粗雑で少し面倒です
1. プリロードする必要があるさまざまな CSS と JS のインデックスを作成するコードは次のようになります。
<html> <head> <link rel="stylesheet" href="//su.yzcdn.cn/v2/build_css/stylesheets/wap/showcase_d0fbaaef124a8691398704216ccd469a.css"> ...其他需要预加载的css</head><body> <script src="//su.yzcdn.cn/v2/build/wap/common_08b03c7826.js" onerror="_cdnFallback(this)"></script> ...其他需要预加载的js</body> </html>
2. 各ページを開いたときに上記のページが読み込まれるように、各ページに iframe を追加します (通常は基本テンプレートを通じて追加されます)。上記のページの URL が https://xxx.com/common/prefetching.html であると仮定すると、各ページの下部に次のコード行があります:
<iframe src="https://youzan.com/common/prefetching.html" sytle="display:none;"></iframe>
Verification
特定のファイルがプリフェッチされているかどうかを確認するにはスキームが true 事実上、これは次の手順にすぎません: (ページ A は showcase_d0fbaaef124a8691398704216ccd469a.css を使用しますが、ページ B は使用しないと仮定します)
- Chrome ターミナルを開いたときにもキャッシュ機能を有効にしておく
- すべてクリアするローカル キャッシュ
- ページ B を開き、prefetching.html と添付のリソース ファイルがコンソールにダウンロードされているかどうかを確認します。 / ページ A を開いた後、Ctrl+R を押して更新します。予想どおり、次のような結果が表示されます。これは、これら 2 つの CSS ファイルがキャッシュから読み取られたことを示しています。 Command/Ctrl+R を使用してページを更新すると、次の結果が表示されます。 2 つの違いは、Command/Ctrl+R を使用すると、ブラウザーがキャッシュから静的ファイルを検索することです。このファイルが初めて要求されたときに取得されたキャッシュ制御情報によって、静的ファイルの有効期限が切れているかどうかが決まります。有効期限が切れていない場合は、if-modified-since、Etag、およびその他の情報が使用されます。サーバーからファイルを要求するためのリクエスト ヘッダーとして、ファイルが変更されていないとサーバーが判断した場合、HTTP コード 304 が返され、ブラウザはキャッシュを直接読み取ります。詳細については説明しません。「HTTP キャッシュ」と「HTTP/304 応答について」を参照してください。
- 操作手順:
Chrome ターミナルが開いているときでもキャッシュ機能を有効にします: Chrome ターミナルの設定でキャッシュを無効にする (DevTools が開いている間) のチェックを外します
すべてのキャッシュをクリアします: アドレスに chrome と入力しますbar: //settings/clearBrowserData 開いたら、[キャッシュされた画像とファイル] をチェックし、[閲覧データの消去] をクリックします
ブラウザの現在のキャッシュ リソース リストを表示します: chrome://cache/
2 番目のバージョンも、同じ例に従います
現在さあ、上記のファイルプリフェッチソリューションは効果的です。ただし、これは最も粗末な実験版であり、いくつかの問題があります:
prefetching.html 内の js が実行されると、必然的に大量の js エラーが発生します - 不快に見えます ~
- iframe を介してプリフェッチをロードします.html は、現在のページの関連リソースの読み込み速度に影響します
- prefetching.html は、ページが開かれるたびに読み込まれますが、最初に開いたときに内部の静的ファイルがキャッシュされているため、ダウンロードされません。何度もお願いは不要です。
- つまり、オンラインで使用するバージョンは次のとおりです:
1. すべてのページで実行される js があります:
// 打开一个iframe，下载之后页面可能需要的js/csssetTimeout(function() { var lastOpenTime = 0; var nowTime = (new Date()).getTime(); try { lastOpenTime = window.localStorage.getItem('staticIframeOpenTime'); } catch (e) {} if (lastOpenTime > 0 && (nowTime - lastOpenTime < 24 * 3600 * 1000)) { // 24小时打开一次iframe return; } var iframe = $('<iframe>').css('display', 'none'); iframe .attr('src', 'https://youzan.com/common/prefetching.html') .appendTo(document.body); try { window.localStorage.setItem('staticIframeOpenTime', nowTime); } catch (e) {}}, 3000);// 延时3秒钟加载prefetching.html 2. prefetching.html のリソースは、ダウンロードを許可する方法を見つけますが、ダウンロードは許可しません。基本的に、これらの css/js ファイルは他のタイプのファイルとしてロードされます。最後に、記事「実行せずに CSS/JavaScript をプリロードする」を参照すると、prefetching.html に js ファイルをロードするコードは次のようになります。プリロードされた js ファイルを実行せずにダウンロードするだけ、prefetching.html の読み込みを遅らせる、localstorage レコードの助けを借りて prefetching.html を 1 日 1 回だけロードすることで、バージョン 1 の 3 つの問題は基本的に解決されます。
効果と問題点
サイト全体でモバイルページを立ち上げてから、平均読み込み時間が0.15秒短縮されました。最初の画面時間のデータはありませんが、かなりの収入になるはずです
しかし、このバージョンのリリース後、ページのプリフェッチ中にアニメーションが一時停止することが判明し、最終的にはオブジェクトの読み込みによるものであることが判明しました (この具体的な理由は詳細には調査されていません)。ページは携帯電話でアクセスされ、基本的に Webkit カーネル (Image メソッド) なので、代わりに Image を使用してすべての JS をロードすることにしました。
3 番目のバージョン、完璧です
このバージョンでは、2 番目のバージョンの一時停止アニメーションの問題の解決に加えて、DNS プリフェッチも追加されています。この部分の背景とアイデアについては、私の他の記事「プリロード シリーズ」を参照してください。 １：DNSプリフェッチの正しい利用姿勢》。
<!DOCTYPE html> <html> <head> <?php // dns prefething here ?> <link rel="dns-prefetch" href="//youzan.com/"> ... <?php // css prefething here ?> <link rel="stylesheet" href="//su.yzcdn.cn/v2/build_css/stylesheets/wap/showcase_d0fbaaef124a8691398704216ccd469a.css"> ...</head> <body> <?php // js prefething here ?> <script type="text/javascript"> (function(){ window.onload = function () { var i = 0, max = 0, preloadJs = [ 'js文件路径'， ... ]; for (i = 0, max = preloadJs.length; i < max; i += 1) { new Image().src = preloadJs[i]; } }; })(); </script></body> </html> 上线后，丝丝润滑无痛无痒，完美
第四个版本，再进一步，可以做更多
注意哦，重点来咯！ 尽早加载css是减少首屏时间的关键（ 引申阅读 ）， 直接把css inline到html里 是个不错的方案。但是，这种方案的缺点是无法充分利用浏览器缓存。所以，我们尝试在现有的File Prefetching 的基础上，再进一步，让首次访问足够快（用css line），后续访问又能利用起浏览器缓存。
我们对一部分重点页面的css文件改用类似加载js的方式去加载，并在加载成功的回调里加一条cookie记录标示该css文件已经被下载。这样在后端输出html的时候，可以根据cookie的信息知道这几个css文件是不是已经在浏览器里cache住了。如果是则正常输出一个
标签。如果不是，说明用户是第一次访问这个页面，则直接把css文件的内容inline到html里以求最快出首屏。当然，也会出现从cookie上看客户端已经cache了某个css文件，但实际上没有的情况，由于这种情况下html里输出的还是一个link标签，并不会影响正常的流程。
相关代码大概是这样的，需要的朋友可以参考下：
var loadCss = function(key, url) { var image = new Image(); var date = new Date(); date.setTime(+date + 1 * 86400000); // 因为下载的不是图片，实际触发的是onerror事件 image.onload = image.onerror = function () { document.cookie = key + '=' + url.slice(url.indexOf('build_css')) + ';path=/;domain=.koudaitong.com;expires=' + date.toGMTString(); }; image.src = url;}preloadCss = { key1: '文件路径', key2: '文件路径2' ...}for (var key in preloadCss) { loadCss(key, preloadCss[key]);} 总结
在做 File Prefetching 的过程当中，每一个版本的优化都是不同的人在做的：
A起了个头 ->
B改进到能上线的标准 ->
发现有问题，C改进了它 ->
D又在这个基础上做出了最后一个版本。
这种感觉非常好：）
TODO
- 其实还有一类资源可以加到这个prefetching.html里，那就是常用的图片，不过我们还没这么做。
- 我们现在全部移动web页只使用一个prefetching.html，并还没有针对不同的条件进行针对性的的prefetching。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AMHTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AMhtmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AMHTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AMHTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
