样式中的url加载探疑

当一个项目多人维护，特别是接手别人的项目，而项目又在改之又改的基础上再改，我一直遵循，别人的样式我不动的原则，尽量不因为一时不察，导致整站或部分页面出现错位的现象，因些在修改样式与写样式时都是在原有的基础上往上加样式名来加样式，这样就会产生很多可能无用的样式，偶尔也会有去掉页面部分区域，导致样式中可能会有一块块的无用样式存在，当然如果只是一些样式无用，影响也不会有太大，有一次就看到很多带URL的background样式存在里面,当时就怀疑在文挡中没有对应样式名存在，而样式中又存在的带url的background的样式存在，那在运行时会不会去下载这些URL对应的文件了，于是就有了今天的探疑：

首先写一套下面这样的结构：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        *{padding:0;margin:0;}
        #testid{width:100px;height:50px;background:green;}
        .img0{width:349px;height:345px;background:url(images/boxon.png) no-repeat;}
        .img1{width:349px;height:345px;background:url(images/openbox.png) no-repeat;}
        .img2{width:349px;height:345px;background:url(images/prizegm.png) no-repeat;}
    </style>
</head>
<body>
<div class="img0">
</div>
<div class="img1">
</div>
<!-- <div class="img2">
</div> -->
</body>
</html>

很明显可以看出img2在文挡中是不存的，些时运行该HTML文件，在google下调试栏打开network,可以看到没有用到的url样式并不会去自动下载，图例如下：

所以在工作中遇到一些带URL的无用样式也没必要再提心吊胆啦，当然最好及时清理无用的样式，虽然不会加载url里的内容，但是还是会增大整个样式表的体积的，在时间允许的前提下还是及时清理无用样式吧。

同时在此是不是看到一种延时加载的处理方法了，对于一个网站的大的背景图片，是否可以在样式表里定义一些待调用的样式，当滚动条来到当前区域的时候再加上对应样式名去加载对应的图片。

此时又想到假设对应样式名加上了display:none属性，那它的URL会不会被下载了，于是又有了下面的结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        *{padding:0;margin:0;}
        #testid{width:100px;height:50px;background:green;}
        .img0{width:349px;height:345px;background:url(images/boxon.png) no-repeat;}
        .img1{width:349px;height:345px;background:url(images/openbox.png) no-repeat;}
        .img2{display:none;width:349px;height:345px;background:url(images/prizegm.png) no-repeat;}
    </style>
</head>
<body>
<div class="img0">
</div>
<div class="img1">
</div>
<div class="img2">
    <img src="images/haha.jpg">
</div>
</body>
</html>

测试发现，设为display:none的元素它的样式中的url还是会加载的，就.img2下的img对应的URL也都会被下载，图例如下：

可以看出，想通过显示隐藏来做做延时加载的意义不大。

posted @ 2015-10-21 10:09  ！win ！  阅读(390)  评论(0)  编辑  收藏  举报