`
deng131
  • 浏览: 662459 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

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

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

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

相关推荐

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

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题,通过本文给大家分享浏览器执行JavaScript脚本加载与代码执行顺序,对浏览器执行javascript及执行顺序相关知识感兴趣的...

    静态HTML页面加载和解析

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

    讨论html与javascript在浏览器中的加载顺序问题

    一、html页面的详细加载过程是什么呢?页面元素在加载时的优先级是什么? 二、javascript的作用域、变量的作用域、不同脚本段之间的关系? 三、html页面的生命周期? 这些问题真的打中了我的死穴。不了解这些,我就...

    IE11浏览器

    来自微软官方的IE11安装包,安装过程...IE11也是首款能够支持W3C资源优先级规范的浏览,这一功能可以正确区分网页的优先顺序,从而减少网页的加载时间,支持HTML5链接预先同步和预计,可以提前预测用户要浏览的内容。

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

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

    浏览器加载、渲染和解析过程黑箱简析

    用 Fiddler 监控,在 IE6 下,资源下载顺序为: 很明显,下载顺序从上到下,文档流中...对于 js 运行,以及页面加载相关事件的触发,特别做了测试。在 Firefox 下,打开测试页面:[22:13:32.947] HTML Start[22:13:32.9

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

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

    浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方面的...

    JavaScript完全自学宝典 源代码

    1.4.html 使用JavaScript对网页中的内容进行验证。 1.5.html HMTL中调用.js文件。 1.6.html 使用“”标记,实现的滚动字幕效果。 1.7.html 使用JavaScript实现简单的字幕滚动。 1.8.html 使用...

    40道Vue常见面试题,内含详细讲解

    本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理...前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理; SEO

    30道Vue常见面试题,内含详细讲解

    本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理...前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理; SEO

    DOJO客户端性能优化

    浏览器加载dojo.js  dojo bootstrp code  dojo loader  (optionally) frequently used modules  2). dojo.js 激活Dojo对象, 动态的载入其他的module,如果模块已经载入,那么将不会再一次重新载入。  dojo ...

    JavaScript无阻塞加载和defer、async详解

    把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载js了,也就是...

    兼容FF,IE等浏览器的弹出层教程

    13.自定义窗口内容,支持HTML格式和jquery对象格式,不支持ajax动态加载内容 14.点击遮罩层触发事件,一般用于点击遮罩层时关闭窗体 15.窗口关闭时触发事件,用于窗体关闭后,对页面其他功能进行的操作 16.窗体显示...

    HTML5与CSS3基础教程(第8版)高清文字

    1.2 基本的HTML页面 2 1.3 标签:元素、属性、值及其他 4 1.4 网页的文本内容 7 1.5 链接、图像和其他非文本内容 8 1.6 文件名和文件夹名 9 1.7 URL 10 1.8 HTML:有含义的标记 13 1.9 浏览器...

    超实用的jQuery代码段

    8.9 动态加载HTML内容到标签页中 8.10 使用AJAX刷新异步提交表单 8.11 使用AJAX刷新上传图片 8.12 使用AJAX刷新验证PHP会话是否有效 8.13 在AJAX异步调用时显示加载指示器 8.14 在AJAX异步调用时处理JSON数据 8.15 ...

    为什么我们不建议用Table布局

    Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面的生成速度,让用户等待更久的时间。) Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。 (增加设计的复杂度,增加页面加载时间,增加HTTP会话数。) ...

    前端之前沿优化解决方案

    预渲染是在webpack打包后,使用隐藏浏览器爬取·首屏内容并写入HTML文件中,减轻服务器端压力。 Windowing: Windowing技术在呈现长数据列表时只显示一小部分行,减少组件重新呈现所需的时间和创建的DOM节点数量。 ...

Global site tag (gtag.js) - Google Analytics