1. <div id="11111"></div>

    1. <div id="11111"></div>

      1. <div id="11111"></div>

        协议相对 URL

        日期: 标签:网页设计 19 条留言
        如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

             在HTML中,如果想引用图片,通?;崾褂美嗨埔韵碌拇耄?/p>

        <img src="http://www.szeverich.net.cn/logo.png" alt="" />

             如果将以上代码改成这样,你觉得图片还能正常显示吗?

        <img src="//www.szeverich.net.cn/logo.png" alt="" />

             实际上这是可行的,省略URL的协议声明,浏览器照样可以正常引用相应的资源,这项解决方案称为protocol-relative URL,暂且可译作 协议相对 URL。那这么写有什么好处呢?

             如果当前的页面是通过HTTPS协议来浏览的,那么网页中的资源也只能通过HTTPS协议来引用,否则IE浏览中就会出现"页面同时包含安全和非安全的项目"的警告信息:

        This Page Contains Both Secure and Non-Secure Items

             如果使用协议相对 URL,无论你是使用HTTPS,还是HTTP访问页面,浏览器都会以与你相同的协议请求页面中的资源,避免弹出这样的警告信息,同时可以节省5字节的数据量,何乐而不为呢?维基百科也全面启用了这项技术,可以看看他们的网页源代码。

             同样,只要涉及到链接,我们都可以使用协议相对 URL:

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
        <link rel="stylesheet" href="//www.szeverich.net.cn/style.css" />
        <a href="//www.szeverich.net.cn/">Ludou</a>

             我们也可以在css中使用协议相对 URL:

        .logo { background: url(//www.szeverich.net.cn/logo.png); }

             需要注意的是:在IE7 / IE8中,使用 <link> 或者 @import 来引用样式表时,会出现样式表文件被下载两次的情况。除了这点,协议相对 URL都是可以正常工作的。

        参考资料
             The protocol-relative URL
             Why you need protocol-relative URLs *now*

        -- 完 --

        本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
        原文出处:露兜博客 http://www.szeverich.net.cn/the-protocol-relative-url.html
        露兜
        kaapass@outlook.com  QQ 825533758

        业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

        19 条留言

        点此留言
        1. 这两天

          呵呵,谢谢了!

        2. 哼哼猪

          兜大5字节也不放过,厉害啊

        3. Ludou

          @哼哼猪 5字节乘以百万那就不得了了。

        4. 哼哼猪

          @Ludou 响应兜大号召,替换掉了209处,再加上不计其数的表情,还是值得做下的,感谢!

        5. heasily

          对,谷歌就是用的这种写法。请问一下,WORDPRESS如何获取指定ID用户下的所有文章?

        6. Ludou

          @heasily WP_Query的author参数
          http://codex.wordpress.org/Class_Reference/WP_Query#Author_Parameters

        7. ICU路

          这个…..有意思么???

        8. Ludou

          @ICU路 其实很多东西都没什么意思

        9. Ludou

          @Ludou 辅导费

        10. 向日葵媒体设计

          新技术,学习了!

        11. Ludou

          @向日葵媒体设计 老久就有了,翻译的文章还是2010年的

        12. 向日葵媒体设计

          @Ludou 反正我是学到新的东西了~

        13. fukr

          学习了

        14. 山姆

          这种优化文,我最爱看了。。。。

        15. Tokin

          原来还能这样弄,有空我也把我的站给改了

        16. Mouse

          其实在静态化以后,是没有什么区别的。就像我们讨论过的php里边变量长度一样。aaaa和a,在编译过后数据的传输量是一样的。

        17. Ludou

          @Mouse 这涉及到html、css等文件的大小。主机的流量跟html、css的大小是有关系的。

        18. Ludou

          @Mouse 另外,本文未涉及到任何动态内容,只是URL的书写形式而已。

        19. lordroert

          结果就是:虽然省略了5个字符,但ie7/8下会出现加载两次的问题,这样值得做吗?

        发表留言

        可以挣钱的游戏 660| 140| 863| 372| 545| 745| 985| 226| 782| 102| 283| 136| 732| 204| 977| 797| 723| 774| 811| 396| 514| 717| 158| 375| 217| 394| 676| 354| 518| 249| 946| 940| 107| 411| 524| 461|