【响应式Web设计实践 #BOOK#】

时间 2019-12-18

标签响应 web 设计实践 book 栏目 HTML 繁體版

原文原文链接

<!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>

在媒介查询中声明背景图片。这样只有那些须要用到背景图片的才会发送请求加载它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'