<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul class="slats"> <li data-src="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" class="group"></li> <li data-src="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" class="group"></li> </ul> <script> if (document.getElementsByClassName && typeof console !== 'undefined') { // ie8支持console console.log(document.getElementsByClassName('group')) } if (document.querySelectorAll && typeof console !== 'undefined') { console.log(document.querySelectorAll('.group')) } if (document.querySelector && typeof console !== 'undefined') { console.log(document.querySelector('.group')) } var Utils = { q: function(query) { if (document.querySelectorAll) { // ie8支持 var res = document.querySelectorAll(query) } else { var d = document try { var a = document.styleSheets[0] // ie8获取不到style报错 } catch(e) { var a = d.createStyleSheet() } //var a = d.styleSheets[0] || d.createStyleSheet() a.addRule(query, 'f:b') for (var l = d.all, b = 0, c = [], f = l.length; b < f; b++) { l[b].currentStyle.f && c.push(l[b]) } a.removeRule(0) var res = c } return res } } var lazy = Utils.q('[data-src]') for (var i = 0; i < lazy.length; i++) { var source = lazy[i].getAttribute('data-src') var img = new Image() img.src = source lazy[i].insertBefore(img, lazy[i].firstChild) } </script> </body> </html>
在媒介查询中声明背景图片。这样只有那些需要用到背景图片的才会发送请求加载它
目前，基于Webkit的浏览器在下载好Web字体之前，是不会显示使用该Web字体格式化的文本的。这就意味着如果用户使用的是一个连接速度很慢的设备时，需要花费一段时间来显示。所以我们可以将@font-face的声明也放到媒体查询中去。这样做可以确保那些屏幕宽度低于断点的设备不会尝试下载字体
与有线连接相比，移动网络正遭受着显著增加的延迟和显著减少的带宽。因此，在考虑站点在移动网络上的性能的时候，通过采用内联的样式表和脚本来减少请求数目会更有意义
var testImg = document.createElement('img') testImg.onload = function() { var endTime = (new Date()).getTime() var duration = (endTime - startTime) / 1000 console.log(duration) } var startTime = (new Date()).getTime() testImg.src = 'http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif'