当前位置:首页 > 科技 >

浏览器加载、解析、渲染的过程

发布时间:2017-09-11 12:02:29

浏览器加载、解析、渲染的过程

最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序。所以就花了时间去了解浏览器的工作,有一篇经典的文章《how browsers work》 ,讲的很详细,也有中文译本 。不过就是文章有点太长,也讲了一堆东西,还是自己总结一下。

为什么要了解浏览器加载、解析、渲染这个过程?

好,我们先说一下,为什么要了解这些呢?如果想写出一个最佳实践的页面,就要好好了解。

了解浏览器如何进行加载,可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以最快的速度将文件加载完毕。 了解浏览器如何进行解析,可以在构建DOM结构,组织css选择器时,选择最优的写法,提高浏览器的解析速率。 了解浏览器如何进行渲染,明白渲染的过程,在设置元素属性,编写js文件时,可以减少”reflow“”repaint“的消耗。

正文开始

一、浏览器的主要功能

  浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置,通过DNS查询,将网址转换为IP地址。整个浏览器工作的流程,之前博客中有论述:
  1、输入网址。
  2、浏览器查找域名的IP地址。
  3. 浏览器给web服务器发送一个HTTP请求
  4. 网站服务的永久重定向响应
  5. 浏览器跟踪重定向地址 现在,浏览器知道了要访问的正确地址,所以它会发送另一个获取请求。
  6. 服务器“处理”请求,服务器接收到获取请求,然后处理并返回一个响应。
  7. 服务器发回一个HTML响应
  8. 浏览器开始显示HTML
  9. 浏览器发送请求,以获取嵌入在HTML中的对象。在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源,这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名,发送请求,重定向等等…

那么,一个页面,究竟是如何从我们输入一个网址到最后完整的呈现在我们面前的呢?还需要了解一下浏览器是如何渲染的:

二、浏览器的渲染

下面是渲染引擎在取得内容之后的基本流程:

 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

先来看个图:

这里写图片描述

所以,浏览器会解析三个东西:
(1) HTML/SVG/XHTML,解析这三种文件会产生一个 DOM Tree。
(2) CSS,解析 CSS 会产生 CSS 规则树。
(3) Javascript脚本,主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.

我今天又纠结了一上午,到底是怎么解析怎么渲染的,我的疑问在于,浏览器到底是先解析生成了DOM树,然后再加载CSS JS文件进行渲染,还是在生成DOM的过程中,遇到了 link script 然后就加载CSS JS,边加载边渲染。我有这种疑问的原因在于,看网上的帖子,说的根本不一样好嘛! 比如这篇 我想说,这个写的让我直接懵逼,真的是直接懵逼啊,学习的过程中,总会遇到困难,但这次,让我真的好难啊。不过正因为不懂才继续查资料继续学习嘛 ==!我又查了一上午,自己测试测试测试,然后觉着,我好像是明白点了。真的推荐大家去认真看《how browsers work》这篇文章,学习不懂得知识的时候,还是要从比较权威的资料看起比较好,也不要像我今天这样,无头苍蝇乱查。

那么就来说一下图中的过程,我是按照自己的理解来说,如果有误,欢迎指正。

当浏览器获得一个html文件时,会“自上而下”加载,并在加载过程中进行解析渲染。
解析:
1. 浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 将CSS解析成 CSS Rule Tree 。
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意:Rendering Tree 渲染树并不等同于 DOM 树,因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

这里写图片描述

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:仙桃网站制作 http://xiantao.666rj.com