`

浏览器加载显示html内容页面的顺序

阅读更多

我们经常看到浏览器在加载某个页面时,部分内容先显示出来,又有些内容后显示。那么浏览器加载显示html究竟是按什么顺序进行的呢?

其实浏览器加载显示html的顺序是按下面的顺序进行的:
1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

如果你的网页比较大,希望部分内容先显示出来,粘住浏览者,那么你可以按照上面的规则合理的布局你的网页,达到预期的目的。

本文来自CSS在线:http://www.csscss.org/xhtml/201025612.shtml

分享到:
评论

相关推荐

    页面加载顺序,loading巧妙解决

    页面加载顺序对于用户体验至关重要,因为它直接影响到用户首次看到网页内容的速度和形式。在网页开发中,浏览器遵循一定的规则来解析HTML、CSS和JavaScript文件,从而构建出完整的页面。本篇文章将详细探讨页面加载...

    浏览器的加载与页面性能优化

    开发者可以通过在HTML中添加`<link rel="dns-prefetch" href="//HOSTNAME.com">`标签,或者利用HTTP头`X-DNS-Prefetch-Control`来引导浏览器进行DNS预解析,从而进一步加速页面加载。 此外,CDN的合理部署也是提升...

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    浏览器执行JavaScript脚本加载与代码执行顺序是网页开发中至关重要的一环,因为它直接影响到网页的渲染和用户体验。本文主要探讨了两种关键的概念:JavaScript脚本的阻塞性和执行顺序。 1. JavaScript脚本的阻塞性...

    详解关于html,css,js三者的加载顺序问题

    这样,浏览器在解析完页面内容后才加载JavaScript文件,从而加快了页面内容的展示速度。 总结一下,HTML、CSS和JavaScript的加载顺序问题对于提高网页性能至关重要。合理的加载顺序和资源管理策略可以大大提升用户...

    静态HTML页面加载和解析

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

    html中js代码的加载顺序

    6. **脚本放置位置**:通常,推荐将JavaScript放在HTML文档的底部(`</body>`之前),这样可以让浏览器先渲染出页面内容,再执行脚本,提升用户体验。 7. **动态脚本插入**:通过JavaScript动态创建`<script>`元素...

    禁止浏览器缓存当前文档内容

    在网页开发中,浏览器缓存机制是为了优化加载速度,但是有时会导致问题,比如服务器端更新的内容无法及时反映到客户端。为了防止这种情况,可以通过设置HTTP响应头来禁止浏览器缓存当前页面。以下是三种常用的响应头...

    html加载顺序.zip

    2. **阻塞渲染**:对于`<link>`引入的CSS文件,浏览器会暂停HTML解析,直到CSS被加载,因为CSS是决定页面布局的关键。 3. **延迟执行**:`<script>`标签默认会阻塞HTML解析,直到脚本执行完成。若`async`或`defer`...

    页面加载中js 页面加载中js 页面加载中js

    在页面加载时,浏览器会按照HTML文档的顺序解析元素并执行遇到的JavaScript代码。如果JavaScript位于文档的头部,可能会阻塞页面的渲染,直到脚本执行完毕。因此,将脚本放在`<body>`标签底部或使用`async`或`defer`...

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

    12. **页面加载完成**:所有资源加载完毕后,浏览器显示"加载完成"的指示,例如滚动条出现,加载栏消失。 通过优化网页的加载顺序,特别是将非关键的JavaScript广告放在最后加载,我们可以显著提高网页的首屏加载...

    jquery微信浏览器阻止页面拖动.docx

    在微信浏览器中,有时我们需要阻止用户通过拖动页面来实现特定功能或保持页面的稳定性,尤其是在开发复杂的Web应用时。本文将详细介绍如何使用jQuery来防止微信浏览器中的页面拖动,以及如何禁用扫瞄器(浏览器)的...

    测试浏览器运行速度

    在这个场景中提到的工具就是"测试浏览器运行速度",它专门用于检测浏览器加载网页的具体环节,帮助我们定位性能瓶颈。 "HttpWatch Pro"是一款强大的浏览器性能测试工具,正是标题中提及的解决方案。该软件能够集成...

    浏览器兼容性常见问题

    结果是所有浏览器均显示了BIG5,这意味着浏览器遵循了HTML4.01规范中关于字符编码的优先级顺序。 **2.4 各浏览器默认编码格式** 如果没有设置任何字符编码信息,各浏览器会使用它们各自默认的编码格式。例如,页面...

    html中嵌入js执行顺序_html中嵌入js执行顺序_

    - `async`:添加了`async`属性的脚本会异步加载,不会阻塞HTML解析,但执行顺序是不确定的,一旦脚本加载完成,就会立即执行。 - `defer`:这个属性同样使脚本异步加载,但它保证了脚本在HTML解析完成后、...

    Chrome浏览器调试教程

    通过本文的学习,我们不仅了解了Chrome浏览器的基础知识及其下载安装流程,还深入探讨了浏览器加载HTML页面的过程以及如何利用Chrome开发者工具进行高效调试。掌握这些技能对于前端开发人员来说至关重要,能够显著...

    基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

    通常情况下,`onbeforeunload`事件可以用来阻止页面的卸载,向用户显示一个确认对话框询问是否离开当前页面,这对于防止用户因误操作而丢失未保存的信息非常有帮助。然而,在这里,我们更关注于如何利用这些事件来...

    浏览器的工作原理-现代网络浏览器幕后揭秘

    资源部分涉及浏览器如何使用各种资源,包括JavaScript、图像、字体等,来丰富页面内容。浏览器需要有效地管理和使用这些资源,以提供流畅的用户体验。 综上所述,浏览器是一个复杂的软件,它的背后有着大量的技术...

    大图图片浏览器

    `picLoad.html` 可能是用来嵌入和运行Flash内容的HTML页面,允许浏览器加载并执行`picLoad.swf`文件。 `map.jpg` 和 `map2.JPG` 是两张图片文件,它们可能被用作示例图片或者作为应用中的地图图片。这些图片可能...

    解决htmlcanvas手机无法截图或者截图不全的问题

    4. **异步加载内容**:若页面包含异步加载的图片或其他资源,html2canvas可能在这些资源未完全加载时就开始截图。 5. **跨域问题**:如果HTML元素中包含跨域的图片,出于安全考虑,浏览器不会允许html2canvas访问...

Global site tag (gtag.js) - Google Analytics