admin管理员组文章数量:1531662
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://m.elefans.com/xitong/1712138324a345206.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论