浏览器加载和渲染分析
最近一直在做前端JS开发,为了更清楚的显示页面元素的加载顺序,动手写了一个程序,程序对页面中的每个元素都延迟5秒。
在IE6下查看loader.jsp这个页面,使用HttpWatch来检测页面元素的加载。从下面的图中可以看到加载顺序。
IE6首先加载了页面loader.jsp,
下载了主页面后,页面首先显示的是“红色测试文字”、“蓝色测试文字”几个字,但此时显示的是只是黑色字体,没有样式,因为样式还没有下载下来。
接下来页面中的标签是JS标签,属于嵌入文件,因此IE需要将其下载下来。这有两个文件,虽然IE6同时能够和同一个域 名的WEB
Server并发建立两个链接,但是此时并没有使用两个连接,而是使用一个连接,在下载完成后,接下来才下载另外一个文件。
因为IE6浏览器没有对JS的加载做优化,JS文件加载顺序决定解释执行顺序,JS包含了语法定义,在第二个文件里面的函数可能用到了第一个文件里面的变量和函数,IE6没有做判断,如果先下载的是第二个文件,此时就会发生解释错误。JS按先后顺序放好,IE依次下载进行解释。后面的函数覆盖前面的函数定义。
注意:IE6在同步加载执行(当然可以setTimeout异步执行,如:l3.js)JS的时候,不会去下载新的资源,就算JS已经下载完成,只是在本地解释执行,看图片蓝色箭头指向的时间间隔,就是本地JS执行的用去的时间。
在下载完成后,我们看到load1.js,load2.js,l3.js开始顺序执行。而此时字体的样式表和图片仍然没有下载下来。“红色测试文字”,“蓝色测试文字”字体还是黑色显示的。
IE6下面的CSS是并行加载的,在两个CSS文件加载完成后,可以看到 “红色测试文字”,显示为红色, “蓝色测试文字”显示为蓝色,l1.css和
l2.css完成后,l3.css样式还没有下载下来,此时IE使用已经下载到样式对上面的元素渲染了一遍,此时虽然“红色测试文字”,“蓝色测试文字”字体样式显示一样,只是颜色不同相同。第三个文件下载后,此时IE又重新对“红色测试文字”和“蓝色测试文字”进行渲染,“红色测试文字”和“蓝色测试文字”字体,大小变了。
接下来看到的是图片文件下载,此时看到的是两个图片同时开始下载,而且是下载完成后,立即在页面上开始显示,直到所有的图片下载完成。
经过以上的分析,推测IE下载或者渲染顺序可能如下:
IE6下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(但并不是说所有相关联的元素都已经下载完。)在下载过程中,如果遇到某一标签是嵌入文件,并且文件是具有语义解释性
的(例如:JS脚本),那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析,解析(JS中
如有重定义,后定义函数将覆盖前定义函数)过程中,停止页面所有往下元素的下载。
样式文件比较特殊,在其下载完成后,会用样式表对整个页面的进行渲染,下载完成一个渲染一个,后面的样式会覆盖前面的样式。l3.css覆盖了l1.css,l2.css的字体大小,l3.css渲染完成以后页面的“红色测试文字”和“蓝色测试文字”字体变小了。
Firefox 3的同一域名并发的连接是6个,如下图:
FF和IE6的渲染存在一些差别,
1、 CSS渲染,FF会把l1.css,l2.css,l3.css合并后再渲染整个页面。IE6会下载一个渲染一个。IE8和FF一样。
2、JS同步执行的时候都会禁止新的资源的下载。但是FF下载JS是并发的,解释执行和IE6一样是根据script标签顺序解释执行。
文件在网络传输上所花费时间。wait
= 服务器所花时间 + 网络传输时间
服务器所花时间我们可以用Thread.sleep(5000);来让其休息5s,如下图
由此大概可以计算出
5.01-10 = 0.01秒,这就是大概在网络上所花的时间。HTTP304表示没有变化用本地缓存文件所以除Thread.sleep(5000)服务器耗时外,其它服务器操作几乎可以忽略时间。整个页面的效果图,出来还有渲染时间,现在还没有测试最终效果,也就是从文件下载到本地,到最终渲染完成的时间。也没有更好的方式去测试。
- 大小: 115.9 KB
- 大小: 129 KB
- 大小: 11.1 KB
分享到:
相关推荐
浏览器加载、渲染和解析过程的黑箱分析,对于渲染,利用 Fiddler 将网速调慢,可以看到 css 下载后会马上渲染到页面,渲染和下载同步进行,需要的朋友可以参考下
各浏览器加载策略,ie6/7/8/9,firefox,chrom.同步模型,JS阻塞,JS执行策略 ,Inline Script,阻塞渲染,浏览器的优化
用于切换CSS功能的devtools扩展,以后开发人员查看页面/应用在浏览器中的渲染方式
主要介绍了在浏览器加载CSS 时防止影响页面渲染的方法,其中以非阻塞CSS加载字体的技术为重点讲解,,需要的朋友可以参考下
React框架拥有服务器渲染实现快速的页面加载和在浏览器中页面之间无缝转换
- 浏览器加载页面和渲染过程 - 性能优化 - Web 安全 本小节会从浏览器的加载过程开始讲解,然后介绍如何进行性能优化,最后介绍下 Web 开发中常见的安全问题和预防。 ----- ## 加载页面和渲染过程 可将加载过程...
今天给大家分享一篇文章,关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。
加载指标:秒开率; 稳定性指标:资源错误,JS报错,Crash,内存堆栈,接口报错等; 操作体验指标:响应延迟,卡顿 ,滚动流畅性 ,TTI(可...加载链路的优化:从访问url到页面呈现,整个加载渲染链路可以做优化的思路。
浏览器渲染页面的过程从耗时的角度,浏览器请求、加载、渲染一个页面,时间都花在以下五件事上:HTTP 请求及响应服务器响应客户端响应本文着重讨论第五部分,也就是浏
本人在公司做Vue项目的时候,一直苦于产品、客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的...
浏览器加载和渲染顺序 HTML页面加载和解析流程 减少 HTTP 的请求数 添加Cache缓存 减少域名查询 网站图片的合并压缩 压缩css和js代码 去除页面中没有用到的CSS 优化页面元素加载顺序 避免使用css表达式 CSS和JS在...
性能分析:通过Chrome DevTools的性能面板,可以录制和分析React应用的性能数据,找出渲染过程中的瓶颈。 实时编辑和预览:可以直接在浏览器中修改组件的props,并立即看到界面上的变化,这对于快速原型开发和调试...
最好用的Unity内嵌浏览器插件 Embedded Browser Unity v3.1.0 (1)可以将网页渲染到UI上 (2)支持CSS、HTML和JavaScript (3)可以用来Unity和JavaScript的通信 (4)可以控制网页的前进、退后、重新加载、控制...
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载...
7. 优化了浏览器收藏导入功能,可在导入时去除无效和冗余的数据,使导入的收藏更贴近用户需求。 1. 优化了浏览器双核选择逻辑,使浏览器双核切换更加智能。 2. 修复了因flash导致的静音问题。 3. 修复了部分站点无法...
该款维文浏览器具备传统浏览器的所有功能。... 在浏览维吾尔文网页时,浏览器渲染和加载网页速度快,可与使用市场主流浏览器打开普通网页的速度想媲美。更多的发现等待您的体验,欢迎您的热情评价。
首创BIPS浏览器安全防御体系,集合浏览器主动防御和金山云安全,安全防御更全面。猎豹浏览器具有首创的智能切换引擎,动态选择内核匹配不同网页,并且完美支持HTML5新国际网页标准,网页展现更炫酷,更动感,极速...
一、闪游浏览器2.50更新历史 新增:全新默认皮肤 新增:换肤功能(右上角的衣服按钮) 新增:离线登录功能(不联网也可本地登录并访问账户下的收藏夹等数据) 新增:把网页添加到桌面快捷方式(标签上右键) 新增:...