浏览器相关知识梳理

刚开始学习了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)解析完成后显示页面

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容