热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【原】HTML页面元素加载顺序研究报告(5)----Script标签在Firefox下对背景图片的影响

在上一节中发现,背景图片似乎还有些需要研究的地方。代码:<!DOCTYPEhtmlPUBLIC-W3CDTDXHTML1.0TransitionalENh

在上一节中发现,背景图片似乎还有些需要研究的地方。

代码:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>测试图片加载顺序title>
        <link rel="stylesheet" href="css/style.css" />
        <script src="script/main.js">script>
    head>
    <body>
        <div id="div1"><img src="images/Div1.jpg" />div>
        <div id="div2"><img src="images/Div2.jpg" />div>
        <div id="div3"><img src="images/Div3.jpg" />div>
        <div id="script1">div>
        <div id="script2">div>
        <div>
            <div id="cssContainer1">
                <div id="cssContainer2" style="background-image:url('images/Css2.jpg')">div>
                <div id="cssContainer3">div>
                <div id="cssContainer5">div>
            div>
            <div id="cssContainer4" style="background-image:url('images/Css4.jpg')">div>
            <div id="div4"><img src="images/Div4.jpg" />div>
        div>
        <style>
        #cssContainer5{
        background-image:url("images/Css5.jpg");
        }
        style>
        <div id="div5"><img src="images/Div5.jpg" />div>
        <div id="div6"><img src="images/Div6.jpg" />div>
        <div id="div7"><img src="images/Div7.jpg" />div>
        <div id="div8"><img src="images/Div8.jpg" />div>
        <div id="div9"><img src="images/Div9.jpg" />div>
        <div id="div10"><img src="images/Div10.jpg" />div>
        <div id="div11"><img src="images/Div11.jpg" />div>
        <div id="div12"><img src="images/Div12.jpg" />div>
        <style>
        #cssContainer1{
            background-image:url("images/Css1.jpg");
        }
        style>
    body>
html>

style.css文件:

#cssContainer1{
    background-image:url("../images/Css5.JPG");
}
#cssContainer3{
    background-image:url("../images/Css3.JPG");
}
IE7+HttpWatch:
image 

IE的表现很正常,两个Script标签实际没有作用。背景图片在最后加载,也是按照背景图片所在页面位置的先后顺序进行加载。

FF3.0+Firebug:

image

两个Script标签影响了背景图片的加载顺序,这用之前的理论也可以解释。但问题出在Css5图片被加载了两次!也就是由于第一次加载Css5.jpg时,由于后来被Css1.jpg所覆盖,并没有被缓存下来,第二次依然需要加载Css5.jpg。

最后一段代码:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>测试图片加载顺序title>
        <link rel="stylesheet" href="css/style.css" />
        <script src="script/main.js">script>
    head>
    <body>
        <div id="div1"><img src="images/Div1.jpg" />div>
        <div id="div2"><img src="images/Div2.jpg" />div>
        <div id="div3"><img src="images/Div3.jpg" />div>
        <div>
            <div id="cssContainer1">
                <div id="cssContainer2" style="background-image:url('images/Css2.jpg')">div>
                <div id="cssContainer3">div>
                <div id="cssContainer5">div>
            div>
            <div id="cssContainer4" style="background-image:url('images/Css4.jpg')">div>
            <div id="div4"><img src="images/Div4.jpg" />div>
        div>
        <style>
        #cssContainer5{
        background-image:url("images/Css5.jpg");
        }
        style>
        <div id="div5"><img src="images/Div5.jpg" />div>
        <div id="div6"><img src="images/Div6.jpg" />div>
        <div id="div7"><img src="images/Div7.jpg" />div>
        <div id="div8"><img src="images/Div8.jpg" />div>
        <div id="div9"><img src="images/Div9.jpg" />div>
        <div id="div10"><img src="images/Div10.jpg" />div>
        <div id="div11"><img src="images/Div11.jpg" />div>
        <div id="div12"><img src="images/Div12.jpg" />div>
        <style>
        #cssContainer1{
            background-image:url("images/Css1.jpg");
        }
        style>
    body>
html>

粗看这里与第二节研究背景图片加载顺序时没什么不同,没有Script标签,背景图片会在最后按顺序加载。

FF3.0+Firebug:

image

实际Css图片却有一部分在前面加载了!仔细看,原来在head里有一对Script标签!Firefox竟然连头部的Script标签都不放过!只要页面里有Script标签,不管在哪里,Firefox都会按照自顶向下的深度优先的顺序加载图片,而同级的图片中,内嵌图片的加载权重高于背景图片。可以把这个过程当做是Firefox在一点一点展开页面,看到一点展开一点,而当Firefox展开到cssContainer1这个Div的时候,在最后声明的背景图片还没有被Firefox发现,图片就不会被加载,而写在前面的以及写在外面的(外部的Css会在下载完就由Firefox立刻解析),就会被及时加载。


推荐阅读
  • 本文详细介绍了在Windows系统中如何配置Nginx以实现高效的缓存加速功能,包括关键的配置文件设置和示例代码。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本周三大青年学术分享会即将开启
    由雷锋网旗下的AI研习社主办,旨在促进AI领域的知识共享和技术交流。通过邀请来自学术界和工业界的专家进行在线分享,活动致力于搭建一个连接理论与实践的平台。 ... [详细]
  • 我的读书清单(持续更新)201705311.《一千零一夜》2006(四五年级)2.《中华上下五千年》2008(初一)3.《鲁滨孙漂流记》2008(初二)4.《钢铁是怎样炼成的》20 ... [详细]
  • OBS Studio自动化实践:利用脚本批量生成录制场景
    本文探讨了如何利用OBS Studio进行高效录屏,并通过脚本实现场景的自动生成。适合对自动化办公感兴趣的读者。 ... [详细]
  • 本文详细介绍了在 CentOS 系统中如何创建和管理 SWAP 分区,包括临时创建交换文件、永久性增加交换空间的方法,以及如何手动释放内存缓存。 ... [详细]
  • 对于初学者而言,搭建一个高效稳定的 Python 开发环境是入门的关键一步。本文将详细介绍如何利用 Anaconda 和 Jupyter Notebook 来构建一个既易于管理又功能强大的开发环境。 ... [详细]
  • Beetl是一款先进的Java模板引擎,以其丰富的功能、直观的语法、卓越的性能和易于维护的特点著称。它不仅适用于高响应需求的大型网站,也适合功能复杂的CMS管理系统,提供了一种全新的模板开发体验。 ... [详细]
author-avatar
这个昵称能用嘛
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有