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


    <!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'
  • 相关阅读:
    shell十三问?
    OS + Linux nmon / nmon analyser / nmon_analyser_v52_1.zip
    nGrinder windows agent / linux agent
    java Base64
    SearchServer Elasticsearch Cluster / kibana
    db mysql / mysql cluster 5.7.19 / my.cnf / thread_pool_stall_limit
    Mininet与真实网络链接的方法
    Install ProcessMaker 3.1 or 3.2 in CentOS/RHEL 7
    软件版本GA,RC,alpha,beta,Build 含义
    paper-9-Research and Implementation of MultiPath TCP on Mobile Smart Deviceses
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3485750.html
Copyright © 2020-2023  润新知