`
全能骑士
  • 浏览: 68766 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML页面加载和解析流程

    博客分类：
  • FLEX
HTMLJavaScript浏览器CSS脚本 
阅读更多
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文件，重新渲染页面。
分享到：
| CSS参考手册
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML页面加载和解析流程详细介绍

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载...

    静态HTML页面加载和解析

    今天给大家分享一篇文章，关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。

    WebKit加载网页的流程.pdf

    WebKit加载网页的整个流程涵盖了网络通信、数据解析、资源管理、DOM构建和渲染等众多技术点。了解这一流程对于开发人员来说非常重要，它可以帮助他们创建出更快、更高效、用户体验更好的网页内容。而从实际的角度来...

    酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖

    本示例"酷炫html5页面加载loading动画效果demo"是基于原生JavaScript和CSS实现的，无需任何第三方库，简化了开发流程，提高了性能。 首先，我们来详细了解一下如何实现这种加载动画。在HTML结构中，我们需要在`...

    压测性能测试培训（2022-02-16 性能测试培训） 压缩文件包含 【JMeter基础培训、WEB网站优化、性能测试知识分享】

    HTML页面加载和解析流程 减少 HTTP 的请求数 添加Cache缓存 减少域名查询 网站图片的合并压缩 压缩css和js代码 去除页面中没有用到的CSS 优化页面元素加载顺序 避免使用css表达式 CSS和JS在页面中的位置 使用CDN...

    html加载顺序.zip

    本文将深入探讨HTML的加载流程，包括解析、渲染和执行的各个阶段。 一、HTML文档解析 1. **请求发送**：当浏览器接收到URL，它会向服务器发送HTTP请求，请求HTML文档。 2. **响应接收**：服务器返回HTML文件，...

    Android中解析html网页示例Demo

    总的来说，这个"Android中解析html网页示例Demo"涵盖了网络请求、HTML解析（如使用Jsoup）和数据展示的基本流程，对于初学者来说，这是一个很好的实践项目，可以帮助他们理解Android应用如何与网络交互并处理返回的...

    网页按顺序加载 最后加载js广告

    首先，我们来看网页的加载流程： 1. **DNS解析**：浏览器接收到URL后，会进行域名系统（DNS）解析，将域名转换为IP地址，以便找到服务器的位置。 2. **HTTP/HTTPS请求**：获得IP地址后，浏览器会发送一个HTTP或...

    js加载广告 页面加载广告

    JavaScript是一种强大的客户端脚本语言，广泛应用于网页和网络应用中，包括加载和显示广告。在网页设计中，尤其是在门户站点如搜狐这样的大型网站上，利用JavaScript加载广告是常见的做法，因为这种方式可以实现动态...

    HTML文档解析器 HTMLParser

    在浏览器加载HTML文档时，它会使用内置的解析器来解析这些标签，并根据它们构建DOM（文档对象模型）树，这个过程就是HTML解析。 HTMLParser是实现这个解析过程的软件组件。它的主要任务包括识别HTML标记、处理嵌套...

    Python-RequestsHTMLHumans的HTML解析器

    在Python的世界里，高效地解析和处理HTML文档是网络爬虫和网页自动化任务中的关键环节。`Requests-HTML`库正是这样一个工具，它结合了`requests`库的强大网络请求功能和自有的HTML解析器，为开发者提供了一种简单、...

    htmparser网页解析API文档

    2. **解析流程**： - 加载HTML：首先，需要将HTML内容加载到解析器中，可以是本地文件、网络资源或者字符串形式的HTML。 - 构建DOM树：解析器将HTML内容解析成DOM结构，每个HTML元素成为一个节点。 - 遍历DOM：...

    基于snaker-web的可视化流程页面纯html

    确保HTML页面加载速度快且资源占用少，可以使用懒加载技术，只在需要时加载部分流程图，或者对大量节点进行分页加载。此外，还可以利用缓存策略减少不必要的服务器请求。 7. **样式与主题定制** 纯HTML页面允许更...

    京东商城商品详情页面网页源码解析（静动态结合，包含CSS、HTML、Javascript、jQuery）

    这个资源，"京东商城商品详情页面网页源码解析"，为初学者提供了一个实践平台，涵盖了前端开发中的关键技术：CSS、HTML、JavaScript和jQuery。让我们深入探讨这些知识点。 首先，HTML（HyperText Markup Language）...

    网页上的类visio流程图制作源码

    5. **保存和加载**：将流程图数据序列化为JSON或其他格式，方便保存到服务器，下次加载时再反序列化显示。 6. **交互性**：支持图形的高亮、选中、连接线预览等，提供良好的用户体验。 7. **导出功能**：提供将...

    HTML5DOMDocument一个PHP的更好的HTML5解析器

    5. 转换回HTML：将修改后的DOM树转换回HTML字符串，可以方便地更新或生成新的HTML页面。 在进行网站爬取时，这个库可以帮助你准确地提取所需信息，无论是结构化的数据还是动态生成的内容。结合PHP的cURL库获取HTTP...

    页面加载锁屏

    当用户访问一个网页时，浏览器会解析HTML、CSS和JavaScript，并下载图片和其他外部资源。如果这些过程耗时较长，用户可能会看到部分加载的页面，或者能够点击尚未准备好的元素，导致体验不佳。为了解决这个问题，...

    Android WebKit HTML主资源加载过程

    这是网页加载的第一个也是最关键的资源。 - **子资源**：包括 CSS、JavaScript、图片等除 HTML 文件外的所有其他资源。这些资源会在 HTML 文件加载完成后按需加载。 本文主要聚焦于主资源的加载过程。 #### 主资源...

    ystep流程，扩展驳回功能，BootstrapTooltip动态加载html

    结合上述分析，我们可以得出，这个项目可能是在一个基于ystep的工作流系统中，利用BootstrapTooltip来增强用户交互体验，特别是在驳回流程节点时，通过动态加载HTML，提供更加详细和动态的提示信息。这样的实现需要...

Magicbox
Global site tag (gtag.js) - Google Analytics