admin管理员组文章数量:1566223
2024年4月3日发(作者:)
浏览器加载和渲染网页的过程
2009-07-20 20:26
关于网页加载和渲染的过程,在网络上的讨论并不多。可能是因为这个过程
比较复杂,而且浏览器执行的速度太快,目前还没有发现什么比较好的工具可以
清楚的看到浏览器解析网页的每一个过程。通过firedug和httpWatch可以看到浏
览器的http请求,但是对于浏览器如何paint和flow处理html元素,我们仍然
是不得而知。“flow”这个词借鉴于reflow,表示浏览器第一次加载网页的过程。
在网络上搜索了一下,学习如下。
关于浏览器加载网页过程的有趣视频
可以参见:/blog/2008/05/reflow/ (形象化的reflow)。这
个视频展现了网页加载的过程,看着比较有趣。要是可以更加形象化,就更好了,
可以帮助我们书写更好的提高网页加载速度的代码。
浏览器内核
不同的浏览器内核,对于网页的解析过程肯定也不尽相同。
/post/ 一文对各种浏览
器的页面渲染引擎进行了简介。目前主要有基于
(1)Trident页面渲染引擎 –> IE系列浏览器;
(2)Gecko页面渲染引擎 –> Mozilla Firefox;
(3)KHTML页面渲染引擎或WebKit框架 –> Safafi和Google Chrome;
(4)Presto页面渲染引擎 –> Opera
详细的介绍可以参见原文。
浏览器解析网页的过程
/seosky/blog/item/ 浏览器加载
和渲染原理分析一文中通过一定的方法,推断了浏览器加载解析网页的顺序大致
如下:
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首页进行分析,我们也可以得到一些改进的建
议。这些建议差不太多,就不在详细说明。
合理使用这两个工具,优化我们的网页,提高网页加载速度,增强用户体验。
---------------------------
版权声明:本文标题:深入了解浏览器加载渲染及内核原理 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1712138324a345206.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论