記事のディレクトリ
読み込まれる画像が多すぎたり大きすぎたりすると、ページの読み込みが遅くなります。画像が多すぎるとサーバーへのリクエストが多すぎ、画像が大きすぎるとリクエストごとに時間がかかり、ユーザーが長時間待機することになります。
1.多数の画像読み込み最適化ソリューション
1.画像サービスとアプリケーションサービスを分離する（アーキテクトの観点から考える）
サーバーにとって、画像は常に最も消費するシステムリソースです。画像サービスとアプリケーションサービスが同じサーバーに配置されている場合、画像のI / O負荷が高いため、アプリケーションサーバーが簡単にクラッシュします。ウェブサイトに多数の画像を表示する読み書き操作を行う場合は、画像サーバーの使用をお勧めします。
ブラウザには、同じドメイン名のリソースに対する同時リクエストの同時リクエスト数に制限があり、通常は2〜6であり、制限を超えるリクエストはブロックされます。一部のメインストリームブラウザにはHTTP1.1とHTTP1.0があります。最大数同時接続の数を図に示します
2.画像圧縮方式
一部のサードパーティソフトウェアを使用して圧縮できます。圧縮後に解像度が変更されることはなく、肉眼が歪むこともありません。
プロジェクトで使用される画像は基本的に圧縮されてからアップロードされます。
3.画像の遅延読み込み
画像の遅延読み込みとは、ページレンダリングプロセス中に画像が一度に読み込まれるのではなく、必要に応じて読み込まれることを意味します。たとえば、スクロールバーが特定の位置にスクロールすると、イベントがトリガーされて画像が読み込まれます。 。
リフローを最適化するために、最初にプレースホルダーを設定できます
実現計画1
document.documentElement.clientHeight//获取屏幕可视区域的高度
document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
element.offsetTop//获取元素相对于文档顶部的高度
clientHeight + scroolTop> offsetTopの場合、画像は表示領域に入り、要求されます。
写真を借りる：元のリンク
コード：
<script>
var imgs = document.querySelectorAll('img');
//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetTop;
}
return T;
}
function lazyLoad(imgs) {
var H = document.documentElement.clientHeight;//获取可视区域高度
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
lazyLoad(imgs);
}
</script>
実施計画2
getBoundingClientRect()//获取元素的大小及位置
下にスクロールすると、bound.topの値はどんどん小さくなります。つまり、画像と表示領域の上部との間の距離もどんどん小さくなります。したがって、bound.top == clientHeightの場合、これは次のことを意味します。土壌パッチこれから視覚野に入ります。スクロールしている限り、画像は視覚野に入るので、リソースをリクエストする必要があります。つまり、bound.top <= clientHeightの場合、画像は表示領域にあります。
コード：
var imgs = document.querySelectorAll('img');
//用来判断bound.top<=clientHeight的函数，返回一个bool值
function isIn(el) {
var bound = el.getBoundingClientRect();
var clientHeight = window.innerHeight;
return bound.top <= clientHeight;
}
//检查图片是否在可视区内，如果不在，则加载
function check() {
Array.from(imgs).forEach(function(el){
if(isIn(el)){
loadImg(el);
}
})
}
function loadImg(el) {
if(!el.src){
var source = el.dataset.src;
el.src = source;
}
}
window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
check();
}
4.小さな写真がたくさんあるとき
スプライト、フォントアイコン、base64などを使用して、接続数を効果的に減らすことができます
5.http2は接続制限を解決します
http2には、サイトへの接続が1つしかありません。各リクエストはストリームであり、各リクエストは複数のバイナリフレームに分割されます。異なるストリームのフレームをインターリーブして多重化を実現できます。これは接続制限の問題を解決します
2つ目は、画像が大きすぎて最適化プランを読み込めないことです。
遅い送信とレンダリング
- フォトアルバムなどの場合はプリロードできます。現在の画像を表示するときは、前後の画像をロードしてください。
- ロードするときは、最初に非常に高い圧縮率のサムネイルをロードしてユーザーエクスペリエンスを向上させ、クリックしてから、またはロード後にクリアな画像を表示できます。
- プログレッシブjpegを使用すると、ユーザーエクスペリエンスが向上します。
参照記事
ベースラインJPEG
プログレッシブJPEG
保存方法が異なります
- 表示領域が画像の実際のサイズよりも小さい場合は、最初にサーバー上で適切なサイズに圧縮できます。
この記事へのリンク：https：//blog.csdn.net/qq_39903567/article/details/115290905