浏览器中图片的请求情况

什么什么什么？

已于 2022-06-06 17:30:38 修改

阅读量711

点赞数

分类专栏：前端文章标签： javascript 前端 css

于 2022-05-25 16:44:05 首次发布

本文链接：https://blog.csdn.net/weixin_44748107/article/details/124490448

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

浏览器渲染页面顺序

浏览器渲染

浏览器通过网络请求，获取到请求页面；
上从到下开始解析页面，生成DOM树和CSSOM树；
（这两个树的生成可以同步进行，当解析页面遇到<link>标签时，就会加载直接加载link标签，生成CSSOM树；
遇到<script>标签则停止DOM树和CSSOM树的加载，等到js代码执行完，再继续加载DOM树和CSSOM树；
等到DOM树和CSSOM树加载完成后，就开始构建渲染树。
最后，对页面进行布局、绘制

浏览器中图片的请求情况（本文以Google浏览器为例子）

不管如何引入，如果是重复引用一个图片都只会请求一次

在html中引入，`<img src="xxx" />`

重复请求情况

<img src="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655975129&t=166bb67bd62967b96cb6e550c9a3fe3d" />  
 // 首次请求图片时，浏览器会查一遍缓存，发现没有该图片的缓存，所以会向发起图片请求，然后将图片缓存起来
<img src="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655975129&t=166bb67bd62967b96cb6e550c9a3fe3d" /> 
 // 第二次请求时，浏览器会先查一遍缓存，直接用缓存中的图片

用display:none的情况

<img style=“display: none;” class="img-one" src="https://baidu.com/img1.png" />  
// 在Google浏览器中，会直接请求图片

在css中引入，`background-image:url('imgUrl')`

重复请求情况
两个div的背景图片链接一样，用的是同一个，所以浏览器没有重发请求


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>hello world</title>
<style>
  .img{
    width: 200px;
    height: 200px;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655975129&t=166bb67bd62967b96cb6e550c9a3fe3d');
  }
  .img1{
    width: 200px;
    height: 200px;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655975129&t=166bb67bd62967b96cb6e550c9a3fe3d');
  }
</style>
</head>
<body>
  <div class="img"></div>
  <div class="img1"></div>
</body>
</html>

未被使用请求情况
css属性未被使用时，图片不会加载


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>hello world</title>
<style>
  .img{
    display: none;
    width: 200px;
    height: 200px;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655975129&t=166bb67bd62967b96cb6e550c9a3fe3d');
  }
  .img2{
    width: 200px;
    height: 200px;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655976272&t=ddbc2cc42acbbdad8c3f0d46206cb206');
  }
</style>
</head>
<body>
  <div class="img"></div>
</body>
</html>

display：none
disoplay为none时，图片也不会加载


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>hello world</title>
<style>
  .img{
    display: none;
    width: 200px;
    height: 200px;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655975129&t=166bb67bd62967b96cb6e550c9a3fe3d');
  }
  .img2{
    width: 200px;
    height: 200px;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655976272&t=ddbc2cc42acbbdad8c3f0d46206cb206');
  }
</style>
</head>
<body>
  <div class="img"></div>
  <div class="img2"></div>
</body>
</html>

在js中引入

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <style></style>
    <script>
        window.onload=function () {
            var boxDom = document.getElementById('box')
            // 创建一个img元素引入
            var img = document.createElement("img");
            img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655995650&t=50fe8b4e89d901518bc750f8b4cdb80f';
            boxDom.appendChild(img);

			// new一个Image对象
            var newImage = new Image();
       		newImage.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655995650&t=50fe8b4e89d901518bc750f8b4cdb80f';
        	boxDom.appendChild(newImage)
        }
    </script>
</head>

<body>
    <div id="box"></div>
</body>

</html>

未被使用的情况
创建了一个Image对象，但是没有引入页面，会缓存

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <script>
        window.onload=function () {
        // 该图片被缓存
        var newImage = new Image();
       	newImage.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655995650&t=50fe8b4e89d901518bc750f8b4cdb80f';
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

预加载&懒加载

预加载：在页面生成前，提前加载图片，等到图片需要用到的时候就不需要在加载了；
懒加载：在页面生成后，等到需要用到图片的时候，在对图片进行加载；

预加载的方法

dom：在<img>标签中，将display设为true
js：用new Image（）方法，将需要的图片先缓存下来
- img：img标签的loadind =“ eager”（不推荐，兼容性不好）

懒加载的方法

dom：通过页面监听，当滑动到指定位置时再加载图片
css：通过赋值不同的css样式，达到懒加载的效果。因为css 中的background：url()，当样式未被使用或是display：noe时，不会立刻加载图片
img：img标签的loadind =“lazy”（不推荐，兼容性不好）

什么什么什么？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器中图片的请求情况

图片预加载在页面中图片的引入方式有以下几种<img src="xxx" />，用src直接引入；backgroud:url('xxx')，在css中当背景；const img = new Image('xxx'); img.src = xxx，在js中动态生成图片标签浏览器渲染页面顺序............
复制链接

扫一扫