`
花花人
  • 浏览: 68225 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

小解HTML加载顺序

 
阅读更多

1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;

2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;

3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件;

4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;

5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;

6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;

7.浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;

8.Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;

9.终于等到了</html>的到来,浏览器泪流满面……

10.等等,还没完,用户点了一下界面中的换肤按钮,Javascript让浏览器换了一下<link>标签的CSS路径;

11.浏览器召集了在座的各位<div><span><ul><li>们,大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

http://digdeeply.org/archives/10031448.html

分享到:
评论

相关推荐

    HTML语言标签小解

    HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它的基本结构由一系列标签组成,这些标签告诉浏览器如何解析和展示网页内容。本篇将详细解释HTML语言的基础知识,包括文档结构、文本标签、图像...

    VisualC 实效编程 38 小解霸――VCD典型控制

    VisualC 实效编程 38 小解霸――VCD典型控制VisualC 实效编程 38 小解霸――VCD典型控制VisualC 实效编程 38 小解霸――VCD典型控制VisualC 实效编程 38 小解霸――VCD典型控制VisualC 实效编程 38 小解霸――VCD...

    实例35 小解霸

    7. **文件操作**:VCD文件通常存储在光盘上,需要了解文件系统和光盘读取的基本知识,以便正确加载和播放VCD。 8. **程序调试**:对于初学者来说,调试技巧也是必不可少的,通过调试可以发现并解决程序中的错误,...

    小解+优化GUI+最终版

    "小解+优化GUI+最终版"这个标题暗示了一个关于GUI改进的项目已经进入了最后阶段,可能是一个软件或应用的更新,重点在于提高用户界面的效率和美观度。 GUI优化通常涉及以下几个方面: 1. **界面设计**:优化GUI的...

    VC++ 小解霸 VCD典型播放控制

    VC++ 小解霸 VCD典型播放控制 VC++小解霸――VCD典型播放控制,模仿早期的Windows Media Player播放器,它只能播放DAT格式的文件 ,这种文件是VCD格式,因此这个播放器主要是用来播放VCD的,界面也挺老的,但很经典...

    编译器某些代码基本计算顺序小解

    在C语言中,运算符的顺序和结合性是理解代码执行的关键部分,特别是涉及到自增`++`和自减`--`操作符时。这里我们深入探讨一下标题和描述中提到的问题。 首先,代码`printf("%d\n", i++ * i++);`包含了两个自增操作...

    策略路由分析小解

    策略路由详细介绍,希望对大家有些帮助,敬请参考,谢谢大家支持!

    echo命令小解

    "echo命令小解" echo命令是一种常用的DOS命令,它主要功能简单点说就是开启或关闭批处理命令行显示在屏幕上。它是批文件的令,属于内部命令内部命令就是常驻于内存的命令,在任意路径下输入均执行。 echo命令的...

    div弹出层position属性小解

    ### div弹出层position属性小解 在网页布局与设计中,`position` 属性是 CSS 中一个非常重要的属性,它决定了元素如何在页面中定位。对于创建弹出层、模态框等交互式组件来说,正确理解并使用 `position` 属性至关...

    QTP小解(基础知识)

    【QTP小解——自动化测试基础】 自动化测试是软件测试领域的一种重要手段,它通过预设的脚本和工具来自动执行测试用例,从而节省人力、提高效率和测试覆盖率。QuickTest Professional(QTP)是一款由HP公司开发的...

    连接池小解

    【连接池小解】 连接池是现代Web应用中不可或缺的一部分,尤其在处理高并发和大量数据库交互场景下,它的作用尤为显著。连接池的核心概念在于有效地管理和复用数据库连接,从而提高系统的性能和稳定性。 在Java中...

    windows蓝屏错误代码小解

    如果系统无法加载特定文件(例如DLL文件),则会触发此错误。可能是文件损坏或缺失所致。 ### 18 0x00000012 无法找到文件 此错误代码表明系统无法找到指定的文件。可能原因是文件已被删除或路径不正确。 ### 19 ...

    java运行环境jre小解.doc

    - `java.exe`的查找顺序通常为:当前目录、父目录以及注册表`[HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\Java Runtime Environment]`中记录的位置。 #### 四、深入理解JVM 1. **JVM简介**: - JVM全称为Java ...

    viewDemo小解

    "viewDemo小解"这个项目旨在通过一个实际的Demo来深入理解View的工作流程,包括自定义View和ViewGroup的创建、measure、layout和draw等关键步骤。 一、自定义View 自定义View通常是为了实现特定的UI效果或者扩展...

    unix之AWK使用小解

    ### Unix之AWK使用详解 #### 一、AWK简介 AWK是一种强大的文本处理工具,在Unix和类Unix操作系统中广泛使用。它不仅能够高效地处理数据,还具备一定的编程能力,可以用来编写复杂的脚本。 #### 二、基本语法与...

    Invalidate() 的用法小解

    - **关键点**:通过打开对话框选择 BMP 文件,并读取文件头信息、颜色表等,最终将位图数据加载到内存中供后续使用。 - **代码示例**: ```cpp void CMySeeView::OnFileOpen() { // 打开文件对话框,获取 BMP ...

    JNI 小解

    5. **加载库并调用本地方法**:在Java代码中,使用`System.loadLibrary()`加载本地库,然后就可以通过Java对象调用本地方法了。 在实际应用中,JNI的使用场景很广泛。例如,在游戏开发中,为了提高性能,可能会选择...

    设计模式--抽象工厂之小解

    **设计模式——抽象工厂之小解** 在软件工程中,设计模式是一种被广泛采用的解决常见问题的经验总结,它们是经过验证的、可重用的解决方案。抽象工厂(Abstract Factory)设计模式是其中的一种创建型模式,它提供了...

    http小解总结

    HTTP的设计者在1989年3月提出了这项协议,旨在利用HTML(超文本标记语言)、HTTP作为传输协议以及URL(统一资源定位符)这三项技术,构建了一个全球性的、交互式的万维网(World Wide Web)。 HTTP的版本经历了从...

    html.baidu.rar

    JavaScript则负责交互功能,比如表单提交、事件监听、动态内容加载等。百度搜索首页可能有以下JS功能: 1. **自动完成**:当用户在搜索框输入时,显示相关搜索建议。 2. **焦点切换**:通过JavaScript实现元素间的...

Global site tag (gtag.js) - Google Analytics