浏览器相关知识梳理

刚开始学习了node.js，和浏览器相关的知识有必要梳理一下：

1，浏览器的组成---包括五大部分：（1）用户界面（也即UI） ；（2）网络请求；（3）JS引擎（解析js) ；（4）渲染引擎（解析html, css ）；（5）数据存储( 比如cookie , sessionStorage, localStorage)

2,渲染引擎的工作原理：（1）解析html生成dom树； （2）解析css生成样式树（规则树）（3）合并dom树与样式树生成渲染树 【注意：渲染树是将dom树中一些设置了display:none的元素和html,meta等一些元素进行剔除】（4）对渲染树进行布局，比如位置，尺寸大小的确定 （5）绘制渲染树，调用操作系统底层的API进行绘制。

衍生题：如果要在一个页面中加入100个div，怎么做更加合理？

首先var frag = document.createDocumentFragment()，然后for循环，创建div，创建好之后将div放入到 frag 中，最后再将 frag 放入到body中，这样避免了页面多次重排和重绘；极大地提高了性能。而且frag元素并不会出现在body中。

3，浏览器发出请求后的全过程：

（1）当用户在地址栏输入网址之后，浏览器拿到地址栏的url，封装成一个请求报文；

（2）浏览器向域名解析器DNS发出域名解析请求；

（3）域名解析器将对应的IP地址返回给浏览器；

（4）浏览器拿到IP地址后，向服务器发出请求；

（5）服务器收到请求后进行解析；

（6）服务器将处理的结果封装成一个响应报文发送给浏览器；

（7）浏览器拿到响应报文之后开始解析；

（8）浏览器在解析过程中如果遇到新的资源再次发送请求；

（9）解析完成后显示页面