เบราว์เซอร์ดาวน์โหลดอิมเมจ CSS ที่ไม่ได้ใช้หรือไม่
เช่น. ในกฎ CSS ที่ไม่ตรงกับองค์ประกอบใด ๆ
.nothingHasThisClass{background:url(hugefile.png);}หรือจะขึ้นอยู่กับเบราว์เซอร์?
คำตอบ:
สิ่งนี้จะขึ้นอยู่กับเบราว์เซอร์เนื่องจากเป็นวิธีที่พวกเขาตัดสินใจใช้ข้อมูลจำเพาะอย่างไรก็ตามในการทดสอบอย่างรวดเร็วที่นี่:
ไม่พวกเขาไม่ได้ดาวน์โหลดไม่ใช่อย่างน้อยใน Firefox, IE8 และ Chrome
วิธีง่ายๆในการทดสอบสิ่งนี้:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nonexistent {
background: url('index.php?foo');
}
</style>
</head>
<body>
<?php if(isset($_GET['foo'])) {
file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
</body>
</html>หากtest.txtเติมด้วย User Agent ของเบราว์เซอร์ภาพจะถูกดาวน์โหลด นี่ไม่ใช่กรณีของการทดสอบของฉัน
การทดสอบอย่างรวดเร็วพิสูจน์แล้ว
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"><!--
.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}
--></style>
</head><body>
<div class="hassomething"></div>
</body></html>ภาพที่ 2 tumblr_kxytwr7YzH1qajh4xo1_500.pngถูกดาวน์โหลด แต่ไม่ใช่ภาพอื่น สิ่งนี้ได้รับการพิสูจน์แล้วใน Chrome (เครื่องมือสำหรับนักพัฒนา) และ Firefox (Firebug)
Firefox และ Chrome (Ubuntu 9.10) ไม่ดาวน์โหลดรูปภาพสำหรับคลาส / รหัสที่ไม่ได้ใช้ใน DOM
ซึ่งอาจขึ้นอยู่กับทั้งแพลตฟอร์มและเบราว์เซอร์
บางครั้งก็ขึ้นอยู่กับความหมายของคำว่า "ไม่ได้ใช้" เบราว์เซอร์ที่แตกต่างกันให้คำจำกัดความแตกต่างกัน ตัวอย่างเช่นใน Firefox สไตล์ที่ใช้กับไฟล์<noscript>แท็กจะถือว่า "ไม่ได้ใช้" ดังนั้นภาพใด ๆ จะไม่ถูกดาวน์โหลด
Chrome 26 (อาจทั้งหมดไม่แน่ใจ) จะดาวน์โหลดภาพ CSS หากนำไปใช้กับไฟล์<noscript>องค์ประกอบแม้ว่าจะเปิดใช้งาน JS แล้วก็ตาม (ยังไม่ชัดเจนสำหรับฉันในทันทีว่าทำไมบางทีนี่อาจเป็นข้อผิดพลาด)
มันไม่ได้ดาวน์โหลดภาพ CSS นำไปใช้กับองค์ประกอบภายใน<noscript>องค์ประกอบแม้ว่า (แน่นอนว่านี่คือพฤติกรรมที่คาดหวัง)
CSS:
noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }HTML:
<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome. Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>ในกรณีนี้หากผู้ใช้เปิดใช้งาน JS ทั้ง always.png และ otherbg.png จะถูกดาวน์โหลดใน Chrome หากผู้ใช้ไม่ได้เปิดใช้งาน JS ระบบจะดาวน์โหลดเฉพาะ nojsonly.png ใน Chrome
ฉันใช้เทคนิคนี้ในการวัดระดับการเข้าชมจากผู้ใช้ที่ไม่ได้เปิดใช้งาน JS เนื่องจาก Google Analytics ทำให้เราล้มเหลวที่นี่ ฉันชอบใช้รูปภาพ CSS พื้นหลังมากกว่า<img...>แท็กปกติเพราะฉันทำงานภายใต้ทฤษฎี (ยังไม่ทดลอง) ที่ว่าบอทมีโอกาสน้อยที่จะคว้าภาพ CSS มากกว่า<img...>รูปภาพทำให้จำนวนผู้เข้าชมที่เป็นมนุษย์มีความแม่นยำมากกว่า
เบราว์เซอร์เกือบทั้งหมดไม่โหลด หากไม่ต้องการภาพก็จะไม่ดาวน์โหลด ใช้ firebug (ส่วนเสริมใน Firefox / Chrome) เพื่อดูเวลาในการโหลดทรัพยากร
ที่น่าสนใจคือ Chrome (อย่างน้อย) จะดาวน์โหลด unused.png ในตัวอย่างต่อไปนี้:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.unused {
background: url(unused.png) no-repeat;
}
.used {
background: url(used.png);
}
</style>
</head>
<body>
<div class="unused used">
hello world
</div>
</body>
</html>