浏览器渲染原理

来源：互联网发布：365抽奖软件破解版编辑：程序博客网时间：2024/04/30 05:56

最近在开发B/S 框架的项目。开发都是web页面，也就是运行在浏览器上的用户操作页面。浏览器是用户得到服务最直接的地方，后台做的好，前台也要让用户用着方便。这里就研究一下浏览器的一些原理是如何提高用户体验的。

一、页面渲染

首先，这里有一个新词，渲染。什么是网页渲染呢？网页渲染就是html代码根据css定义的规则，显示在浏览器页面上的而过程。

来看看浏览器是怎么干活的：

1）用户第一次登陆某html的web页面。浏览器向服务器发送访问请求

2）服务器响应用户，返回html文件

3）浏览器在读取html文件的时候发现了一个<link>引用了外部css文件

4）浏览器继续向服务器发送访问css文件的请求

5）服务器返回css文件

6）浏览器拿到了css文件，就可以渲染页面，期间可能会有读到其他外部文件，同样向服务器发送请求

7）拿到所有文件后，浏览器渲染页面完毕。

以上过程是用户第一次登陆的时候，会多次向服务器发送请求。当登陆过一次之后，后面就可以使用缓存中的文件进行访问。如果有新的请求才会再次访问服务区。

浏览器拿到一段代码，会先将代码进行分解解析为html、CSS、js脚本，如果是html进行会DOM解析，会解析成一个DOM Tree 。css会被解析为CSS Rule Tree。

拿html为例：

<html><head>　　<title>Html解析DOM Tree</title></head><body>　　<div>　　<h1>DOM解析</h1>　　<p>This is an example DOM.</p>　　</div></body></html>

下面就是一个DOM Tree

如果看这个页面的布局的话，我们抽象一些就可以看成下面这样

蓝色部分是html的dom tree，橘色部分是css的规则树。

补充：在设计程序的时候，任何一步操作都是需要cpu进行把控，这样的意思就是运行什么都是需要时间的。只不过随着硬件设备的升级，速度越来越快了，但是作为程序开发人员或者设计人员，要想开发出优秀的代码，就要经常考虑如何为程序运行节省时间。我们经常说的性能优化，也是包括这一点的。

例如上面的DOM Tree。如果你修改了最上层的DOM，那么下层也会跟着发生改变。这样运行的时间就会长，所以尽可能只修改层级低的DOM。

关于页面性能优化这一块，理解还不是特别的多，后面的学习，再继续交流讨论吧。

参考：

https://developer.yahoo.com/performance/rules.html

http://stevesouders.com/hpws/rules.php

2 0