热门标签 | 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立刻解析),就会被及时加载。


推荐阅读
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • PHP自学必备:从零开始的准备工作与工具选择 ... [详细]
  • 本文详细介绍了如何解决DNS服务器配置转发无法解析的问题,包括编辑主配置文件和重启域名服务的具体步骤。 ... [详细]
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中,iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表,包括编写脚本文件 `/usr/local/sbin/iptables.sh`,并使用 `iptables -F` 清空现有规则。此外,还深入探讨了 NAT 表的配置方法,帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
  • 全面解析JavaScript代码注释技巧与标准规范
    在Web前端开发中,JavaScript代码的可读性和维护性至关重要。本文将详细介绍如何有效地使用注释来提高代码的可读性,并探讨JavaScript代码注释的最佳实践和标准规范。通过合理的注释,开发者可以更好地理解和维护复杂的代码逻辑,提升团队协作效率。 ... [详细]
  • 该大学网站采用PHP和MySQL技术,在校内可免费访问某些外部收费资料数据库。为了方便学生校外访问,建议通过学校账号登录实现免费访问。具体方案可包括利用学校服务器作为代理,结合身份验证机制,确保合法用户在校外也能享受免费资源。 ... [详细]
  • 七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • 服务器部署中的安全策略实践与优化
    服务器部署中的安全策略实践与优化 ... [详细]
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社区 版权所有