最近在开发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。
关于页面性能优化这一块,理解还不是特别的多,后面的学习,再继续交流讨论吧。
参考: