浏览器工作原理——网页背后的那些事儿

      提起浏览器工作原理，很对人可能会对之感到没必要去深究，但它是支撑起前端网页的骨架，作为前端开发人员，还是有必要大体上有个了解的。这两天大概的了解了一下这方面的知识，但是能网上搜索到的相关文章确实不多，看来看去主要就是一篇相对比较权威的文章：how does browser work ，大家可以网上搜一下，文章对浏览器的工作机制以及涉及到的相关解析器都做了很详细的分析，但鉴于概念多，读起来也比较生涩，为了能让读者取其精华，更简洁明了的去了解浏览器的工作原理，同时在这个基础上，总结一下如何对前端的CSS、JS文件进行优化。参考文章将附录在本文的最后。

     一、先来一览浏览器的主要构成：

      1、用户界面:电脑打开浏览器，浏览器给我们呈现出各种各样的网页，就好像是从一扇窗户望出去看到窗外的风景，这扇窗户就是浏览器的用户界面，风景就是页面；

　　2、浏览器引擎:用原话说就是“用来查询及操作渲染引擎的接口”；

　　※3、渲染引擎：用来展现上边提到的“风景”，也就是html、css；

　　4、网络：这些html、css哪里来的呢，通过网络http请求来的；

　　5、JS解释器：解释JS文件；

　　6、UI后端：绘制各种基本组件，比如地址栏、前进/后退按钮等；

　　7、数据存储：cookies等各种数据，以及H5 storage技术存储的数据。

     之所以把第三条标星，说明有文章可研究，渲染引擎，也就是浏览器内核，最终决定浏览器表现出来的页面效果，比如Google是WebKit内核，FireFox是Geoko内核，他们的渲染流程就有一些不同，但是主要流程基本相同。

　　二、下面来一张图看一下主要的渲染流程（本想自己绘制一张，但鉴于有张图已经绘制的很perfect，就直接拿来引用）：

　　 

　　大体流程无非就是四步：解析HTML以重建DOM树、构建渲染树、布局渲染树、绘制渲染树。

　　需要注意的是DOM Tree和Render Tree的不同：Render Tree是DOM Tree经由css润过色的，有些东西在DOM Tree里有，在Render Tree里极可能没有。

　　对于前端，重要的部分就来了，就是DOM树和CSS的解析、两者是如何匹配的以及js对两者的操作，我们经常提到的前端优化的部分就在这里，比如：

　　1、当css、js修改一些元素的颜色、字体的时候，性能会受到什么影响；

　　2、当css、js修改一些元素的位置、大小的时候，性能会受到什么影响、控制元素的display:none或者visibility:hidden的时候性能回受什么影响；

　　3、当js加载的方式不同，性能会受到什么影响；

　　三、最后总结一下一些性能优化的建议

　　对于DOM：

　　　　1、减少对DOM的操作(典型的就是不要把DOM节点的属性值放在一个循环里作为循环变量，这可能会造成对该节点的多次访问，造成内存损耗);

　　　　2、尽量不要使用table布局（貌似现在已经很少有人用了，不用的原因就是牵一发而动全身，可能一个很小的改动就引起整个布局的更新）；

　　对于CSS：

　　　　1、尽量不适用统配符(你很难想象为页面里的素有标签定义哪怕是一个属性是一个多么繁琐的事儿)；

　　　　2、尽可能少地对使用标签去选择元素（适当的发挥一下class和id的用武之地）；

　　　　3、尽量少的去使用后代选择器，降低选择器的权重值（后代选择器开销大，选择器的深度最好不要超过三层）；

　　　　4、不要去用标签限定ID或者类选择符（比如：div#nav）。

　　对于优化的建议前人的总结数不胜数，但真正的掌握还需在实际应用中去体会。每次看到一些比较不错的博客，就有些许感慨，网上总有一些那么好的资源，你看或者不看，它们就在那里，看了，我们就站在了巨人的肩膀上，就有了登高望远的机会。

　　附上一些资源链接：

　　　　http://kb.cnblogs.com/page/129756/

　　　　http://kb.cnblogs.com/page/178445/

　　　　http://www.smallni.com/css-performance-from-the-browsers-rendering/

　　

　　　　

 

　　

 

更多专业前端知识，请上 【猿2048】www.mk2048.com