关于网页加载和渲染的过程,在网络上的讨论并不多。可能是因为这个过程比较复杂,而且浏览器执行的速度太快,目前还没有发现什么比较好的工具可以清楚的看到浏览器解析网页的每一个过程。通过firedug和httpWatch可以看到浏览器的http请求,但是对于浏览器如何paint和flow处理html元素,我们仍然是不得而知。“flow”这个词借鉴于reflow,表示浏览器第一次加载网页的过程。在网络上搜索了一下,学习如下。
关于浏览器加载网页过程的有趣视频
可以参见:http://www.aoao.org.cn/blog/2008/05/reflow/ (形象化的reflow)。这个视频展现了网页加载的过程,看着比较有趣。要是可以更加形象化,就更好了,可以帮助我们书写更好的提高网页加载速度的代码。
浏览器内核
不同的浏览器内核,对于网页的解析过程肯定也不尽相同。http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php 一文对各种浏览器的页面渲染引擎进行了简介。目前主要有基于
(1)Trident页面渲染引擎 –> IE系列浏览器;
(2)Gecko页面渲染引擎 –> Mozilla Firefox;
(3)KHTML页面渲染引擎或WebKit框架 –> Safafi和Google Chrome;
(4)Presto页面渲染引擎 –> Opera
详细的介绍可以参见原文。
浏览器解析网页的过程
http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html 浏览器加载和渲染原理分析一文中通过一定的方法,推断了浏览器加载解析网页的顺序大致如下:
1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的;
2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完);
3. 在下载过程中,如果遇到某一标签是嵌入文件,并且文件是具有语义解释性的(例如:JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载,并且在下载后进行解析,解析(JS、CSS中如有重定义,后定义函数将覆盖前定义函数)过程中,停止页面所有往下元素的下载;
4. 样式表文件比较特殊,在其下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行样式渲染。并以此方式一直渲染下去,直到整个页面渲染完成。
当然这是一个推断的过程。
借助Google PageSpeed和Yahoo YSlow分析网页加载
通过这两个工具,测试网页加载过程,可以得到一些提高网页加载速度的建议。使用Google PageSpeed对Google首页进行分析,可以得到建议:
(1)压缩javascript和CSS;
(2)合并外部javascript和CSS;
(3)减少DNS寻址时间;这条与将图片分散到不同的域名存储这条折中处理;
(4)使用缓存;
(5)尽量避免CSS表达式;
(6)为图片增加宽度和高度属性;
(7)将css放在网页头部,合理放置js的位置。
同时,利用YSlow对google首页进行分析,我们也可以得到一些改进的建议。这些建议差不太多,就不在详细说明。
合理使用这两个工具,优化我们的网页,提高网页加载速度,增强用户体验。
---------------------------
我自己的误解
过去一直以为,一个容器如果没有读到自己的结束标签,那么这个容器就不会在浏览器中显示出来。今天测试了下,却发现浏览器在读到一个容器的开始标签的时候,就可以显示该容器了。关于浏览器如何一个一个的paint HTML中的元素,如果flow它们,这个过程还需要进一步了解。当然,也可以不管过程,只看加载的结果,通过pagespeed和Yslow来优化自己的网页。个人在做布局的时候,还是会秉承一条原则:尽量让一个父容器小一些!
参考文献
[1] 形象化的reflow. http://www.aoao.org.cn/blog/2008/05/reflow/ . 2009-7-20
[2] 各种浏览器的页面渲染引擎简介. http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php. 2009-7-20
[3] 浏览器加载和渲染原理分析. http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html. 2009-7-20
分享到:
相关推荐
浏览器加载、渲染和解析过程的黑箱分析,对于渲染,利用 Fiddler 将网速调慢,可以看到 css 下载后会马上渲染到页面,渲染和下载同步进行,需要的朋友可以参考下
各浏览器加载策略,ie6/7/8/9,firefox,chrom.同步模型,JS阻塞,JS执行策略 ,Inline Script,阻塞渲染,浏览器的优化
浏览器渲染页面的过程从耗时的角度,浏览器请求、加载、渲染一个页面,时间都花在以下五件事上:HTTP 请求及响应服务器响应客户端响应本文着重讨论第五部分,也就是浏
- 浏览器加载页面和渲染过程 - 性能优化 - Web 安全 本小节会从浏览器的加载过程开始讲解,然后介绍如何进行性能优化,最后介绍下 Web 开发中常见的安全问题和预防。 ----- ## 加载页面和渲染过程 可将加载过程...
用于切换CSS功能的devtools扩展,以后开发人员查看页面/应用在浏览器中的渲染方式
主要介绍了在浏览器加载CSS 时防止影响页面渲染的方法,其中以非阻塞CSS加载字体的技术为重点讲解,,需要的朋友可以参考下
这个示例代码中,我们使用Selenium库创建一个浏览器驱动,并使用驱动的get()方法加载目标网页的URL。 然后,我们使用time.sleep()方法等待页面加载完成,确保JavaScript渲染完成。 接下来,我们将渲染后的网页内容...
React框架拥有服务器渲染实现快速的页面加载和在浏览器中页面之间无缝转换
今天给大家分享一篇文章,关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。
加载指标:秒开率; 稳定性指标:资源错误,JS报错,Crash,内存堆栈,接口报错等; 操作体验指标:响应延迟,卡顿 ,滚动流畅性 ,TTI(可...加载链路的优化:从访问url到页面呈现,整个加载渲染链路可以做优化的思路。
该款维文浏览器具备传统浏览器的所有功能。... 在浏览维吾尔文网页时,浏览器渲染和加载网页速度快,可与使用市场主流浏览器打开普通网页的速度想媲美。更多的发现等待您的体验,欢迎您的热情评价。
一、闪游浏览器2.50更新历史 新增:全新默认皮肤 新增:换肤功能(右上角的衣服按钮) 新增:离线登录功能(不联网也可本地登录并访问账户下的收藏夹等数据) 新增:把网页添加到桌面快捷方式(标签上右键) 新增:...
(1)可以将网页渲染到UI上 (2)支持CSS、HTML和JavaScript (3)可以用来Unity和JavaScript的通信 (4)可以控制网页的前进、退后、重新加载、控制缩放大小等 (5)支持Video、支持SVG (6)自定义鼠标样式 (7)...
高速内核也迎来较大升级,高速内核性能进一步增强,渲染能力、网页标准兼容性都有了大幅提升。 2. 皮肤:浏览器默认皮肤全新改版,界面更清爽、更现代。 3. 安装界面:重新设计了安装程序,安装界面简约时尚,并可一...
浏览器打开网页的过程就是爬虫获取数据的过程,两者是一样一样的。浏览器渲染的网页是丰富多彩的数据集合,而爬虫得到的是网页的源代码htm有时候,我们不能在网页的html代码里面找到想要的数据,但是浏览器打开的...
爬网基于PlayWright实现对js渲染的动态网页进行抓取,包含网页源码,截图,网站入口,网页互动过程等,支持优先级任务调度。 crawloop目前支持一下特性原生浏览器环境,支持chrome,firefox,协程处理调度任务完整...
本人在公司做Vue项目的时候,一直苦于产品、客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的...
-优化浏览器启动过程 -现在可以手动删除地址栏下拉匹配网址 -链接上右键菜单增加使用猎豹下载 -修正分辨率过小时, 新标签页的搜索框会覆盖第一排网址, 导致其无法点击的问题;调整地址栏图标显示逻辑 -修正极速...