web浏览器工作原理
2016-08-27 19:52
267 查看
HTML在浏览器里的渲染原理
我们打开的页面(Web页面)在各种不同的浏览器中运行,浏览器载入、渲染页面的速度直接影响着用户体验,简单地说下页面渲染,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。
这里大致了解一下浏览器都是怎么干活的,首先贴出一段示例代码:
我们现在要在浏览器中显示以上结构的HTML。
1.客户端浏览器开始从用户向服务器发出请求,服务器响应的将如上的HTML返回给请求的客户端浏览器中。
2.加载从<html>标签开始,并发现<head>标签内有个外部样式文件要加载
3.这时客户端浏览器又向服务器发出一个请求加载css.css文件,服务器响应。
4.此时客户端浏览器继续加载html文件里<body>里的标签,在css.css文件加载完后,同时开始渲染页面。
5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完,浏览器继续渲染还未完成的部分。
6.<img>标签里的图片加载完了,则要显示出来,同时图片会占有一定的面积,又会影响到后面的布局,浏览器不得不又回来重新渲染一次这部分。
7.总算把body里的标签加载及渲染完后,浏览器又发现了一段代码:
8.浏览器又立刻向服务器发出请求加载js.js文件,服务器响应。
9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码,此时浏览器又要重新去渲染被隐藏的<div>部分。
10.最后到浏览器发现了</html>为止。
从上述简单的说了下浏览器加载HTML页面原理后,会明白很多时候页面打开慢的原因。页面中向服务器请求的次数多会影响到打开速度,重新渲染局部的次数量也会影响到页面打开的速度,当然这只是有时候页面打开速度慢一部分原因。
对于这种来回渲染,内行叫为reflow,reflow几乎是无法避免的,我们不能因为怕会重新渲染而去丢掉一些页面效果。但是reflow是可以优化的,比如图片在css.css样式文件中就定义好图片的高度,这要会减少重新渲染的次数。另外还有一次词叫repaint,叫重绘,repaint如果只是改变如背景颜色或者文字的颜色,repaint的速度要比reflow的速度明显快的多。
我们打开的页面(Web页面)在各种不同的浏览器中运行,浏览器载入、渲染页面的速度直接影响着用户体验,简单地说下页面渲染,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。
这里大致了解一下浏览器都是怎么干活的,首先贴出一段示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>标题</title> <link href="../css/css.css" rel="Stylesheet" type="text/css" /> </head> <body> <div> </div> <img src="images/test.jpg" alt="示例图片" /> <br /> <p> </p> </body> <script type="text/javascript" src="js/js.js"></script> </html>
我们现在要在浏览器中显示以上结构的HTML。
1.客户端浏览器开始从用户向服务器发出请求,服务器响应的将如上的HTML返回给请求的客户端浏览器中。
2.加载从<html>标签开始,并发现<head>标签内有个外部样式文件要加载
<link href="../css/css.css" rel="Stylesheet" type="text/css" />
3.这时客户端浏览器又向服务器发出一个请求加载css.css文件,服务器响应。
4.此时客户端浏览器继续加载html文件里<body>里的标签,在css.css文件加载完后,同时开始渲染页面。
5.客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为test.jpg的图片.客户端浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完,浏览器继续渲染还未完成的部分。
6.<img>标签里的图片加载完了,则要显示出来,同时图片会占有一定的面积,又会影响到后面的布局,浏览器不得不又回来重新渲染一次这部分。
7.总算把body里的标签加载及渲染完后,浏览器又发现了一段代码:
<script type="text/javascript" src="js/js.js"></script>
8.浏览器又立刻向服务器发出请求加载js.js文件,服务器响应。
9.浏览器又在js.js文件中发现了一段代码是让<div>标签隐藏的代码,此时浏览器又要重新去渲染被隐藏的<div>部分。
10.最后到浏览器发现了</html>为止。
从上述简单的说了下浏览器加载HTML页面原理后,会明白很多时候页面打开慢的原因。页面中向服务器请求的次数多会影响到打开速度,重新渲染局部的次数量也会影响到页面打开的速度,当然这只是有时候页面打开速度慢一部分原因。
对于这种来回渲染,内行叫为reflow,reflow几乎是无法避免的,我们不能因为怕会重新渲染而去丢掉一些页面效果。但是reflow是可以优化的,比如图片在css.css样式文件中就定义好图片的高度,这要会减少重新渲染的次数。另外还有一次词叫repaint,叫重绘,repaint如果只是改变如背景颜色或者文字的颜色,repaint的速度要比reflow的速度明显快的多。
相关文章推荐
- Material风格的确认框
- android开发/设计原则总结
- 粒子群算法的几个适应度评价函数
- opencv学习笔记---1
- java多线程相关内容
- 曾经做过的c练习(1-5)
- 装逼神器shellinabox基于WEB远程终端模拟器
- (四十五)、HTML and Servlet
- bzoj1419(期望与DP)
- ACM学习历程19——queue队列容器与priority_queue优先队列容器
- XSLT2.0 从外部读取信息并分析生成对应文件.采用xsl:for-each-group进行排序输出
- LUA单继承与多继承实验
- Android开发,Fragment问题:binary xml file line #5: error inflating class fragment
- BZOJ4690: Never Wait for Weights
- 引用”与指针的区别
- Erlang网络编程中的一个特别的函数prim_inet:async_accept/2
- POJ 3149 Billing Tables
- MyBatis 配置控制台上显示sql语句(log4j.properties 之三)
- AOP( aspect-oriented programming)面向切面编程
- React Native 触摸事件处理详解